Tối ưu hình ảnh trong Astro: Beyond the standard Image component

Component <Image /> của Astro là một phép màu. Nó tự động resize, convert format, và lazy load.

Nhưng nếu bạn chỉ dừng lại ở import { Image } from 'astro:assets', bạn mới chỉ đạt điểm 8/10 về performance. Để đạt 10/10 (và điểm xanh tuyệt đối PageSpeed), cần nhiều hơn thế.

1. Local vs Remote Images

Astro optimize Local Images (trong src/assets) tốt hơn nhiều so với Remote Images.

• Local: Astro biết kích thước gốc, tự động tính aspect ratio, generate hash để cache vĩnh viễn.
• Remote: Astro phải fetch về lúc build (hoặc runtime). Cần config image.domains trong astro.config.mjs để cho phép.

Tip: Luôn cố gắng đưa ảnh UI (banner, icon, author) về Local. Chỉ dùng Remote cho content động (CMS).

2. Chiến lược Formats: AVIF first

Mặc định Astro dùng WebP. Nhưng AVIF mới là vua nén ảnh năm 2026.

<Image 
  src={myImage} 
  formats={['avif', 'webp']} 
  alt="A description"
/>

Điều này tạo ra thẻ <picture>: Browser nào hỗ trợ AVIF (Chrome, Firefox, Safari mới) sẽ tải AVIF (nhẹ hơn 30%). Browser cũ fallback về WebP.

3. Art Direction với <picture>

Đôi khi, resize ảnh thôi là không đủ. Banner desktop (16:9) khi thu nhỏ xuống mobile sẽ làm text bé tí không đọc được. Mobile cần một bản crop vuông (1:1).

Astro <Image /> không làm được điều này trực tiếp. Bạn cần dùng function getImage():

---
import { getImage } from "astro:assets";
import myImage from "../assets/banner.png";

const mobileImg = await getImage({
  src: myImage,
  format: "avif",
  width: 600,
  height: 600, // Crop vuông
  fit: "cover", // Quan trọng: Cắt ảnh để vừa khung
});

const desktopImg = await getImage({
  src: myImage,
  format: "avif",
  width: 1200,
});
---

<picture>
  <source media="(max-width: 799px)" srcset={mobileImg.src} />
  <source media="(min-width: 800px)" srcset={desktopImg.src} />
  <img src={desktopImg.src} alt="Banner" class="w-full h-auto" />
</picture>

Đây là cách duy nhất để có trải nghiệm UI hoàn hảo trên mọi thiết bị.

4. Low Quality Image Placeholders (LQIP)

Để tránh cảm giác “trang load giật cục”, hãy hiển thị một phiên bản mờ nhòe (blur) cực nhẹ (1KB) trước.

Hạn chế: Astro chưa build-in LQIP native. Giải pháp: Dùng library astro-imagetools hoặc tự implement script resize ảnh xuống 20px, convert base64, và set làm background-image.

5. Fetch Priority

Với ảnh LCP (ảnh to nhất màn hình đầu tiên), đừng bao giờ loading="lazy". Nó sẽ làm chậm chỉ số LCP.

<Image 
  src={heroImage} 
  loading="eager" 
  fetchpriority="high"  <!-- Quan trọng! -->
  alt="Hero"
/>

Thuộc tính fetchpriority="high" báo cho browser: “Bỏ qua CSS/JS khác, tải cái ảnh này ngay cho tao!”.

Kết luận

Optimize ảnh là nghệ thuật cân bằng giữa chất lượng và tốc độ. Với Astro, bạn có công cụ mạnh nhất trong tay. Đừng lãng phí nó.