Image SEO Secrets: Alt Text, Compression, and Modern Formats for Faster Loading

Image SEO is the discipline of making every image on your site readable to search engines, fast for users, and optimised for Google Images — and most sites get at least half of it wrong. Missing or meaningless alt text, images three times larger than they need to be, outdated file formats that add unnecessary bytes — these are silent performance killers that slow your page speed, tank your Core Web Vitals, and leave Google without the context it needs to index your visual content. This guide covers every practical step of image SEO: writing alt text that works, choosing the right modern format, compressing without sacrificing quality, sizing images correctly, and adding the structured data that unlocks rich results.

The payoff is twofold — faster pages that rank better and a presence in Google Images that drives an entirely separate traffic stream. Both are achievable without specialist tools or a developer, starting today.

Step 1: Write Alt Text That Works for Search and Accessibility

Alt text — the alt attribute on an <img> tag — serves two purposes: it describes an image to screen readers used by people with visual impairments, and it tells search engines what an image depicts so it can be indexed and ranked in Google Images. Both matter. An image with no alt text is invisible to Googlebot and inaccessible to screen reader users simultaneously.

What makes alt text effective for SEO

Good alt text is specific, descriptive, and naturally includes relevant keywords without stuffing them in artificially. It describes what is actually in the image — not what you wish the image was, not a list of keywords, not a repetition of the page title. Think of it as what you would say to someone on the phone who cannot see the image but needs to understand it.

When to use empty alt text deliberately

Purely decorative images — dividers, background patterns, abstract design elements that convey no information — should use an empty alt attribute: alt="". This signals to screen readers that the image can be safely skipped, and tells Google not to index it as meaningful content. The mistake is leaving out the alt attribute entirely — an absent attribute is different from an empty one and is treated as an error by accessibility validators.

Step 2: Choose the Right Image Format

The format you save your image in is one of the biggest determinants of file size — and therefore load time. Most sites in 2026 should be serving the majority of their images in WebP or AVIF, yet many still default to JPEG and PNG for everything. Each format has a specific best use case.

Serving modern formats with the picture element

Browser support for AVIF is now excellent, but using a <picture> element provides a JPEG fallback for any edge case. The browser picks the first format it supports.

<picture>
  <source srcset="hero-image.avif" type="image/avif">
  <source srcset="hero-image.webp" type="image/webp">
  <img
    src="hero-image.jpg"
    alt="Descriptive alt text describing the image content"
    width="800" height="450"
    loading="lazy"
  >
</picture>

Step 3: Compress Images Without Losing Quality

Compression reduces file size by removing data that the human eye cannot easily detect. Done correctly, a compressed image is visually indistinguishable from the original while being 40–80% smaller in bytes. That size reduction translates directly into faster load times, better LCP scores, and lower bandwidth costs.

Lossy versus lossless compression

Lossy compression permanently removes some image data to achieve smaller files — appropriate for photographs and complex imagery where minor quality reduction is imperceptible. Lossless compression removes only redundant metadata without affecting image quality — used for screenshots, diagrams, and text-heavy images where every pixel matters. Most web images benefit from lossy compression at a quality setting between 75 and 85 for JPEG, or equivalent for WebP and AVIF.

Target file sizes by image type

Step 4: Resize Images to Their Actual Display Dimensions

Compression alone is not enough if the image dimensions are wrong. An image that displays at 800 pixels wide on desktop but is saved at 3,000 pixels wide is making the browser download three times more data than it needs. Resizing — setting the physical pixel dimensions to match or be slightly larger than the maximum display size — is the single most impactful change you can make to image performance.

The rule: save at 2× the CSS display size for retina screens

If an image displays at 800px wide in your layout, save it at 1,600px wide to look sharp on high-density (retina/HiDPI) screens. Anything larger is wasted data. For a typical blog post image with a prose column of 740px, save images at 1,480px wide maximum — not 3,000px, not 5,000px.

Step 5: Serve Responsive Images with srcset and sizes

A single image URL serves the same file to a 375px smartphone and a 2560px desktop monitor. Responsive images fix this by telling the browser which image file to use at each screen width — so mobile users get a small, fast file, and desktop users get a high-resolution one. This is the srcset and sizes attribute system.

<img
  src="blog-image-800w.jpg"
  srcset="
    blog-image-400w.webp  400w,
    blog-image-800w.webp  800w,
    blog-image-1200w.webp 1200w,
    blog-image-1600w.webp 1600w
  "
  sizes="
    (max-width: 600px)  calc(100vw - 32px),
    (max-width: 1060px) calc(100vw - 64px),
    740px
  "
  alt="Descriptive alt text for the image"
  width="800"
  height="450"
  loading="lazy"
