Ottimizzare le immagini per il web: dimensione del file, formato e SEO

Le immagini sono tra i file più grandi trasferiti su molti siti web. Se foto e grafiche vengono caricate senza ottimizzazione, le singole immagini possono pesare diversi megabyte e aumentare inutilmente il tempo di caricamento di una pagina.

Tuttavia, una buona ottimizzazione delle immagini non significa semplicemente comprimerle il più possibile. Ciò che conta è un compromesso sensato tra qualità dell'immagine, dimensioni, dimensione del file e formato di file utilizzato.

Anche per i motori di ricerca le immagini giocano un ruolo importante. Nomi di file comprensibili, testi alternativi appropriati e un contesto di contenuto sensato aiutano a classificare meglio le immagini e il loro significato.

In questa guida ti mostriamo come preparare le immagini per i siti web e quali fattori sono importanti per la qualità, il tempo di caricamento e la SEO.

Breve spiegazione: Un'immagine ottimizzata per il Web possiede le dimensioni adatte al suo scopo, un formato di file idoneo e una dimensione del file il più piccola possibile, senza che la qualità visiva ne risenta inutilmente.

Perché le immagini per i siti web dovrebbero essere ottimizzate? #

Le fotocamere digitali e gli smartphone moderni generano immagini con risoluzioni molto elevate. Questo è utile per la fotografia, l'elaborazione e la stampa, ma spesso non è necessario per la visualizzazione su un sito web.

Ad esempio, una foto può essere larga diverse migliaia di pixel, sebbene sul sito Web venga visualizzata con una larghezza massima notevolmente inferiore.

Se viene comunque trasferito il file originale grande, il browser deve scaricare molti più dati di quelli necessari per l'effettiva visualizzazione.

Ciò può risultare particolarmente evidente nelle connessioni mobili.

Le dimensioni dell'immagine e la dimensione del file non sono la stessa cosa #

NellaBeim dell'ottimizzazione delle immagini dovresti distinguere due termini:

Dimensioni dell'immagine descrivere la larghezza e l'altezza di un'immagine in pixel.

Esempio:

1920 × 1080 pixel

Muori Dimensione del file descrive invece quanta memoria richiede il file immagine.

Esempio:

280 KB

Due immagini con dimensioni in pixel identiche possono avere dimensioni di file molto diverse. Ciò dipende, tra l'altro, dal contenuto dell'immagine, dal formato del file e dalla compressione utilizzata.

Importante: Un'immagine non diventa ottimizzata per il web semplicemente riducendo le dimensioni del file. Bisogna evitare anche dimensioni in pixel inutilmente grandi.

Quanto dovrebbe essere grande un'immagine per un sito web? #

Non esiste un'unica dimensione di pixel adatta a tutte le immagini dei siti web.

Le dimensioni richieste dipendono da dove e come verrà visualizzata l'immagine.

Un'piccola immagine di anteprima richiede dimensioni diverse rispetto a una grande immagine hero che copre l'intera larghezza di un sito web.

La regola fondamentale è:

Consiglio pratico: Non fornire una quantità di dati immagine significativamente superiore a quella effettivamente necessaria per la visualizzazione prevista.

Non caricare le foto originali senza prima averle controllate #

Uno smartphone moderno può, ad esempio, generare una foto larga diverse migliaia di pixel.

Se questa immagine sul tuo sito Web viene visualizzata solo all'interno di una colonna di contenuto, la risoluzione originale completa potrebbe non essere necessaria.

Prima del caricamento dovresti quindi verificare quale dimensione massima di visualizzazione sia utile per lo specifico utilizzo.

Prendere in considerazione display ad alta risoluzione #

Nella scelta delle dimensioni dell'immagine, tuttavia, non dovresti considerare solo la larghezza di visualizzazione CSS visibile.

I dispositivi moderni possono essere dotati di display ad alta risoluzione, sui quali ulteriori informazioni visive possono essere utili per una visualizzazione nitida.

