จอแสดงผลที่มีความหนาแน่นของพิกเซลสูงจะกลายเป็นเรื่องปกติอย่างรวดเร็ว ครีเอเตอร์เนื้อหา ต้องปรับตัวให้เข้ากับข้อเท็จจริงนี้ นี่เป็นคำแนะนำสั้นๆ เกี่ยวกับวิธีแสดงรูปภาพคุณภาพสูงบนเว็บในปัจจุบันโดยไม่ต้องใช้ Polyfill, JavaScript, การแฮ็ก CSS และคุณลักษณะเบราว์เซอร์ที่ยังไม่ค่อยมีการใช้งาน อธิบายง่ายๆ ก็คือไม่เปลี่ยนแปลงเวิร์กโฟลว์อย่างรวดเร็ว
ปัจจุบันมีข้อเสนอรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์หลายรายการ ซึ่งหลายข้อเสนอทำให้เกิดการเปลี่ยนแปลงที่สำคัญสำหรับนักพัฒนาเว็บ แอตทริบิวต์แทร็กมาตรฐาน srcset
<img> ใช้งานยาก โดยเฉพาะความซับซ้อนของการเลือกตามวิวพอร์ตเพิ่มเติมของ srcset ดังนี้
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
แม้ว่าพร็อพเพอร์ตี้ image-set CSS จะใช้เพียง devicePixelRatio เพื่อตัดสินใจว่าจะโหลดรูปภาพใด แต่ก็ยังคงบังคับให้นักพัฒนาซอฟต์แวร์เขียนมาร์กอัปเพิ่มเติมจำนวนมากสำหรับแต่ละรูปภาพ
ข้อเสนออื่นๆ เช่น องค์ประกอบ <picture> จะมีรายละเอียดมากกว่านี้
ยิ่งไปกว่านั้น เวอร์ชันเหล่านี้ไม่ใช่แทร็กมาตรฐาน ความพร้อมใช้งานทั่วไปจึงมากกว่าแอตทริบิวต์ srcset JavaScript และโซลูชันฝั่งเซิร์ฟเวอร์เป็นเพียงทางเลือกเดียว แต่วิธีการเหล่านี้มีข้อเสียของตัวเองดังที่อธิบายไว้ในบทความอื่นๆ
บทความนี้จะกล่าวถึงการใช้รูปภาพต่างๆ ที่มักพบบนเว็บและนำเสนอวิธีแก้ปัญหาง่ายๆ ที่ใช้ได้กับหน้าจอที่มีความหนาแน่นของพิกเซลสูงเช่นเดียวกับภาพทั่วไป สำหรับการอภิปรายนี้ อุปกรณ์ที่รายงาน window.devicePixelRatio มากกว่า 1 จะถือว่าเป็น DPI สูง เพราะนั่นหมายความว่าพิกเซล CSS ไม่เหมือนกับพิกเซลของอุปกรณ์ และรูปภาพจะถูกปรับขนาด
ข้อมูลสรุปมีดังนี้
- หากเป็นไปได้ ให้ใช้ CSS/SVG แทนภาพแรสเตอร์
- ใช้รูปภาพที่ได้รับการเพิ่มประสิทธิภาพสำหรับจอแสดงผลความหนาแน่นสูงโดยค่าเริ่มต้น
- ใช้ PNG สำหรับภาพวาดง่ายๆ และพิกเซลอาร์ต (เช่น โลโก้)
- ใช้ JPEG ที่บีบอัดสำหรับรูปภาพที่มีสีหลากหลาย (เช่น ภาพถ่าย)
- กำหนดขนาดที่ชัดเจน (โดยใช้ CSS หรือ HTML) ในองค์ประกอบของรูปภาพทั้งหมดเสมอ
ภาพวาดง่ายๆ และศิลปะพิกเซล
คุณหลีกเลี่ยงรูปภาพขนาดเล็กทั้งหมดได้โดยใช้ฟีเจอร์ CSS หรือ SVG
ไม่จำเป็นต้องใช้รูปภาพสําหรับมุมโค้ง เนื่องจากระบบรองรับพร็อพเพอร์ตี้ CSS border-radius อย่างแพร่หลาย ในทำนองเดียวกัน แบบอักษรที่กำหนดเองได้รับการรองรับอย่างแพร่หลาย ดังนั้นจึงไม่แนะนำให้ใช้ข้อความ "แบบรูปภาพ"
อย่างไรก็ตาม ในบางกรณี เช่น โลโก้ รูปภาพอาจเป็นเพียงอย่างเดียว ตัวอย่างเช่น โลโก้ Chrome นี้มีขนาดตามปกติคือ 256x256 บนจอแสดงผลแบบเรตินา คุณจะเห็นนามแฝงที่เป็นเส้นทแยงมุมและเส้นโค้ง ซึ่งมีลักษณะเป็นชิ้นส่วนและไม่ดี โดยเฉพาะเมื่อเทียบกับข้อความที่แสดงผลแบบคมชัด
ขนาดธรรมชาติ: 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 บิตเป็น PNG 8 บิตที่มีการลงสีจานสี ซึ่งใช้ได้กับรูปภาพที่มีสีเพียงไม่กี่สี รวมถึงโลโก้ Chrome ด้วย ในการเพิ่มประสิทธิภาพนี้ คุณสามารถใช้เครื่องมือ เช่น http://pngquant.org/ คุณจะเห็นแถบสีเพี้ยนๆ ตรงนี้ แต่ไฟล์นี้มีขนาดเพียง 13 kB ซึ่งประหยัดขนาดได้ 6 เท่า เมื่อเทียบกับ PNG ขนาด 512x512 เดิม
ขนาดธรรมชาติ: 512x512px, ขนาดเนื้อหา: 13 kB, รูปแบบ: PNG,
8-bit palette
รูปภาพที่มีสีหลากหลาย
ผมได้เขียนบทความ HTML5Rocks ที่จะทำการสำรวจเทคนิครูปภาพที่มีการตอบสนองหลากหลาย และทำการค้นคว้าเกี่ยวกับการบีบอัด 1x และ 2x JPEG ตลอดจนเปรียบเทียบขนาดที่ได้และคุณภาพของภาพ นี่คือไทล์หนึ่งจากบทความด้านบน:
ฉันได้ติดป้ายกำกับระดับการบีบอัด (ระบุด้วยคุณภาพ JPEG) ให้กับรูปภาพ ขนาด (หน่วยเป็นไบต์) และความคิดเห็นของฉันเกี่ยวกับความครบถ้วนสมบูรณ์ของภาพแบบเปรียบเทียบกัน (จัดอันดับตามตัวเลข) สิ่งที่น่าสนใจคือรูปภาพขนาด 2x ที่มีการบีบอัดสูง (ป้ายกำกับ 3) นั้นมีขนาดเล็กลงและดูดีกว่ารูปภาพ 1x ที่ไม่ได้บีบอัด (ป้ายกำกับ 4) กล่าวคือ ระหว่างรูปภาพที่ 4 ถึง 3 เราสามารถปรับปรุงคุณภาพของรูปภาพโดยเพิ่มขนาดเป็น 2 เท่าและเพิ่มการบีบอัดขึ้นเป็น 2 เท่า ขณะเดียวกันก็ลดขนาดลงได้ 2 kB
การบีบอัด ขนาด และคุณภาพของภาพ
เราต้องการรับข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับข้อดีข้อเสียระหว่างระดับการบีบอัด ขนาดรูปภาพ คุณภาพของภาพ และขนาดรูปภาพ ฉันทำการศึกษาที่มีสมมติฐานต่อไปนี้ตามการศึกษาข้างต้น
สมมติฐาน
หากมีการบีบอัดมากพอ รูปภาพขนาด 2 เท่าจะมีลักษณะเทียบเท่ากับรูปภาพเดียวกันในขนาด 1x เมื่อมีการบีบอัดอื่นๆ (ต่ำกว่า) แต่ในกรณีนี้ รูปภาพขนาด 2x ที่มีการบีบอัดสูงจะมีขนาดเล็กกว่ารูปภาพ 1x
ขั้นตอน
- หากมีรูปภาพ 2 เท่า ให้สร้างรูปภาพ 1 เท่า
- บีบอัดรูปภาพทั้งสองในระดับต่างๆ
- สร้างหน้าทดสอบที่แสดงชุดรูปภาพทั้ง 2 ชุดคู่กัน
- หาตำแหน่งใน 2 ชุดที่มีรูปภาพเท่ากัน
- สังเกตขนาดรูปภาพและระดับการบีบอัดที่เท่าเทียมกัน
- ลองใช้กับทั้งจอแสดงผล 1x และ 2x
ผมสร้างแอปเปรียบเทียบรูปภาพไว้ข้างกันคล้ายกับมุมมองเปรียบเทียบของ Lightroom จุดมุ่งหมายคือแสดงรูปภาพ 1x และ 2x เคียงข้างกัน และเปิดโอกาสให้คุณซูมเข้าทุกส่วนของรูปภาพเพื่อดูรายละเอียดเพิ่มเติม คุณยังสามารถเลือกรูปแบบระหว่าง 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 ในหัวข้อที่คล้ายกัน รูปภาพควรดูคมชัดและปริมาณการใช้อินเทอร์เน็ตมือถือต่ำ