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

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

Luna Lu
Luna Lu

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

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

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

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

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

รูปภาพที่ใหญ่เกินขนาด

นโยบายสิทธิ์ 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> ที่อื่นๆ จะแสดงผลตามปกติ

รูปภาพ {lossy,lessless} ที่ไม่ได้เพิ่มประสิทธิภาพ

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

unoptimized-lossy-images
รูปแบบที่มีการสูญเสียไม่ควรมีอัตราส่วนไบต์ต่อพิกเซลเกิน X โดยมีค่าเผื่อส่วนเกินคงที่ 1KB สำหรับรูปภาพกว้าง x สูง เกณฑ์ขนาดไฟล์จะคำนวณเป็น ก x สูง x + 1024
unoptimized-lossless-images
รูปแบบแบบไม่สูญเสียไม่ควรมีอัตราส่วนไบต์ต่อพิกเซลเกิน X โดยมีค่าเผื่อส่วนเกินคงที่ 10KB สำหรับรูปภาพกว้าง x สูง เกณฑ์ขนาดไฟล์จะคำนวณเป็น ก 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 เข้าใจง่ายและใช้งานง่ายกว่ากัน หรือเราควรใช้ค่าเผื่อค่าใช้จ่ายส่วนต่างแทน เราจะส่งแบบสำรวจ ในช่วงใกล้สิ้นสุดช่วงทดลองใช้ โปรดอดใจรอ