นโยบายรูปภาพสำหรับเวลาในการโหลดที่รวดเร็ว และอื่นๆ

ใช้นโยบายรูปภาพที่เพิ่มประสิทธิภาพเพื่อให้มั่นใจว่าเว็บไซต์ของคุณใช้รูปภาพที่มีประสิทธิภาพดีที่สุด

Luna Lu
Luna Lu

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

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

คุณอาจสงสัยว่าฉันจะรู้ได้อย่างไรว่ารูปภาพได้รับการเพิ่มประสิทธิภาพแล้ว และฉันควรเพิ่มประสิทธิภาพรูปภาพอย่างไร เรากําลังทดสอบนโยบายฟีเจอร์ชุดใหม่สําหรับการเพิ่มประสิทธิภาพรูปภาพ ได้แก่ oversized-images, unoptimized-lossy-images, unoptimized-lossless-images และunoptimized-lossless-images-strict ตอนนี้เกมทั้งหมดพร้อมให้ทดลองใช้แล้ว

นโยบายรูปภาพที่เพิ่มประสิทธิภาพ

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

oversized-images

นโยบายสิทธิ์ oversized-images จำกัดขนาดรูปภาพตามขนาดคอนเทนเนอร์

เมื่อเอกสารใช้นโยบาย oversized-images องค์ประกอบ <img> ใดก็ตามที่มีความละเอียดโดยเนื้อแท้มากกว่าขนาดคอนเทนเนอร์ X เท่าในมิติข้อมูลใดมิติข้อมูลหนึ่งจะถูกแทนที่ด้วยรูปภาพตัวยึดตำแหน่ง

เหตุผล

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงกรณีนี้ ต่อไปนี้แสดงลักษณะการทำงานเริ่มต้นเมื่อตัดขนาดการแสดงผลของรูปภาพให้เหลือครึ่งหนึ่ง

ลักษณะการทำงานเริ่มต้นในการปรับขนาด
ลักษณะการทำงานในการปรับขนาดเริ่มต้น

หากใช้นโยบายสิทธิ์ต่อไปนี้ ฉันจะได้รับรูปภาพตัวยึดตำแหน่งแทน

Permissions-Policy: oversized-images *(2);

เมื่อรูปภาพมีขนาดใหญ่เกินกว่าคอนเทนเนอร์
เมื่อรูปภาพมีขนาดใหญ่เกินกว่าคอนเทนเนอร์

ฉันได้ผลลัพธ์ที่คล้ายกันหากลดเฉพาะความกว้างหรือความสูง

ความกว้างที่ปรับขนาดแล้ว ความสูงที่ปรับขนาด
ปรับขนาดความกว้างและความสูง

How to use

โดยสรุปแล้ว คุณสามารถระบุนโยบาย oversized-images ผ่านช่องทางใดช่องทางหนึ่งต่อไปนี้

  • ส่วนหัว HTTP ของ Permissions-Policy
  • แอตทริบิวต์ <iframe> allow

หากต้องการประกาศนโยบาย oversized-images คุณจะต้องระบุข้อมูลต่อไปนี้

  • ชื่อองค์ประกอบ oversized-images (ต้องระบุ)
  • รายการต้นทาง (ไม่บังคับ)
  • ค่าเกณฑ์ (คืออัตราส่วนการปรับขนาดลง X) สำหรับต้นทางที่ระบุไว้ในวงเล็บ (ไม่บังคับ)

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

ตัวอย่างเพิ่มเติม

Permissions-Policy: oversized-images *(2.0)

ระบบบังคับใช้นโยบายนี้กับทุกต้นทางที่มีค่าเกณฑ์ 2.0 ระบบไม่อนุญาตให้ใช้องค์ประกอบ <img> ที่มีรูปภาพที่มีสัดส่วนการลดขนาดมากกว่า 2.0 และระบบจะแทนที่ด้วยรูปภาพตัวยึดตำแหน่ง

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

ระบบบังคับใช้นโยบายนี้กับต้นทางของเว็บไซต์ที่มีค่าเกณฑ์ 1.5 องค์ประกอบ <img> ในบริบทการท่องเว็บระดับบนสุดและบริบทการท่องเว็บที่ฝังอยู่ของต้นทางเดียวกันจะแสดงผลตามปกติก็ต่อเมื่ออัตราส่วนการปรับขนาดลงน้อยกว่าหรือเท่ากับ 1.5 องค์ประกอบ <img> ในส่วนอื่นๆ จะแสดงผลตามปกติ

