How to optimize images for websites
Images are usually most of a page’s weight. Five decisions fix most of it.
Cập nhật 1 tháng 9, 2026
This guide has not been translated yet and is shown in English. It is excluded from search indexing for this language until it has been.
Images are the largest contributor to page weight on most sites, and the Largest Contentful Paint element is an image on the majority of pages. Optimising them is the highest-leverage performance work available, and most of it is decisions rather than tooling.
This is the order that matters, from biggest effect to smallest.
Các bước
- 1
1. Serve the right dimensions
Measure the largest CSS width the image occupies and export at about twice that for high-density displays. A hero at 1200 CSS pixels needs a 2400px source, not a 6000px camera original. This single step usually beats everything else combined.
- 2
2. Use WebP, with AVIF where you can
WebP is 25–35% smaller than JPEG at matched quality and is supported everywhere. AVIF goes further still but encodes more slowly. Keep a JPEG fallback if you need to support very old clients.
- 3
3. Set quality by content, not by habit
75–85 for photographs. Higher for graphics with sharp edges, where compression artefacts are more visible. Check the result at real display size.
- 4
4. Always set width and height
Explicit dimensions let the browser reserve space before the image loads, which prevents layout shift. This is a Cumulative Layout Shift fix that costs nothing.
- 5
5. Lazy-load below the fold, never above it
Add loading="lazy" to images further down the page. Do not lazy-load your LCP image — that delays exactly the thing being measured.
Strip metadata on export
EXIF and embedded colour profiles add weight for no rendering benefit on the web.
Use SVG for logos and icons
A vector logo is usually a few kilobytes and stays sharp at every size and density.