Chọn theo nhiệm vụ mà hình ảnh phải thực hiện
Bắt đầu từ tài sản, không phải phần mở rộng. Ảnh chụp (photograph) là nội dung tông liên tục, nên một số mất mát (loss) có thể chấp nhận ở kích thước hiển thị. Ảnh chụp màn hình, biểu đồ, logo, hoặc bản vẽ đường nét có các cạnh sắc nét và văn bản, nơi artifact dễ bị nhận thấy. Giữ chúng với đầu ra lossless hoặc phê duyệt cẩn thận. Dùng SVG cho logo hay sơ đồ vector khi có thể.
Sau đó xác định các khả năng. Alpha nghĩa là trong suốt theo từng điểm ảnh. Animation là chuỗi khung hình. Phạm vi trình duyệt cần hỗ trợ, khối lượng xuất bản, và thời gian build là các ràng buộc phân phối có thể ghi đè lên việc chọn định dạng nhỏ hơn.
Thử AVIF và WebP lossy trước. Giữ JPEG sẵn sàng khi cần một fallback mờ tương thích rộng.
Giữ bản nguồn lossless. So sánh PNG với WebP hoặc AVIF lossless ở tỉ lệ hiển thị thực tế trước khi quyết định.
Dùng AVIF, WebP hoặc PNG; không dùng JPEG vì nó không chứa kênh alpha.
Hiểu mỗi định dạng đóng góp gì
AVIF lưu trữ ảnh mã hóa AV1 trong một định dạng dựa trên HEIF. Tiêu chuẩn của nó bao gồm ảnh tĩnh, chuỗi ảnh, và các mục ảnh có alpha. Nó hỗ trợ mã hóa lossy và lossless, trong suốt và animation. Mức tiết kiệm không cố định: nội dung nguồn, bộ mã hóa (encoder), tốc độ, mục tiêu chất lượng và metadata sẽ thay đổi kết quả.
WebP hỗ trợ chế độ lossy và lossless, trong suốt và animation. JPEG là định dạng ảnh tĩnh lossy với hỗ trợ lịch sử rất rộng, hữu ích như fallback cho ảnh opaque. PNG là lossless với alpha, làm nó trở thành fallback vững chắc cho đồ họa cần độ chính xác điểm ảnh, mặc dù PNG cho ảnh chụp thường không hiệu quả. PNG thông thường là tĩnh; thử một định dạng hoạt hình riêng khi cần chuyển động.
Nên thử cho các ảnh raster giá trị cao, nơi việc giảm băng thông có thể biện minh cho công việc mã hóa và dự phòng.
Hữu dụng như một tùy chọn raster hiện đại đa năng, bao gồm trong suốt và chuỗi hoạt ảnh.
Dùng làm fallback cho ảnh chụp opaque, không dùng cho logo hoặc ảnh cắt có trong suốt.
Dùng cho fallback raster lossless có trong suốt và cho tài sản mà độ trung thực điểm ảnh quan trọng hơn số byte tối thiểu.
Xây dựng đường dự phòng thay vì đặt cược vào một định dạng duy nhất
Thẻ picture cho phép trình duyệt đánh giá các lựa chọn thay thế. Đặt AVIF trước, sau đó WebP, rồi img fallback ở JPEG hoặc PNG, cùng kiểu MIME đúng. Trình duyệt sẽ bỏ qua source không được hỗ trợ và dùng fallback khi không có source nào khả dụng. Giữ cùng text thay thế (alt) có ý nghĩa trừ khi bạn có ý định thay đổi vùng cắt.
Fallback định dạng không thay thế cho việc đáp ứng kích thước. Cung cấp các ứng viên theo chiều rộng và một giá trị sizes trung thực khi vị trí hiển thị thay đổi. Bao gồm width và height để trình duyệt dành không gian. Một tệp định dạng nhỏ ở kích thước pixel quá lớn vẫn lãng phí byte.
AVIF trước, WebP sau, rồi JPEG cho ảnh opaque hoặc PNG khi fallback cần trong suốt hoặc cạnh lossless.
Nếu máy chủ chọn định dạng dựa trên khả năng yêu cầu thay vì markup picture, hãy cấu hình phân biệt cache hợp lệ và kiểm tra rằng mỗi client nhận được biểu diễn có thể giải mã.
Dùng một client không có bộ giải mã ưa thích hoặc vô hiệu hóa cố ý một nguồn trong môi trường staging; xác nhận rằng hình ảnh, kích thước và text thay thế vẫn chính xác.
Dự trù thời gian mã hóa và bảo vệ chất lượng thị giác
Nén hiện đại chuyển công việc sang quá trình mã hóa. Bộ mã hóa tham chiếu của AVIF cung cấp dải tốc độ từ 0 (chậm nhất) đến 10 (nhanh nhất); WebP cũng đánh đổi công việc encoder để đạt thời gian, dung lượng đầu ra và chất lượng. Xem việc tái mã hóa hàng loạt hoặc biến đổi on-demand là quyết định vận hành, không phải cài đặt miễn phí.
Đặt chính sách lặp lại được theo lớp tài sản và xem lại nguyên bản ở các kích thước hiển thị phổ biến. Kiểm tra khuôn mặt, chuyển tiếp màu (gradients), văn bản, cạnh, và biên trong suốt. Giữ bản master và ghi lại phiên bản encoder và các thiết lập để khi có lỗi có thể tái tạo và rollback.
Mã hóa nhanh hơn có thể giảm áp lực build nhưng có thể tạo tệp lớn hơn hoặc nén kém hiệu quả hơn; đo điểm chuẩn (benchmark) trên tập nguồn của bạn.
Một điểm số hoặc preset không thể thay thế việc kiểm tra thị giác các vùng ảnh mang ý nghĩa với người truy cập.
Biến thay đổi định dạng hình ảnh thành một thực hành độ tin cậy chủ động
Với Status Is UP, tối ưu hình ảnh là công việc chủ động liên quan tới uptime khi nó ngăn một lần phát hành làm suy giảm trang quan trọng. Lập danh mục URL hình ảnh quan trọng, staging một phép chuyển đổi đại diện, và kiểm tra type nội dung, hành vi CDN, và làm mới cache trước khi chuyển toàn trang.
Triển khai theo lô có thể đảo ngược. So sánh hiển thị và hành vi truyền trên bản candidate phát hành, rồi giữ biểu diễn cũ cho tới khi đường dẫn mới được chứng minh. Nếu một biến đổi hoặc luật cache thất bại, phục hồi nguồn đã biết tốt. Đây là hướng phân phối phục hồi, không phải mệnh lệnh bắt buộc dùng AVIF hay nhiều định dạng.
Ưu tiên hình ảnh lead và các hình ảnh nội dung ảnh hưởng tới first useful view, không phải mọi ảnh lưu trữ cùng lúc.
Giữ tên tài sản xác định hoặc ánh xạ có phiên bản để có thể khôi phục nhanh đường dẫn JPEG, PNG hoặc WebP trước đó.