Ecco perché anche la regola generale „ridurre sempre l'immagine esattamente alla larghezza visibile dei pixel“ sarebbe troppo semplice.

I siti web moderni possono inoltre fornire diverse varianti di immagini per diverse dimensioni dello schermo o risoluzioni.

Cosa sono le immagini responsive? #

Le immagini responsive consentono al browser di selezionare una variante di immagine adatta a seconda del dispositivo, delle dimensioni di visualizzazione e di altri fattori.

Tecnicamente, a tale scopo si possono utilizzare, ad esempio, meccanismi HTML come srcset e taglie essere utilizzato.

In sintesi:

piccolo display
      ↓
variante di immagine più piccola

display più grande
      ↓
variante di immagine più grande

Molti moderni sistemi di gestione dei contenuti generano o utilizzano automaticamente tali varianti. Tuttavia, non dovresti dare per scontato che ciò renda automaticamente ottimale qualsiasi file originale di grandi dimensioni.

Quale formato di immagine dovrei usare? #

Per i siti Web sono disponibili diversi formati di immagine. Essi possiedono proprietà diverse e pertanto non sono ugualmente adatti a tutti i contenuti.

I formati attualmente rilevanti includono in particolare:

JPEG / JPG
PNG
WebP
AVIF
SVG

Quale formato sia opportuno dipende, tra le altre cose, dal fatto che si tratti di una foto, di una grafica, di un logo o di un'immagine con trasparenza.

Tratteremo le differenze tra WebP, AVIF, JPEG e PNG in dettaglio su WebP, AVIF, JPG e PNG: quale formato di immagine usare?.

JPEG o JPG #

JPEG è da molti anni un formato diffuso per le foto.

Utilizza una compressione con perdita. In questo modo le dimensioni del file possono essere notevolmente ridotte, perdendo informazioni sull'immagine a seconda del livello di compressione.

Il formato JPEG è particolarmente adatto per soggetti fotografici con molti colori e sfumature.

Per le immagini con trasparenza, invece, il classico JPEG non è adatto.

PNG #

PNG utilizza una compressione senza perdita e supporta la trasparenza.

Il formato è adatto, ad esempio, per determinate grafiche, schermate o contenuti in cui i bordi netti o la trasparenza sono importanti.

Nel caso di fotografie di grandi dimensioni, tuttavia, un file PNG può risultare notevolmente più grande rispetto a un'alternativa compressa in modo sensato.

Un foto non dovrebbe quindi essere salvata automaticamente come PNG solo perché questo formato è noto.

WebP #

WebP è un formato di immagine moderno per il Web che supporta sia la compressione con perdita che senza perdita, oltre alla trasparenza.

Con le giuste impostazioni, consente spesso di ottenere file più piccoli rispetto ai formati più vecchi, senza che la qualità visiva debba essere ridotta in modo altrettanto drastico.

WebP è ampiamente supportato dai browser moderni ed è quindi un'opzione pratica per molte applicazioni di siti web.

AVIF #

AVIF è un altro formato di immagine moderno che può consentire una compressione efficiente.

Soprattutto in presenza di contenuti fotografici, con una configurazione adeguata è possibile ottenere file molto piccoli a fronte di una buona qualità visiva.

Tuttavia, ciò non significa che AVIF sia automaticamente la scelta migliore per ogni immagine. Anche l'onere di codifica, il contenuto dell'immagine, la qualità desiderata e il flusso di lavoro tecnico del sito web giocano un ruolo importante.

SVG per loghi e grafica vettoriale #

L'SVG si differenzia radicalmente dalle classiche immagini raster.

Si tratta di un formato vettoriale. Forme e linee sono descritte matematicamente o come dati vettoriali strutturati e non vengono memorizzate come una griglia fissa di singoli pixel.

In questo modo è possibile scalare le grafiche SVG adatte senza la tipica perdita di qualità di un'immagine raster.

SVG è adatto, ad esempio, per loghi, icone e determinate illustrazioni.

