Responsive Images: Hướng dẫn thẻ picture, srcset, WebP và tối ưu Retina

CD
Đăng ngày 05/07/2026 · Cập nhật 05/07/2026 · 4 phút đọc
#CSS #HTML5

Hình ảnh responsive (responsive images) là kỹ thuật phục vụ ảnh phù hợp với kích thước màn hình và mật độ điểm ảnh (DPR) của thiết bị, giúp trang web load nhanh hơn và tiết kiệm băng thông.

1. Thẻ <picture> cơ bản

Thẻ <picture> cho phép trình duyệt chọn ảnh dựa trên kích thước màn hình, thông qua thẻ <source> với thuộc tính media="(max-width: ...)". Trình duyệt đọc các thẻ source từ trên xuống và chọn cái đầu tiên khớp.

<picture>
  <!-- Tải khi màn hình <= 768px -->
  <source media="(max-width: 768px)" srcset="mobile.jpg">

  <!-- Tải khi màn hình <= 1200px -->
  <source media="(max-width: 1200px)" srcset="tablet.jpg">

  <!-- Mặc định cho desktop -->
  <img src="desktop.jpg" alt="Mô tả" style="max-width:100%;height:auto;">
</picture>

2. Kết hợp với WebP

Thêm type="image/webp" vào thẻ <source>. Đặt WebP lên trước, JPG dự phòng bên dưới. Trình duyệt kiểm tra media trước, type sau. Nếu không hỗ trợ WebP, tự động fallback xuống JPG.

<picture>
  <!-- WebP Mobile -->
  <source media="(max-width: 768px)" srcset="mobile.webp" type="image/webp">

  <!-- WebP Tablet -->
  <source media="(max-width: 1200px)" srcset="tablet.webp" type="image/webp">

  <!-- WebP Desktop -->
  <source srcset="desktop.webp" type="image/webp">

  <!-- Fallback JPG Mobile -->
  <source media="(max-width: 768px)" srcset="mobile.jpg">

  <!-- Fallback JPG Tablet -->
  <source media="(max-width: 1200px)" srcset="tablet.jpg">

  <img src="desktop.jpg" alt="Mô tả" style="max-width:100%;height:auto;">
</picture>

3. Tối ưu cho màn hình Retina 2x, 3x

Dùng ký hiệu 1x, 2x, 3x trong srcset. Trình duyệt tự động chọn ảnh dựa trên DPR của thiết bị.

<picture>
  <source media="(max-width: 768px)"
    srcset="mobile.webp 1x, mobile-2x.webp 2x, mobile-3x.webp 3x"
    type="image/webp">

  <source media="(max-width: 1200px)"
    srcset="tablet.webp 1x, tablet-2x.webp 2x"
    type="image/webp">

  <source srcset="desktop.webp 1x, desktop-2x.webp 2x"
    type="image/webp">

  <source media="(max-width: 768px)"
    srcset="mobile.jpg 1x, mobile-2x.jpg 2x, mobile-3x.jpg 3x">

  <source media="(max-width: 1200px)"
    srcset="tablet.jpg 1x, tablet-2x.jpg 2x">

  <img src="desktop.jpg" alt="Mô tả" style="max-width:100%;height:auto;">
</picture>

4. Tóm tắt nguyên tắc

  • Sắp xếp <source> từ breakpoint nhỏ đến lớn
  • Đặt thẻ WebP lên trước thẻ JPG
  • Luôn có thẻ <img> ở cuối làm fallback
  • Thêm style="max-width:100%;height:auto;" cho thẻ img
  • Xuất ảnh nhiều kích thước: 320px (1x), 640px (2x), 960px (3x)
  • Dùng Squoosh, ImageOptim để batch resize và chuyển WebP

Tham khảo: MDN: thẻ picture | CSS Grid Layout | Web Accessibility