เพิ่มประสิทธิภาพรูปภาพ

กฎนี้จะทำงานเมื่อ 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

ความคิดเห็น

หน้านี้มีประโยชน์ไหม