How to Optimize Images for Core Web Vitals

Optimize images for Core Web Vitals LCP and CLS — free online tool.

Image requirements change between platforms, and most guides get at least one thing wrong. These are correct.

Image Specifications for Core Web Vitals

SpecificationValue
Hero / banner image1920 × 1080 px
Blog featured image1200 × 628 px
Thumbnail400 × 300 px
Max file size (performance)200 KB
Format (photos)WebP or JPG
Format (graphics/logos)SVG or PNG

Why Image Size Matters for Core Web Vitals

For Core Web Vitals specifically, Get the size right and your images look sharp on every screen and device. Wrong size means blurry, cropped, or rejected uploads.

How to Optimise Images for Core Web Vitals — Step by Step

  1. Open imgresizr.com in any browser — it works on desktop, tablet, and mobile with no installation required.
  2. Click the Optimise tab at the top of the page. For image resizing, use the Resize tab; for file size reduction, use the Compress tab.
  3. Click Upload Image or drag and drop your Core Web Vitals image onto the tool. Your image loads instantly in your browser without being sent to any server.
  4. Enter the target width and height from the specifications table above. Click the padlock icon to lock the aspect ratio — this prevents your image from appearing stretched or squashed.
  5. Click Optimise to process your image. The result appears immediately for preview, check it looks correct before downloading.
  6. If the file size is too large, run the result through the Compress tab to reduce it further without visible quality loss.
  7. Click Download to save your correctly sized image. Upload it to Core Web Vitals. it will display sharply, load quickly, and meet the platform's requirements.

5 Pro Tips for Core Web Vitals Images

  • Use WebP format instead of JPG for web, it delivers up to 30% smaller file sizes at equivalent quality, which directly improves page load time and Core Web Vitals scores
  • Specify explicit width and height attributes on all img tags. this prevents Cumulative Layout Shift (CLS), which is a key Google ranking signal
  • Implement lazy loading for images below the fold; this defers image loading until the user scrolls to them, reducing initial page load time
  • Run Google Lighthouse audits on your pages after adding images, image optimisation is often the single biggest quick win for improving page speed scores
  • Serve responsive images using srcset and sizes attributes. let the browser choose the appropriate image for the screen size rather than always loading the largest version

Frequently Asked Questions

What is the best image size for Core Web Vitals?

The best image size for Core Web Vitals depends on the specific context and display requirements. As a general starting point, 1080 × 1080 px works well for square formats, 1920 × 1080 px for wide-screen displays, and 1080 × 1350 px for portrait formats. Always check the specific requirements of the platform or publication uploading to, as requirements vary significantly.

What file format should I use for Core Web Vitals images?

JPG is the best format for photographs and colourful images, it offers good visual quality at small file sizes. PNG is better for graphics, logos, screenshots, and images with transparent areas, as it preserves sharp edges and text legibility. For web use, WebP is increasingly supported and offers the best quality-to-size ratio of all common formats.

Is imgresizr.com free to use for Core Web Vitals images?

Yes, imgresizr.com is completely free to use. All image processing happens directly in your browser. your images are never uploaded to any server, ensuring complete privacy. There is no account required, no watermarks added to your images, and no limits on how many images you can process.

Conclusion

Correctly sized Core Web Vitals images are one of the easiest wins available to any creator, professional, or business. The specifications in this guide give you everything you need; and the free tools at imgresizr.com make the actual resizing process take less than a minute. Start with the correct dimensions, apply the pro tips above, and your Core Web Vitals images will look their best every time you upload them.

Free Image Tools at imgresizr.com