Image SEO: alt, formati, compressione e lazy load

Google Immagini processa miliardi di query ogni mese. Secondo i dati Jumpshot, circa il 22% di tutte le ricerche web coinvolge la ricerca per immagini. Per siti e-commerce, piattaforme di contenuti e portfolio è un canale di traffico sostanziale che la maggior parte dei siti ignora completamente.

L'ottimizzazione delle immagini incide non solo sulla visibilità in Google Immagini ma anche sulla ricerca organica: velocità di caricamento della pagina (LCP), Core Web Vitals, esperienza utente e — indirettamente — posizionamento nella SERP principale.

zoom_in

Perché ottimizzare le immagini per la SEO

Un'ottimizzazione corretta delle immagini risolve diversi problemi in una volta: migliora l'accessibilità del sito per gli utenti con disabilità visive, accelera il caricamento delle pagine, dà a Google un contesto chiaro e apre un canale di traffico organico aggiuntivo via Google Immagini.

zoom_in

Le immagini sono la risorsa più pesante sulla maggior parte delle pagine. Immagini non ottimizzate rallentano il caricamento, degradano l'LCP (Largest Contentful Paint) e incidono direttamente sui punteggi dei Core Web Vitals. Dal 2021 Google include i CWV tra i segnali di posizionamento.

Alt text: regole di scrittura

L'attributo alt (alt="...") è l'unico modo per spiegare a Google cosa mostra un'immagine. Viene anche visualizzato quando l'immagine non si carica e letto ad alta voce dagli screen reader per gli utenti con disabilità visive.

Come scriverlo correttamente

Regole per l'alt text: descrivi ciò che è visibile nell'immagine; includi la keyword target in modo naturale se pertinente; non cominciare con formule tipo «immagine di...», «foto di...» — Google sa già che è un'immagine. Lunghezza ottimale: 5–15 parole.

<!-- Informative image -->
<img
  src="/images/crawl-budget-chart.webp"
  alt="Crawl budget distribution chart by page type"
  width="800"
  height="450"
/>

<!-- Decorative image -->
<img
  src="/images/divider.svg"
  alt=""
  role="presentation"
/>

<!-- Image link: alt describes the link purpose -->
<a href="/tools">
  <img
    src="/images/seo-scripts-icon.webp"
    alt="SEO Scripts: tools for technical audits"
    width="64"
    height="64"
  />
</a>

Nomi file e percorsi

Google analizza il nome file dell'immagine come segnale aggiuntivo. Il nome DSC_0047.jpg non dà informazioni; canonical-url-diagram.webp segnala argomento e contesto.

Formati: WebP, AVIF, JPEG, PNG

La scelta del formato è uno dei fattori chiave dell'ottimizzazione. I formati moderni (WebP, AVIF) producono file molto più leggeri a pari qualità visiva.

Strategia consigliata: usa WebP come formato primario con fallback JPEG via elemento <picture>. Passa ad AVIF quando il tuo pubblico è prevalentemente su Chrome 85+ e Safari 16+. SVG per tutta la grafica vettoriale senza eccezioni.

<!-- Modern approach: AVIF → WebP → JPEG -->
<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img
    src="/images/hero.jpg"
    alt="SEO audit of an online store: 340% traffic growth"
    width="1200"
    height="675"
    loading="eager"
    fetchpriority="high"
  />
</picture>

Compressione senza perdita di qualità

La maggior parte delle immagini si possono comprimere del 30–70% senza perdita di qualità visibile. Strumenti chiave: Squoosh (online), ImageMagick (CLI), Sharp (Node.js), Pillow (Python).

Impostazioni di qualità ottimali

// Next.js: automatic optimisation via next/image
import Image from 'next/image';

// next/image automatically:
// - converts to WebP/AVIF
// - generates srcset
// - adds lazy loading
// - prevents layout shift (requires width/height)
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Organic traffic growth after SEO audit"
      width={1200}
      height={675}
      priority // disables lazy load for the hero image
    />
  );
}

Lazy load e loading='eager'

Il lazy loading rinvia il caricamento delle immagini fuori schermo finché l'utente non scorre fino a loro. Riduce il peso iniziale della pagina e accelera il Time to Interactive.

<!-- Below-fold images: lazy loading -->
<img
  src="/images/article-thumbnail.webp"
  alt="XML sitemap audit screenshot"
  width="400"
  height="225"
  loading="lazy"
/>

<!-- Hero and LCP images: eager + fetchpriority -->
<img
  src="/images/hero.webp"
  alt="Real-time SEO analytics"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
/>

Dimensioni, srcset e art direction

Specifica sempre gli attributi width e height. Permettono al browser di riservare lo spazio per l'immagine prima che si carichi e prevengono il Cumulative Layout Shift (CLS) — il salto dei contenuti durante il caricamento.

<!-- srcset: different sizes for different screens -->
<img
  src="/images/blog-cover.webp"
  srcset="
    /images/blog-cover-480.webp 480w,
    /images/blog-cover-800.webp 800w,
    /images/blog-cover-1200.webp 1200w
  "
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="Internal linking architecture guide: site structure diagram"
  width="1200"
  height="675"
  loading="lazy"
/>

L'attributo srcset permette al browser di scegliere la dimensione ottimale dell'immagine per lo schermo e la densità di pixel correnti. Su un dispositivo mobile con DPI 2x il browser carica la versione da 800px invece di quella da 1200px — risparmi banda e migliori la velocità.

Dati strutturati

Il markup Schema.org aiuta Google a mostrare le immagini nei risultati avanzati: schede prodotto, ricette, articoli. I tipi più pertinenti per le immagini sono ImageObject, Article, Product e Recipe.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Image SEO: complete guide",
  "image": {
    "@type": "ImageObject",
    "url": "https://seohead.tech/images/blog/image-seo.webp",
    "width": 1200,
    "height": 675,
    "caption": "Image optimisation for search: formats, alt text, compression"
  },
  "datePublished": "2026-05-17",
  "author": {
    "@type": "Person",
    "name": "seohead"
  }
}

Sitemap immagini

Google consiglia di includere le informazioni sulle immagini nella tua sitemap XML — aiuta a indicizzare le immagini caricate via JavaScript e fornisce contesto aggiuntivo (titolo, didascalia, licenza).

<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
>
  <url>
    <loc>https://seohead.tech/blog/image-seo</loc>
    <image:image>
      <image:loc>https://seohead.tech/images/blog/image-seo.webp</image:loc>
      <image:title>Image SEO: alt text, formats, compression, and lazy load</image:title>
      <image:caption>Complete guide to image optimisation for search</image:caption>
    </image:image>
  </url>
</urlset>

FAQ