Hình ảnh là yếu tố quan trọng nhất của một trang web tốt. Chúng thu hút sự chú ý, làm nội dung dễ chia sẻ hơn và thúc giục người dùng hành động (mua sản phẩm).
Tuy nhiên, thêm ảnh độ phân giải cao hoặc dung lượng lớn làm web chậm và trải nghiệm người dùng kém. Không có lý do gì cho trải nghiệm kém khi có vô số công cụ nén ảnh mà không mất chất lượng nhận thấy và thậm chí tự động hóa quy trình.
Bài này chỉ cho bạn nhiều cách tối ưu ảnh cho web, đặc biệt cho WordPress.
Chọn Đúng Định Dạng File
JPEG và PNG là hai định dạng ảnh phổ biến nhất trên Web. JPEG là định dạng nén thường dùng cho ảnh nhiều màu, trong khi PNG tốt hơn cho ảnh có chữ, minh họa, logo, screenshot và ảnh trong suốt. Định dạng thường gặp khác là GIF — phù hợp ảnh ít màu hoặc vùng màu đồng nhất lớn. GIF ngày nay chủ yếu dùng cho ảnh động.
Phần mềm chỉnh ảnh cho phép lưu nhiều định dạng. Chọn đúng định dạng đảm bảo ảnh sắc nét nhất, nâng cao trải nghiệm người dùng.
Dùng Kích Thước Và Độ Phân Giải Phù Hợp
Cẩn thận khi thêm ảnh. Thực hành tốt nhất: lưu ảnh cùng chiều rộng/cao với hiển thị trên web và dung lượng nhỏ nhất có thể mà không mất chất lượng.
Nén Ảnh Trước Khi Tải Lên
Nhiều công cụ giúp nén ảnh trước khi upload lên server. Photoshop có tính năng "Save for Web & Devices" chọn định dạng và chất lượng, hiển thị dung lượng file khi áp dụng cài đặt. GIMP và công cụ khác cũng có tùy chọn tương tự.
Công cụ nén online: Picresize, Kraken.io, TinyPNG — upload ảnh độ phân giải cao, tối ưu, tải về dạng nén cho web.
Nén Ảnh Sau Khi Tải Lên
Có vài plugin cho mục đích này, phổ biến là WP Smush — tối ưu JPEG, PNG, GIF riêng lẻ hoặc hàng loạt qua server riêng. Nó loại bỏ metadata và màu không dùng để giảm dung lượng. Phiên bản miễn phí giới hạn ảnh 1MB, nâng cấp Pro cho phép tới 5MB.
Plugin tuyệt vời khác: EWWW Image Optimizer — chuyển đổi ảnh sang định dạng tạo dung lượng nhỏ nhất.
Còn nhiều plugin khác trên kho WordPress, tự khám phá. Hai plugin trên tôi đã dùng, đều tốt, nên đủ cho bạn.
Gắn Thẻ (Tag) Ảnh Đúng Cách
Ngoài resize ảnh, cách tuyệt vời cải thiện trải nghiệm là gắn thẻ ảnh đúng. Luôn dùng thuộc tính alt nếu ảnh không load được hoặc cho màn hình đọc (screen reader) — người truy cập nhận mô tả văn bản. Giúp công cụ tìm kiếm lập chỉ mục ảnh tốt hơn, có thể mang lại traffic tìm kiếm đáng kể.
Thêm caption (chú thích) khi cần thiết cũng giúp người truy cập hiểu ảnh tốt hơn. Đặt title tag mô tả và tên file ảnh phù hợp giúp tương tự. Thay vì lưu ảnh "FXSCSUYE.jpg", dùng tiêu đề/tên mô tả có từ khóa liên quan chủ đề/web. Tốt cho SEO.
Lazy Loading (Tải Lười)
Lazy Loading kỹ thuật nhiều web dùng để tiết kiệm băng thông: chỉ tải ảnh khi người dùng cuộn đến khung nhìn của ảnh. Ảnh đầu tiên load ngay, các ảnh khác chờ đến khi người dùng gần khu vực ảnh. Thêm tính năng này tiết kiệm băng thông cho bạn và người dùng, tăng tốc trang. BJ Lazy Load là plugin tốt thêm Lazy Loading cho WordPress.
Sử Dụng Mạng Phân Phối Nội Dung (CDN)
Dùng CDN giảm tải server đáng kể và tăng hiệu suất web. CDN phục vụ tài nguyên từ server gần vị trí người dùng yêu cầu. Ví dụ: khách từ Beijing yêu cầu ảnh, CDN bạn có server tại Seoul và Sydney, ảnh sẽ phục vụ từ server Seoul.
MaxCDN là CDN đánh giá cao, còn CloudFlare, CDN.net...
Tóm Lại
Tối ưu ảnh cho web là cách lớn nhất cải thiện tốc độ tải trang và trải nghiệm người dùng tổng thể. Nếu bạn có kỹ thuật tối ưu khác, hãy chia sẻ ở bình luận bên dưới.