</>
⌕
Senior #images#srcset#picture#lazy-loading#performance

Ảnh responsive: `srcset`, `sizes`, `picture` và lazy loading đúng cách

⚡ Trả lời nhanh

srcset kèm sizes để trình duyệt chọn ảnh theo độ rộng hiển thị và DPR; picture cho art direction hoặc đổi định dạng (AVIF/WebP). loading="lazy" trì hoãn ảnh ngoài màn hình, nhưng ảnh LCP phải tải sớm (không lazy, có thể fetchpriority=high) và luôn khai báo width/height để tránh CLS.

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw" />
  <img src="hero-800.jpg" width="800" height="450" alt="Cảnh núi"
       srcset="hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="100vw"
       fetchpriority="high" decoding="async" />
</picture>

<img src="card.webp" width="320" height="180" alt="" loading="lazy" />
  • w descriptor + sizes cho ảnh co giãn theo layout; x descriptor (2x) cho ảnh kích thước cố định.
  • Trình duyệt chọn dòng source đầu tiên khớp; phần tử img luôn bắt buộc làm fallback.
  • width/height cho phép tính tỉ lệ khung trước khi ảnh tải; kết hợp aspect-ratio và max-width: 100%; height: auto trong CSS.
🃏 Ôn bằng flashcard