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