Portimg Insights

How to Optimize Images for SEO Without Losing Quality

Date
Read time4 min read
How to Optimize Images for SEO Without Losing Quality

Learn how to optimize images for SEO without losing quality. Boost site speed, rank higher, and keep visuals stunning with our step-by-step guide!

Images affect search rankings in two distinct ways that are worth keeping separate. The first is page speed — large, unoptimised images slow down page load times, which affects both user experience and how Google scores the page. The second is indexability — how well Google can understand what an image shows, which affects whether it appears in image search and whether it reinforces the relevance of the surrounding content. Both matter, and the fixes for each are different.

Page speed: format, size, and compression

The fastest improvement most sites can make is switching from JPG and PNG to WebP. WebP produces files roughly 25–35% smaller than JPG at equivalent visual quality and is supported by all major browsers. For most web use cases, this single change — converting images to WebP before uploading — reduces image payload significantly with no visible quality loss.

AVIF compresses better than WebP (typically 20–50% smaller than JPG) but has narrower support in older software. Worth using if your audience is on modern browsers; fall back to WebP if you're unsure.

After format, dimensions matter more than most people realise. An image that's 3000px wide served in an 800px column sends nearly four times more pixels than the browser uses. Resize images to their actual display dimensions before uploading. Portimg's resize tool handles this without any software.

Then compress. For photographs in WebP or JPG, quality settings of 75–85% are generally indistinguishable from the original at screen sizes. The image converter handles both format conversion and compression in one step.

For serving multiple formats based on browser support, the HTML <picture> element handles this without server configuration:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description of the image">
</picture>

Add loading="lazy" to images below the fold — this defers loading until the user scrolls toward them, reducing the initial page load time without affecting images the user sees immediately.

Indexability: alt text, file names, and structured data

Google can't reliably interpret image content from pixels alone. Alt text and file names are the primary signals it uses to understand what an image shows and how it relates to the surrounding content.

Alt text should be a brief, accurate description of what the image depicts. It serves two purposes simultaneously: it tells search engines what the image shows, and it's read aloud by screen readers for visually impaired users. Both uses require accuracy above all. Write what the image actually shows, include relevant terms where they fit naturally, and avoid stuffing in keywords that don't describe the image. A product photo alt text like "black leather running shoes on white background" is accurate and useful. "Buy best running shoes cheap leather footwear" is neither.

File names are a minor signal but worth getting right since it costs nothing. Descriptive, hyphenated names — black-leather-running-shoes.webp — are marginally better than camera-generated names like IMG_4823.jpg for both search indexing and file management. Use hyphens rather than underscores, since Google treats hyphens as word separators.

Structured data helps for specific content types. Product pages can use schema markup to make images eligible for rich results in Google Shopping. Recipe pages with images can use recipe schema to appear in visual recipe results. If you're running an ecommerce site or a recipe blog, implementing the relevant schema for your image content is worth the implementation effort.

Auditing what you have

Google's PageSpeed Insights and Chrome's built-in Lighthouse tool both flag image-specific issues with specific file size savings estimates — which images are oversized, which are in suboptimal formats, which are missing lazy loading. Running a Lighthouse audit on your key pages gives you a prioritised list of which images to fix first rather than working through them arbitrarily.

For sites with many images already uploaded in unoptimised formats, a CDN with image optimisation — Cloudflare and Bunny.net both offer this — can convert and compress images on delivery without requiring you to re-upload everything. Worth considering if re-processing a large existing library manually isn't practical.

Image ToolsPDFTutorial
Found this helpful?

Try Portimg's free tools

Convert, compress, and edit images and PDFs — no sign-up needed.

Explore tools