Ảnh nhìn gọn trong khung sản phẩm chưa chắc đã là một file nhẹ. Website có thể đang tải ảnh gốc rồi thu nhỏ bằng CSS, khách vẫn phải tải cả phần dung lượng không dùng đến.
Đổi sang WebP là một cách xử lý, nhưng phải đi cùng kích thước, chất lượng và cách trang tải ảnh. Trước khi chuyển cả thư viện, nên chọn một trang đang chậm và xem file thực tế.
Tóm tắt nhanh
- Đo trước: xem file thật trong Network trước khi đổi.
- Đúng cỡ: khung nhỏ dùng bản vừa khung, ảnh mở lớn giữ đủ rõ.
- Xuất WebP rồi so với bản gốc.
- Sau khi thay: kiểm tra URL, loại file, dung lượng và cache.
Đo trước khi đổi định dạng
Hãy mở trang trên điện thoại để xem ảnh nào cần xuất hiện ngay. Mục Network trong công cụ kiểm tra của trình duyệt sẽ cho biết:
- File nào đang tải và dung lượng truyền.
- Thời gian nhận của từng file.
Nếu có cache, ghi rõ từng lần đo để không so hai kết quả trong điều kiện khác nhau. Xem cả ảnh banner, ảnh sản phẩm và ảnh nền. File nằm trong thư viện mà trang không dùng thì chưa phải ưu tiên.
Lưu ý: nhớ giữ bản gốc để còn xuất lại nếu lỡ nén quá tay.
Chọn kích thước theo vị trí hiển thị
Ảnh trong danh sách sản phẩm và ảnh mở lớn phục vụ hai nhu cầu khác nhau:
- Khung nhỏ: chỉ cần bản vừa khung.
- Bản chi tiết: phải đủ rõ để khách xem được chất liệu hay chữ trên sản phẩm.
Xem cách chọn kích thước ảnh trước khi xuất file.
Trên chính 123Website, phần card/grid sản phẩm đã được sửa để chọn cỡ ảnh large thay vì luôn gọi full. Thay đổi nằm ở chỗ dùng ảnh, không chỉ là đổi đuôi file.
Xuất WebP rồi nhìn lại ảnh
Thử trước với nhóm đại diện: ảnh chụp, ảnh có chữ và ảnh cần nền trong suốt. So bản xuất với bản gốc ở đúng kích thước hiển thị, chú ý logo, đường viền và chi tiết dễ nhòe.
Không có một tỷ lệ giảm dung lượng đúng cho mọi ảnh. Nếu bản WebP không nhẹ hơn bao nhiêu hoặc mất chi tiết cần thiết, hãy chỉnh lại cách xuất hoặc giữ định dạng cũ.
Tài liệu WordPress về WebP nêu điều kiện hosting hỗ trợ định dạng này. Upload lỗi thì kiểm tra môi trường xử lý ảnh trước, đừng cài cùng lúc nhiều plugin.
File trong thư viện khác file đang được phục vụ
Sau khi thay ảnh, mở lại trang và xem URL, loại file, kích thước cùng dung lượng trong Network. Trang còn cache có thể vẫn trả về bản cũ.
Nếu website dùng hệ thống chuyển đổi ảnh, hãy xem đầu ra thật của hệ thống đó thay vì đoán từ tên file gốc.
Ví dụ: trên 123Website, gallery được xử lý lazy loading: ảnh dưới màn hình ban đầu có thể chờ tới khi người đọc cuộn gần. Riêng ảnh chính hiện ngay khi mở trang thì không được tải chậm lại. Không nên áp một cách tải cho mọi vị trí.
Đừng bỏ phần người đọc nhìn thấy
- Khung ảnh: chừa đúng tỷ lệ để bố cục không nhảy khi file tải xong.
- Alt: mô tả thông tin hữu ích trong ảnh; ảnh chỉ để trang trí thì xử lý theo cách khác. Đừng nhét từ khóa vào mọi ảnh hay mô tả những điều ảnh không thể hiện.
Trước khi chuyển các nhóm ảnh còn lại, hãy thử trang sản phẩm, trang danh sách và trang có banner trên cả điện thoại lẫn máy tính. Xem ảnh có bị cắt, nền trong suốt có đúng và phần mở lớn có rõ không.
Chốt ai chuẩn bị và ai kiểm tra
- Người cung cấp ảnh: chịu trách nhiệm file gốc và quyền sử dụng.
- Người đăng: chọn đúng vị trí.
- Người triển khai: kiểm tra cách website phục vụ file.
Với thư viện lớn, nên chia đợt theo các trang quan trọng để luôn có điểm dừng và đường lùi.
123Website làm website từ năm 2013. Kinh nghiệm của chúng tôi là phần xử lý ảnh nên được ghi rõ trong phạm vi bàn giao: số lượng ảnh, nguồn và phần phải chỉnh lại. Khi chưa xem thư viện thì không nên hứa một thời lượng cố định.
Nếu anh chị cần rà website đang chạy, hãy gửi URL và trang tải chậm. Sau khi sửa, nên đo lại trong cùng điều kiện. Cũng chưa thể quy mọi thay đổi về lượt liên hệ cho riêng định dạng ảnh.
Đội ngũ 123Website. Chúng tôi thiết kế website và phần mềm doanh nghiệp từ 2013, đã bàn giao 2.000+ dự án.
