1. Phân loại hình ảnh trước khi tối ưu
Kiểm kê hình ảnh theo mẫu trang. Ghi lại vai trò của từng ảnh, chiều rộng hiển thị lớn nhất và nhỏ nhất, trạng thái trong khung nhìn ban đầu, và liệu màn hình nhỏ có cần crop khác hay không. Việc này biến công việc giảm kích thước file thành các quyết định bạn có thể kiểm thử trên các trang quan trọng.
Ảnh chụp thường chịu được nén lossy sau khi xem xét. Logo, biểu tượng giao diện, đồ họa đường nét, và biểu đồ có thể phù hợp với SVG hoặc định dạng raster bảo toàn cạnh sắc. SVG phù hợp cho đồ họa đường nét, sơ đồ và biểu đồ, không phải ảnh chi tiết.
Giữ chi tiết thiết yếu và cung cấp văn bản chuyển tải mục đích của ảnh.
Dùng văn bản thay thế rỗng; không biến ảnh trang trí thành nguồn duy nhất của thông tin quan trọng.
Nêu hành động hoặc đích đến, không chỉ mô tả các pixel của ảnh.
2. Kích thước theo ô hiển thị, rồi cung cấp các ứng viên đáp ứng
Khớp kích thước nội tại (intrinsic) với ô CSS. File cỡ desktop trong thẻ card hẹp sẽ lãng phí băng thông; raster nhỏ bị kéo căng quá mức sẽ mờ. Tính đến tỷ lệ điểm ảnh thiết bị (device pixel ratio), nhưng xác thực bằng mắt thay vì giả định mọi màn hình cần ứng viên lớn nhất.
Với một bố cục (composition) ở nhiều chiều rộng, dùng srcset với mô tả chiều rộng (width descriptors) và sizes để khai báo chiều rộng ô thực tế. Trình duyệt sẽ chọn ứng viên. Dùng picture cho art direction: crop trên màn hình nhỏ giữ chủ thể thì khác với chỉ phóng nhỏ ảnh desktop. Giữ thẻ img có src và alt làm dự phòng bên trong picture.
Cùng bố cục, khác kích thước pixel.
Crop hoặc bố cục khác khi thu nhỏ che mất thông điệp.
Giữ src trên img cho các client không dùng thuộc tính responsive.
3. Chọn định dạng và nén theo đặc tính ảnh
WebP và AVIF có thể giảm dung lượng raster trong các trường hợp thích hợp, nhưng định dạng không tự động đảm bảo chất lượng. Thử trên các gương mặt đại diện, kết cấu mịn, gradient thương hiệu, chữ đã hợp nhất vào ảnh và vùng trong suốt (transparency). JPEG vẫn là fallback phổ biến cho ảnh; PNG phù hợp cho chi tiết raster lossless hoặc trong suốt. Kiểm tra mức hỗ trợ AVIF và phù hợp vận hành cho đối tượng và hệ thống phân phối của bạn.
Nén lossy loại bỏ thông tin để tiết kiệm byte và thường dung thứ hơn trên ảnh chi tiết so với đường nét sắc hay chữ. Nén lossless bảo toàn pixel mã hóa nhưng có thể tiết kiệm ít hơn. Chọn chất lượng bằng so sánh trực tiếp song song ở kích thước hiển thị, không chỉ dựa vào một con số. Loại bỏ metadata chỉ sau khi xác nhận hướng, màu, và nhu cầu workflow.
So sánh lossy AVIF, WebP và JPEG làm fallback ở kích thước hiển thị.
Ưu tiên SVG phù hợp hoặc bảo vệ cạnh raster sắc qua kiểm thử.
Xác nhận xuất hiện alpha trong mọi định dạng và fallback được giao.
4. Thẻ đánh dấu bảo vệ tốc độ và ổn định bố cục
Cho mọi ảnh nội dung thuộc tính width và height khớp tỉ lệ khung hình nội tại. Trình duyệt có thể dự trữ chỗ trước khi file tới, giảm dịch chuyển bố cục. CSS vẫn có thể đặt kích thước hiển thị.
Dùng loading=lazy chỉ cho các ảnh ngoài khung nhìn ban đầu. Không lazy-load ảnh có khả năng hiển thị ngay khi tải, đặc biệt là ảnh có thể là Largest Contentful Paint (LCP). LCP là thời điểm render của ảnh, khối văn bản, hoặc video lớn nhất hiển thị trong viewport. fetchpriority=high chỉ là gợi ý tương đối; dùng tiết kiệm và đo lường kết quả. Dùng thẻ hình ảnh HTML cho nội dung cần alt hoặc phát hiện; Google ghi rõ rằng nó không lập chỉ mục ảnh CSS.
Đặt width và height, kể cả trên ảnh gallery lazy-loaded.
Giữ ảnh có khả năng LCP tải ngay và kiểm tra độ ưu tiên yêu cầu.
Lazy-load ảnh ngoài màn hình và kiểm thử cuộn trên mạng giới hạn.
5. Bảo toàn ý nghĩa, khả năng phát hiện và chất lượng hình ảnh
Văn bản thay thế phụ thuộc vào mục đích và ngữ cảnh. Mô tả thông tin thiết yếu cho ảnh thông tin, dùng alt="" cho trang trí, và nêu chức năng của ảnh liên kết hoặc nút. Với biểu đồ hoặc sơ đồ phức tạp, cung cấp phần giải thích tương đương trong văn bản gần đó. Không dùng danh sách từ khóa.
Với ảnh nội dung có thể phát hiện, dùng phần tử hình ảnh HTML chuẩn, văn bản gần đó liên quan, tên file mô tả ngắn khi thực tế, và nguồn dự phòng với thẻ responsive. Không biến nền trang trí thành nội dung thừa chỉ để dễ phát hiện.
Xem xét file đã nén ở kích thước lớn nhất và nhỏ nhất dự định.
Ưu tiên văn bản thực; nếu không thì cung cấp văn bản tương đương.
Đặt ảnh thông tin gần văn bản trang liên quan.
6. Xác minh trang, không chỉ tài sản
Kiểm thử các trang đại diện ở viewport hẹp và rộng. Trong developer tools của trình duyệt, kiểm tra ứng viên srcset, kích thước truyền, kích thước hiển thị, và dịch chuyển bố cục. Throttle mạng để lộ ra ảnh hero đến muộn và gallery chậm. Một so sánh export không thể tiết lộ một giá trị sizes không chính xác, crop bất ngờ, hoặc vấn đề biến đổi trong sản xuất.
Dùng tín hiệu lab và field khi có. Lighthouse và PageSpeed Insights có thể nhận diện ảnh cỡ không đúng; field LCP phản ánh lượt truy cập thực theo thời gian. So sánh cùng mẫu, lớp thiết bị, phiên bản phát hành và cửa sổ đo lường. Đừng gán công cho ảnh khi thời gian máy chủ, script, font, hoặc bên thứ ba cũng thay đổi. Triển khai thay đổi mẫu dùng chung có giai đoạn và giữ đường lui cho tới khi xác thực.
Xác nhận ô không chọn một ứng viên lớn hơn mong đợi.
Kiểm tra crop, độ nét, màu, phương án thay thế, và ổn định bố cục.
Đặt tên người sở hữu, tín hiệu mong đợi, và đường lui.