ใช้นโยบายรูปภาพที่เพิ่มประสิทธิภาพเพื่อให้แน่ใจว่าเว็บไซต์ใช้รูปภาพที่มีประสิทธิภาพดีที่สุด
รูปภาพมักใช้พื้นที่ในการมองเห็นปริมาณมากและเป็นสัดส่วนของไบต์ที่ดาวน์โหลดในเว็บไซต์ การเพิ่มประสิทธิภาพให้กับรูปภาพ จะช่วยปรับปรุงประสิทธิภาพในการโหลดและลดการจราจรของข้อมูลในเครือข่ายได้
เป็นเรื่องน่าประหลาดใจที่ไซต์บนเว็บมากกว่าครึ่งหนึ่งแสดงรูปภาพที่บีบอัดไม่ดีหรือมีขนาดใหญ่โดยไม่จำเป็น วิธีนี้จะช่วยเพิ่มพื้นที่อย่างมาก สำหรับการปรับปรุงประสิทธิภาพได้ง่ายๆ ด้วยการเพิ่มประสิทธิภาพรูปภาพ
คุณอาจสงสัยว่า ฉันจะทราบได้อย่างไรว่ารูปภาพได้รับการเพิ่มประสิทธิภาพแล้ว และฉันควรเพิ่มประสิทธิภาพอย่างไร เรากำลังทดสอบนโยบายฟีเจอร์ชุดใหม่สำหรับการเพิ่มประสิทธิภาพรูปภาพ ได้แก่ oversized-images, unoptimized-lossy-images, unoptimized-lossless-images และunoptimized-lossless-images-strict
ทั้งหมดพร้อมให้ใช้งานสำหรับช่วงทดลองใช้จากต้นทาง
นโยบายรูปภาพที่เพิ่มประสิทธิภาพ
นโยบายสิทธิ์กำลังจะเปิดตัวข้อจำกัดใหม่เกี่ยวกับรูปภาพซึ่งสามารถใช้ร่วมกับการบังคับใช้ในเวลาพัฒนาได้ รูปภาพที่ละเมิด ข้อจำกัดใดๆ จะแสดงเป็นรูปภาพตัวยึดตำแหน่ง ซึ่งระบุและแก้ไขได้ง่าย คุณระบุนโยบายเหล่านี้ได้ในโหมดรายงานเท่านั้นซึ่งรูปภาพจะแสดงผลตามปกติโดยไม่มีการบังคับใช้ในขณะที่ตรวจสอบการละเมิดผ่านรายงาน (ดูรายละเอียดในโหมดรายงานเท่านั้นด้านล่าง)
รูปภาพที่มีขนาดใหญ่เกินไป
นโยบายสิทธิ์ oversized-images จะจำกัดขนาดภายในของรูปภาพซึ่งสัมพันธ์กับขนาดคอนเทนเนอร์
เมื่อเอกสารใช้นโยบาย oversized-images ระบบจะแทนที่องค์ประกอบ <img> ใดๆ ที่มีความละเอียดภายในมากกว่าขนาดคอนเทนเนอร์ในทั้ง 2 มิติข้อมูลด้วยรูปภาพตัวยึดตำแหน่ง
เหตุผล
การแสดงรูปภาพที่มีขนาดใหญ่กว่าที่อุปกรณ์การดูสามารถแสดงผลได้ เช่น การแสดงรูปภาพเดสก์ท็อปในบริบทของอุปกรณ์เคลื่อนที่ การแสดงรูปภาพความหนาแน่นพิกเซลสูงไปยังอุปกรณ์ที่มีความหนาแน่นพิกเซลต่ำ เป็นการสิ้นเปลืองการจราจรของข้อมูลในเครือข่ายและหน่วยความจำของอุปกรณ์ โปรดอ่านหัวข้อแสดงรูปภาพที่มีขนาดที่ถูกต้องและแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์สำหรับข้อมูลเกี่ยวกับการเพิ่มประสิทธิภาพรูปภาพ
ตัวอย่าง
โดยมีตัวอย่าง 2-3 ตัวอย่างที่แสดงให้เห็นถึงเรื่องนี้ได้ ตัวอย่างต่อไปนี้แสดงลักษณะการทำงานเริ่มต้นเมื่อตัดขนาดการแสดงรูปภาพครึ่งหนึ่ง
หากฉันใช้นโยบายสิทธิ์ต่อไปนี้ ฉันจะได้รับรูปภาพตัวยึดตำแหน่งแทน
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,lossless}-รูปภาพ
นโยบายฟีเจอร์ unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict จำกัดขนาดไฟล์ของรูปภาพให้สัมพันธ์กับความละเอียดภายในของรูปภาพ ดังนี้
unoptimized-lossy-images- รูปแบบที่สูญเสียข้อมูลไม่ควรเกินอัตราส่วนไบต์ต่อพิกเซลที่ X โดยมีค่าใช้จ่ายคงที่ 1KB สำหรับรูปภาพกว้าง x สูง เกณฑ์ขนาดไฟล์จะคำนวณเป็นกว้าง x สูง x X + 1024
unoptimized-lossless-images- รูปแบบที่ไม่สูญเสียข้อมูลไม่ควรเกินอัตราส่วนไบต์ต่อพิกเซลที่ X โดยมีค่าใช้จ่ายคงที่ 10 KB สำหรับรูปภาพกว้าง x สูง เกณฑ์ขนาดไฟล์จะคำนวณเป็นกว้าง x สูง x X + 10240
unoptimized-lossless-images-strict- รูปแบบที่ไม่สูญเสียข้อมูลไม่ควรเกินอัตราส่วนไบต์ต่อพิกเซลที่ X โดยมีค่าใช้จ่ายคงที่ 1KB สำหรับรูปภาพกว้าง x สูง เกณฑ์ขนาดไฟล์จะคำนวณเป็นกว้าง x สูง 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-Report-Only คล้ายกับส่วนหัว HTTP ของ Permissions-Policy ตรงที่ให้คุณสังเกตรายงานการละเมิดใน Wi-Fi ได้โดยไม่ต้องมีการบังคับใช้ใดๆ
ข้อจำกัด
นโยบายรูปภาพใช้ได้กับองค์ประกอบรูปภาพ HTML (<img>, <source> ฯลฯ) เท่านั้น และยังไม่รองรับภาพพื้นหลังหรือเนื้อหาที่สร้างขึ้น หากต้องการให้เราสนับสนุนนโยบายในเนื้อหาที่กว้างขึ้น โปรดแจ้งให้เราทราบ
การเพิ่มประสิทธิภาพของรูปภาพ
ฉันได้พูดถึงการเพิ่มประสิทธิภาพให้รูปภาพของคุณไปบ้างแล้ว แต่ยังไม่ได้บอกวิธีการ หัวข้อดังกล่าวอยู่นอกเหนือขอบเขตของบทความนี้ แต่คุณสามารถดูข้อมูลเพิ่มเติมได้จากลิงก์ด้านล่างและจาก Codelab ที่แสดงอยู่ท้ายบทความ
โปรดส่งความคิดเห็นถึงเรา
หวังว่าบทความนี้จะช่วยให้คุณเข้าใจนโยบายรูปภาพได้ดีขึ้นและยังทำให้รู้สึกตื่นเต้น เราอยากให้คุณลองใช้นโยบายและ ส่งความคิดเห็นถึงเรา
โปรดส่งความคิดเห็นเกี่ยวกับแต่ละฟีเจอร์ที่กล่าวถึงในบทความนี้ไปยังรายชื่ออีเมล feature-control@chromium.org ของเรา
เราต้องการทราบว่าค่าเกณฑ์ใดที่คุณใช้และเห็นว่ามีประโยชน์ เราอยากทราบว่า unoptimized-lossless-images หรือ unoptimized-lossless-images-strict นั้นใช้งานง่ายและง่ายกว่าเดิม หรือเราควรใช้ค่าเผื่อส่วนต่างแทน เราจะส่งแบบสำรวจไปให้คุณ
เมื่อใกล้สิ้นสุดการทดลองใช้ โปรดอดใจรอ