Image optimization trong web: các kỹ thuật phổ biến?

Image optimization là một trong các cách hiệu quả nhất để giảm page weight và cải thiện LCP.

• Modern formats: WebP nhỏ hơn JPEG 25-34%, AVIF nhỏ hơn 50% nhưng encode chậm hơn; dùng <picture> element với fallback cho browser không support.
• Responsive images: srcset='image-400.webp 400w, image-800.webp 800w' với sizes='(max-width: 600px) 400px, 800px' — browser chọn đúng size cho device; next/image tự động generate.
• Correct sizing: không serve 2000px image cho 400px container — lãng phí bandwidth 25x; dùng Image CDN (Cloudinary, Imgix) để resize on demand theo URL params.
• Compression: lossy (JPEG quality 80 thường indistinguishable từ 100), lossless (PNG, WebP lossless); tools: Squoosh, Sharp (Node.js), ImageMagick.
• Lazy loading: loading='lazy' cho below-fold images; không lazy load LCP image.
• Preload LCP: <link rel='preload' as='image' href='hero.webp' imagesrcset='...' imagesizes='...'> cho critical images.
• LQIP (Low Quality Image Placeholder): show tiny blurred placeholder trong khi load — next/image placeholder='blur' prop.
• CDN và edge: serve images từ locations gần users; modern Image CDNs auto-convert format, resize, compress based on device.
• Sprites: combine nhiều icons thành một file — giảm HTTP requests; ngày nay SVG sprites hoặc icon fonts phổ biến hơn.