Vì sao Next.js khuyên dùng `next/image` thay cho thẻ `<img>` thường? Khi nào `<img>` vẫn chấp nhận được?

next/image là một <img> được bọc thêm bốn thứ mà tự làm tay rất tốn công:

• Chuyển định dạng và resize theo yêu cầu: server sinh ra bản WebP/AVIF đúng kích thước màn hình đang xem, thay vì bắt điện thoại tải ảnh 3000px.
• Chống layout shift: bắt buộc khai báo width/height (hoặc fill), nên trình duyệt giữ sẵn chỗ → không đẩy nội dung khi ảnh về, giữ CLS thấp.
• Lazy load mặc định: ảnh ngoài viewport không tải cho tới khi cuộn tới.
• priority cho ảnh hero để nó được preload, phục vụ LCP.

import Image from 'next/image'

<Image src="/hero.jpg" width={1200} height={630} alt="Product hero" priority />

<img> vẫn ổn khi: ảnh là SVG icon nhỏ, ảnh đã tối ưu sẵn từ CDN riêng, hoặc bạn self-host mà không muốn trả chi phí xử lý ảnh.

Khi đó vẫn nên tự đặt width/height và loading="lazy" — đó mới là phần thực sự quan trọng.