How to Optimize Images for SEO and Performance

Why Image Optimization Matters

Images account for an average of 50% of total page weight across the web. An unoptimized page with five large JPEG images can easily weigh 3-5MB. That same page optimized with WebP, proper sizing and compression weighs 300-500KB. The difference translates directly into faster load times and better Core Web Vitals.

Google’s image search drives significant traffic for many businesses. Properly optimized images with descriptive alt text and structured data appear in Google Images, image packs within standard search results and visual search features. This traffic represents an often-overlooked acquisition channel.

For WordPress sites, image optimization is the single highest-impact performance improvement you can make. Our WordPress performance optimization guide covers additional speed techniques, but images should be your first priority.

The Core Web Vitals Connection

Images directly affect two of three Core Web Vitals metrics:

• Largest Contentful Paint (LCP): The LCP element is often a hero image. An unoptimized 1MB hero image on a 3G connection takes 8+ seconds to load. Optimized to 100KB in WebP format, it loads in under 2 seconds.
• Cumulative Layout Shift (CLS): Images without explicit width and height attributes cause layout shifts when they load. The browser reserves no space for them, then pushes content down once the image dimensions are known.

Choose the Right Image Format

Format selection is the foundation of image optimization. Each format excels at different types of content.

WebP

WebP is the default choice for most web images in 2026. It delivers 25-35% smaller files than JPEG at equivalent quality and supports both lossy and lossless compression. Browser support exceeds 97% globally. Use WebP for photographs, illustrations and any image that does not require animation.

AVIF

AVIF provides 30-50% better compression than WebP. It produces noticeably smaller files for photographic content. Browser support sits at approximately 93% in 2026. Use AVIF as the primary format with WebP fallback for maximum optimization.

SVG

SVG is the correct format for icons, logos and simple illustrations. SVGs are vector-based, meaning they scale to any size without quality loss. They are typically tiny files (1-10KB) and can be styled with CSS. Never use JPEG or PNG for logos or icons.

PNG

Use PNG only when you need lossless transparency and cannot use WebP or SVG. Screenshots with text benefit from PNG’s lossless compression. In most other cases, WebP with alpha transparency produces smaller files.

JPEG

JPEG serves as the fallback format for browsers that do not support WebP or AVIF. It remains appropriate for email clients and platforms with limited format support. Do not use JPEG as your primary web format when WebP is available.

Implementing Format Fallbacks

Use the <picture> element to serve modern formats with fallbacks:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Team meeting in the Quake Media office"
    width="800" height="533" loading="lazy">
</picture>

The browser selects the first supported format. Every visitor receives the best format their browser handles.

Resize Images Properly

Serving oversized images wastes bandwidth. A 4000px photo displayed in a 600px container forces the browser to download and decode pixels it will never display.

Size to Display Dimensions

Determine the maximum width an image will display at on your site. If your content column is 720px wide, your content images should be 720px wide. Your build tool or CMS should generate appropriately sized versions automatically.

Account for Retina Displays

Retina and high-DPI screens display images at 2x or 3x resolution. A 720px display container needs a 1440px image to look sharp on a 2x display. Use the srcset attribute to provide multiple sizes:

<img
  src="photo-720.webp"
  srcset="photo-720.webp 720w, photo-1440.webp 1440w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Dashboard showing organic traffic growth"
  width="720" height="480"
  loading="lazy">

The browser selects the appropriate size based on viewport and device pixel ratio. Users on standard screens download the smaller file. Users on retina screens get the crisp version.

Generate Multiple Sizes Automatically

Manual resizing is not sustainable. Use tools and workflows that generate multiple sizes from a single source image. WordPress generates thumbnail, medium and large sizes by default. Configure these sizes to match your theme’s actual display dimensions. Plugins like Imagify and ShortPixel handle conversion to WebP format automatically.

Compress Images Effectively

Compression reduces file size by removing data the human eye cannot perceive. The goal is finding the quality level where files are small but visual degradation is invisible.

Lossy vs. Lossless Compression

Lossy compression discards some image data permanently. At quality settings of 80-85%, the visual difference from the original is imperceptible to most viewers. File size reductions of 60-80% are typical. Use lossy compression for photographs.

Lossless compression reduces file size without discarding any data. The decoded image is pixel-identical to the original. Use lossless compression for screenshots, technical diagrams and images where precision matters.

Recommended Quality Settings

Compression Tools

• Squoosh (squoosh.app): Free browser-based tool with real-time preview. Compare original and compressed side by side.
• ShortPixel: WordPress plugin and API that compresses images on upload. Supports WebP and AVIF conversion.
• Imagify: WordPress plugin with bulk optimization. Three compression levels: normal, aggressive and ultra.
• Sharp (Node.js): High-performance image processing library for build pipelines. Handles resizing, format conversion and compression programmatically.

Write SEO-Optimized Alt Text

