Checklist tối ưu hình ảnh cho website

Checklist tối ưu hình ảnh cho website

Hình ảnh giúp giải thích sản phẩm, bài viết và dịch vụ, nhưng tệp quá lớn có thể khiến trang tải chậm và tiêu tốn dữ liệu. Một quy trình nhất quán giúp ảnh vẫn hữu ích mà không gửi tệp lớn không cần thiết đến người truy cập.

1. Bắt đầu từ kích thước hiển thị

Xác định kích thước lớn nhất mà ảnh xuất hiện trong bố cục. Không nên tải ảnh camera rộng 5000 pixel nếu thiết kế chỉ hiển thị vài trăm pixel, trừ khi cần biến thể responsive lớn hơn.

2. Chọn định dạng phù hợp

Dùng JPG cho nhiều ảnh chụp, PNG cho đồ họa trong suốt hoặc sắc nét và WebP khi hệ thống website hỗ trợ. Kiểm tra nhu cầu của trình duyệt cũ, email và biểu mẫu bên thứ ba.

3. Nén và kiểm tra

Nén ảnh rồi kiểm tra chữ, cạnh, vùng chuyển màu và khuôn mặt. Đừng chỉ nhìn vào con số dung lượng. Ảnh rất nhỏ nhưng hỏng rõ rệt không phải là tối ưu tốt.

4. Viết alt text hữu ích

Mô tả thông tin mà ảnh truyền tải khi ảnh có ý nghĩa. Với ảnh trang trí, có thể dùng alt rỗng trong trường hợp phù hợp. Không nhồi nhét từ khóa vào alt text.

5. Phân phối ảnh responsive

Nếu nền tảng hỗ trợ, hãy cung cấp các biến thể kích thước phù hợp với chiều rộng màn hình. Lazy-load ảnh nằm ngoài màn hình đầu tiên, nhưng không trì hoãn ảnh chính ở phần đầu trang một cách không cần thiết.

6. Quản lý tệp rõ ràng

Dùng tên tệp mô tả, giữ tài sản gốc và tạo các biến thể nhất quán cho thumbnail, thẻ nội dung và ảnh đầy đủ.

Checklist cuối

• Kích thước ảnh phù hợp bố cục.
• Định dạng phù hợp nội dung và nơi sử dụng.
• Nén nhưng vẫn giữ chi tiết quan trọng.
• Alt text tự nhiên và hữu ích.
• Có kích thước responsive khi nền tảng hỗ trợ.
• Kiểm tra trang trên mobile và desktop.

Pixvello hỗ trợ chuẩn bị ảnh với công cụ nén, resize và chuyển định dạng.