How to Optimize Images for SEO in 2025: The Complete Step-by-Step Guide

Format choice is the single biggest lever for reducing image file size. In 2025, WebP should be your default format for all web images. It is 25–34% smaller than JPEG for photographs and 26% smaller than PNG for lossless images — at identical visual quality. WebP also supports transparency and animation, so it replaces PNG and GIF as well as JPEG.

WebP is now supported by 97%+ of all browsers, including Chrome, Firefox, Safari (since iOS 14/macOS Big Sur), and Edge. If you still need to support very old browser versions, use the HTML picture element with WebP as the primary source and JPEG/PNG as a fallback.

Google's own PageSpeed Insights tool explicitly flags JPEG and PNG images as candidates for conversion to WebP under the "Serve images in next-gen formats" audit. Addressing this recommendation directly improves your PageSpeed score.

Even in the right format, images can be much larger than necessary. Set a maximum acceptable file size for each image type based on its role on the page:

• Hero/banner images: Aim for under 200 KB (WebP). Most hero images can be under 100 KB with proper sizing and compression.
• Product images: Under 100 KB each. With multiple product images per page, every kilobyte compounds.
• Thumbnail images: Under 30 KB each. These are small, so even WebP at high quality should be tiny.
• Blog post featured images: Under 150 KB at their display dimensions.

For WebP, use 75–85% quality for photographs and content images. At 80% quality — the tool default for our Image to WebP converter — visual differences from the original are imperceptible under normal viewing conditions. Use lossless WebP for logos, icons, and UI elements where sharp edges and flat colors must be preserved perfectly.

One of the most common and costly image optimization mistakes is uploading full-resolution images and letting CSS resize them for display. A 4000×3000 pixel photograph uploaded from a camera and displayed at 800×600 pixels is 25 times more data than necessary. The browser still downloads every pixel, even though most are discarded for display.

Always resize images to the maximum dimensions at which they'll be displayed before uploading. For responsive websites, create multiple sizes and use the srcset attribute to let each device download only the size it needs:

This tells the browser exactly what size image to download based on the viewport width, preventing mobile phones from wasting data on desktop-sized images.

When the browser first loads your HTML, it doesn't know the dimensions of your images until it downloads them. Without width and height attributes, the browser reserves no space for the image — so when the image loads, it pushes other content down, causing a layout shift. This directly harms your Cumulative Layout Shift (CLS) score, a Core Web Vitals metric and ranking factor.

Always include explicit width and height attributes on every img tag: <img src="image.webp" alt="Description" width="800" height="450">. Modern browsers use these values to reserve the correct space before the image loads, eliminating CLS caused by images. You can still use CSS to make images responsive (e.g., max-width: 100%; height: auto;) — the width/height attributes just establish the aspect ratio for the browser.

Alt text (the alt attribute on img tags) serves two critical purposes: it describes images to screen readers for accessibility, and it tells Google what your image is about for image search ranking. Google cannot "see" images — it reads your alt text to understand image content.

Good alt text practices:

• Be descriptive and specific. "Red running shoes with white sole on wooden floor" is better than "shoes" or "product image."
• Include your target keyword naturally if it's genuinely relevant. Don't keyword-stuff.
• Keep it concise — aim for under 125 characters.
• Don't start with "image of" or "picture of" — Google already knows it's an image.
• Leave alt text empty (alt="") for purely decorative images that don't add content value.

Bad example: alt="img1234.webp"
Good example: alt="Lightweight running shoes for marathon training on a wooden background"

Your image file name is another signal Google uses to understand image content. A file named DSC_0042.webp tells Google nothing. A file named marathon-running-shoes-lightweight.webp tells Google exactly what the image shows.

Use lowercase letters, separate words with hyphens (not underscores), and include your primary keyword early in the filename. Keep it descriptive but concise — 3 to 5 words is typically ideal. Rename your images before uploading them, not after (changing a live URL breaks any links and signals to Google that new content was added, which can temporarily affect rankings).

Lazy loading defers the download of images until they're about to enter the user's viewport as they scroll down the page. This means the browser doesn't download images the user may never scroll to, reducing initial page load time dramatically on content-heavy pages.

The HTML loading="lazy" attribute makes lazy loading a one-line change: <img src="image.webp" alt="Description" loading="lazy" width="800" height="450">

Important: Do NOT use lazy loading on your hero image or any image that is visible immediately when the page loads (above the fold). These images must load as fast as possible for your LCP score. Only apply lazy loading to images that are below the fold — typically everything except the hero image and any images in the initial viewport.

For your LCP image (usually the hero), use loading="eager" (or simply omit the loading attribute) and consider adding fetchpriority="high" to tell the browser to prioritize downloading it.

The Largest Contentful Paint (LCP) image — usually your hero or banner image — is the most important image on your page for SEO performance. Google measures the time from page navigation to when this image is fully rendered, and it must be under 2.5 seconds to pass the Core Web Vitals threshold.

One of the most effective optimizations is to tell the browser to start downloading the LCP image as early as possible using a preload link in the head section:

This hint tells the browser about the critical image before it finishes parsing the HTML and CSS, allowing it to start downloading the image earlier in the loading process. Studies show this can reduce LCP by 500ms–2 seconds on many sites.

Google can find images through its regular web crawl, but including image information in your XML sitemap gives Googlebot additional context and can help your images appear in Google Image Search results faster. Use the Image sitemap extension:

This is especially valuable for e-commerce sites where product images need to appear in Google Shopping and Image Search results. Submit your sitemap to Google Search Console after adding image entries.

Schema.org structured data helps Google understand the context and content of your images beyond what alt text alone can communicate. For articles and blog posts, the Article schema includes an image property. For products, Product schema with image properties enables your product images to appear in Google's rich results and shopping features.

At minimum, ensure every significant image on your site has descriptive alt text and a descriptive filename. For high-priority content like articles, products, and recipes, adding full structured data markup significantly increases the chance of appearing in Google's enhanced search features, which display prominently above regular results.