Image Size and SEO: How Images Affect Speed and Rankings

How images affect a page

Search engines want pages that are useful and pleasant to use. Speed and visual stability are part of the experience, and Google measures them with Core Web Vitals. Three of them matter here:

• LCP (Largest Contentful Paint) – how long the biggest visible element takes to appear. On many pages this is an image. Google’s guidance considers 2.5 seconds or less to be “good”.
• CLS (Cumulative Layout Shift) – how much the page jumps around while loading. Images without dimensions are a classic cause. “Good” is 0.1 or less.
• INP (Interaction to Next Paint) – responsiveness. Heavy image processing on the main thread can contribute, but this is less about image files.

Page experience is one of many signals. Great content that matches what people search for still matters most, so treat speed as removing obstacles rather than a magic ranking switch.

Make files smaller

1. Resize to the display size. A 4000-pixel photo displayed 800 pixels wide wastes most of its bytes. Our measurements showed that halving the width cut a sample JPG by about 72%.
2. Compress. JPG or WebP at quality 75–85 is a common range for photos. See the measured quality-versus-size table.
3. Choose modern formats. WebP was around 20–27% smaller than JPG at the same slider value in our tests. Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF images.

Avoid layout shift: always set width and height

Include the real pixel dimensions on every image tag:

<img src="photo.webp" width="800" height="533" alt="Description">

Browsers use the ratio to reserve space before the image loads, so nothing jumps. You can still make the image responsive with CSS (max-width:100%; height:auto).

Load images at the right time

• loading="lazy" on images below the fold prevents them from delaying the first view.
• Do not lazy-load the main image at the top of the page. It is likely your LCP element. Instead, give it fetchpriority="high".
• Use srcset and sizes to give phones smaller files than desktops. We explain this in responsive images in HTML.

Help search engines understand images

• Alt text should describe the image for someone who cannot see it. Be concrete and short, and do not stuff keywords. Decorative images can have empty alt text.
• File names like blue-ceramic-teapot.jpg are more useful than IMG_4521.jpg.
• Surrounding text matters. Put images near relevant headings and captions.
• Avoid putting important text inside images. Search engines and screen readers cannot rely on it.
• Use standard <img> elements with a src, so crawlers can discover them.

Do image sizes change rankings by themselves?

Not in a simple way. There is no “ideal KB” that earns a ranking. Smaller, faster pages help visitors, and that is why speed is encouraged. Avoid anyone who guarantees ranking improvements from compressing images. Measure with tools such as PageSpeed Insights and the Core Web Vitals report in Google Search Console.

A quick audit checklist

1. Is the biggest image served at about its display size (or 2× for sharp screens)?
2. Does every image have width and height?
3. Is the top image eager, and everything below lazy?
4. Are photos WebP or well-compressed JPG?
5. Do informative images have alt text and sensible file names?
6. Have you removed unnecessary metadata? The Photo Metadata Remover helps and protects privacy.

For the production side, use the Image Resizer and Image Compressor before you upload.

Frequently asked questions