The usual cause of a slow page is not the code but a 4 MB photo displayed in a 700-pixel column. The browser downloads every pixel whether it shows them or not. Fixing that is two steps: match the pixel size to the layout, then use a modern format.
This page sets WebP output, quality 78 and a 1600-pixel width, which covers a full-width content image on a high-density laptop screen. Smaller slots, like cards and thumbnails, can go to 800 or 400.
How to prepare images for a site
Find the display size
Right-click the image on your site, inspect it, and note its rendered width. Double that for sharp results on high-density screens.
Set the max width
Enter that number here. Leave WebP as the output unless your platform needs JPG.
Replace the originals
Upload the new files and check the page with a speed test.
What smaller images change
Largest Contentful Paint
The main image is often the LCP element. A lighter file shows up sooner, which Google measures in the field.
Mobile visitors
On slow connections, every megabyte saved is seconds saved.
Sizes for common slots
Full-width hero: 2000–2400 px. Content column image: 1200–1600 px. Card or grid thumbnail: 600–800 px. Avatar: 200–400 px. These are doubled from typical display sizes for high-density screens.
Also set width and height attributes on the img tag, and lazy-load images below the first screen. Those stop layout jumps and save bandwidth for images nobody scrolls to.
Web image budgets
| Slot | Width | Target size |
|---|---|---|
| Hero | 2000–2400 px | 200–400 KB |
| Content image | 1200–1600 px | 100–200 KB |
| Thumbnail | 600–800 px | 30–80 KB |
Web image questions
What is the best image size for a website?
The largest size it is displayed at, doubled for high-density screens. For a full-width content image that is usually 1600 pixels.
Should website images be WebP or JPG?
WebP for nearly every site today. Keep JPG only if your platform cannot serve WebP.
How do I fix “properly size images” in PageSpeed?
Resize each flagged image to the width it is displayed at (doubled), using the max width box here, and replace the file.
Does compressing images help SEO?
Indirectly. Faster loading improves Core Web Vitals and user experience, both of which matter to search.