Attenzione: I file SVG possono contenere contenuti attivi o complessi. Utilizza file SVG provenienti esclusivamente da fonti affidabili e presta attenzione ai meccanismi di sicurezza del tuo CMS o della tua applicazione web.

Non ogni formato di immagine è adatto a qualsiasi contenuto #

Un semplice orientamento:

Tipo di immagine	Formati spesso adatti
Foto	WebP, AVIF, JPEG
Grafica con trasparenza	WebP, PNG, a seconda del contenuto AVIF
Logo o icona come grafica vettoriale	SVG
Schermata	PNG o WebP, a seconda del contenuto

Questa tabella è un orientamento e non una regola rigida. Un confronto concreto di qualità e dimensioni può essere utile per le immagini importanti.

Che cosa significa compressione d'immagine? #

Durante la compressione, i dati delle immagini vengono memorizzati in modo tale che il file risultante richieda meno spazio di archiviazione.

A questo proposito si distingue tra compressione senza perdita e con perdita.

Compressione senza perdita #

Con la compressione senza perdita, i dati dell'immagine vengono compressi in modo tale che le informazioni originali possano essere fondamentalmente ripristinate.

Compressione con perdita #

Nella compressione con perdita, le informazioni dell'immagine vengono rimosse o semplificate per ottenere file più piccoli.

Più forte è la compressione, prima possono verificarsi artefatti visibili o perdite di qualità.

Il file più piccolo non è automaticamente il file migliore #

L'obiettivo dell'ottimizzazione delle immagini non è quello di creare il file più piccolo possibile a tutti i costi.

Una foto con compressione estremamente forte può anche essere molto piccola, ma perdere visibilmente in qualità.

Cerchi quindi un compromesso sensato:

buona qualità visibile
+
dimensioni adatte
+
formato efficiente
+
compressione adeguata
=
immagine web ben ottimizzata

Controllare la qualità dell'immagine dopo la compressione #

Non fare affidamento esclusivamente sulla percentuale di un programma di grafica.

Un livello di qualità pari a, ad esempio, „80“ non è direttamente comparabile tra tutti i programmi, i codec e i formati.

Controlla visivamente l'immagine finita.

Presta particolare attenzione a:

formazione di blocchi sgradevole
dettagli sfocati
bandeggio cromatico nei gradienti
bordi imprecisi
testo che diventa difficile da leggere
artefatti visibili

Perché le immagini grandi influenzano il tempo di caricamento #

I file di immagine devono essere trasferiti dal server al browser.

Più dati devono essere trasferiti per una pagina, più questo può incidere, in particolare con connessioni più lente o mobili.

Supponendo che una pagina contenga diverse immagini non ottimizzate:

Immagine 1: 4,0 MB
Immagine 2: 3,2 MB
Immagine 3: 2,5 MB
Immagine 4: 3,8 MB

Totale: 13,5 MB

Già solo queste quattro immagini generano quindi una quantità di dati considerevole.

Se le stesse immagini possono essere fornite in modo molto più efficiente con una qualità visiva comparabile, ciò può ridurre significativamente la quantità di dati trasferiti.

Non impostare una dimensione massima fissa per i file #

Su Internet trovi consigli come „ogni immagine deve essere sotto i 100 KB“ o „le immagini devono pesare al massimo 200 KB“.

Limiti così rigidi sono troppo generici.

Una piccola immagine di anteprima e una grande foto hero ricca di dettagli svolgono compiti completamente diversi.

La domanda non dovrebbe quindi essere:

„Quest'immagine è sotto un determinato limite di KB?“

Bensì:

„Questo file è inutilmente grande per il suo scopo specifico?“

Cosa significa lazy loading? #

In parole semplici, il lazy loading significa che determinate immagini vengono caricate solo quando sono necessarie o si avvicinano all'area visibile.

Ciò significa che non è necessario che tutte le immagini più in basso vengano caricate completamente durante il primo caricamento della pagina.

