Guide
How to prepare images for a fast website
Images are usually the heaviest part of a page. The right format, size, and quality often cut a page's weight by more than half without visitors noticing any difference.
Which format to use when
- WebP for most photos and graphics. All modern browsers support it.
- AVIF is even smaller, but encoding takes longer.
- JPEG where you need maximum compatibility, such as in email.
- PNG only for screenshots and graphics with sharp edges.
Size images for where they appear
An image shouldn't be larger than the space it's shown in. A full-width photo needs 1920 px at most, an image in body text 1280 px, and a card thumbnail 800 px. A phone photo is typically over 4000 px wide and several MB in size.
75 to 85% quality
Above 85%, file size grows faster than visible quality improves. Below 70%, artifacts start to show around sharp edges and text. Check the difference with the Compare button.
Don't forget these on your site
The “<img> code” button generates a tag with the correct dimensions for you.
- Specify the width and height, or the layout jumps around while the page loads.
- Lazy-load images below the fold (loading="lazy").
- Write descriptive alt text for accessibility and SEO.