Tối ưu ảnh cho website: dung lượng, kích thước, định dạng và alt
Tối ưu ảnh cho website là việc làm ảnh nhẹ nhất có thể mà vẫn đủ nét, đồng thời giúp công cụ tìm kiếm hiểu ảnh nói về gì. Một ảnh chụp điện thoại để nguyên thường nặng vài MB, trong khi ô hiển thị trên trang chỉ cần vài trăm KB. Bài này đưa ra quy trình 5 bước: chọn kích thước, định dạng, mức nén, tên tệp và thẻ alt, kèm vài thiết lập kỹ thuật cho người quản trị web.
Tóm tắt nhanh
- Đổi kích thước ảnh bằng khoảng 2 lần chiều rộng khung hiển thị, ví dụ khung 800 px dùng ảnh 1.600 px.
- Ảnh chụp dùng WebP hoặc JPG; logo, ảnh chụp màn hình dùng PNG hoặc SVG.
- Nén ở chất lượng khoảng 75–85; mục tiêu tham khảo dưới khoảng 200 KB cho ảnh trong bài viết.
- Tên tệp không dấu, có nghĩa; thẻ alt mô tả đúng nội dung ảnh, không nhồi từ khóa.
- Làm nhanh với công cụ nén ảnh: vừa giới hạn kích thước, vừa đổi sang WebP trong một lần.
Vì sao cần tối ưu ảnh cho website?
Hướng dẫn về ảnh của Google Search Central nhận định ảnh thường là phần chiếm dung lượng lớn nhất của trang. Trang chậm làm khách thoát sớm, nhất là khi xem bằng mạng di động.
Google đo trải nghiệm tải trang bằng chỉ số LCP (Largest Contentful Paint): thời gian để phần nội dung lớn nhất trong màn hình đầu tiên hiển thị xong. Theo web.dev, LCP đạt mức tốt khi không quá 2,5 giây ở 75% lượt tải trang. Trên trang sản phẩm hay trang chủ, phần tử lớn nhất đó thường chính là một bức ảnh, nên tối ưu ảnh là cách cải thiện LCP trực tiếp nhất.
Bước 1: Chọn kích thước pixel đúng chỗ hiển thị
Ảnh 4.000 px được trình duyệt thu nhỏ vào khung 800 px vẫn phải tải đủ 4.000 px. Hãy đo chiều rộng thật của khung ảnh trên trang, rồi nhân khoảng 2 lần để ảnh vẫn nét trên màn hình mật độ điểm ảnh cao của điện thoại.
| Loại ảnh | Khung hiển thị thường gặp | Chiều rộng ảnh gợi ý |
|---|---|---|
| Ảnh bìa tràn màn hình | 1.200–1.920 px | 1.920–2.400 px |
| Ảnh trong bài viết | 700–800 px | 1.400–1.600 px |
| Ảnh sản phẩm có phóng to | 500–600 px | 1.200–1.600 px |
| Ảnh thu nhỏ danh sách | 200–300 px | 400–600 px |
Dùng công cụ thay đổi kích thước ảnh để đưa cả loạt ảnh về cùng chiều rộng. Mặc định công cụ khóa tỷ lệ, mỗi ảnh tự tính chiều cao nên không bị méo, và không phóng lớn ảnh nhỏ.
Bước 2: Chọn định dạng ảnh phù hợp
| Định dạng | Hợp với | Lưu ý |
|---|---|---|
| JPG | Ảnh chụp, ảnh sản phẩm | Mở được ở mọi nơi, không có nền trong suốt |
| WebP | Ảnh chụp và ảnh cần nền trong suốt | Thường nhẹ hơn JPG cùng độ nét; trình duyệt hiện đại đều hỗ trợ |
| PNG | Logo, ảnh chụp màn hình, đồ họa ít màu | Không mất dữ liệu nên ảnh chụp sẽ rất nặng |
| SVG | Logo, biểu tượng dạng vector | Sắc nét mọi kích cỡ, không dùng cho ảnh chụp |
| AVIF | Ảnh chụp cần rất nhẹ | Nén tốt nhưng cần kiểm tra hệ thống quản trị web có nhận không |
Google Tìm kiếm hỗ trợ các định dạng BMP, GIF, JPEG, PNG, WebP, SVG và AVIF, và khuyên đuôi tệp nên khớp với định dạng thật. Nếu có ảnh HEIC chụp từ iPhone, đổi sang JPG hoặc WebP bằng công cụ chuyển đổi định dạng ảnh (cần mở bằng Safari trên iPhone, iPad hoặc Mac vì chỉ Safari giải mã được HEIC). Công cụ này đổi qua lại JPG, PNG, WebP, chưa xuất AVIF.
Bước 3: Nén ảnh đúng mức
Với ảnh JPG và WebP, chất lượng 75–85 thường khó phân biệt bằng mắt so với ảnh gốc nhưng nhẹ hơn nhiều. Trong công cụ nén ảnh của Softonline:
- Kéo thả tối đa 20 ảnh vào khung (máy tính), chọn chế độ Cân bằng (chất lượng 80). Cần nhẹ hơn nữa thì chọn Dung lượng nhỏ (60).
- Mở Tùy chọn khác: ở Định dạng đầu ra chọn WebP, bật Giới hạn kích thước và nhập chiều rộng tối đa, ví dụ 1.600 px.
- Kéo vạch so sánh trước/sau ở khung Bản xem trước, bấm 100% để soi chi tiết chữ, viền.
- Bấm nút nén, rồi Tải tất cả (.zip).
Nếu website giới hạn dung lượng mỗi ảnh, chọn chế độ Theo dung lượng và nhập số KB mong muốn; công cụ thử tối đa 7 mức chất lượng để đạt gần nhất. Ảnh kết quả cũng được xóa thông tin EXIF và vị trí GPS, tránh lộ địa chỉ nơi chụp.
Safari không tạo được ảnh WebP. Nếu cần xuất WebP, hãy làm trên Chrome, Edge hoặc Firefox.
Bước 4: Đặt tên tệp và viết thẻ alt
Google khuyên dùng tên tệp ngắn, mô tả nội dung, ví dụ my-new-black-kitten.jpg thay vì IMG00023.JPG. Với tiếng Việt, đặt tên không dấu, nối bằng gạch ngang: coc-gom-men-lam-350ml.webp. Bạn có thể dùng công cụ xóa dấu tiếng Việt ở kiểu "dạng đường dẫn" để tạo tên nhanh.
Thẻ alt là đoạn mô tả ảnh cho người dùng trình đọc màn hình và cho công cụ tìm kiếm. Viết như đang tả ảnh cho người không nhìn thấy:
- Chưa tốt: để trống, hoặc "cốc gốm, cốc gốm đẹp, cốc gốm giá rẻ, mua cốc gốm".
- Tạm được: "cốc gốm".
- Tốt: "Cốc gốm men lam dung tích 350 ml đặt trên bàn gỗ".
Ảnh chỉ để trang trí (đường kẻ, họa tiết) có thể để alt rỗng. Đặt ảnh gần đoạn văn liên quan cũng giúp Google hiểu ngữ cảnh.
Bước 5: Thiết lập khi chèn ảnh vào trang
Phần này dành cho người quản trị hoặc lập trình website:
- Dùng thẻ
<img>cho ảnh nội dung. Google không lập chỉ mục ảnh đặt bằng CSS background. - Khai báo
widthvàheightcho mọi ảnh để trình duyệt giữ chỗ trước, trang không bị nhảy khi ảnh tải xong. - Thêm
loading="lazy"cho ảnh nằm dưới màn hình đầu tiên. Không lazy-load ảnh lớn ở đầu trang vì làm chậm LCP. - Dùng
srcsethoặc thẻ<picture>để trình duyệt chọn ảnh nhỏ cho điện thoại, ảnh lớn cho máy tính, luôn kèm một<img>dự phòng.
Lỗi thường gặp
- Tải ảnh gốc từ điện thoại lên thẳng: ảnh vài MB cho một khung nhỏ.
- Dùng PNG cho ảnh chụp: tệp có thể nặng gấp nhiều lần JPG.
- Nén quá tay: chất lượng quá thấp làm vỡ chữ, viền sản phẩm; luôn xem ở 100% trước khi tải lên.
- Alt sao chép tên sản phẩm cho mọi ảnh: mỗi ảnh nên tả góc chụp, chi tiết riêng.
- Đổi đuôi tệp thay vì đổi định dạng: đổi .png thành .jpg không làm ảnh nhẹ đi.
Câu hỏi thường gặp
Ảnh trên website nên nặng bao nhiêu KB?
Không có con số chuẩn chung. Mục tiêu tham khảo phổ biến là dưới khoảng 200 KB cho ảnh trong bài, vài trăm KB cho ảnh bìa lớn; quan trọng hơn là tổng dung lượng và tốc độ hiển thị của cả trang.
Có nên chuyển hết ảnh sang WebP?
Với ảnh mới thì nên, vì trình duyệt hiện đại đều hỗ trợ. Hãy kiểm tra hệ thống quản trị website của bạn nhận tải lên WebP trước khi chuyển hàng loạt.
Nén ảnh có làm mất thứ hạng tìm kiếm không?
Không. Ảnh nhẹ hơn giúp trang nhanh hơn. Điều cần giữ là ảnh vẫn rõ, đúng nội dung và có alt mô tả.
Ảnh nén có còn thông tin vị trí chụp không?
Ảnh tạo bằng công cụ nén ảnh của Softonline đã bị xóa EXIF và GPS, nên không lộ vị trí nơi chụp.
