Images are almost always the heaviest assets on a page, and they are also consistently under-optimized. In nearly every website audit I run, I find hero images served at 1.8MB in JPEG when WebP would cut the file size by half, missing alt text on images that carry real topical signal, and srcset attributes either absent or misconfigured. Getting image optimization right pays dividends in page speed, Core Web Vitals, and organic search visibility — and most of the fixes are straightforward once you know what to look for.

Choose the Right Format

Format selection is the highest-leverage decision for image file weight:

  • WebP: 25–35% smaller than JPEG at equivalent quality. Supported by all modern browsers. Use this as your default for photographs and hero images.
  • AVIF: 40–50% smaller than JPEG. Superior compression to WebP. Browser support is strong for modern browsers. Worth using on high-traffic landing pages where the weight savings justify the encoding time.
  • PNG: Use only for images that require transparency — logos with transparent backgrounds, UI illustrations. Never use PNG for photographs; the file size is prohibitive compared to lossy formats.
  • SVG: Ideal for logos, icons, and line illustrations. Infinitely scalable with no quality loss and typically very small files. Use wherever the visual can be expressed as vectors.
  • GIF: Avoid for animations. Use MP4 video with autoplay and loop attributes — typically 80–90% smaller than the equivalent GIF at the same visual quality.

Compression Without Visible Degradation

Modern lossy compression can reduce JPEG file size by 60–70% with no visible quality loss at typical viewing distances. A JPEG quality setting of 75–85 in Photoshop, Squoosh, or Sharp is the practical sweet spot for most photographs. Below 70, block artifacts become visible on close inspection; above 85, file size grows without meaningful visual improvement. WebP at equivalent quality settings produces even smaller files, so the first step is switching format, then tuning the compression level.

For WordPress, ShortPixel and Imagify both apply lossy compression on upload and convert to WebP automatically. They are largely set-and-forget for most content-driven sites. For custom builds or high-volume image pipelines, the Sharp library in Node.js handles batch conversion and on-the-fly resizing at production scale with fine-grained quality control.

Serve Images at the Right Dimensions

Serving a 2400px-wide image in a 600px container means the browser downloads 16 times more pixels than it displays. This wastes bandwidth and increases LCP load time directly. Use the srcset attribute to serve size-appropriate versions for different viewport widths:

<img src='/hero-800.webp' srcset='/hero-400.webp 400w, /hero-800.webp 800w, /hero-1600.webp 1600w' sizes='(max-width: 600px) 100vw, 800px' alt='...'>

WordPress generates multiple image sizes automatically on upload and outputs srcset and sizes attributes when you use wp_get_attachment_image() or the_post_thumbnail() with the correct size argument. Verify your theme is actually passing these through to the rendered HTML and not stripping them — some older or heavily customized themes bypass WordPress image functions.

Lazy Loading Below the Fold

Adding loading='lazy' to below-the-fold images defers their download until the user scrolls near them. This reduces initial page payload and speeds up first paint for the content that actually needs to load immediately. WordPress has applied this automatically since version 5.5 for most images. The critical exception: never lazy-load the LCP image. If the hero or the first large image in the content area gets loading='lazy', the browser intentionally delays fetching it, and LCP scores suffer directly. Use loading='eager' or omit the attribute entirely for the first visible image on each page template.

Alt Text for SEO and Accessibility

Alt text serves two purposes: it tells search engine crawlers what the image depicts (contributing topical relevance signals to the page), and it provides a text alternative for screen reader users. Both matter. Write alt text that describes the image specifically and includes the target keyword where it fits naturally in the description — do not keyword-stuff, but do not write generic or empty alt text that provides no information either.

A hero image on a page about technical SEO in Phoenix should have alt text like alt='technical SEO audit checklist on a laptop screen in a Phoenix office' rather than alt='image1' or a string of keywords with no context. The former is useful to both crawlers and screen reader users; the latter is noise that signals a low-quality page. Decorative images — dividers, abstract background textures, UI chrome — should have empty alt text (alt=''), which tells screen readers to skip them. Omitting the attribute entirely causes screen readers to read the filename, which is almost always unhelpful.

File Naming

Use descriptive, hyphenated filenames: technical-seo-audit-phoenix.webp rather than IMG_4821.jpg or shutterstock_1234567.jpg. Crawlers index filenames and use them as a weak relevance signal that supports the surrounding content. Consistent, keyword-relevant filenames are a small but free signal. For stock images, rename the file before uploading rather than using the stock site’s default naming convention.

Image Sitemaps

For image-heavy sites — portfolio sites, e-commerce product catalogs, visual service pages — an image sitemap (or image extension tags in your main XML sitemap) helps Googlebot discover images it might not find through regular crawling. This is particularly useful for images loaded via JavaScript or embedded in complex page structures where the crawler may not execute all rendering paths. Yoast SEO and Rank Math both include image sitemap functionality for WordPress without additional configuration.

Next-Gen Formats and the Picture Element

The <picture> element lets you serve AVIF to browsers that support it and fall back to WebP or JPEG for those that do not, using <source> tags with the type attribute. For most marketing sites, WebP alone covers 96%+ of real-world browser traffic and keeps the implementation simple. AVIF is worth the added markup complexity for image-heavy landing pages where the extra compression savings are significant across high traffic volume.

Image optimization feeds directly into Largest Contentful Paint scores and overall page performance. For how image weight fits into the broader performance picture and delivery stack, see page speed optimization. A full audit will surface every over-budget image on the site — including ones hiding in post content, widget areas, and theme files that are easy to overlook in a manual review.