ฉันออกแบบเว็บแบนเนอร์มานานกว่าหนึ่งปี แต่ไม่เคยคิดเลยว่า DPI
ฉันใช้ 72DPI ที่เป็นค่าเริ่มต้น แต่ตอนนี้ฉันต้องการทราบว่าจำเป็นต้องสร้างการออกแบบเว็บใน 72DPI หรือไม่ ถ้าเราใช้มากกว่านั้นเช่น 200DPI
ฉันรู้ว่า DPI มากขึ้นหมายถึงภาพที่มีคุณภาพมากขึ้นและนั่นเป็นเหตุผลว่าทำไมฉันถึงต้องการใช้ DPI สูง แต่เมื่อเร็ว ๆ นี้ฉันอ่านที่ไหนสักแห่งสำหรับเว็บแบนเนอร์เราควรใช้ 72DPI ฉันแค่อยากรู้ว่ามันเป็นข้อบังคับหรือไม่และมีผลกระทบในด้านลบหรือไม่?
คำตอบ:
ไม่ได้ใช้การตั้งค่า PPI (พิกเซลต่อนิ้ว) ในภาพบนเว็บ รูปภาพบนเว็บแสดงเรตินาหรืออื่น ๆ แสดงด้วยขนาดพิกเซล (ความกว้างและความสูง) ไม่ใช่การตั้งค่า PPI / DPI ใด ๆ ในความเป็นจริงรูปภาพบนเว็บจำนวนมากเช่น png, gif, jpg อาจไม่ได้เก็บการตั้งค่า ppi ไว้ในข้อมูลภายในของพวกเขาและพึ่งพาการตั้งค่าความกว้างและความสูง
รูปภาพขนาด 100 พิกเซล x 100 พิกเซลจะปรากฏเป็นบนเว็บโดยไม่คำนึงถึงการตั้งค่า PPI / DPI ใด ๆ
นี่คือเหตุผลที่รูปภาพสำหรับจอแสดงผลเรตินาถูกบันทึกที่ขนาด 2x แทนที่จะเป็นการตั้งค่า ppi ที่เพิ่มขึ้น ความหนาแน่นของพิกเซลจอแสดงผลจอประสาทตาจะสูงกว่า แต่พวกเขายังคงแสดงภาพที่ใดรัฐหน้าจอจะกว้างและความสูงของภาพไม่ได้ขึ้นอยู่กับการตั้งค่า PPI ใด ๆ
ในความเป็นจริงจอภาพที่ใช้ความหนาแน่นของพิกเซลที่ 72ppi ไม่เคยเห็นมาตั้งแต่ต้นถึงกลางปี 1980 72ppi นั้นไม่ถูกต้องมาเกือบ 30 ปีแล้ว ในความเป็นจริงมันไม่ถูกต้องสำหรับระบบ Windows เนื่องจาก Windows ใช้ค่าเริ่มต้น 96ppi สำหรับความหนาแน่นของพิกเซล
ไม่เชื่อฉัน ลองด้วยตัวคุณเอง สร้างภาพสองภาพใน Photoshop ทั้ง 100 พิกเซลคูณ 100 พิกเซล ทำหนึ่งภาพ 72ppi และอีก 300ppi บันทึกทั้งสองไว้สำหรับเว็บ .. แตกต่างจากในเว็บเบราว์เซอร์หรือไม่ Nope พวกเขาทั้งภาพนิ่ง 100px โดย 100px
การตั้งค่า DPI (จุดต่อนิ้ว) ใช้ได้เฉพาะเมื่อพิมพ์ภาพ DPI ไม่มีผลต่อภาพที่กำหนดไว้สำหรับหน้าจอ DPI หมายถึงปริมาณของจุดหมึก / จุดที่กดจะอยู่ภายในหนึ่งนิ้ว เนื่องจากไม่มีการแสดงผลบน Earth ที่ใช้หมึก DPI จึงเป็นคำที่ไม่ถูกต้องสำหรับทุกสิ่งที่เกี่ยวข้องกับหน้าจอแสดงผล
ระวังผู้ผลิตโทรศัพท์มือถือบางรายเลือกที่จะใช้คำว่า DPIx หรือ xDPI ซึ่งบางครั้งย่อให้ DPI ง่าย นี่ไม่ใช่รูปแบบดั้งเดิมของตัวย่อและผู้ผลิตก็สับสนกับน้ำเป็นอย่างมาก ถ้าคุณเห็น DPI ในความสัมพันธ์กับความละเอียดหน้าจอมือถือของพวกเขาจะพูดเกี่ยวกับPPI ที่มีประสิทธิภาพและไม่ได้จริงๆอ้างอิงจุดต่อนิ้ว ตัวย่อที่เหมาะสมมากขึ้นน่าจะเป็น xPPI หรือ PPIx เพราะหน้าจอมือถือเช่นจอแสดงผลทั้งหมดใช้พิกเซลและไม่ใช่หมึก
ไม่ทำให้การตั้งค่า ppi ที่คุณใช้กับรูปภาพบนเว็บแตกต่างกัน มันคือความกว้าง (พิกเซล) และความสูง (พิกเซล) ของรูปภาพที่มีความสำคัญ
เมื่อทำงานกับภาพหลายภาพสิ่งสำคัญคือต้องคงความสม่ำเสมอ คุณจะต้องตั้งค่ารูปภาพทั้งหมดของคุณที่ ppi เดียวกันเพื่อหลีกเลี่ยงการปรับขนาดและปรับขนาดของภาพหากคุณย้ายส่วนต่าง ๆ ระหว่างภาพ ไม่ว่าคุณจะเลือกใช้ 72, 96, 200 หรือ 145.8 ppi ไม่สำคัญ แต่ภาพทั้งหมดควรถูกตั้งค่าเหมือนกัน
ฉันจะเข้าไปดูรายละเอียดความหมายของ "dpi" ตามความเป็นจริง คุณอาจเห็นคำตอบด้วยตัวเอง :
กล่าวโดยย่อรูปภาพของคุณประกอบด้วยจุดสีซึ่งอยู่ติดกัน แต่ขนาดไม่ได้อยู่ในความรู้สึกทางกายภาพใด ๆ
ตอนนี้เมื่อคุณแสดงภาพบนหน้าจอโดยปกติคุณเพียงแค่ใส่สีจุดของภาพลงในแรสเตอร์ของรูปสี่เหลี่ยมสีที่หน้าจอของคุณสามารถแสดง โปรดทราบว่าทั้งคู่สิ่งที่ฉันเรียกว่า "จุด" และรูปสี่เหลี่ยมผืนผ้าที่นี่เรียกว่า "พิกเซล" - แต่เมื่อมองอย่างใกล้ชิดพวกมันต่างกัน
หากเราแสดงภาพในลักษณะที่เป็นธรรมชาติบนหน้าจอเราสามารถวัดขนาดของภาพได้
ตัวอย่างเช่นภาพของเรามีความกว้าง 500 จุดเราใส่สิ่งเหล่านี้ลงในรูปสี่เหลี่ยมผืนผ้าสีบนหน้าจอและดูว่ามีความกว้าง 5 นิ้ว จากนั้นเรามี 100 สี่เหลี่ยมต่อนิ้วโดยแสดง 100 จุดต่อนิ้ว
นั่นคือภาพของเรามี 100dpi บนหน้าจอ
แต่เราไม่ได้ดูค่า dpi ในไฟล์รูปภาพของเรา!
ทีนี้ถ้าเราดูไฟล์ของเรามันอาจจะบอกว่าภาพเป็น 200dpi! ค่า dpi นั้นเกี่ยวกับจำนวนจุดสีที่มองเห็นได้ต่อนิ้วของความกว้างหรือความสูงของหน้าจอ ดังนั้นค่า dpi ในภาพจะบอกเราว่าภาพของเราจะเป็น 2.5 นิ้วกว้างเมื่อแสดง - เป็นสัญญาที่ไม่เป็นความจริง
เมื่อเรากำหนดจุดภาพไปที่หน้าจอเราไม่สนใจแม้แต่น้อยเพราะเราเพิ่งแสดงและวัดค่าจริง dpi ทางกายภาพของการแสดงหน้าจอของภาพ
ดังนั้นตามที่คุณเห็นสัญญาเป็นเพียงผิดธรรมดา และไม่มีใครใส่ใจ! เพราะมันไม่เกี่ยวข้อง
ไฟล์ดังกล่าวมีแนวโน้ม - โดยบอกว่า 200dpi - มันจะ "กว้าง 2.5 นิ้วเมื่อแสดง" จากนั้นเราใช้หน้าจอที่แสดงว่ากว้าง 5 นิ้ว - เรารู้ได้เพราะเรารู้ว่าหน้าจอจริงคืออะไร
โดยปกติเราไม่รู้ด้วยซ้ำว่าผู้ใช้จะใช้หน้าจอเป็นอย่างไรเพื่อให้เราสามารถคาดเดาได้เท่านั้น
ดังนั้นตอนนี้มันสมเหตุสมผล:
และมีไม่เพียงหน้าจอเดียวที่สามารถแสดงภาพได้ - อาจมีขนาดแตกต่างกันดังนั้นจึงไม่สามารถรู้ค่า dpi ที่แท้จริงเมื่อสร้างไฟล์รูปภาพ
ดูคำตอบของฉันเกี่ยวกับ "Pixel" คืออะไร? .
โดยตรงกับคำถามตามข้างต้น:
เมื่อคุณระบุ dpi ในไฟล์รูปภาพนั่นจะไม่ได้รับการจัดสัดส่วนใหม่โดยตรงกับคุณภาพของภาพที่แสดงในตอนท้าย
แต่อาจใช้เพื่อสื่อสารเกี่ยวกับคุณภาพของภาพ - ในแง่ของความตั้งใจ: คุณสามารถพูดว่า "ฉันต้องการให้ภาพนี้แสดงบนหน้าจอ 200dpi"
หากฉันต้องการแสดงภาพนี้ฉันอาจดูแลและค้นหาหน้าจอ 200dpi; หรือบางทีฉันแค่ใช้หน้าจอ 75dpi เก่าที่อาจอยู่บนโต๊ะทำงานของฉัน ภาพจะมีขนาดใหญ่มากฉันต้องเลื่อน - แต่นั่นเป็นปัญหาของฉันและ: คุณจะไม่แม้แต่จะค้นหาสิ่งที่ใช้จริง - ค่า 200dpi ไม่ได้ควบคุมคุณภาพของภาพ - มันแค่สื่อสารวิธีการแสดง "ถูกต้อง ทาง "ถ้าฉันแคร์
ในขณะที่ PPI ไม่สำคัญ - เป็นขนาดพิกเซลที่สำคัญสำหรับการออกแบบเว็บและแอพคุณควรระมัดระวังเกี่ยวกับการใช้แอพพลิเคชั่นการออกแบบและการผสมการตั้งค่า PPI นี่คือเหตุผล:
อย่างไรก็ตามหากคุณวางแผนที่จะใช้ Photoshop และความหนาแน่นของพิกเซลที่แตกต่างกันสำหรับแต่ละเอกสารให้ลากเลเยอร์และคัดลอกสไตล์เลเยอร์ระหว่างเอกสารปรับขนาดเลเยอร์สไตล์ - การลากเลเยอร์จากเอกสาร Retina iPhone 326PPI ไปยังเอกสาร iPad Retina 264PPI 20% (จากนั้นปัดเศษเป็นจำนวนเต็มที่ใกล้เคียงที่สุด) และนั่นอาจไม่ใช่สิ่งที่คุณต้องการ ดูตัวอย่างของ OS X จะแสดงภาพ 72PPI ในขนาดที่แน่นอนไม่ว่าคุณจะตั้งค่าอย่างไร
ด้วยเหตุผลเหล่านี้ฉันจึงกำหนด 72PPI ให้กับเอกสารการออกแบบทั้งหมดของฉันและฉันขอแนะนำให้คุณทำเช่นเดียวกัน หากต้องการเปลี่ยนความหนาแน่นของพิกเซลของเอกสาร Photoshop ของคุณโดยไม่ต้องปรับขนาดข้อมูลภาพให้เปิดกล่องโต้ตอบขนาดภาพยกเลิกการเลือกปรับขนาดภาพและพิมพ์ความหนาแน่นของพิกเซลที่ต้องการ
ฉันเพิ่งทดสอบภาพสองชุดที่ฉันทำด้วย Photoshop อย่างไรก็ตามฉันตั้งค่าหนึ่งที่ 72 dpi และอื่น ๆ ที่ 720 dpi เพื่อดูว่าเบราว์เซอร์ใด ๆ ที่ฉันใช้จะแสดงผลขนาดต่าง ๆ บนหน้าจอหรือไม่
ในเบราว์เซอร์ทั้งหมดยกเว้นหนึ่งเบราว์เซอร์มีขนาดเท่ากันและมีคุณภาพ อย่างไรก็ตามด้วยการใช้ Google Chrome ทำให้ที่ 72 ดูดี แต่คนที่ทำที่ 720 มีขนาดเล็กมาก - เช่นเดียวกับขนาด 1/10
ความเศร้าโศกที่ดี ดูเหมือนจะเป็นข้อโต้แย้งในการวางภาพที่ยืนฟรี (ไม่ จำกัด ภายในหน้าเว็บ) ที่ 72 ความจริงทั้งหมดของฉัน (ซึ่งมีจำนวนหลายร้อย) อยู่ที่ 120 dpi แม้ว่าพวกเขาจะยังคงดูมีขนาดใหญ่พอสำหรับ Chrome แต่บางทีด้วยเบราว์เซอร์นั้นฉันก็ควรจะวางมันไว้ที่ 72 บางทีอาจจะมีที่ไหนสักแห่งในการพิมพ์ที่ดีในการตั้งค่าของ Chrome ที่มีวิธีการรักษา