Tối ưu hóa hình ảnh cho web: Hướng dẫn đầy đủ

Tải trang chậm sẽ giết chết chuyển đổi. Nghiên cứu cho thấy 40% người dùng từ bỏ một trang web có thời lượng hơn 3 giây. Nguyên nhân lớn nhất? Hình ảnh không được tối ưu hóa. Một bức ảnh 5 MB trên trang chủ của bạn có thể làm tăng thời gian tải ngay cả trên các kết nối nhanh.

Danh sách kiểm tra tối ưu hóa hình ảnh

Kích thước phù hợp — không gửi hình ảnh 4000px trong đó bạn hiển thị 800px
Định dạng phù hợp — WebP/AVIF hiện đại, JPG/PNG dự phòng
Nén phù hợp — Chất lượng ảnh đạt 75–85%, đồ họa không bị mất dữ liệu
Giao hàng đúng cách — tải chậm, srcset đáp ứng

Kích thước được đề xuất vào năm 2026

Hình ảnh anh hùng: tối đa 1920×1080 (Full HD) hoặc 2560×1440 (2K)
Người hùng đăng bài blog: 1200×675 (16:9)
Ảnh sản phẩm: 1500×1500 có hỗ trợ thu phóng, hiển thị mặc định 800×800
Hình đại diện: 256×256 (hình thu nhỏ sẽ thu nhỏ lại)
Biểu đồ mở (chia sẻ trên mạng xã hội): 1200×630
Favicon: 32×32, 192×192, 512×512 PNG

Thay đổi kích thước ảnh theo các kích thước này bằng công cụ thay đổi kích thước hình ảnh của chúng tôi trước khi tải lên.

Định dạng: khi nào nên sử dụng cái gì

WebP: Mặc định cho 95% hình ảnh trên web. Nhỏ hơn 25–35% so với JPG ở cùng chất lượng. Hỗ trợ trình duyệt phổ quát.
AVIF: Nhỏ hơn nữa (nhỏ hơn 50% so với JPG). Sử dụng cho hình ảnh anh hùng. Các trình duyệt mới hơn hỗ trợ nó.
JPG: Ảnh không có độ trong suốt. Khả năng tương thích tuyệt vời.
PNG: Biểu trưng, ảnh chụp màn hình, bất kỳ thứ gì có độ trong suốt. Không tổn hao.
SVG: Đồ họa vector, biểu tượng, hình minh họa đơn giản. Kích thước tệp nhỏ, tỷ lệ vô hạn.

Chuyển đổi giữa các định dạng này bằng Chuyển đổi hình ảnh PDF7.

Nén: hung hãn là quá hung hãn như thế nào?

Đối với ảnh: bắt đầu ở chất lượng 85%. Giảm xuống 75% cho các trang có băng thông quan trọng. Dưới 70%, hiện vật sẽ hiển thị. Sử dụng công cụ nén hình ảnh của chúng tôi để tìm sự cân bằng phù hợp.

Hình ảnh phản hồi với srcset

Không phân phối hình ảnh 2K tới điện thoại. Sử dụng thuộc tính srcset của HTML:

Trình duyệt chọn hình ảnh nhỏ nhất phù hợp. Bạn sẽ cần 3 kích cỡ cho mỗi hình ảnh.

Tải chậm

Thêm loading="lazy" vào tất cả hình ảnh trong màn hình đầu tiên. Các trình duyệt hiện đại không tải chúng cho đến khi người dùng cuộn đến gần, tiết kiệm băng thông cho mỗi lần tải trang.

Quy tắc 100KB

Nhắm đến từng hình ảnh có kích thước dưới 100KB. Hình ảnh anh hùng có thể kéo dài tới 200KB. Nếu một bức ảnh có dung lượng lớn hơn 500KB thì bạn đã nhầm lẫn — hãy thay đổi kích thước và nén lại.