unoptimized-{lossy,lossless}-images

นโยบายฟีเจอร์ unoptimized-lossy-images, unoptimized-lossless-images และ unoptimized-lossless-images-strict จำกัดขนาดไฟล์ของรูปภาพโดยสัมพันธ์กับความละเอียดโดยเนื้อแท้ ดังนี้

unoptimized-lossy-images
รูปแบบที่มีการสูญเสียไม่ควรมีอัตราส่วนไบต์ต่อพิกเซลเกิน X โดยมีค่าเผื่อส่วนเกินคงที่ 1KB สําหรับรูปภาพขนาด W x H ระบบจะคํานวณเกณฑ์ขนาดไฟล์เป็น W x H x X + 1024
unoptimized-lossless-images
รูปแบบแบบไม่สูญเสียไม่ควรมีอัตราส่วนไบต์ต่อพิกเซลเกิน X โดยมีค่าเผื่อส่วนเกินคงที่ 10KB สําหรับรูปภาพขนาด W x H ระบบจะคํานวณเกณฑ์ขนาดไฟล์เป็น W x H x X + 10240
unoptimized-lossless-images-strict
รูปแบบแบบไม่สูญเสียไม่ควรมีอัตราส่วนไบต์ต่อพิกเซลเกิน X โดยมีค่าเผื่อส่วนเกินคงที่ 1KB สําหรับรูปภาพขนาด W x H ระบบจะคํานวณเกณฑ์ขนาดไฟล์เป็น W x H x X + 1024

เมื่อเอกสารใช้นโยบายเหล่านี้ ระบบจะแทนที่องค์ประกอบ <img> ที่ละเมิดข้อจำกัดด้วยรูปภาพตัวยึดตำแหน่ง

เหตุผล

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

ตัวอย่าง

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

การเปรียบเทียบรูปภาพที่เพิ่มประสิทธิภาพกับรูปภาพที่ไม่ได้เพิ่มประสิทธิภาพ
การเปรียบเทียบรูปภาพที่เพิ่มประสิทธิภาพกับรูปภาพที่ไม่ได้เพิ่มประสิทธิภาพ

หากใช้นโยบายสิทธิ์ต่อไปนี้ ฉันจะได้รับรูปภาพตัวยึดตำแหน่งแทน

Permissions-Policy: unoptimized-lossy-images *(0.5);

เมื่อรูปภาพไม่ได้รับการเพิ่มประสิทธิภาพ
เมื่อรูปภาพไม่ได้เพิ่มประสิทธิภาพ

How to use

หากคุณเพิ่งเคยได้ยินเกี่ยวกับนโยบายสิทธิ์ โปรดดูรายละเอียดเพิ่มเติมในข้อมูลเบื้องต้นเกี่ยวกับนโยบายสิทธิ์

โดยสรุปแล้ว นโยบาย unoptimized-{lossy,lossless}-images สามารถระบุได้ผ่าน

  • ส่วนหัว HTTP ของ Permissions-Policy
  • แอตทริบิวต์ <iframe> allow

หากต้องการประกาศนโยบาย unoptimized-{lossy,lossless}-images คุณจะต้องระบุข้อมูลต่อไปนี้

  • ชื่อฟีเจอร์ เช่น unoptimized-lossy-images (ต้องระบุ)
  • รายการต้นทาง (ไม่บังคับ)
  • ค่าเกณฑ์ (เช่น อัตราส่วนไบต์ต่อพิกเซล X) สำหรับต้นทางที่ระบุไว้ในวงเล็บ (ไม่บังคับ)

เราขอแนะนำให้ใช้อัตราส่วนไบต์ต่อพิกเซล 0.5 หรือต่ำกว่าสำหรับ unoptimized-lossy-images และใช้อัตราส่วนไบต์ต่อพิกเซล 1 หรือต่ำกว่าสำหรับ unoptimized-lossless-images และ unoptimized-lossless-images-strict

รูปแบบ WebP มีอัตราส่วนการบีบอัดที่ดีกว่ารูปแบบอื่นๆ แสดงรูปภาพทั้งหมดในรูปแบบ WebP แบบสูญเสียคุณภาพหากเป็นไปได้ หากยังไม่เพียงพอ ให้ลองใช้รูปแบบ WebP แบบไม่สูญเสียคุณภาพ ใช้ JPEG ในเบราว์เซอร์ที่ไม่รองรับรูปแบบ WebP ใช้ PNG หากรูปแบบเหล่านี้ไม่ได้ผล

