Zipnify Strumenti per immagini veloci. Zero upload.Immagini per un sito veloce: dimensioni, formato e buone pratiche
Le immagini rappresentano spesso più della metà del peso di una pagina web. Se non le prepari, il tuo sito si carica lentamente, i visitatori se ne vanno e i motori di ricerca se ne accorgono. La buona notizia è che ottimizzare le immagini è uno dei miglioramenti più semplici e di maggiore impatto. Questa guida riunisce una ricetta pratica.
Perché le immagini contano per la velocità
Una pagina con dieci foto da 4 MB obbliga il visitatore a scaricare 40 MB, molto lento su un telefono con dati mobili. Un tempo di caricamento alto aumenta l'abbandono e peggiora l'esperienza. I motori di ricerca considerano la velocità un fattore di qualità, soprattutto su mobile.
Ridurre il peso delle immagini non richiede conoscenze tecniche: basta applicare in modo costante alcuni criteri semplici.
Dimensioni: non caricare più pixel di quelli mostrati
La causa più comune di immagini pesanti è caricare la foto così com'esce dalla fotocamera. Se sulla tua pagina l'immagine viene mostrata a 800 pixel di larghezza, caricarne una da 4000 non migliora nulla di visibile e moltiplica il peso. Calcola la larghezza massima che occuperà sullo schermo e carica una versione di quella larghezza, o il doppio se vuoi nitidezza sugli schermi ad alta densità.
Valori indicativi: immagine principale di copertina, 1600-1920 pixel; immagini degli articoli, 1000-1200; miniature dei prodotti, 400-600; icone, il minimo necessario.
Peso obiettivo per tipo di immagine
Come obiettivo ragionevole, un'immagine di copertina dovrebbe restare sotto 200-300 KB, le immagini di contenuto tra 60 e 150 KB e le miniature sotto 40 KB. Non sono limiti rigidi, ma traguardi che mantengono gestibile il peso totale della pagina, idealmente sotto 1-2 MB.
Usa lo strumento di compressione o quello per il peso esatto per avvicinarti a questi valori controllando che la qualità resti buona.
Il formato adatto
Scegli WebP o JPG per le fotografie, PNG o WebP per grafiche con trasparenza e SVG per loghi e icone vettoriali, che restano nitidi a qualsiasi dimensione e pesano pochissimo. Evita le GIF animate pesanti: un breve video in un formato moderno è di solito molto più leggero.
Dai a ogni immagine un nome descrittivo in minuscolo con trattini, per esempio «scarpe-running-blu.webp», meglio di «IMG_2043.jpg».
Caricamento differito e testo alternativo
Le immagini fuori dalla schermata iniziale non devono caricarsi all'apertura della pagina. L'attributo di caricamento differito del browser permette di scaricarle solo quando il visitatore si avvicina. Per l'immagine principale, visibile subito, non applicare il caricamento differito.
Includi sempre un testo alternativo che descriva l'immagine. Aiuta chi usa lettori di schermo, appare se l'immagine non si carica e dà contesto ai motori di ricerca.
Una ricetta per iniziare oggi
Primo, ridimensiona le immagini alla larghezza che userai davvero. Secondo, convertile in WebP o JPG con qualità tra 75 e 85. Terzo, verifica che ognuna rispetti il peso obiettivo. Quarto, dai nomi chiari e aggiungi il testo alternativo. Quinto, prova la pagina su un telefono con connessione normale.
Fai questo processo ogni volta che pubblichi nuovi contenuti e, se il tuo sito ha già molte immagini pesanti, comincia da quelle delle pagine più visitate.
Prova lo strumento: Comprimi immagine
Domande frequenti
Quanto deve pesare un'immagine web?
Come obiettivo, copertina sotto 200-300 KB, contenuto tra 60 e 150 KB e miniature sotto 40 KB.
Carico l'immagine alla dimensione della fotocamera e lascio che il sito la riduca?
No. Il visitatore scaricherà comunque il file pesante. Ridimensiona prima di caricare.
L'SVG va bene per le foto?
No. L'SVG è per loghi, icone e disegni vettoriali. Per le foto usa WebP o JPG.
Cos'è il testo alternativo?
Una breve descrizione dell'immagine che aiuta i lettori di schermo e i motori di ricerca, e appare se l'immagine non si carica.