I browser moderni vogliono AVIF, quelli vecchi vogliono WebP, e per tutto il resto ci deve essere qualcosa. Trascina un'immagine e porta via l'intero insieme più il markup che serve a ogni visitatore quello giusto per lui.
Ognuna produce l'insieme completo, non un singolo file.
AVIF, WebP e JPEG a 1280 e 360 pixel, più un elemento picture per immagine con le fonti nell'ordine giusto.
Indica la cartella dove staranno le immagini e il testo alternativo, copia il markup e prendi lo zip: l'HTML c'è dentro anche come file di testo.
Perché un browser prende la prima fonte che sa leggere, quindi l'AVIF deve venire prima del WebP e l'img semplice deve venire per ultimo. Con l'ordine sbagliato ogni visitatore si porta via il file più grande che hai offerto. È la parte noiosa da scrivere a mano e facile da sbagliare senza accorgersene.
1280 copre portatili e quasi tutti i tablet; 360 copre i telefoni, dove il risparmio conta davvero. Il srcset lascia scegliere al browser, così un telefono su una connessione lenta non scarica mai il file da scrivania.
No. Sono file normali: mettili accanto al tuo HTML e il markup funziona. Se più avanti metti un vero CDN per immagini davanti al sito non ti servirà niente di tutto questo, ma per una manciata di immagini su una pagina scritta a mano questo è tutto il lavoro.
Quello che l'immagine mostra, raccontato a chi non può vederla. Ogni immagine del gruppo ha il suo campo, perché una descrizione condivisa fra dieci fotografie non aiuta nessuno. Lascialo vuoto solo se l'immagine è puramente decorativa.
Ottimizzatore di immagini online gratuito