Images often decide whether a page feels fast or slow. They can affect Largest Contentful Paint, layout stability, bandwidth usage and the user’s first impression of a website.
Start with the LCP image
The largest visible image near the top of a page is often the LCP element. If that image is oversized, uncompressed or loaded in the wrong format, the page may feel slow even if the rest of the site is well built.
Use the right dimensions before compression
Compression helps, but resizing matters first. A 3000px-wide image displayed at 700px wastes bandwidth. Export images close to the real display size, then compress or convert them.
Choose WebP for most web images
For production websites, WebP is usually the best default format because it can reduce file size while keeping strong visual quality. Keep PNG for transparency or screenshots, and use JPG when maximum compatibility is more important than modern compression.
Core Web Vitals image checklist
- Resize images to the rendered layout size.
- Compress JPG, PNG and WebP files before publishing.
- Use WebP for most website delivery workflows.
- Add width and height attributes to avoid layout shift.
- Lazy-load below-the-fold images, but not the main hero image.
- Do not convert photos to PNG unless you have a specific reason.
The best result comes from combining the right dimensions, the right format and a quality setting that reduces file size without making the image look damaged.
