Tại sao HTML5 “picture” và “source” là chìa khóa để tối ưu responsive image

Vấn đề của ảnh truyền thống với <img>

Khi chỉ dùng <img> với một đường dẫn cố định, mọi thiết bị đều phải tải cùng một file. Điều này dẫn đến:

• Thiết bị di động tải file ảnh quá lớn, lãng phí băng thông.
• Màn hình Retina/4K lại hiển thị ảnh mờ nếu chỉ có ảnh nhỏ.
• Khó linh hoạt với định dạng ảnh mới như WebP hay AVIF.

Giải pháp từ <picture> và <source>

Thẻ <picture> hoạt động như một “container” cho nhiều phiên bản ảnh. Bên trong, các thẻ <source> định nghĩa từng nguồn ảnh với điều kiện cụ thể (media query, type). Trình duyệt sẽ chọn ảnh tối ưu nhất, phù hợp với thiết bị và hỗ trợ định dạng.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Mô tả hình ảnh">
</picture>

Trong ví dụ trên, trình duyệt hỗ trợ AVIF sẽ tải image.avif, nếu không thì thử image.webp, cuối cùng fallback về JPEG. Điều này đảm bảo ảnh luôn được tối ưu.

Kết hợp media query cho responsive

Bạn có thể cung cấp ảnh khác nhau theo độ rộng màn hình:

<picture>
  <source media="(min-width: 1024px)" srcset="banner-large.jpg">
  <source media="(min-width: 600px)" srcset="banner-medium.jpg">
  <img src="banner-small.jpg" alt="Banner">
</picture>

Trên desktop, trình duyệt tải ảnh lớn; trên tablet, tải ảnh trung bình; còn điện thoại thì chỉ tải ảnh nhỏ. Nhờ đó tốc độ hiển thị nhanh hơn, UX tốt hơn.

Lợi ích SEO và Core Web Vitals

• Faster LCP (Largest Contentful Paint): Hình ảnh chính tải nhanh hơn, tăng điểm PageSpeed.
• Giảm băng thông: Mobile không phải tải ảnh desktop nặng nề.
• Tương thích định dạng mới: Ưu tiên WebP/AVIF giúp giảm dung lượng 30–50% so với JPEG/PNG.
• Thân thiện SEO: Google ưu tiên site tối ưu tốc độ và responsive image.

Khi nào dùng <picture>, khi nào dùng srcset?

srcset trong <img> đủ cho việc chọn ảnh theo độ phân giải (1x, 2x). Nhưng nếu bạn muốn:

• Hỗ trợ nhiều định dạng ảnh khác nhau.
• Thay đổi hoàn toàn ảnh dựa vào breakpoint (ví dụ banner khác cho mobile/desktop).

Thì <picture> + <source> là giải pháp bắt buộc.

Tóm tắt nhanh

• <picture> và <source> giúp chọn đúng ảnh cho đúng thiết bị và định dạng.
• Tối ưu tốc độ, giảm dung lượng, cải thiện trải nghiệm người dùng.
• Hỗ trợ Core Web Vitals và SEO hiệu quả.
• Dùng khi cần nhiều định dạng (WebP/AVIF) hoặc ảnh khác nhau theo media query.