Chính sách hình ảnh về thời gian tải nhanh và nhiều lợi ích khác

Sử dụng các chính sách về 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.

Luna Lu
Luna Lu

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 số byte được tải xuống trên một 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.

Đá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 được nén kém hoặc có kích thước lớn không cần thiết. Điều này giúp cải thiện hiệu suất chỉ bằng việc tối ưu hoá hình ảnh.

Bạn có thể hỏi, làm cách nào để biết liệu hình ảnh của tôi đã được tối ưu hoá hay chưa và làm cách nào để tối ưu hoá hình ảnh? Chúng tôi đang thử nghiệm một bộ chính sách tính năng mới để tối ưu hoá hình ảnh: oversized-images, unoptimized-lossy-images, unoptimized-lossless-imagesunoptimized-lossless-images-strict. Tất cả đều đã có sẵ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 quyền sẽ ra mắt một bộ quy định hạn chế mới đối với hình ảnh có thể được áp dụng bằng cách thực thi trong thời gian phát triển. Những 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 phần giữ chỗ, giúp bạn dễ dàng 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 đang ghi nhận các lỗi vi phạm thông qua báo cáo. (Xem phần Chế độ chỉ báo cáo trong thực tế bên dưới để biết thông tin chi tiết.)

hình ảnh quá khổ

