Trong bài này, chúng ta sẽ cùng nhau tìm hiểu cách tối ưu hình ảnh để cải thiện tốc độ tải trang web.
Bước đầu tiên là chọn đúng định dạng: WebP cho ảnh tĩnh, AVIF cho ảnh cần nén mạnh.
Sau đó, resize ảnh về đúng kích thước hiển thị trước khi upload, không nên để ảnh 4000px rồi CSS resize.
Tại sao tối ưu ảnh quan trọng?
Công cụ đề xuất
- Squoosh.app — web miễn phí
- Sharp — CLI nhanh
- ImageMagick — đa nền tảng
- Lazy loading
- CDN
- HTTP cache headers
Ảnh tĩnh
Ảnh động
TL;DR
Dùng WebP/AVIF, resize ảnh đúng kích thước, lazy-load ảnh ngoài viewport.
Tốc độ là tính năng.