area visibile
[ Immagine richiesta ]

più in basso
[ L'immagine può essere caricata successivamente ]

I browser moderni supportano, ad esempio, l'attributo per le immagini HTML appropriate loading="lazy".

Non tutte le immagini dovrebbero essere caricate in modo differito alla cieca #

Un'immagine necessaria immediatamente nell'area visibile in alto al caricamento della pagina non dovrebbe essere ritardata inutilmente senza verifica.

Ciò riguarda in particolare importanti contenuti visivi nella prima sezione visibile di una pagina.

Il Lazy Loading è quindi una tecnica di ottimizzazione che dovrebbe essere utilizzata con giudizio, e non un interruttore basato sul principio „più ce n'è, meglio è“.

Immagini e Core Web Vitals #

Le immagini possono anche influenzare i Core Web Vitals utilizzati da Google.

Ad esempio, una grande immagine visibile può essere rilevante per la metrica Largest Contentful Paint.

Se mancano informazioni sulle dimensioni adatte per le immagini, potrebbero verificarsi anche spostamenti di layout durante il caricamento.

Trattiamo approfonditamente i Core Web Vitals su Core Web Vitals spiegati: LCP, INP e CLS.

In HTML, larghezza e altezza possono ridurre i cambiamenti di layout #

Se il browser conosce già le dimensioni di un'immagine prima del suo completo caricamento, può riservare lo spazio necessario nel layout in anticipo.

In un'immagine HTML normale, ad esempio, gli attributi larghezza e altezza aiutare a determinare il rapporto d'aspetto o lo spazio necessario.

I moderni CMS e i sistemi di siti web gestiscono spesso questo aspetto automaticamente. Ciononostante, in caso di evidenti spostamenti di layout, vale la pena verificare come vengono integrate le immagini.

Immagini e SEO #

L'ottimizzazione delle immagini per i motori di ricerca non si limita a file il più possibile piccoli.

I motori di ricerca tengono conto di diverse informazioni per comprendere il contenuto e il contesto di una pagina o di un'immagine.

Ciò include, tra le altre cose, il contenuto circostante della pagina, l'integrazione tecnica e le informazioni descrittive dell'immagine.

Usare nomi di file significativi #

Un nome di file comprensibile può aiutare a classificare un file immagine dal punto di vista organizzativo e dei contenuti.

Poco significativo

IMG_847293.jpg

Più comprensibile:

webhosting-cpanel-dashboard.webp

Il nome del file dovrebbe descrivere il contenuto effettivo dell'immagine. Evita concatenazioni artificiali di parole chiave.

Cos'è un testo alternativo? #

L'attributo HTML altro fornisci un'alternativa testuale per un'immagine.

Un esempio semplificato:

<img
  src="cpanel-dashboard.webp"
  alt="Panoramica della dashboard di cPanel"
>

I testi alternativi sono particolarmente importanti per l'accessibilità, ad esempio quando uno screenreader comunica il contenuto di una pagina o un'immagine non può essere visualizzata.

Come si scrive un buon testo alt? #

Il testo alternativo dovrebbe trasmettere il contenuto rilevante o lo scopo dell'immagine nel rispettivo contesto in modo conciso e comprensibile.

Scarsa:

Immagine

Anche questo è negativo:

Hosting web Hosting Svizzera miglior hosting hosting economico cPanel

Meglio con uno screenshot corrispondente:

Panoramica della dashboard di cPanel

Un testo alternativo non è un campo in cui accumulare quanti più termini di ricerca possibili.

Importante: Scrivi testi alternativi principalmente in modo da trasmettere in modo sensato lo scopo o il contenuto rilevante dell'immagine. L'accessibilità e la comprensibilità sono più importanti del keyword stuffing.

Le immagini decorative richiedono un trattamento diverso #

Non ogni immagine trasporta informazioni rilevanti.

Nei contenuti visivi puramente decorativi, un testo alternativo vuoto può essere tecnicamente utile affinché le tecnologie assistive possano saltare l'immagine.

In HTML kann dies beispielsweise so aussehen:

alt=""

Il fatto che un'immagine sia decorativa o rilevante per il contenuto dipende dalla sua funzione nel contesto specifico della pagina.

Non inserire testo inutilmente nelle immagini #

Le informazioni importanti dovrebbero, se possibile, essere presenti come vero testo HTML sulla pagina web e non trovarsi esclusivamente all'interno di un'immagine.

Ciò presenta diversi vantaggi:

Il testo può essere scalato meglio
Il testo può essere copiato
I lettori di schermo possono elaborarlo
Le traduzioni sono più semplici
I contenuti possono essere visualizzati in modo più responsive
I motori di ricerca ricevono contenuti testuali diretti

Le grafiche con del testo possono ovviamente essere utili. Tuttavia, le informazioni critiche non dovrebbero essere nascoste esclusivamente in esse.

Utilizzare le immagini nel giusto contesto di pagina #

Un'immagine dovrebbe adattarsi al contenuto della pagina.

Ad esempio, uno screenshot della dashboard di cPanel è utile in una guida su cPanel. Lo stesso screenshot non fornisce alcun contesto aggiuntivo su una pagina completamente non correlata all'argomento.

Anche le didascalie possono essere utili se forniscono informazioni aggiuntive al visitatore.

Ottimizzazione delle immagini e PageSpeed #

Gli strumenti di analisi possono indicare che le immagini potrebbero essere codificate in modo più efficiente, ridimensionate diversamente o fornite in un formato più moderno.

Dovresti valutare tali indicazioni nel contesto del sito web effettivo.

Ti spiegheremo più avanti come interpretare correttamente le misurazioni del tempo di caricamento sotto Misurare e valutare correttamente il tempo di caricamento del sito web.

Tratteremo la gestione di Google PageSpeed Insights anche sotto Usare correttamente Google PageSpeed Insights.

Non ottimizzare ciecamente i valori di PageSpeed #

Uno strumento di analisi è uno strumento diagnostico e non un fine a se stesso.

Non ha senso comprimere così tanto un'immagine visibilmente importante da comprometterne notevolmente la qualità, solo per migliorare una singola metrica.

Valuta sempre l'effettiva utilità di un'ottimizzazione.

Metadati nei file di immagine #

I file di immagine possono contenere metadati aggiuntivi, ad esempio informazioni sullo scatto o sul software utilizzato.

A seconda dell'uso previsto, tali metadati possono contenere dati non necessari o rivelare informazioni che non desideri pubblicare.

Per le immagini di un sito web pubblico può quindi essere opportuno verificare quali metadati siano effettivamente inclusi e necessari.

Consiglio sulla privacy: Verifica, in particolare per le immagini private o scattate con smartphone, se contengono metadati che non desideri rendere pubblici.

Non dimenticare i diritti d'immagine e le licenze #

L'ottimizzazione tecnica non dice nulla sul fatto che tu possa utilizzare un'immagine legalmente.

Usa solo immagini per la cui pubblicazione possiedi i diritti necessari o la cui licenza consente l'uso previsto.

Se necessario, tieni conto delle indicazioni sul diritto d'autore o sulla fonte.

Conservare i file originali separatamente #

Quando riduci le dimensioni e comprimi una foto originale di alta qualità per il web, non dovresti necessariamente sostituire il file originale con la versione ottimizzata.

Conserva i file sorgente di alta qualità separatamente, nel caso in cui ti servano in seguito un formato diverso, un ritaglio differente o una variante a più alta risoluzione.

La versione web è un'edizione ottimizzata per uno scopo specifico, non necessariamente il tuo originale d'archivio.

Non comprimere le immagini inutilmente più volte #

Nei formati con perdita di dati, l'apertura, la modifica e la successiva ricompressione ripetute possono degradare progressivamente la qualità dell'immagine.

Genera quindi nuove versioni web, se possibile, da un file di origine di alta qualità.

Genera versione web

meglio di:

file già fortemente compresso
   ↓
comprimi di nuovo
   ↓
comprimi di nuovo

Ottimizzare gli screenshot per le guide #

Negli screenshot è soprattutto importante che i comandi e i testi rilevanti rimangano ben leggibili.

Ritaglia le aree non necessarie prima di rimpicciolire lo screenshot.

Uno screenshot mirato è spesso più utile e più piccolo di un intero schermo, in cui l'area rilevante è a malapena riconoscibile.

Assicurati inoltre di non pubblicare accidentalmente informazioni riservate, dati dei clienti, credenziali di accesso o altri contenuti sensibili nello screenshot.

Prestare particolare attenzione alle immagini hero #

Le grandi immagini nella parte superiore della pagina meritano particolare attenzione.

Possono occupare una parte considerevole della superficie visibile ed essere necessari già immediatamente al caricamento della pagina.

Qui devi valutare con particolare attenzione il compromesso tra qualità dell'immagine, dimensioni e peso del file.

Comprimere un'immagine del genere in modo estremo o caricarla in modo generalizzato con ritardo non è automaticamente la soluzione migliore.

Non dimenticare le immagini di sfondo #

Le immagini non possono essere inserite solo tramite un normale elemento immagine HTML.

Anche le immagini di sfondo in CSS possono causare grandi volumi di dati.

Se uno strumento di analisi indica un elevato trasferimento di immagini, dovresti quindi considerare anche grafica di sfondo, slider e altri elementi visivi.

I slider possono caricare più immagini grandi #

Un cursore può contenere più immagini di grandi dimensioni. A seconda della sua implementazione tecnica, ciò può comportare il caricamento di più file già durante il caricamento della pagina.

Verifica quindi se tutte le immagini del cursore utilizzate siano effettivamente necessarie e opportunamente ottimizzate.

Più immagini non significano automaticamente un sito web migliore.

Ottimizzazione delle immagini per negozi online #

In un negozio online, le immagini dei prodotti possono rappresentare una quota significativa dei dati trasferiti.

Allo stesso tempo, i clienti devono poter valutare i prodotti con un livello di dettaglio sufficiente.

Una compressione eccessiva può quindi essere problematica tanto quanto file originali inutilmente grandi.

Soprattutto in presenza di molti prodotti, un flusso di lavoro coerente per dimensioni, formato e qualità risulta utile.

Ottimizzazione delle immagini nei blog e nelle guide #

Negli articoli più lunghi, molte singole immagini possono sommarsi fino a raggiungere una dimensione complessiva notevole.

Ciò riguarda, ad esempio, guide passo-passo con numerosi screenshot.

Qui vale la pena ritagliare ogni screenshot sull'area effettivamente rilevante e utilizzare una versione web adatta.

Confrontare il prima e il dopo #

Per le immagini importanti, puoi confrontare la versione originale con quella ottimizzata.

Esempio:

4000 × 2667 Pixel
4,8 MB

Versione web:
dimensioni adatte
formato efficiente
420 KB

qualità visibile:
comparabile per l'uso previsto

I numeri sono solo un esempio. Ciò che conta non è un determinato valore obiettivo, ma se il file ottimizzato adempie al suo scopo con una quantità di dati notevolmente più efficiente.

Testare il sito web dopo l'ottimizzazione delle immagini #

Dopo le modifiche, dovresti effettivamente visitare e controllare il sito web.

Verifica in particolare:

Qualità dell'immagine
Inquadratura corretta
Visualizzazione desktop
Visualizzazione da smartphone
Gallerie e slider
Link alle immagini
Spostamenti di layout
Comportamento di caricamento

Un file tecnicamente più piccolo non offre alcun vantaggio se poi, ad esempio, viene mostrata l'inquadratura sbagliata o se i dettagli importanti sono a stento riconoscibili.

Errori comuni nell'ottimizzazione delle immagini #

I problemi tipici includono:

Caricare le foto originali direttamente dallo smartphone
dimensioni in pixel enormi per visualizzazioni piccole
salvare inutilmente le foto come grandi file PNG
comprimere eccessivamente le immagini
utilizzare lo stesso valore di qualità per ogni immagine
mantenere nomi di file come IMG_12345
sovraccaricare i testi alternativi con parole chiave
applicare il lazy loading a ogni immagine in modo indiscriminato
rappresentare il testo esclusivamente come immagine
trascurare grandi immagini di sfondo
eliminare i file originali dopo l'ottimizzazione

Pratico flusso di lavoro per le nuove immagini del sito web #

Selezionare l'immagine
        ↓
Determinare lo scopo d'uso
        ↓
Definire le dimensioni adatte
        ↓
Scegliere il formato idoneo
        ↓
Comprimere in modo sensato
        ↓
Controllare la qualità
        ↓
Assegnare un nome file comprensibile
        ↓
Caricare sul sito web
        ↓
Impostare il testo alternativo in base al contesto
        ↓
Verificare su desktop e smartphone
        ↓
Controllare il comportamento di caricamento

Ottimizzare un sito web esistente con molte immagini #

Se il tuo sito web contiene già molte immagini, non devi necessariamente elaborare ogni file contemporaneamente senza alcuna priorità.

Inizia con le pagine e le immagini da cui ci si può aspettare il maggior beneficio.

Ciò può includere, ad esempio, pagine visitate di frequente, immagini hero particolarmente grandi o pagine con un volume di dati trasferiti notevolmente elevato.

La misurazione del sito web può aiutare a identificare le reali aree problematica.

Se il sito web rimane lento nonostante le immagini ottimizzate #

Le immagini sono solo un fattore possibile per il tempo di caricamento.

Un sito web può essere lento nonostante immagini ben ottimizzate se, ad esempio, altre risorse, servizi esterni, JavaScript, accessi al database o l'applicazione stessa causano problemi.

Tratteremo la ricerca sistematica degli errori più avanti nella sezione Sito web lento: trovare sistematicamente le cause.

Importante: L'ottimizzazione delle immagini è una componente importante delle prestazioni di un sito web, ma non è la soluzione universale per ogni problema di tempo di caricamento.

Elenco di controllo per l'ottimizzazione delle immagini #

L'immagine è coerente con il contenuto?
        ↓
Le dimensioni sono sensate?
        ↓
Il formato è adatto?
        ↓
La compressione è adeguata?
        ↓
La qualità rimane sufficiente?
        ↓
Il nome del file è comprensibile?
        ↓
È presente un testo alternativo sensato?
        ↓
I metadati non necessari sono stati controllati?
        ↓
L'immagine funziona in modo responsive?
        ↓
Il lazy loading è impiegato in modo sensato?
        ↓
Testato su desktop e smartphone?
        ↓
Comportamento di caricamento controllato?

Riepilogo #

Immagini ben ottimizzate possono ridurre notevolmente la quantità di dati trasferiti di un sito web e contribuire così a una migliore velocità di caricamento.

In questo caso sono determinanti non solo la dimensione del file, ma anche le dimensioni in pixel adatte, un formato di immagine idoneo e una compressione sensata.

JPEG, PNG, WebP, AVIF e SVG possiedono caratteristiche diverse. Il formato corretto dipende quindi dall'immagine specifica e dal suo scopo di utilizzo.

Per la SEO e l'accessibilità, dovresti considerare anche nomi di file comprensibili, testi alternativi significativi e un appropriato contesto di contenuto.

Tecniche come le immagini responsive e il lazy loading possono ulteriormente ottimizzare la distribuzione, ma non dovrebbero essere applicate senza riguardo per il caso d'uso specifico.

La migliore ottimizzazione delle immagini non si limita a ridurre i kilobyte. Essa fornisce al visitatore la qualità d'immagine necessaria con il minor numero possibile di dati superflui.