กฎนี้จะทำงานเมื่อ PageSpeed Insights ตรวจพบว่าสามารถเพิ่มประสิทธิภาพรูปภาพบนหน้าเว็บเพื่อลดขนาดไฟล์ได้โดยไม่ส่งผลกระทบต่อคุณภาพของภาพมากนัก
ภาพรวม
รูปภาพมักทำให้เกิดการดาวน์โหลดข้อมูลมากที่สุดในหน้าเว็บ ผลที่ได้คือ การเพิ่มประสิทธิภาพรูปภาพมักจะช่วยประหยัดไบต์ได้อย่างมากและช่วยปรับปรุงประสิทธิภาพ เช่น เบราว์เซอร์ต้องดาวน์โหลดน้อย การใช้แบนด์วิดท์ของไคลเอ็นต์ก็จะน้อยลง และเบราว์เซอร์ก็จะดาวน์โหลดและแสดงผลเนื้อหาบนหน้าจอได้เร็วขึ้น
การแนะนำวิดีโอ
การค้นหารูปแบบและกลยุทธ์การเพิ่มประสิทธิภาพที่เหมาะกับชิ้นงานรูปภาพต้องอาศัยการวิเคราะห์อย่างรอบคอบในหลายมิติข้อมูล ไม่ว่าจะเป็นประเภทข้อมูลที่เข้ารหัส ความสามารถของรูปแบบรูปภาพ การตั้งค่าคุณภาพ ความละเอียด และอื่นๆ นอกจากนี้ คุณต้องพิจารณาว่าภาพบางภาพแสดงได้ดีที่สุดในรูปแบบเวกเตอร์หรือไม่ สามารถทำให้เกิดผลกระทบที่ต้องการผ่านทาง CSS หรือไม่ และวิธีส่งเนื้อหาที่ปรับขนาดอย่างเหมาะสมสำหรับอุปกรณ์แต่ละประเภท
การเพิ่มประสิทธิภาพสำหรับรูปภาพทุกประเภท
- ทำตามแนวทางปฏิบัติแนะนำสำหรับการแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
- ทำตามรายการตรวจสอบการเพิ่มประสิทธิภาพรูปภาพสำหรับแต่ละรูปภาพ
การเพิ่มประสิทธิภาพของรูปภาพ GIF, PNG และ JPEG
รูปแบบ GIF, PNG และ JPEG ทำให้มีการเข้าชมรูปภาพบนอินเทอร์เน็ตทั้งหมด 96% เนื่องจากความนิยม PageSpeed Insights จึงมีคำแนะนำในการเพิ่มประสิทธิภาพที่เฉพาะเจาะจง เพื่อความสะดวก คุณสามารถดาวน์โหลดรูปภาพที่เพิ่มประสิทธิภาพได้โดยตรงจาก PageSpeed Insights (ซึ่งใช้ไลบรารีการเพิ่มประสิทธิภาพรูปภาพจาก modpagespeed.com)
นอกจากนี้ คุณยังสามารถใช้เครื่องมือต่างๆ เช่น ไบนารี convert ที่สร้างโดย ImageMagick ซึ่งสามารถใช้การเพิ่มประสิทธิภาพที่คล้ายกัน ดูคำแนะนำด้านล่าง
หากคุณใช้เครื่องมือของบุคคลที่สาม โปรดทราบว่าการเปลี่ยนรูปแบบอาจทําให้รูปภาพมีขนาดใหญ่ขึ้น หากปรับแต่งให้เหมาะสมแล้ว หากเกิดกรณีดังกล่าวขึ้น โปรดใช้ต้นฉบับของคุณ
GIF และ PNG เป็นรูปแบบที่ไม่สูญเสียรายละเอียด ซึ่งกระบวนการบีบอัดไม่มีการปรับเปลี่ยนภาพให้กับรูปภาพ สำหรับภาพนิ่ง PNG จะได้อัตราส่วนการบีบอัดดีกว่าและมีคุณภาพภาพดีขึ้น สำหรับภาพเคลื่อนไหว ให้พิจารณาใช้องค์ประกอบ video แทน GIF เพื่อให้บีบอัดได้ดีขึ้น
- แปลง GIF เป็น PNG เสมอ เว้นแต่ต้นฉบับจะเป็นภาพเคลื่อนไหวหรือขนาดเล็ก (น้อยกว่าสองหรือสามร้อยไบต์)
- สำหรับ GIF และ PNG ให้ลบช่องอัลฟ่าออกหากพิกเซลทั้งหมดทึบแสง
ตัวอย่างเช่น คุณสามารถใช้แปลงไบนารีเพื่อเพิ่มประสิทธิภาพรูปภาพ GIF และ PNG ด้วยคำสั่งต่อไปนี้ (พารามิเตอร์ในวงเล็บไม่บังคับ)
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG เป็นรูปแบบแบบสูญเสียบางส่วน ขั้นตอนการบีบอัดจะนำรายละเอียดที่มองเห็นของรูปภาพออก แต่อัตราส่วนการบีบอัดอาจมีขนาดใหญ่กว่า GIF หรือ PNG ถึง 10 เท่า
- ลดคุณภาพลงเหลือ 85 หากสูงกว่า เมื่อมีขนาดใหญ่กว่า 85 รูปภาพจะมีขนาดใหญ่ขึ้นอย่างรวดเร็ว ในขณะที่รูปภาพจะมีการปรับปรุงเพียงเล็กน้อย
- ลดการสุ่มตัวอย่างโครมาเป็น 4:2:0 เนื่องจากระบบการมองเห็นของมนุษย์มีความไวต่อสีน้อยกว่าเมื่อเทียบกับความสว่าง
- ใช้รูปแบบโปรเกรสซีฟสำหรับรูปภาพที่มีขนาดใหญ่กว่า 10 กิโลไบต์ JPEG แบบโปรเกรสซีฟมักมีอัตราส่วนการบีบอัดสูงกว่า JPEG พื้นฐานสำหรับรูปภาพขนาดใหญ่ และมีประโยชน์ในการแสดงภาพแบบต่อเนื่อง
- ใช้พื้นที่สีโทนสีเทาหากรูปภาพเป็นสีขาวดำ
เช่น คุณใช้แปลงไบนารีเพื่อเพิ่มประสิทธิภาพรูปภาพ JPEG ด้วยคําสั่งต่อไปนี้ (ใส่พารามิเตอร์ในวงเล็บหรือไม่ก็ได้)
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
ความคิดเห็น
หน้านี้มีประโยชน์ไหม