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