Trascina le tue foto e la tua grafica per ottenere copie WebP, AVIF e JPG alle larghezze che servono alle tue pagine, con i dati della fotocamera rimossi. Guarda quanto è più piccola ciascuna, scaricale tutte come .zip e incolla il codice srcset. Le tue immagini non lasciano mai questo dispositivo. È gratis.
Come ottimizzare le immagini per un sito web, passo dopo passo
- Scegli le immagini o trascinale sulla pagina. Funzionano file JPG, PNG, WebP, AVIF e GIF.
- Spunta le Larghezze che vuoi, da 480 a 2560. Le immagini non vengono mai ingrandite oltre l'originale.
- Scegli i Formati: AVIF, WebP, un JPG di riserva e PNG per le immagini trasparenti.
- Imposta la Qualità, l'attributo sizes e la Cartella delle immagini sul tuo sito, e premi Rifai con queste impostazioni se li cambi.
- Confronta Prima e Dopo, poi premi Scarica tutto (.zip).
- Copia il codice picture per ogni immagine e incollalo nella tua pagina.
Perché più larghezze?
Un telefono non ha bisogno della stessa foto da 2000 pixel di un grande monitor. Con srcset elenchi più larghezze e il browser sceglie la più piccola che appare comunque nitida su quello schermo. L'attributo sizes gli dice quanto sarà larga l'immagine mostrata, così può scegliere prima che la pagina abbia finito di impaginarsi.
AVIF, WebP o JPG?
AVIF di solito è il più piccolo, WebP è subito dietro e funziona in tutti i browser attuali, e JPG è la riserva sicura. Il codice picture li offre in quest'ordine, così ogni browser prende il migliore che capisce. Le immagini trasparenti ricevono una riserva PNG invece di JPG così la trasparenza viene mantenuta. Se un formato è disattivato, questo browser non può crearlo; gli altri formati funzionano comunque.
Cosa viene rimosso
Ogni immagine viene ridisegnata e salvata da zero, quindi dettagli della fotocamera, posizione GPS, cronologia di modifica e profili colore incorporati vengono esclusi. Le foto scattate di lato vengono prima raddrizzate. Una qualità tra 75 e 82 è un buon equilibrio per le foto; la grafica con bordi netti può venire meglio un po' più alta.
Perché conta
- Le immagini più piccole fanno caricare le pagine più in fretta, soprattutto sui telefoni.
- Le pagine più veloci sono più facili da usare e tendono ad andare meglio nella ricerca.
- Rimuovere i dati sulla posizione protegge la privacy delle persone e dei luoghi nelle tue foto.
- Le immagini della dimensione giusta fanno risparmiare banda a te e ai tuoi visitatori.
Chi lo usa
Blogger, titolari di negozi, fotografi e sviluppatori che vogliono immagini nitide che si caricano in fretta. Per una singola immagine a una data dimensione di file, usa il compressore di immagini, e per cambiare tipo di file, il convertitore di immagini.
Domande
Che qualità devo scegliere?
Tra 75 e 82 è un buon equilibrio per le foto. Alzalo un po' per la grafica con bordi netti.
Mi serve AVIF se ho WebP?
AVIF di solito è più piccolo, e il codice picture ripiega su WebP e JPG per i browser che non possono mostrarlo.
Le mie immagini vengono caricate?
No. Vengono elaborate nel tuo browser.