I telefoni scaricano le sue immagini desktop

Che cosa succede davvero

Su un sito che abbiamo analizzato questo mese, l’immagine principale della home page era un WebP di 1920 per 1080 che pesava 2,6 MB. Su un telefono, quell’immagine viene mostrata su circa 390 pixel di larghezza. Il telefono scarica i 2,6 MB, decodifica due milioni di pixel, poi ne dipinge circa il 4%.

La stessa foto, ridimensionata agli 800 pixel che un telefono ad alta densità usa davvero, pesa 33 KB. È la stessa fotografia, della stessa qualità su quello schermo, con il 98% in meno da scaricare. Su una connessione cellulare, è la differenza tra una pagina che compare di colpo e uno spazio bianco per due o tre secondi.

È anche ciò che penalizza il suo punteggio di Largest Contentful Paint. L’immagine principale è di solito l’elemento più grande della pagina, quindi la pagina non sembra caricata finché non è arrivata, e non può arrivare finché non c’è ogni byte.

Lasci scegliere il browser

Rendere più piccola un’unica immagine non risolve nulla, perché i visitatori da desktop vogliono sempre quella grande. Bisogna invece proporre più dimensioni e lasciare che ogni browser scelga. L’HTML lo permette da anni: srcset elenca le candidate e le loro larghezze, e sizes dice al browser la larghezza a cui l’immagine sarà impaginata, così fa il calcolo prima di scaricare qualsiasi cosa.

<img
  src="/img/hero-1200.webp"
  srcset="/img/hero-600.webp 600w,
          /img/hero-900.webp 900w,
          /img/hero-1200.webp 1200w,
          /img/hero-1920.webp 1920w"
  sizes="(max-width: 1020px) 100vw, 60vw"
  width="1920" height="1080"
  alt="Volunteers planting trees along the river trail"
  fetchpriority="high"
/>

Legga sizes come una promessa sul layout: sotto i 1020 pixel l’immagine riempie la finestra; sopra, occupa il 60% della larghezza. Il browser moltiplica per la propria densità di pixel, sceglie la candidata più piccola ancora nitida e non scarica mai le altre. Gli attributi width e height riservano lo spazio perché la pagina non salti quando arriva l’immagine, che è ciò che misura Cumulative Layout Shift.

Quando le serve l’elemento picture

srcset gestisce un’immagine in più dimensioni. L’elemento picture gestisce due problemi diversi. Il primo è la direzione artistica: un taglio orizzontale ampio su desktop e un taglio verticale stretto su telefono, perché lo stesso taglio non funziona nelle due forme. Il secondo è il formato di riserva: offrire AVIF ai browser che lo capiscono, WebP agli altri, e un JPEG come base.

<picture>
  <source media="(max-width: 700px)" type="image/avif" srcset="/img/hero-phone.avif" />
  <source media="(max-width: 700px)" type="image/webp" srcset="/img/hero-phone.webp" />
  <source type="image/avif" srcset="/img/hero-1200.avif 1200w, /img/hero-1920.avif 1920w" sizes="60vw" />
  <source type="image/webp" srcset="/img/hero-1200.webp 1200w, /img/hero-1920.webp 1920w" sizes="60vw" />
  <img src="/img/hero-1200.jpg" width="1920" height="1080" alt="Volunteers planting trees along the river trail" />
</picture>

La maggior parte dei siti non ne ha bisogno. Se un solo taglio funziona ovunque e serve WebP, un semplice img con srcset è lo strumento giusto, ed è molto più facile da mantenere corretto. Passi a picture quando ha un vero problema di direzione artistica o quando aggiunge AVIF.

Formati: WebP adesso, AVIF quando può

WebP è supportato da tutti i browser usati dai suoi visitatori e di solito pesa dal 25 al 35% in meno di un JPEG di pari qualità visiva. AVIF è ancora più leggero ma più lento da codificare, quindi ha senso per le poche immagini che contano di più, con WebP come riserva.

Il formato non sostituisce la dimensione. L’immagine di 2,6 MB qui sopra era già in WebP. Il problema erano i suoi 1920 pixel di larghezza e una qualità più alta di quella che l’occhio riesce a vedere. Prima la dimensione, poi il formato, poi la qualità.

Priorità e caricamento differito

Due attributi completano il lavoro. L’immagine principale, l’unica sopra la linea di piega, riceve fetchpriority="high" perché il browser la scarichi prima dei fogli di stile e degli script che altrimenti le farebbero la fila davanti. Tutto ciò che sta sotto la linea di piega riceve loading="lazy" per essere scaricato solo quando il visitatore vi si avvicina.

L’errore comune è applicare loading="lazy" anche all’immagine principale, di solito perché un plugin lo aggiunge a tutte le immagini. Caricare in differita l’elemento visibile più grande rende la pagina più lenta, e Lighthouse lo segnalerà.

Dove WordPress aiuta, e dove i temi disfano il lavoro

WordPress genera più dimensioni di ogni file caricato e scrive automaticamente srcset e sizes nei tag delle immagini dalla versione 4.4. Dalla 6.1 può generare WebP accanto all’originale. Per le immagini inserite dall’editor, il lavoro è già fatto.

Il problema nasce con le immagini principali. Molti temi e page builder (Elementor, WPBakery e altri) producono l’immagine principale come immagine di sfondo CSS, oppure fanno riferimento direttamente all’originale a grandezza piena, e nessuna delle due strade ha un srcset. Un’immagine principale messa come sfondo non può essere responsive nel senso descritto qui; deve diventare un vero img, oppure il tema ha bisogno di una variante mobile.

L’altra perdita comune è un plugin che rimuove o riscrive i tag delle immagini, o un tema che chiede la dimensione chiamata full per ogni miniatura. Tutti questi casi si verificano allo stesso modo: guardi il codice sorgente della pagina, trovi l’immagine principale e cerchi un attributo srcset. Se non c’è, il browser non ha nulla da scegliere.

Controlli il suo sito in un minuto

Apra la sua home page su un telefono, o in un browser desktop con l’emulazione mobile attiva e il pannello di rete aperto, filtrato sulle immagini. Ordini per dimensione. Se la prima voce supera 300 KB, quella è l’immagine da correggere per prima. L’audit gratuito di questo sito esegue lo stesso controllo sulla sua home page e presenta l’immagine più pesante e il risparmio possibile in linguaggio chiaro.

Se è un cliente, correggere l’immagine principale di un modello è una piccola attività inclusa nel canone. Ricodificare tutta la libreria media è un progetto a prezzo fisso. In entrambi i casi, apra una richiesta e cominceremo dall’immagine che costa di più.