Sử dụng các chính sách hình ảnh được tối ưu hoá để đảm bảo trang web của bạn đang sử dụng những hình ảnh hoạt động hiệu quả nhất.
Hình ảnh thường chiếm một lượng đáng kể không gian trực quan và chiếm phần lớn byte được tải xuống trên trang web. Việc tối ưu hoá hình ảnh có thể cải thiện hiệu suất tải và giảm lưu lượng truy cập mạng.
Điều đáng ngạc nhiên là hơn một nửa số trang web trên web đang phân phát hình ảnh lớn được nén kém hoặc không cần thiết. Điều này mang lại rất nhiều không gian để cải thiện hiệu suất chỉ bằng cách tối ưu hoá hình ảnh.
Bạn có thể hỏi, làm cách nào để biết hình ảnh của tôi đã được tối ưu hoá hay chưa và tôi nên tối ưu hoá những hình ảnh đó như thế nào? Chúng tôi đang thử nghiệm một bộ chính sách mới về tính năng để tối ưu hoá hình ảnh: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images và unoptimized-lossless-images-strict.
Tất cả đều có sẵn cho bản dùng thử theo nguyên gốc.
Chính sách về hình ảnh được tối ưu hoá
Chính sách về quyền đưa ra một bộ quy định hạn chế mới đối với hình ảnh có thể áp dụng qua quá trình thực thi theo thời gian phát triển. Hình ảnh vi phạm bất kỳ quy định hạn chế nào sẽ được hiển thị dưới dạng hình ảnh giữ chỗ, rất dễ xác định và khắc phục. Bạn có thể chỉ định các chính sách này ở chế độ chỉ báo cáo. Trong đó, hình ảnh sẽ hiển thị bình thường mà không cần thực thi trong khi phát hiện lỗi vi phạm thông qua báo cáo. (Xem phần Chế độ chỉ báo cáo trong môi trường tự nhiên, bên dưới để biết thông tin chi tiết.)
ảnh quá khổ
Chính sách về quyền truy cập oversized-images hạn chế kích thước nội tại của hình ảnh so với kích thước vùng chứa của hình ảnh đó.
Khi một tài liệu sử dụng chính sách oversized-images, mọi phần tử <img> có độ phân giải nội tại lớn hơn X lần so với kích thước vùng chứa ở một trong hai chiều sẽ được thay thế bằng hình ảnh giữ chỗ.
Tại sao?
Việc phân phát các hình ảnh lớn hơn kích thước mà thiết bị xem có thể hiển thị (ví dụ: phân phát hình ảnh trên máy tính cho bối cảnh thiết bị di động hoặc phân phát hình ảnh có mật độ pixel cao cho thiết bị có mật độ pixel thấp) sẽ gây lãng phí lưu lượng truy cập mạng và bộ nhớ thiết bị. Hãy đọc bài viết Phân phát hình ảnh có kích thước chính xác và Phân phát hình ảnh thích ứng để biết thông tin về cách tối ưu hoá hình ảnh.
Ví dụ
Một vài ví dụ minh hoạ điều này. Phần dưới đây minh hoạ hành vi mặc định khi cắt giảm một nửa kích thước hiển thị của hình ảnh.
Nếu áp dụng chính sách về quyền sau đây, tôi sẽ nhận được hình ảnh phần giữ chỗ.
Permissions-Policy: oversized-images *(2);
Tôi nhận được kết quả tương tự nếu tôi chỉ giảm chiều rộng hoặc chiều cao.
How to use
Tóm lại, bạn có thể chỉ định chính sách oversized-images thông qua một trong hai cách sau:
- Tiêu đề HTTP
Permissions-Policy <iframe>thuộc tínhallow
Để khai báo chính sách oversized-images, bạn cần cung cấp:
- Tên đối tượng,
oversized-images(Bắt buộc) - Danh sách các nguồn (Không bắt buộc)
- Các giá trị ngưỡng (tức là tỷ lệ giảm quy mô X) cho các nguồn gốc, được chỉ định trong dấu ngoặc kép (Không bắt buộc)
Bạn nên dùng tỷ lệ giảm quy mô từ 2 trở xuống. Hãy cân nhắc sử dụng hình ảnh thích ứng có độ phân giải khác nhau để phân phát hình ảnh một cách tốt nhất trên nhiều kích thước màn hình, độ phân giải, v.v.
Ví dụ khác
Permissions-Policy: oversized-images *(2.0)
Chính sách này được thực thi trên tất cả các nguồn gốc có giá trị ngưỡng là 2.0. Mọi phần tử <img> có hình ảnh có tỷ lệ giảm quy mô lớn hơn 2.0 đều không được phép và sẽ được thay thế bằng hình ảnh phần giữ chỗ.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
Chính sách này được thực thi trên nguồn gốc của trang web với giá trị ngưỡng là 1,5.
Các phần tử <img> trong ngữ cảnh duyệt web cấp cao nhất và ngữ cảnh duyệt web lồng nhau cùng nguồn gốc sẽ chỉ hiển thị bình thường nếu tỷ lệ giảm quy mô nhỏ hơn hoặc bằng 1,5. Các phần tử <img> ở những nơi khác sẽ hiển thị bình thường.
hình ảnh {lossy,lossless} không được tối ưu hoá
Chính sách về tính năng unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict hạn chế kích thước tệp của một hình ảnh so với độ phân giải nội tại của hình ảnh đó:
unoptimized-lossy-images- Các định dạng bị mất không được vượt quá tỷ lệ byte trên mỗi pixel là X, với mức cho phép chi phí cố định là 1KB. Đối với hình ảnh W x H, ngưỡng kích thước tệp được tính là W x H x X + 1024.
unoptimized-lossless-images- Định dạng không tổn hao không được vượt quá tỷ lệ byte trên mỗi pixel là X, với mức cho phép chi phí cố định là 10KB. Đối với hình ảnh W x H, ngưỡng kích thước tệp được tính là W x H x X + 10240.
unoptimized-lossless-images-strict- Định dạng không tổn hao không được vượt quá tỷ lệ byte trên mỗi pixel là X, với mức cho phép chi phí cố định là 1 KB. Đối với hình ảnh W x H, ngưỡng kích thước tệp được tính là W x H x X + 1024.
Khi tài liệu sử dụng bất kỳ chính sách nào trong số này, mọi phần tử <img> vi phạm quy tắc ràng buộc sẽ được thay thế bằng hình ảnh giữ chỗ.
Tại sao?
Kích thước tải xuống càng lớn thì thời gian tải hình ảnh càng lâu. Bạn nên giữ kích thước tệp nhỏ nhất có thể khi tối ưu hoá hình ảnh: loại bỏ siêu dữ liệu, chọn định dạng hình ảnh phù hợp, sử dụng tính năng nén hình ảnh, v.v. Hãy đọc các bài viết Sử dụng Imagemin để nén hình ảnh và Sử dụng hình ảnh WebP để biết thông tin về cách tối ưu hoá hình ảnh.
Ví dụ:
Phần sau đây cho thấy hành vi mặc định của trình duyệt. Nếu không có chính sách về quyền, hình ảnh bị tổn hao không được tối ưu hoá có thể hiển thị giống như hình ảnh được tối ưu hoá.
Nếu áp dụng chính sách về quyền sau đây, tôi sẽ nhận được hình ảnh phần giữ chỗ.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
Nếu bạn mới sử dụng chính sách về quyền, vui lòng xem nội dung Giới thiệu về chính sách về quyền để biết thêm thông tin chi tiết.
Tóm lại, bạn có thể chỉ định các chính sách unoptimized-{lossy,lossless}-images thông qua:
- Tiêu đề HTTP
Permissions-Policy <iframe>thuộc tínhallow
Để khai báo chính sách unoptimized-{lossy,lossless}-images, bạn cần cung cấp:
- Tên đối tượng, ví dụ:
unoptimized-lossy-images(Bắt buộc) - Danh sách các nguồn (Không bắt buộc)
- Các giá trị ngưỡng (tức là tỷ lệ byte trên mỗi pixel X) cho các nguồn gốc, được chỉ định trong ngoặc đơn (Không bắt buộc)
Bạn nên dùng tỷ lệ byte trên mỗi pixel từ 0,5 trở xuống đối với unoptimized-lossy-images và tỷ lệ byte trên mỗi pixel từ 1 trở xuống đối với unoptimized-lossless-images và unoptimized-lossless-images-strict.
Các định dạng WebP có tỷ lệ nén tốt hơn các định dạng khác. Phân phát tất cả hình ảnh của bạn ở định dạng WebP có tổn hao nếu có thể. Nếu vẫn chưa đủ, hãy dùng thử định dạng không tổn hao WebP. Hãy dùng JPEG trên các trình duyệt không hỗ trợ định dạng WebP. Hãy dùng PNG nếu không có định dạng nào phù hợp.
Nếu bạn đang sử dụng định dạng WebP, hãy thử áp dụng các ngưỡng nghiêm ngặt hơn:
- 0.2 cho WEBPV8
- 0,5 cho WEBPL
Ví dụ khác
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
Chính sách này được thực thi trên tất cả nguồn gốc với giá trị ngưỡng là 0,5 (đối với định dạng có tổn hao) và 1 (đối với định dạng không tổn hao). Mọi phần tử <img> có hình ảnh có tỷ lệ byte trên mỗi pixel vượt quá quy tắc ràng buộc đều không được phép và sẽ được thay thế bằng hình ảnh phần giữ chỗ.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
Chính sách này được thực thi trên điểm gốc của trang web với giá trị ngưỡng là 0,3 (đối với định dạng có tổn hao) và 0,8 (đối với định dạng không tổn hao). Các phần tử <img> trong ngữ cảnh duyệt web cấp cao nhất và ngữ cảnh duyệt web lồng nhau cùng nguồn gốc sẽ chỉ hiển thị bình thường nếu tỷ lệ byte trên mỗi pixel đáp ứng các hạn chế này. Các phần tử <img>
ở những vị trí khác sẽ hiển thị bình thường.
Chế độ chỉ báo cáo trong môi trường tự do
Bạn có thể không muốn xuất bản một trang web có hình ảnh giữ chỗ. Bạn có thể sử dụng các chính sách này ở chế độ thực thi (với hình ảnh không được tối ưu hoá sẽ hiển thị dưới dạng hình ảnh phần giữ chỗ) trong quá trình phát triển và thử nghiệm, đồng thời sử dụng chế độ chỉ báo cáo trong phiên bản chính thức. (Xem Báo cáo chính sách về quyền để biết thêm thông tin chi tiết.) Tương tự như tiêu đề HTTP Permissions-Policy, tiêu đề Permissions-Policy-Report-Only cho phép bạn quan sát các báo cáo vi phạm ở chế độ tự nhiên mà không cần thực thi.
Các điểm hạn chế
Chính sách hình ảnh chỉ áp dụng trên các phần tử hình ảnh HTML (<img>, <source>, v.v.) và chưa được hỗ trợ trên hình nền hoặc nội dung đã tạo. Nếu bạn muốn chúng tôi hỗ trợ chính sách cho những nội dung rộng hơn, vui lòng cho chúng tôi biết.
Tối ưu hoá hình ảnh
Tôi đã nói khá nhiều về cách tối ưu hoá hình ảnh nhưng chưa nói cách thực hiện. Chủ đề đó nằm ngoài phạm vi của bài viết này, nhưng bạn có thể tìm hiểu thêm qua các đường liên kết bên dưới và các lớp học lập trình được liệt kê ở cuối bài viết.
Vui lòng gửi ý kiến phản hồi cho chúng tôi
Hy vọng bài viết này đã giúp bạn hiểu rõ về các chính sách về hình ảnh và giúp bạn thông cảm. Chúng tôi thực sự muốn bạn dùng thử các chính sách và cho chúng tôi biết ý kiến phản hồi.
Bạn có thể gửi ý kiến phản hồi cho chúng tôi về từng tính năng nêu trong bài viết này tại danh sách gửi thư của chúng tôi: feature-control@chromium.org.
Chúng tôi rất muốn biết bạn đã sử dụng những giá trị ngưỡng nào và thấy hữu ích. Chúng tôi muốn biết liệu unoptimized-lossless-images hoặc unoptimized-lossless-images-strict có trực quan và dễ sử dụng hơn hay không, hoặc liệu chúng ta có nên sử dụng mức hao tổn khác biệt. Chúng tôi sẽ gửi một
bản khảo sát gần hết thời gian dùng thử. Hãy tiếp tục theo dõi!