Login

Tối ưu hình ảnh cho web: định dạng, kích thước, srcset và lazy loading

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Trên hầu hết các website, hình ảnh chiếm phần lớn dung lượng tải về. Một vài tấm ảnh chưa tối ưu có thể làm trang chậm hẳn đi, đặc biệt với người dùng điện thoại và mạng yếu. May mắn là tối ưu ảnh là một trong những việc mang lại hiệu quả cao nhất với công sức bỏ ra khá ít.

1. Chọn đúng định dạng

  • JPEG: phù hợp ảnh chụp, nén có mất mát, tương thích mọi nơi.
  • PNG: nén không mất mát, hỗ trợ nền trong suốt, hợp ảnh chụp màn hình, logo có nhiều màu phẳng nhưng dung lượng thường lớn với ảnh chụp.
  • WebP: định dạng hiện đại, thường nhỏ hơn JPEG và PNG ở chất lượng tương đương, hỗ trợ trong suốt và được các trình duyệt phổ biến hỗ trợ rộng rãi.
  • AVIF: thường nén tốt hơn nữa, nhưng việc mã hóa chậm hơn; nên dùng kèm phương án dự phòng.
  • SVG: ảnh vector cho biểu tượng, logo, hình minh họa đơn giản. Phóng to không vỡ và thường rất nhẹ.

Quy tắc thực dụng: ảnh chụp dùng WebP hoặc AVIF (kèm JPEG dự phòng nếu cần), biểu tượng và logo dùng SVG.

2. Đúng kích thước, không "to hơn mức cần"

Lỗi phổ biến là đưa ảnh 4000 pixel rộng vào khung chỉ hiển thị 400 pixel. Trình duyệt vẫn phải tải toàn bộ ảnh lớn. Hãy xuất ảnh với kích thước tương ứng chỗ hiển thị, tính cả màn hình mật độ điểm ảnh cao (thường nhân đôi chiều rộng hiển thị là đủ).

Về nén, thường chất lượng khoảng 70 đến 85 phần trăm cho JPEG hoặc WebP cho kết quả khó phân biệt bằng mắt thường nhưng nhẹ hơn nhiều. Hãy thử nghiệm với ảnh của bạn để chọn mức phù hợp.

3. Ảnh đáp ứng với srcset và sizes

Thay vì một ảnh cho mọi thiết bị, bạn cung cấp nhiều phiên bản để trình duyệt chọn:

<img
  src='anh-800.jpg'
  srcset='anh-400.jpg 400w, anh-800.jpg 800w, anh-1600.jpg 1600w'
  sizes='(min-width: 1024px) 800px, 100vw'
  width='800' height='450'
  alt='Sinh viên đang học lập trình'
>

srcset liệt kê các file kèm chiều rộng thật (đơn vị w), còn sizes cho trình duyệt biết ảnh sẽ chiếm bao nhiêu chiều rộng màn hình ở từng điều kiện. Từ đó trình duyệt tự chọn file nhỏ nhất vẫn đủ nét. Điện thoại nhận ảnh nhỏ, màn hình lớn nhận ảnh lớn.

4. Phần tử picture cho nhiều định dạng

<picture>
  <source srcset='anh.avif' type='image/avif'>
  <source srcset='anh.webp' type='image/webp'>
  <img src='anh.jpg' width='800' height='450' alt='Mô tả ảnh'>
</picture>

Trình duyệt duyệt từ trên xuống và dùng nguồn đầu tiên nó hỗ trợ; thẻ img cuối cùng là phương án dự phòng và cũng là nơi đặt alt. Picture cũng dùng được để đổi cách cắt ảnh theo kích thước màn hình (art direction) bằng thuộc tính media.

5. Lazy loading

Ảnh nằm dưới màn hình đầu tiên không cần tải ngay. Thuộc tính gốc của trình duyệt làm việc này rất đơn giản:

<img src='anh-duoi-trang.jpg' loading='lazy' width='800' height='450' alt='...'>

Ba lưu ý quan trọng:

  • Không lazy-load ảnh đầu trang (đặc biệt ảnh LCP), vì sẽ làm chậm hiển thị nội dung chính.
  • Luôn khai báo width và height (hoặc aspect-ratio) để giữ chỗ và tránh nhảy bố cục khi ảnh xuất hiện.
  • Với ảnh quan trọng ở đầu trang, bạn có thể thêm fetchpriority='high' để trình duyệt ưu tiên tải.

6. Công cụ hỗ trợ

  • Công cụ dòng lệnh và ứng dụng nén ảnh như Squoosh, ImageMagick, hoặc thư viện Sharp trong Node.js.
  • Framework có sẵn thành phần ảnh: Next.js có next/image tự thay đổi kích thước, chuyển định dạng hiện đại và lazy load theo mặc định.
  • CDN ảnh có khả năng đổi kích thước và định dạng theo yêu cầu qua tham số URL.
  • Lighthouse sẽ chỉ ra ảnh nào đang quá lớn hoặc chưa dùng định dạng hiện đại.

7. Những điều dễ bị bỏ sót

  1. Thuộc tính alt: mô tả nội dung ảnh cho người dùng trình đọc màn hình; ảnh trang trí thuần túy dùng alt='' để bị bỏ qua.
  2. Ảnh nền trong CSS: không có lazy loading gốc và không hỗ trợ srcset, hãy dùng image-set() hoặc cân nhắc dùng thẻ img.
  3. GIF động: thường rất nặng, hãy cân nhắc thay bằng video ngắn (MP4 hoặc WebM) với thuộc tính autoplay, muted, loop, playsinline.
  4. Bộ nhớ đệm: đặt thời hạn cache dài cho ảnh và đổi tên file khi nội dung thay đổi.
  5. Siêu dữ liệu: xóa dữ liệu EXIF không cần thiết (vị trí chụp, thông tin máy) vừa nhẹ hơn vừa bảo vệ quyền riêng tư.

Kết luận

Quy trình gọn cho mỗi tấm ảnh: chọn định dạng hiện đại, xuất đúng kích thước, nén vừa đủ, cung cấp srcset khi cần, khai báo width và height, lazy-load ảnh dưới màn hình và viết alt có ý nghĩa. Chỉ riêng những việc này thường đã cải thiện tốc độ trang rõ rệt.

Để áp dụng những kỹ thuật này vào dự án thật từ đầu đến cuối, bạn có thể tham khảo các khóa học web tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment