Large images are still the most common reason a simple site scores badly on Core Web Vitals. You don't need Photoshop to fix it. Here is the workflow I use for blog and landing-page images.
1. Crop to the aspect ratio you actually display
If the layout shows a 16:9 hero, crop to 16:9 first with an image cropper. Shipping a tall photo and letting CSS hide most of it wastes bytes.
2. Resize to the rendered width (x2 for retina)
A hero rendered at 800px wide needs a 1600px source at most. Use a resize tool rather than serving the 4000px original from your phone.
3. Convert to a modern format
WebP is supported everywhere that matters and is usually 25–35% smaller than JPEG at the same quality. An image converter handles PNG/JPG/WebP in the browser.
4. Compress
Run the result through an image compressor. Quality 75–80 is usually indistinguishable from the original on screen.
5. Add real alt text
Describe what the image shows for screen-reader users. If you're stuck, an AI image caption generator gives a starting description you can edit.
Bonus
Set width and height attributes and use loading="lazy" for below-the-fold images to avoid layout shift. These five steps typically cut page weight by more than half.
Top comments (0)