Chính sách quyền oversized-images hạn chế các kích thước nội tại của hình ảnh liên quan đến 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 hình ảnh lớn hơn so với nội dung mà thiết bị xem có thể hiển thị (ví dụ: phân phát hình ảnh máy tính cho bối cảnh trên 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ẽ làm 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 với kích thước chính xácPhâ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ụ

Sau đây là một vài ví dụ minh hoạ điều này. Phần sau đây cho thấy hành vi mặc định khi cắt kích thước hiển thị của hình ảnh một nửa.

Hành vi đổi kích thước mặc định.
Hành vi đổi kích thước mặc định.

Nếu áp dụng chính sách quyền sau, tôi sẽ nhận được hình ảnh giữ chỗ.

Permissions-Policy: oversized-images *(2);

Khi hình ảnh quá lớn so với vùng chứa.
Khi hình ảnh quá lớn so với vùng chứa.

Tôi nhận được kết quả tương tự nếu chỉ giảm chiều rộng hoặc chiều cao.

Chiều rộng đã đổi kích thước Chiều cao đã đổi kích thước
Đổi kích thước chiều rộng và 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:

  • Tiêu đề HTTP Permissions-Policy
  • Thuộc tính allow <iframe>

Để khai báo chính sách oversized-images, bạn cần cung cấp:

  • Tên tính năng oversized-images (Bắt buộc)
  • Danh sách nguồn gốc (Không bắt buộ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 đơn (Không bắt buộc)

Bạn nên sử dụng tỷ lệ giảm quy mô không vượt quá 2.0. Hãy cân nhắc sử dụng hình ảnh thích ứng với nhiều độ phân giải để phân phát hình ảnh hiệu quả 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 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 kích thước nhỏ hơn hoặc bằng 1,5. Các phần tử <img> ở mọi nơi khác sẽ hiển thị bình thường.

unoptimized-{lossy,lossless}-images

Chính sách của các 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 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 có tổn hao không được vượt quá tỷ lệ byte trên pixel là X, với mức hao tổn 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
Các định dạng không suy hao không được vượt quá tỷ lệ byte trên pixel là X, với mức hao tổn cố định là 10 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 + 10240.
unoptimized-lossless-images-strict
Các định dạng không suy hao không được vượt quá tỷ lệ byte trên pixel là X, với mức hao tổn 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.

Khi một 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 phần 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 bài viết Sử dụng Imagemin để nén hình ảnhSử dụng hình ảnh WebP để biết thông tin về cách tối ưu hoá hình ảnh.

Ví dụ:

Dưới đây là hoạt động mặc định của trình duyệt. Nếu không có chính sách quyền, hình ảnh bị mất dữ liệu chưa được tối ưu hoá có thể hiển thị giống như hình ảnh được tối ưu hoá.

So sánh hình ảnh được tối ưu hoá với một hình ảnh chưa được tối ưu hoá.
So sánh hình ảnh được tối ưu hoá với hình ảnh chưa được tối ưu hoá.

Nếu áp dụng chính sách quyền sau, tôi sẽ nhận được hình ảnh giữ chỗ.

Permissions-Policy: unoptimized-lossy-images *(0.5);

Khi hình ảnh chưa được tối ưu hoá.
Khi hình ảnh không được tối ưu hoá.

How to use

Nếu bạn mới làm quen với chính sách về quyền, vui lòng xem bài viết Giới thiệu về Chính sách quyền để biết thêm thông tin chi tiết.

Tóm lại, bạn có thể chỉ định chính sách unoptimized-{lossy,lossless}-images thông qua:

  • Tiêu đề HTTP Permissions-Policy
  • Thuộc tính <iframe> allow

Để khai báo chính sách unoptimized-{lossy,lossless}-images, bạn cần cung cấp:

  • Tên tính năng, ví dụ: unoptimized-lossy-images (Bắt buộc)
  • Danh sách nguồn gốc (Không bắt buộc)
  • Giá trị ngưỡng (tức là tỷ lệ byte trên pixel X) cho các nguồn gốc, được chỉ định trong dấu ngoặc đơn (Không bắt buộc)

Bạn nên sử dụng tỷ lệ byte trên mỗi pixel từ 0,5 trở xuống cho unoptimized-lossy-images và tỷ lệ byte trên mỗi pixel từ 1 trở xuống cho unoptimized-lossless-imagesunoptimized-lossless-images-strict.

Định dạng WebP có tỷ lệ nén tốt hơn so với các định dạng khác. Phân phát tất cả hình ảnh ở định dạng có tổn hao WebP nếu có thể. Nếu vẫn chưa đủ, hãy thử định dạng WebP không suy hao. Sử dụng JPEG trên các trình duyệt không hỗ trợ định dạng WebP. Sử 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ử sử dụng các ngưỡng nghiêm ngặt hơn:

  • 0,2 đối với WEBPV8
  • 0,5 đối với 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ả các nguồn gốc có giá trị ngưỡng là 0,5 (đối với định dạng mất dữ liệu) và 1 (đối với định dạng không mất dữ liệu). Mọi phần tử <img> có hình ảnh có tỷ lệ byte trên mỗi pixel vượt quá giới hạn đều không được phép và sẽ được thay thế bằng hình ảnh 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 nguồn gốc của trang web với giá trị ngưỡng là 0,3 (đối với các định dạng có tổn hao) và 0,8 (đối với các định dạng không có 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 pixel đáp ứng các quy tắc ràng buộc này. Các phần tử <img> ở mọi nơi khác sẽ hiển thị bình thường.

Chế độ chỉ báo cáo trong thực tế

Bạn có thể không muốn xuất bản một trang web có ảnh giữ chỗ. Bạn có thể sử dụng các chính sách ở chế độ thực thi (với hình ảnh chưa được tối ưu hoá hiển thị dưới dạng hình ảnh phần giữ chỗ) trong quá trình phát triển và tạo bản dựng, đồng thời sử dụng chế độ chỉ báo cáo trong môi trường phát hành chính thức. (Hãy xem phần Báo cáo về Chính sách về quyền để biết thêm 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 trên thực tế mà không cần thực thi.

Các điểm hạn chế

Các chính sách về hình ảnh chỉ hoạt độ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 được tạo. Nếu bạn muốn các chính sách được hỗ trợ cho nhiều nội dung 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ề việc 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à khiến bạn hào hứng. Chúng tôi rất mong bạn dùng thử các chính sách này và phản hồi cho chúng tô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 được đề cập 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 rất muốn biết liệu unoptimized-lossless-images hay unoptimized-lossless-images-strict trực quan và dễ sử dụng hơn, hay chúng ta nên sử dụng mức chênh lệch chi phí hao tổn. Chúng tôi sẽ gửi một bản khảo sát vào cuối thời gian dùng thử. Hãy tiếp tục theo dõi!