Tối Ưu Hóa Ảnh Để Tăng Tốc Website: Hướng Dẫn Toàn Diện

Ảnh = khoảng 50% trọng lượng trang. Tối ưu hóa ảnh là cải thiện hiệu năng lớn nhất bạn có thể làm.

---

Tại Sao Cần Tối Ưu Hóa Ảnh?

• 53% người dùng mobile rời trang nếu tải mất hơn 3 giây
• Chậm 1 giây = giảm 7% tỷ lệ chuyển đổi
• Core Web Vitals (LCP, CLS) ảnh hưởng trực tiếp đến thứ hạng Google

---

Bước 1: Chọn Đúng Định Dạng

• WebP — tốt nhất cho mọi ảnh web (nhỏ hơn JPEG 25–35%)
• PNG — nền trong suốt, logo, ảnh chụp màn hình
• JPEG — ảnh chụp khi WebP không khả dụng
• SVG — biểu tượng và logo
• AVIF — thế hệ tiếp theo, dùng kết hợp fallback WebP

---

Bước 2: Nén Ảnh

Dùng TinyImg — miễn phí, bảo mật, tức thì.

---

Bước 3: Ảnh Responsive

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

---

Bước 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

Đừng lazy-load ảnh phía trên màn hình. Luôn đặt width/height.

---

Bước 5: Kích Thước Ảnh

<img src="photo.webp" alt="Photo" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Bước 6: Dùng CDN

Cloudflare (gói miễn phí), Cloudinary, imgix, Vercel.

---

Bước 7: Đo Lường Hiệu Năng

• Mục tiêu LCP: dưới 2,5 giây
• Mục tiêu CLS: dưới 0,1
• Tổng dung lượng ảnh: dưới 500KB

Công cụ: PageSpeed Insights, Lighthouse, WebPageTest.

---

Danh Sách Kiểm Tra Tối Ưu Hóa

• Định dạng WebP
• Nén với TinyImg
• srcset + sizes
• Lazy load chỉ cho ảnh phía dưới màn hình
• width + height trên tất cả ảnh
• CDN đã bật
• Kiểm tra PageSpeed Insights

TinyImg — bắt đầu từ đây, hoàn toàn miễn phí.