Alt text serves two critical functions: it describes images for screen reader users and helps Google understand image content. Both audiences need accurate, descriptive text.

Alt Text Best Practices

Write alt text that describes the image’s content and purpose in context. Be specific. Follow the guidelines in blog post SEO best practices for all on-page elements including images.

• Good: alt="Bar chart showing 340% increase in organic traffic from January to December 2025"
• Bad: alt="chart"
• Bad: alt="SEO traffic chart organic traffic growth SEO results graph" (keyword stuffing)

When to Use Empty Alt Text

Decorative images that add no informational value should use empty alt attributes: alt="". This tells screen readers to skip the image entirely. Background patterns, decorative borders and spacer images are decorative. Never leave the alt attribute out entirely. An absent alt attribute and an empty alt attribute have different meanings to screen readers.

Alt Text for Functional Images

Images that function as links or buttons need alt text describing the action, not the image. A search icon button should have alt="Search" not alt="magnifying glass icon". A logo that links to the homepage should have alt="Quake Media homepage".

Include Keywords Naturally

If a keyword fits naturally in the description, include it. Do not force keywords into alt text where they do not belong. Google’s algorithms detect keyword stuffing in alt attributes and it can trigger quality penalties. Write for the human first, search engine second.

Implement Lazy Loading and Priority Loading

Not all images need to load immediately. Smart loading strategies prioritize visible content and defer everything else.

Native Lazy Loading

Add loading="lazy" to all images that appear below the initial viewport. The browser delays loading these images until the user scrolls near them. This reduces initial page weight and speeds up First Contentful Paint and LCP.

Priority Loading for LCP Images

Your hero image or LCP element should load as fast as possible. Add fetchpriority="high" to tell the browser this image is critical. Do NOT add loading="lazy" to LCP images. Also consider adding a preload link in the document head:

<link rel="preload" as="image" href="hero.webp"
  type="image/webp" fetchpriority="high">

Placeholder Strategies

Show low-quality placeholders while full images load. Blurred placeholder images (LQIP) or solid color backgrounds prevent layout shifts and give users visual feedback that content is loading. Generate blur hashes at build time for a smooth loading experience.

Prevent Layout Shifts from Images

Images without explicit dimensions cause Cumulative Layout Shift problems. The browser does not know how much space to reserve until the image loads, then content jumps.

Always Set Width and Height

Add width and height attributes to every <img> element. The browser uses these to calculate the aspect ratio and reserve space before the image loads. CSS can still control the actual display size with max-width: 100% and height: auto.

<!-- Reserve space for the image to prevent CLS -->
<img src="photo.webp" alt="Vancouver skyline"
  width="1200" height="630" loading="lazy"
  style="max-width: 100%; height: auto;">

Use CSS Aspect-Ratio

For responsive images where you want CSS to control sizing, the aspect-ratio property provides another way to reserve space:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

Optimize Images for Google Image Search

Google Image Search drives substantial traffic for visual industries like real estate, food, travel and e-commerce. Optimization for image search requires additional steps beyond standard web optimization.

Descriptive File Names

Name files descriptively before uploading. vancouver-office-interior-design.webp provides context that IMG_4521.webp does not. Use hyphens to separate words. Keep names concise but descriptive.

Image Sitemaps

Include images in your XML sitemap or create a dedicated image sitemap. This helps Google discover images that might not be found through normal crawling, especially images loaded via JavaScript.

Structured Data for Images

Use Schema.org ImageObject markup to provide Google with additional image context. Include the image URL, caption, description, creator and license information. This structured data improves your chances of appearing in rich image results.

Unique, Original Images

Stock photos appear on thousands of websites. Google has no reason to rank your instance of a stock photo. Use original photographs, custom illustrations and branded graphics whenever possible. Original images are more likely to earn image search traffic and backlinks. Investing in quality web development includes investing in original visual assets.

Automate Image Optimization in Your Workflow

Manual optimization does not scale. Build automation into your content publishing workflow.

WordPress Plugins

Install an image optimization plugin that processes images on upload. ShortPixel, Imagify and Smush all offer automatic compression and WebP conversion. Configure them to compress to your target quality level and generate WebP versions alongside originals.

Build Pipeline Integration

For custom-built sites, integrate image processing into your build pipeline. Tools like Sharp (Node.js), Pillow (Python) and ImageMagick handle batch processing. Generate multiple sizes, convert formats and compress in a single automated step during deployment.

CDN-Level Optimization

Services like Cloudflare, imgix and Cloudinary optimize images at the CDN level. They automatically serve the best format based on the visitor’s browser, resize images based on the requesting device and cache optimized versions globally. This approach handles optimization without modifying your source images.

Want a full performance analysis of your site’s images? Request a free audit and we will identify every image optimization opportunity with specific file-by-file recommendations.

Frequently Asked Questions