จอแสดงผลที่มีความหนาแน่นของพิกเซลสูงกลายเป็นรูปแบบปกติอย่างรวดเร็ว ครีเอเตอร์เนื้อหาจึงต้องปรับตัวให้เข้ากับข้อเท็จจริงนี้ คู่มือสั้นๆ นี้อธิบายวิธีแสดงรูปภาพคุณภาพสูงบนเว็บในปัจจุบันโดยไม่ต้องใช้ polyfill, JavaScript, แฮ็ก CSS และฟีเจอร์เบราว์เซอร์ที่ยังไม่ได้ติดตั้งใช้งาน บอกตรงๆ ก็คือ ไม่มีการเปลี่ยนแปลงเวิร์กโฟลว์ไปมากนัก
ปัจจุบันมีข้อเสนอรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์หลายรายการ ซึ่งส่วนใหญ่แล้วเกี่ยวข้องกับการเปลี่ยนแปลงที่สําคัญสำหรับนักพัฒนาเว็บ แอตทริบิวต์การติดตามมาตรฐาน srcset
<img> ใช้งานยาก โดยเฉพาะอย่างยิ่งเนื่องด้วยความซับซ้อนของการเลือกตามวิวพอร์ตเพิ่มเติมของ srcset
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
แม้ว่าพร็อพเพอร์ตี้ CSS ของ image-set จะใช้เพียง devicePixelRatio เพื่อตัดสินใจว่าจะโหลดรูปภาพใด แต่ก็บังคับให้นักพัฒนาซอฟต์แวร์ต้องเขียนมาร์กอัปเพิ่มเติมจำนวนมากสำหรับทุกรูปภาพ
ข้อเสนออื่นๆ เช่น องค์ประกอบ <picture> มีรายละเอียดมากกว่า
นอกจากนี้ แอตทริบิวต์เหล่านี้ไม่ได้เป็นไปตามมาตรฐาน จึงมีการใช้งานที่แพร่หลายน้อยกว่าแอตทริบิวต์ srcset JavaScript และโซลูชันฝั่งเซิร์ฟเวอร์เป็นทางเลือกเดียวที่เหลือ แต่แนวทางเหล่านี้มีข้อเสียของตัวเองตามที่อธิบายไว้ในบทความอื่นๆ
บทความนี้จะอธิบายถึงการใช้รูปภาพในลักษณะต่างๆ ที่มักพบในเว็บและเสนอวิธีแก้ไขง่ายๆ ที่ใช้ได้กับหน้าจอที่มีความหนาแน่นของพิกเซลสูงและความละเอียดปกติ สำหรับจุดประสงค์ของการพูดคุยนี้ อุปกรณ์ที่รายงานว่า window.devicePixelRatio สูงกว่า 1 จะถือว่ามี DPI สูง เพราะหมายความว่าพิกเซล CSS ไม่เหมือนกับพิกเซลของอุปกรณ์ และรูปภาพจะได้รับการปรับขนาด
ข้อสรุปมีดังนี้
- หากเป็นไปได้ ให้ใช้ CSS/SVG แทนภาพแรสเตอร์
- โดยค่าเริ่มต้น จะใช้รูปภาพที่ปรับให้เหมาะกับจอแสดงผลความหนาแน่นสูง
- ใช้ไฟล์ PNG สำหรับภาพวาดง่ายๆ และพิกเซลอาร์ต (เช่น โลโก้)
- ใช้ JPEG ที่บีบอัดสำหรับรูปภาพที่มีสีสันหลากหลาย (เช่น รูปภาพ)
- กำหนดขนาดที่ชัดเจน (โดยใช้ CSS หรือ HTML) กับองค์ประกอบรูปภาพทั้งหมดเสมอ
ภาพวาดง่ายๆ และพิกเซลอาร์ต
คุณหลีกเลี่ยงรูปภาพขนาดเล็กทั้งหมดได้โดยใช้ฟีเจอร์ CSS หรือ SVG
คุณไม่จำเป็นต้องใช้รูปภาพสำหรับมุมมน เช่น เนื่องจากระบบรองรับพร็อพเพอร์ตี้ CSS border-radius กันอย่างแพร่หลาย ในทำนองเดียวกัน แบบอักษรที่กำหนดเองได้รับการรองรับอย่างกว้างขวาง จึงไม่แนะนำให้ใช้ข้อความ "แบบรูปภาพ"
อย่างไรก็ตาม ในบางกรณี เช่น โลโก้ รูปภาพอาจเป็นวิธีเดียวที่จะดำเนินการต่อได้ ตัวอย่างเช่น โลโก้ Chrome นี้มีขนาดตามปกติ 256x256 ในจอแสดงผล Retina คุณจะเห็นการลบรอยหยักของเส้นในแนวทแยงและโค้ง ซึ่งดูไม่เรียบร้อยและไม่ดี โดยเฉพาะเมื่อเทียบกับข้อความที่แสดงผลอย่างคมชัด
มิติข้อมูลธรรมชาติ: 256x256px, ขนาดเนื้อหา: 31 kB, รูปแบบ: PNG
เชื่อไหม ดีจัง ตอนนี้เราจะใช้รูปภาพความหนาแน่นสูง คุณอาจจะอยากประหยัดพื้นที่ด้วยการจัดเก็บโลโก้เป็นไฟล์ JPEG แต่นี่อาจไม่ใช่แนวคิดที่ดีนัก เนื่องจากการบันทึกโลโก้และกราฟิกอื่นๆ ในรูปแบบที่สูญเสียข้อมูลอาจส่งผลให้เกิดอาร์ติแฟกต์ได้ ในกรณีนี้ เราจงใจทำให้ปัญหารุนแรงขึ้นโดยใช้การบีบอัดที่สูงมาก แต่สังเกตเห็นการแบ่งช่องของสีไล่ระดับ จุดเล็กๆ บนพื้นหลังสีขาว และเส้นที่ไม่เป็นระเบียบ
มิติข้อมูลธรรมชาติ: 512x512px, ขนาดเนื้อหา: 13 kB, รูปแบบ: JPEG
สิ่งที่ต้องทําสำหรับรูปภาพที่มีขนาดค่อนข้างเล็กคือใช้ PNG 2 เท่า โปรดทราบว่าขนาดความแตกต่างระหว่าง PNG 1x และ 2x มักจะค่อนข้างสูง (ในกรณีนี้คือ 52 kB) แต่ในกรณีของโลโก้ โลโก้คือหน้าเว็บไซต์และเป็นสิ่งแรกที่ผู้เข้าชมจะเห็น การยัดเยียดลักษณะ คุณภาพมากเกินไปเพื่อแลกกับขนาด นี่จะเป็นสิ่งสุดท้ายที่ผู้เข้าชมจะได้เห็น!
ต่อไปนี้คือโลโก้ Chrome เวอร์ชันเต็มที่มีการปรับขนาดให้เล็กลงครึ่งหนึ่งของขนาดปกติสำหรับจอแสดงผล 2 เท่า
ขนาดตามธรรมชาติ: 512x512px, ขนาดชิ้นงาน: 83 kB, รูปแบบ: PNG
มาร์กอัปที่จะทำให้การแสดงผลด้านบนคือ
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
โปรดทราบว่าฉันได้ระบุความกว้างและความสูงไว้ในรูปภาพแล้ว ซึ่งเป็นสิ่งจำเป็นเนื่องจากขนาดโดยทั่วไปของรูปภาพคือ 512 พิกเซล และยังให้ประสิทธิภาพที่ดีด้วย เนื่องจากเครื่องมือแสดงผลจะเข้าใจถึงขนาดขององค์ประกอบได้ดี และไม่จำเป็นต้องทำงานหนักเกินไปในการคำนวณ
การเพิ่มประสิทธิภาพอย่างหนึ่งที่อาจทำได้คือการลด PNG 24 บิตให้เหลือเป็น 8 บิตที่มีจานสี วิธีการนี้ใช้ได้กับรูปภาพที่มีสีไม่มากนัก ซึ่งรวมถึงโลโก้ Chrome ด้วย ในการเพิ่มประสิทธิภาพนี้ คุณสามารถใช้เครื่องมือ เช่น http://pngquant.org/ คุณจะเห็นแถบสีได้เล็กน้อยที่นี่ แต่ไฟล์นี้มีขนาดเพียง 13 kB ซึ่งประหยัดได้อย่างมหาศาลถึง 6 เท่า เมื่อเทียบกับ PNG ต้นฉบับขนาด 512x512
มิติข้อมูลธรรมชาติ: 512x512px, ขนาดเนื้อหา: 13 kB, รูปแบบ: PNG,
8-bit palette
รูปภาพที่มีสีสันหลากหลาย
ผมได้เขียนบทความ HTML5Rocks เพื่อสำรวจเทคนิครูปภาพที่ตอบสนองตามอุปกรณ์ต่างๆ และค้นคว้าข้อมูลเกี่ยวกับการบีบอัด JPEG 1x และ 2x และเปรียบเทียบขนาดที่ได้กับคุณภาพของภาพ ตัวอย่างการ์ดจากบทความข้างต้นมีดังนี้
ฉันติดป้ายกำกับรูปภาพตามระดับการบีบอัด (ระบุด้วยคุณภาพ JPEG) ขนาด (เป็นไบต์) และความคิดเห็นส่วนตัวของฉันเกี่ยวกับความสอดคล้องของภาพ (จัดอันดับตามตัวเลข) สิ่งที่น่าสนใจคือรูปภาพขนาด 2x ที่มีการบีบอัดสูง (ติดป้ายกำกับ 3) มีขนาดเล็กกว่าและดูดีกว่ารูปภาพ 1x ที่ไม่มีการบีบอัด (ติดป้ายกำกับ 4) กล่าวคือ ระหว่างรูปภาพ 4 ถึง 3 เราได้ปรับปรุงคุณภาพของรูปภาพโดยการเพิ่มขนาดเป็น 2 เท่า และเพิ่มการบีบอัดได้อย่างมาก ในขณะเดียวกันก็ลดขนาดลง 2 kB
การบีบอัด ขนาด และคุณภาพของภาพ
ผมอยากได้ข้อมูลเชิงลึกสักเล็กน้อยเกี่ยวกับข้อดีข้อเสียระหว่างระดับการบีบอัด ขนาดรูปภาพ คุณภาพของภาพ และขนาดภาพ เราทําการศึกษาโดยตั้งสมมติฐานต่อไปนี้ตามการศึกษาข้างต้น
สมมติฐาน
หากมีการบีบอัดที่เพียงพอ รูปภาพขนาด 2 เท่าจะเทียบเท่ากับรูปภาพเดียวกันในขนาด 1 เท่า เมื่อบีบอัดแบบอื่น (ต่ำกว่า) อย่างไรก็ตาม ในกรณีนี้ รูปภาพขนาด 2x ที่มีการบีบอัดสูงจะมีขนาดเล็กกว่ารูปภาพ 1 เท่า
กระบวนการ
- สร้างรูปภาพขนาด 1x จากรูปภาพขนาด 2x
- บีบอัดรูปภาพทั้ง 2 รูปในระดับต่างๆ
- สร้างหน้าทดสอบที่แสดงชุดรูปภาพทั้งสองชุดคู่กัน
- ค้นหาตําแหน่งในชุด 2 ชุดที่รูปภาพเท่ากัน
- โปรดสังเกตขนาดรูปภาพและระดับการบีบอัดที่เทียบเท่า
- ลองใช้ทั้งกับจอแสดงผล 1 และ 2 เท่า
ฉันสร้างแอปการเปรียบเทียบรูปภาพแบบแสดงคู่กันซึ่งคล้ายกับมุมมองเปรียบเทียบของ Lightroom วัตถุประสงค์คือแสดงภาพขนาด 1 เท่าและ 2 เท่าควบคู่กัน แต่ยังให้คุณซูมเข้าส่วนใดก็ได้ของภาพเพื่อดูรายละเอียดเพิ่มเติม นอกจากนี้ คุณยังเลือกระหว่างรูปแบบ JPEG กับ WebP และเปลี่ยนคุณภาพการบีบอัดเพื่อดูการเปรียบเทียบขนาดไฟล์และคุณภาพรูปภาพได้ด้วย แนวคิดคือปรับการตั้งค่ากับรูปภาพหลายรูปเพื่อหาค่าสมดุลระหว่างคุณภาพการบีบอัด การปรับขนาด และรูปแบบกับคุณภาพของรูปภาพที่คุณพอใจ แล้วใช้การตั้งค่านั้นกับรูปภาพทั้งหมด
ตัวเครื่องมือเองก็พร้อมให้คุณใช้งาน คุณสามารถซูมเข้ารูปภาพโดยเลือกพื้นที่ย่อยที่จะซูมเข้า
การวิเคราะห์
ก่อนอื่นต้องบอกว่าคุณภาพของรูปเป็นเรื่องที่ขึ้นอยู่กับแต่ละบุคคล นอกจากนี้ กรณีการใช้งานเฉพาะของคุณมีแนวโน้มที่จะเป็นตัวกำหนดว่าคุณควรให้ความสำคัญกับส่วนใดของความสอดคล้องด้านภาพกับสเปกตรัมของขนาดไฟล์ นอกจากนี้ ฟีเจอร์รูปภาพประเภทต่างๆ จะตอบสนองต่อการปรับขนาดและคุณภาพการบีบอัดแตกต่างกัน ดังนั้นโซลูชันหนึ่งเดียวที่เข้ากับทุกระบบอาจไม่จำเป็นต้องทำงานที่นี่ จุดประสงค์ของเครื่องมือนี้คือการช่วยคุณสร้างความเข้าใจเกี่ยวกับคุณภาพรูปภาพ การบีบอัด ขนาด และรูปแบบ
หลังจากลองใช้โปรแกรมซูมรูปภาพแล้ว ผมก็เห็นอะไรหลายๆ อย่าง
ชัดเจนขึ้น ประการแรก เราชอบรูปภาพ quality=30 dpr=2x มากกว่ารูปภาพ quality=90
dpr=1x เนื่องจากมีรายละเอียดมากกว่า รูปภาพเหล่านี้มีขนาดพอๆ กัน (ในกรณีระนาบ รูปภาพขนาด 2x ที่บีบอัดคือ 76 kB ขณะที่ 1x แบบไม่บีบอัดคือ 80 kB)
ข้อยกเว้นสำหรับกฎนี้คือรูปภาพที่มีการบีบอัดสูง (quality<30) ที่มีการไล่ระดับสี รูปภาพเหล่านี้มักจะมีปัญหาเรื่องแถบสี ซึ่งส่งผลเสียไม่แพ้กันไม่ว่าจะปรับขนาดรูปภาพอย่างไร ตัวอย่างนี้คือรูปนกและรถที่พบในเครื่องมือ
รูปภาพ WebP ดูสะอาดตากว่า JPEG โดยเฉพาะที่ระดับการบีบอัดต่ำ ดูเหมือนว่าแถบสีนี้จะเป็นปัญหาน้อยลงมาก สุดท้าย รูปภาพ WebP มีขนาดกะทัดรัดกว่ามาก
ข้อควรระวังและส่วนท้าย
การทำให้รูปภาพดูดีบนหน้าจอที่มีความหนาแน่นสูงเป็นเพียงครึ่งหนึ่งของปัญหาเกี่ยวกับรูปภาพที่เกิดจากหน้าจอรูปแบบต่างๆ อย่างมาก ในบางกรณี คุณอาจต้องแสดงรูปภาพที่แตกต่างกันโดยสิ้นเชิงตามขนาดวิวพอร์ต เช่น ภาพใบหน้าของโอบามาอาจเหมาะกับหน้าจอขนาดเท่าโทรศัพท์ แต่บางภาพที่แสดงตัวโอบามานั้นเหมาะที่จะเป็นหน้าจอแล็ปท็อป แต่บางภาพที่แสดงใบหน้าของเขาและธงที่อยู่ด้านหลังอาจเหมาะสมกว่า
ฉันตั้งใจหลีกเลี่ยงหัวข้อ "ทิศทางศิลปะ" นี้เพื่อเน้นเฉพาะรูปภาพที่มี DPI สูงเท่านั้น ปัญหานี้แก้ไขได้ด้วยวิธีต่างๆ มากมาย เช่น การใช้คำค้นหาสื่อและภาพพื้นหลังผ่านทาง JavaScript, ผ่านฟีเจอร์ใหม่บางอย่าง เช่น image-set หรือบนเซิร์ฟเวอร์ หัวข้อนี้อธิบายไว้ในรูปภาพ DPI สูงสำหรับความหนาแน่นของพิกเซลที่ผันแปร
ฉันจะลงชื่อที่มีปัญหาที่ยังไม่ได้รับการแก้ไขบางประการ:
- ผลกระทบของการบีบอัดสูงต่อประสิทธิภาพ การถอดรหัสรูปภาพที่มีการบีบอัดสูงคืออะไร
- การลดขนาดรูปภาพลง เมื่อโหลดรูปภาพ 2 เท่าบนจอแสดงผล 1 เท่ามีอะไรบ้าง
กล่าวโดยสรุปคือ ให้เลือก CSS และ SVG แทนการใช้รูปภาพแบบแรสเตอร์ หากจำเป็นต้องใช้รูปภาพแรสเตอร์อย่างเข้มงวด ให้ใช้ PNG สำหรับรูปภาพที่มีชุดสีจำกัดและสีทึบหลายสี และใช้ JPEG สำหรับรูปภาพที่มีสีและการไล่ระดับสีจำนวนมาก ข้อดีของวิธีนี้ก็คือมาร์กอัปของคุณ แทบไม่มีการเปลี่ยนแปลง สิ่งที่นักพัฒนาเว็บต้องทำมีเพียงการสร้างชิ้นงานขนาด 2 เท่าและปรับขนาดรูปภาพอย่างเหมาะสมใน DOM
อ่านข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อที่คล้ายกันได้ที่บทความของ Scott Jehl ขอให้รูปภาพดูคมชัดและใช้อินเทอร์เน็ตมือถือน้อย