>

The srcset attribute lists the available image files and their pixel widths. The sizes attribute tells the browser how wide the image will actually appear at each viewport width. The browser combines both to pick the most efficient file to download — often dramatically reducing data usage on mobile.

• 1
  Generate multiple sizes of each image

  For a typical blog post image, create versions at 400px, 800px, 1200px, and 1600px wide. Tools like Sharp, Cloudinary, or a WordPress plugin with responsive image generation handle this automatically on upload. Manually, use Squoosh or any image editor that allows export at specified widths.
• 2
  Write accurate sizes values for your layout

  The sizes attribute is the piece most developers get wrong — a generic 100vw value tells the browser the image fills the full viewport, so it downloads a large file even on mobile. Measure your actual layout: if the image column is 740px wide on desktop and full-width minus 32px padding on mobile, write those values explicitly.
• 3
  Use your CMS's built-in responsive image handling

  WordPress automatically generates multiple sizes and adds srcset markup for images uploaded through the media library since version 4.4. Verify this is working on your theme by inspecting the HTML of any in-content image. If srcset is absent, your theme may be overriding core image output — check with your theme developer or use a plugin to restore it.

Step 6: Use Lazy Loading Correctly

Lazy loading defers the download of images that are not currently visible in the user's viewport. Instead of the browser downloading every image on the page the moment it starts loading, off-screen images are fetched only as the user scrolls toward them. This can dramatically reduce initial page load time and LCP for pages with many images.

<!-- Hero / above-the-fold image: EAGER (default) -->
<img src="hero.webp" alt="..." loading="eager" fetchpriority="high">

<!-- Below-fold images: LAZY -->
<img src="section-image.webp" alt="..." loading="lazy">

Step 7: Name Your Image Files for SEO

Google reads image filenames as a signal about image content — they contribute to how images are categorised and ranked in Google Images. A filename like DSC00421.jpg tells Google nothing. A filename like on-page-seo-checklist-for-beginners.webp reinforces the image's topic and the page's keyword focus simultaneously.

Image file naming rules

• Use descriptive, lowercase words separated by hyphens — never underscores or spaces
• Include the primary keyword naturally — not stuffed, not repeated
• Keep it concise: three to six words is typically enough to be descriptive
• Match the filename to what the image actually shows — not just the page topic
• Rename files before uploading — renaming after upload creates broken links unless you update references

Step 8: Add Structured Data for Images

ImageObject structured data in JSON-LD helps Google understand the context of your images — who created them, what they depict, and what page they belong to. On pages where an image is central to the content (a recipe, a product, an article), properly implemented image schema can unlock rich results in Google Images, including licence information, creator attribution, and featured image treatment in search results.

Use the SEOGuy Schema Markup Generator to create valid JSON-LD schema for your pages, including ImageObject properties within your BlogPosting or Article schema. This ensures your images are correctly attributed and eligible for enhanced presentation in Google Images and Google Discover.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Image SEO Secrets: Alt Text, Compression, and Modern Formats",
  "image": {
    "@type": "ImageObject",
    "url": "https://yourdomain.com/images/image-seo-guide.webp",
    "width": "1200",
    "height": "675",
    "caption": "Complete image SEO guide covering alt text, compression, and modern formats"
  },
  "author": {
    "@type": "Organization",
    "name": "SEOGuy.Online"
  },
  "datePublished": "2026-05-27"
}
</script>

Image-specific signals that improve Google Images ranking

• Surrounding text context — the paragraph text immediately before and after an image is one of the strongest signals Google uses to understand what an image shows
• Page topic relevance — an image of a line graph on a page about analytics rankings higher in Google Images searches related to analytics
• Site authority — images from high-authority pages rank better in image search, just as pages rank better with more backlinks
• Image caption — the <figcaption> element below an image is read by Google as direct context for the image; use it where it adds genuine value
• Structured data — ImageObject schema provides explicit signals about the image's content, creator, and licence

Tools You Can Use on SEOGuy.Online

These free tools help you audit pages for image issues, optimise meta tags on image-heavy pages, and add structured data that improves image visibility in search results:

Key Takeaways

Image SEO is one of those disciplines where every improvement compounds — faster pages rank better, rank better in Google Images, and deliver a better experience that keeps visitors engaged longer. Implementing the image SEO secrets in this guide across your existing content is a high-return investment that pays off in both organic search rankings and Core Web Vitals performance.

Frequently Asked Questions