หากคุณใช้รูปแบบ WebP ให้ลองใช้เกณฑ์ที่เข้มงวดยิ่งขึ้น ดังนี้

  • 0.2 สำหรับ WEBPV8
  • 0.5 สำหรับ WEBPL

ตัวอย่างเพิ่มเติม

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

ระบบจะบังคับใช้นโยบายนี้กับต้นทางทั้งหมดที่มีค่าเกณฑ์ 0.5 (สำหรับรูปแบบที่มีความละเอียดลดลง) และ 1 (สำหรับรูปแบบที่ไม่มีความละเอียดลดลง) ระบบไม่อนุญาตให้ใช้องค์ประกอบ <img> ที่มีรูปภาพมีอัตราส่วนไบต์ต่อพิกเซลเกินข้อจำกัด และจะแทนที่ด้วยรูปภาพตัวยึดตำแหน่ง

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

ระบบจะบังคับใช้นโยบายนี้กับต้นทางของเว็บไซต์โดยมีเกณฑ์ที่ 0.3 (สำหรับรูปแบบที่มีความละเอียดลดลง) และ 0.8 (สำหรับรูปแบบที่ไม่มีความละเอียดลดลง) องค์ประกอบ <img> ในบริบทการท่องเว็บระดับบนสุดและบริบทการท่องเว็บที่ฝังอยู่ซึ่งมาจากต้นทางเดียวกันจะแสดงผลตามปกติก็ต่อเมื่ออัตราส่วนไบต์ต่อพิกเซลเป็นไปตามข้อจำกัดเหล่านี้ ส่วนองค์ประกอบ <img> ในส่วนอื่นๆ จะแสดงผลตามปกติ

โหมดรายงานเท่านั้นในการใช้งานจริง

การเผยแพร่เว็บไซต์ที่มีรูปภาพที่ใช้เป็นตัวยึดตำแหน่งอาจไม่ใช่สิ่งที่คุณต้องการ คุณสามารถใช้นโยบายในโหมดการบังคับใช้ (ที่มีการแสดงผลรูปภาพที่ไม่ได้เพิ่มประสิทธิภาพเป็นรูปภาพตัวยึดตำแหน่ง) ในระหว่างการพัฒนาและช่วงเตรียมความพร้อม และสามารถใช้โหมดรายงานเท่านั้นในเวอร์ชันที่ใช้งานจริง (ดูรายละเอียดเพิ่มเติมได้ที่นโยบายสิทธิ์ การรายงาน) เช่นเดียวกับส่วนหัว Permissions-Policy HTTP ส่วนหัว Permissions-Policy-Report-Only ช่วยให้คุณดูรายงานการละเมิดในการใช้งานจริงได้โดยไม่ต้องบังคับใช้

ข้อจำกัด

นโยบายรูปภาพใช้ได้กับองค์ประกอบรูปภาพ HTML เท่านั้น (<img>, <source> เป็นต้น) และยังไม่รองรับรูปภาพพื้นหลังหรือเนื้อหาที่สร้างขึ้น หากต้องการใช้นโยบายกับเนื้อหาที่กว้างขึ้น โปรดแจ้งให้เราทราบ

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

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

โปรดแสดงความคิดเห็น

เราหวังว่าบทความนี้จะทําให้คุณเข้าใจนโยบายรูปภาพและตื่นเต้นกับการเปลี่ยนแปลงนี้ เราอยากให้คุณลองใช้นโยบายและแสดงความคิดเห็นให้เราทราบ

คุณสามารถแสดงความคิดเห็นเกี่ยวกับฟีเจอร์แต่ละรายการที่กล่าวถึงในบทความนี้กับรายชื่ออีเมลของเราได้ที่ feature-control@chromium.org

เราอยากทราบว่าคุณใช้เกณฑ์ค่าใดและพบว่ามีประโยชน์ เราอยากทราบว่า unoptimized-lossless-images หรือ unoptimized-lossless-images-strict เข้าใจง่ายและใช้งานง่ายกว่ากัน หรือเราควรใช้ค่าเผื่อค่าใช้จ่ายส่วนต่างแทน เราจะส่งแบบสํารวจให้คุณเมื่อช่วงทดลองใช้ใกล้สิ้นสุด โปรดอดใจรอ