Trên hầu hết website, ảnh là thứ nặng nhất trên trang, thường lớn hơn cả HTML, CSS và JavaScript cộng lại. Nếu một trang cảm giác chậm, ảnh là nơi đầu tiên cần xem, và cách sửa thường rất nhanh.
Ba kỹ thuật làm gần như toàn bộ công việc: đổi kích thước ảnh về đúng cỡ nó thực sự được hiển thị, nén nó, và phục vụ nó ở một định dạng hiện đại. Áp dụng cùng nhau, chúng thường xuyên cắt trọng lượng ảnh đi 70% hoặc hơn.
Đổi kích thước về đúng cỡ bạn thực sự hiển thị
Đây là sai lầm phổ biến nhất và lãng phí nhất. Một tấm ảnh vừa chụp từ máy ảnh có thể rộng 6000 pixel, nhưng bài viết của bạn hiển thị nó trong một cột rộng 800 pixel. Trình duyệt tải về cả sáu nghìn pixel rồi vứt bỏ phần lớn khi nó thu ảnh cho vừa.
Phục vụ một ảnh 6000 pixel trong một ô 800 pixel có thể nghĩa là tải về nhiều hơn cần thiết gấp năm đến mười lần. Cách sửa rất đơn giản: đổi kích thước tệp về khoảng đúng chiều rộng nó sẽ chiếm, cộng thêm một chút dư cho màn hình mật độ cao.
Một quy tắc thực tế:
- Ảnh hero toàn chiều rộng: 1600–2000 px là quá đủ.
- Ảnh trong bài: 1000–1400 px.
- Ảnh thu nhỏ: 300–500 px.
Dùng Công cụ đổi kích thước ảnh để hạ mỗi ảnh xuống trước khi nó chạm tới trang của bạn. Nó khóa tỷ lệ khung hình nên không gì bị kéo giãn.
Nén để loại bỏ phần thừa
Một khi kích thước đã đúng, nén sẽ loại bỏ chi tiết mắt không thấy được. Với ảnh chụp, chất lượng khoảng 75–85% là điểm ngọt: tệp giảm mạnh trong khi ảnh trông vẫn như cũ. Với đồ họa phẳng và ảnh chụp màn hình lưu dưới dạng PNG, giảm số màu (lượng tử hóa xuống 256 màu) có thể thu tệp về một phần nhỏ của cỡ ban đầu.
Công cụ nén ảnh xử lý cả hai. Nó mã hóa lại JPEG và WebP theo chất lượng, lượng tử hóa PNG, và bảo đảm không bao giờ tạo ra tệp lớn hơn tệp bạn bắt đầu. Nếu bạn có cả một thư viện ảnh, chạy chúng theo lô và tải về một tệp ZIP.
Chuyển sang định dạng hiện đại
Chỉ riêng việc chọn định dạng có thể giảm một nửa tệp. Đây là cách so sánh các lựa chọn thường gặp cho ảnh chụp.
| Định dạng | Kích thước điển hình so với JPEG | Tốt nhất cho |
|---|---|---|
| JPEG | Chuẩn nền | Phương án dự phòng phổ quát; ảnh chụp |
| WebP | Nhỏ hơn ~25–35% | Ảnh chụp và đồ họa; trình duyệt hỗ trợ rộng |
| AVIF | Nhỏ hơn ~50% | Ảnh chụp khi kích thước nhỏ nhất là ưu tiên |
| PNG | Lớn hơn nhiều với ảnh chụp | Logo, biểu tượng, đồ họa phẳng, độ trong suốt |
WebP là mặc định an toàn năm 2026 — mọi trình duyệt hiện tại đều đọc được và nó vượt JPEG một cách thoải mái. AVIF còn nhỏ hơn nữa nhưng mã hóa lâu hơn và mức hỗ trợ hơi hẹp hơn. Công cụ chuyển đổi ảnh cho bạn nhắm tới AVIF và lặng lẽ quay về WebP khi AVIF không phù hợp, nên bạn nhận kết quả tốt nhất có sẵn mà không phải đoán.
Một lưu ý: đừng dùng PNG cho ảnh chụp. PNG tỏa sáng với logo, biểu tượng và bất cứ thứ gì cần độ trong suốt, nhưng với một tấm ảnh chụp nó có thể lớn gấp mấy lần một WebP cùng chất lượng.
Ghép lại với nhau
Một quy trình đáng tin cho bất kỳ ảnh nào dành cho web:
- Đổi kích thước về chiều rộng hiển thị (cộng thêm dư cho màn hình retina).
- Chuyển đổi sang WebP, hoặc AVIF nếu bạn muốn tệp nhỏ nhất có thể.
- Nén ở chất lượng 75–85% để cạo nốt phần thừa cuối cùng.
Làm vậy và một ảnh máy ảnh 5 MB có thể thành một WebP 120 KB trông y hệt trong cột bài viết. Nhân lên trên cả một trang và khác biệt về thời gian tải là rất lớn.
Mọi thứ chạy trong trình duyệt của bạn bằng Canvas và WebAssembly, nên không gì được tải lên và các công cụ vẫn chạy ngoại tuyến sau lần truy cập đầu. Nghĩa là bạn có thể chuẩn bị một thư mục ảnh cho trang của mình mà không phải giao chúng cho bất kỳ máy chủ nào.
Ngoài các tệp
Hai thói quen nữa cũng giúp ích, và chúng không tốn gì:
- Tải lười (lazy-load) các ảnh dưới màn hình đầu bằng
loading="lazy"để trình duyệt chỉ tải chúng khi người đọc cuộn tới gần. - Đặt thuộc tính width và height để bố cục không nhảy loạn trong lúc ảnh tải, điều này cũng giúp điểm Core Web Vitals của bạn.
Muốn biết chính xác ảnh nào đang kéo một trang chậm lại? Hướng dẫn SEO ảnh của chúng tôi bàn về cách kiểm toán, và một lần kiểm tra tốc độ trang sẽ liệt kê những tài nguyên nặng nhất để bạn biết nên nhắm vào đâu trước.