รูปภาพแบบ DPI สูงอย่างง่ายดาย

Boris Smus

จอแสดงผลที่มีความหนาแน่นของพิกเซลสูงกลายเป็นรูปแบบปกติอย่างรวดเร็ว คอนเทนต์ ครีเอเตอร์ต้องปรับตัวให้เข้ากับข้อเท็จจริงนี้ นี่คือคำแนะนำสั้นๆ เกี่ยวกับวิธี แสดงรูปภาพคุณภาพสูงบนเว็บในปัจจุบัน โดยไม่มี 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> มีรายละเอียดมากกว่า นอกจากนั้น ผลิตภัณฑ์เหล่านี้ไม่ใช่สินค้ามาตรฐาน ดังนั้นจึงใช้กันอย่างแพร่หลาย ความพร้อมจำหน่ายสินค้า [availability] มากกว่าแอตทริบิวต์ srcset JavaScript และโซลูชันฝั่งเซิร์ฟเวอร์เป็นเพียงทางเลือกเดียว แต่ แนวทางเหล่านั้นมีข้อเสียของตัวเองดังที่อธิบายไว้ในอื่นๆ บทความ

บทความนี้จะอธิบายถึงการใช้รูปภาพในลักษณะต่างๆ ที่มักพบใน เว็บและนำเสนอโซลูชันง่ายๆ ที่ใช้ได้บนหน้าจอที่มี เช่นเดียวกับความหนาแน่นของพิกเซลทั่วไป เพื่อจุดประสงค์ของกรณีนี้ , อุปกรณ์ใดก็ตามที่รายงาน window.devicePixelRatio สูงกว่า มากกว่า 1 จะถือว่าเป็น DPI สูงเพราะนั่นหมายความว่าพิกเซล CSS ไม่เหมือนกับพิกเซลของอุปกรณ์ และรูปภาพจะได้รับการปรับขนาด

ข้อสรุปมีดังนี้

• หากเป็นไปได้ ให้ใช้ CSS/SVG แทนภาพแรสเตอร์
• โดยค่าเริ่มต้น จะใช้รูปภาพที่เพิ่มประสิทธิภาพสำหรับจอแสดงผลความหนาแน่นสูง
• ใช้ PNG สำหรับภาพวาดง่ายๆ และพิกเซลอาร์ต (เช่น โลโก้)
• ใช้ JPEG ที่บีบอัดสำหรับรูปภาพที่มีสีต่างๆ (เช่น รูปภาพ)
• กำหนดขนาดที่ชัดเจน (โดยใช้ CSS หรือ HTML) ในองค์ประกอบรูปภาพทั้งหมดเสมอ

ภาพวาดง่ายๆ และพิกเซลอาร์ต

คุณหลีกเลี่ยงรูปภาพขนาดเล็กทั้งหมดได้โดยใช้ฟีเจอร์ CSS หรือ SVG ตัวอย่างเช่น ไม่จำเป็นต้องใช้รูปภาพสำหรับมุมโค้ง พร็อพเพอร์ตี้ CSS border-radius ได้รับการรองรับอย่างกว้างขวาง ในทำนองเดียวกัน ที่กำหนดเอง แบบอักษรที่ได้รับการสนับสนุนอย่างแพร่หลาย ดังนั้นการใช้ "imaged" เป็นข้อความที่ไม่แนะนำ

อย่างไรก็ตาม ในบางกรณี เช่น โลโก้ รูปภาพอาจเป็นวิธีเดียว ไปข้างหน้า ตัวอย่างเช่น โลโก้ 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 บิตให้เหลือ จานสี 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 จากรูปภาพ 2 รูป
• บีบอัดรูปภาพทั้งสองในระดับที่ต่างกัน
• สร้างหน้าทดสอบที่แสดงชุดรูปภาพทั้งสองชุดคู่กัน
• หาตำแหน่งใน 2 ชุดที่รูปภาพเท่ากัน
• โปรดสังเกตขนาดรูปภาพที่เทียบเท่าและระดับการบีบอัด
• ลองใช้ทั้งกับจอแสดงผล 1 และ 2 เท่า

ฉันสร้างแอปเปรียบเทียบรูปภาพที่แสดงคู่กัน คล้ายกับของ Lightroom เปรียบเทียบมุมมอง จุดประสงค์คือการแสดงตัวเลข 1x และ 2x แสดงคู่กัน และยังช่วยให้คุณสามารถ ซูม ไปยังส่วนใดของ เพื่อดูรายละเอียดเพิ่มเติม คุณเลือกระหว่าง JPEG และ WebP ได้ด้วย รูปแบบ และเปลี่ยนคุณภาพการบีบอัดเพื่อดูขนาดไฟล์และรูปภาพ การเปรียบเทียบคุณภาพ แนวคิดของเราคือ ปรับการตั้งค่า กับรูปภาพหลายๆ ภาพ ลองมาดูว่าคุณภาพการบีบอัด การปรับขนาด และรูปแบบอย่างไร เทียบกับรูปภาพ ตัวเลือกที่ดีสำหรับคุณ และใช้การตั้งค่านั้นสำหรับ รูปภาพ

ตัวเครื่องมือเองก็พร้อมให้คุณใช้งาน คุณสามารถ ซูมเข้าไปยังรูปภาพโดยการเลือกพื้นที่ย่อยเพื่อซูมเข้า

การวิเคราะห์

ก่อนอื่นต้องบอกว่าคุณภาพของรูปเป็นเรื่องที่ขึ้นอยู่กับแต่ละบุคคล นอกจากนี้ กรณีการใช้งานของคุณมักเป็นตัวกำหนดว่าการจัดลำดับความสำคัญใน ความคมชัดของภาพเทียบกับสเปกตรัมของขนาดไฟล์ นอกจากนี้ ประเภทต่างๆ คุณลักษณะรูปภาพจะตอบสนองต่อการปรับขนาดและคุณภาพการบีบอัดแตกต่างกัน ดังนั้น วิธีการหนึ่งที่ใช้ได้กับทุกสถานการณ์ อาจไม่จำเป็นต้องทำงานที่นี่ ประเด็นของ เครื่องมือนี้จะช่วยคุณสร้างสัญชาติญาณสำหรับคุณภาพของรูป การบีบอัด ขนาด และรูปแบบ

จากการทดลองใช้โปรแกรมซูมรูปภาพ ไม่กี่สิ่งหลายอย่างก็เห็นได้ชัดเจนขึ้น ถึงผม ก่อนอื่น เราขอแนะนำให้ใช้รูปภาพ quality=30 dpr=2x รูปแทนรูปภาพ quality=90 dpr=1x รูปเพื่อดูรายละเอียดเพิ่มเติม รูปภาพเหล่านี้เทียบกันได้ ให้มีขนาด 2x ด้วย (ในกรณีระนาบ ภาพบีบอัด 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 เกี่ยวกับ หัวข้อที่คล้ายกัน ขอให้รูปภาพดูคมชัดและปริมาณการใช้อินเทอร์เน็ตมือถือ ต่ำ!