How to optimize your website's images

The checker reads the <img> tags in your homepage's HTML. Three of these findings appear in the Speed tab and one, missing alt text, in the Search (SEO) tab. Each one only appears on a page with enough images for the pattern to matter, so a page with two images won't be flagged. For the rest of the speed picture, see how to speed up a slow website.

Images have no width and height

Minor Shown in the checker's Speed tab as “… of … images have no width/height”.

The checker flags the page when it has at least 3 images and more than half of them are missing a width or height attribute.

Why it matters

Without the two numbers, the browser doesn't know how much room an image needs until the file arrives. It lays out the text first, then pushes it down when each picture loads, which is how people end up tapping the wrong button. Google measures this jumping as Cumulative Layout Shift (CLS), one of its Core Web Vitals, and a good score is 0.1 or less. The fix Google recommends is to always set width and height on images and videos (web.dev: optimize CLS).

How to fix it

Put the image's real pixel size in the tag. It doesn't fix the display size: with the CSS below, the image still shrinks to fit a phone, and the browser uses the two numbers to reserve the right shape.

<img src="/img/storefront.jpg" width="1200" height="800" alt="Our shop on Main Street">

/* in your stylesheet */
img { max-width: 100%; height: auto; }

WordPress

Since version 5.5, WordPress adds missing width and height to images in post and page content when it knows the file's size (WordPress developer reference). Images the checker still flags usually come from the theme, a slider or a page builder, or were pasted in as raw HTML. Check the image settings in the builder, or ask whoever maintains the theme.

Wix, Squarespace and Shopify

These platforms write their own image code. If the finding appears there, it is usually from custom code or an app you added; remove or fix that embed.

How to check it's fixed

Run the checker again. In Lighthouse, the audit “Image elements do not have explicit width and height” should pass, and the CLS number should drop.

Every image loads at once

Minor Shown in the checker's Speed tab as “… images, none lazy-loaded”.

The checker flags a page with 6 or more images where none has loading="lazy".

Why it matters

Without lazy loading, the browser downloads the gallery at the bottom of the page at the same time as the photo at the top, and they compete for the same slow connection. With loading="lazy", the browser waits until an image is close to the screen before fetching it. It is built into all major browsers and needs no plugin or script (web.dev: browser-level lazy loading).

How to fix it

• Add loading="lazy" to images below the first screen: galleries, team photos, logos in the footer. It also works on <iframe> embeds such as maps and videos.
• Don't lazy-load the main image at the top of the page. It is usually what Google times as Largest Contentful Paint, and delaying it makes the page look slower.

<img src="/img/gallery-3.jpg" width="800" height="600" loading="lazy" alt="Finished kitchen with oak cabinets">

WordPress

WordPress has added loading="lazy" by default since version 5.5, but only to images that have width and height (WordPress 5.5 dev note). So if a WordPress site gets this finding, fix the missing dimensions above first; the lazy loading often follows. Images placed by a theme or builder may need the builder's own lazy-load setting.

Older JavaScript lazy loaders

Some older themes lazy-load with a script and data-src attributes. The checker can't see that. Native loading="lazy" does the same job with less code, so it's worth switching when the theme is next updated.

How to check it's fixed

Open Chrome DevTools, go to the Network tab, filter by Img and reload: images further down should only appear in the list as you scroll towards them.

No WebP or AVIF images

Minor Shown in the checker's Speed tab as “No WebP or AVIF images”.

The checker flags a page with 6 or more images when nothing in the HTML refers to a .webp or .avif file or to the image/webp or image/avif types.

Why it matters

WebP and AVIF are newer image formats that store the same picture in fewer bytes. Google's figures for WebP are 25–34% smaller than a comparable JPEG and 26% smaller than PNG for lossless images (Google: WebP). AVIF often compresses further. Smaller files mean the page finishes sooner on a phone.

How to fix it

Before changing formats, check the size: a 4,000-pixel photo straight off a phone, shown 800 pixels wide, wastes far more than the format does. Resize to roughly twice the largest display size, then convert.

WordPress

WordPress accepts WebP uploads since 5.8 (dev note) and AVIF since 6.5, when the server's image library supports it (dev note). An image optimization plugin can convert your existing library and serve the new versions automatically. Back up before running a bulk conversion.

Hand-built sites

Use <picture>, so browsers take the first format they support and older ones fall back to the JPEG (MDN: the picture element):

<picture>
  <source srcset="/img/team.avif" type="image/avif">
  <source srcset="/img/team.webp" type="image/webp">
  <img src="/img/team.jpg" width="1200" height="800" alt="The crew outside the workshop">
</picture>

Cloudflare

Polish, in Cloudflare's image optimization settings, can compress images and, with its WebP option turned on, serve WebP to browsers that support it, keeping the same image addresses (Cloudflare docs). Because the addresses still end in .jpg, the checker can't see this from the HTML; check what arrives instead (below).

Wix, Squarespace and Shopify

These platforms handle image formats on their own servers, and some convert automatically behind the same address. There is usually no setting to change, so check what actually arrives before worrying about it.

How to check it's fixed

In Chrome DevTools, open Network, filter by Img, reload, and read the Type column: webp or avif means it's working, even if the address says .jpg.

Images have no alt text

Minor Shown in the checker's Search (SEO) tab as “… of … images unlabelled”.

The checker flags a page with at least 5 images where more than half have no alt attribute at all. An empty alt="" counts as labelled, because that is the correct way to mark a purely decorative image.

Why it matters

Alt text is what a screen reader says in place of the image, and what shows if the image fails to load. Without it, a blind visitor hears a file name or nothing. Google calls alt text the most important attribute for understanding an image, uses it alongside the page's text, and also reads it as the link text when an image is a link (Google: image SEO).

How to fix it

Describe what the image shows and why it's there, in a short sentence. The W3C's alt decision tree covers the edge cases:

• Photos of your work, team or premises: say what they show. alt="Technician replacing a water heater in a basement", not alt="plumber plumbing Albany plumbers". Google warns that stuffing keywords into alt text can make the site look like spam.
• A logo that links to the homepage: use the business name.
• An image with words in it (a flyer, an offer): put the words in the alt text, or better, in the page itself.
• Pure decoration (dividers, background textures): use alt="" so screen readers skip it.

WordPress

Fill in Alternative Text for each image in the Media Library. The text is copied into a page when you insert the image, so for images already placed, also check the alt text field in that image block's settings.

Wix, Squarespace and Shopify

Each has an alt text or image description field in the image's settings; for Shopify products it sits with each product image. Fill it in the same way.

How to check it's fixed

Run the checker again. Lighthouse's Accessibility score lists any “Image elements do not have [alt] attributes”, and a screen reader (Narrator on Windows, VoiceOver on a Mac or iPhone) lets you hear the page the way a blind visitor does.

Sources

• web.dev: Optimize Cumulative Layout Shift
• web.dev: Browser-level image lazy loading
• Google for Developers: WebP
• MDN: the img element (width, height, loading, alt)
• Google Search Central: Image SEO best practices
• W3C WAI: An alt decision tree
• Make WordPress Core: Lazy-loading images in 5.5

Common questions

Find the images that need work. The website checker counts the images on your homepage that are missing sizes, lazy loading, modern formats or alt text, and shows Google's Lighthouse numbers beside them. Remidiy can also handle it as part of site maintenance.