Scegliere il formato di immagine giusto per il web

Tre domande da porsi per prima cosa

Su un sito web reale, la scelta per ogni immagine si riduce a tre domande:

1. Che cosa mostra? Le foto si prestano ai formati con perdita come JPG, WebP con perdita e AVIF, perché i piccoli errori si confondono nei dettagli naturali. Screenshot, testi, grafici e illustrazioni a tinta unita hanno bordi netti, attorno ai quali la compressione con perdita può lasciare aloni visibili; per questo si prestano ai formati senza perdita (PNG, WebP senza perdita) oppure, se sono stati disegnati come forme, all’SVG.
2. Servono trasparenza o animazione? Il JPG non supporta né l’una né l’altra. PNG, WebP e AVIF possono memorizzare un canale alfa completo con bordi sfumati. Nelle GIF ogni pixel è del tutto trasparente o del tutto opaco, quindi su sfondi colorati i bordi curvi possono apparire seghettati o circondati da un alone. GIF, WebP, AVIF e APNG (PNG animato) possono contenere animazioni, ma un breve video è spesso molto più leggero di una GIF.
3. Dove verrà pubblicata? Sulle tue pagine HTML puoi offrire più formati. Un sistema di gestione dei contenuti (CMS), un negozio online o un modulo di caricamento decide quali formati accettare e può convertire i file per conto suo, quindi consulta la sua documentazione aggiornata. I programmi di posta elettronica differiscono tra loro più dei browser, quindi per le newsletter JPG e PNG sono la scelta più sicura.

Per capire come funziona ciascun formato, vedi JPG, PNG, WebP o AVIF.

Il formato in base al contenuto: una tabella decisionale

Quando pubblichi AVIF o WebP sulle tue pagine, conserva una versione JPG o PNG per i browser e le app che non riescono a visualizzarli. Quando una piattaforma accetta un solo file, di solito la scelta sicura è quella della colonna dei formati di riserva. Le favicon seguono regole proprie; vedi Favicon: dimensioni, formati e tag HTML.

Per un loop in stile GIF in una pagina web, un sostituto comune è un elemento <video> senza audio con gli attributi autoplay, loop, muted e playsinline, perché in genere i browser lasciano partire automaticamente i video con l’audio disattivato. Nelle email, alcune versioni desktop di Outlook mostrano solo il primo fotogramma di una GIF animata, quindi metti il messaggio principale in quel fotogramma.

Offrire WebP o AVIF con un formato di riserva

Nelle pagine di cui scrivi tu l’HTML, l’elemento <picture> permette a ogni browser di usare il primo formato che supporta:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Piatto di pasta al pomodoro" width="1600" height="1200">
</picture>

Il browser legge gli elementi <source> nell’ordine in cui compaiono e salta quelli con un type che non supporta. L’elemento <img>, obbligatorio, contiene il testo alternativo e la larghezza e l’altezza che permettono al browser di riservare lo spazio, e il suo file viene mostrato quando nessuna sorgente è adatta. Con una regola CSS come img { max-width: 100%; height: auto; } l’immagine si restringe comunque sugli schermi stretti e mantiene le stesse proporzioni. Per offrire anche più dimensioni, elenca in srcset ogni file con la sua larghezza e aggiungi un attributo sizes, come descritto in Ridimensionare le immagini: pixel, proporzioni e DPI.

Molti CMS e CDN per immagini sono in grado di creare copie WebP o AVIF e di scegliere quella giusta per ogni visitatore. Se il tuo lo fa, carica un JPG o un PNG di alta qualità e lascia a lui la conversione, invece di un file che hai già compresso molto: così l’immagine non viene compressa due volte.

Esempio pratico: le immagini di un articolo

Supponiamo che un articolo di ricette contenga tre immagini e che la sua colonna di testo sia larga al massimo 760 pixel CSS.

• Foto di apertura. L’originale scattato con lo smartphone misura 4032 × 3024 pixel, circa 12,2 megapixel. Una colonna di 760 pixel su uno schermo con due pixel del dispositivo per ogni pixel CSS richiede circa 1.520 pixel in larghezza, quindi 1600 × 1200 mantiene le proporzioni 4:3 con 1,92 megapixel, circa il 16% dell’originale. Prima ridimensiona, poi salva in AVIF o WebP più un JPG di riserva: l’originale a piena risoluzione ha più di sei volte i pixel della versione 1600 × 1200, e il browser ne scarterebbe la maggior parte riducendo l’immagine.
• Logo con sfondo trasparente. Il PNG fornito dal designer misura 1000 × 500 pixel e viene mostrato largo 200 pixel CSS, quindi 400 × 200 basta per gli schermi con due pixel del dispositivo per ogni pixel CSS. Mantienilo in PNG o WebP: un JPG riempirebbe le aree trasparenti con un colore uniforme, che su un’intestazione colorata si vede come un riquadro. Se il designer può esportare un SVG, ancora meglio.
• Screenshot di un’app timer. Testo e colori piatti: salvalo in PNG. Un JPG può aggiungere puntini attorno alle lettere, che i lettori notano più dei piccoli errori in una foto.

Convertire i file con il convertitore di immagini di LeedyBox

Il Convertitore di immagini cambia il formato di una o più immagini nel browser, senza caricare i dati delle immagini su LeedyBox.

1. Fai clic su «Scegli i file o trascinali qui» oppure trascina in quell’area file PNG, JPG, WebP, BMP, GIF o AVIF. Gli altri tipi, come HEIC o SVG, e i file che il browser non riesce a decodificare vengono rifiutati con un messaggio.
2. Ogni file ha un proprio menu del formato (etichettato «To:» sugli schermi più larghi), impostato inizialmente su JPG. Scegli JPG, PNG, WEBP, BMP, AVIF o ICO per ciascun file, oppure per tutti i file insieme con «Imposta tutti i formati su...» in «Opzioni batch».
3. Fai clic su «Converti e scarica». Un singolo file viene salvato, ad esempio, come logo_converted.webp; più file vengono scaricati in leedybox_converted_images.zip.

• Le dimensioni in pixel restano invariate, tranne che per l’ICO. Ridimensiona prima con Ridimensiona immagini, oppure usa «Limita anche larghezza e altezza» in Comprimi immagini.
• Per JPG, WebP e AVIF il convertitore chiede al browser la qualità 0,92 sulla sua scala da 0 a 1, e non c’è un cursore della qualità. Questa impostazione privilegia i dettagli rispetto al peso del file. Significa anche che il WebP viene salvato con perdita: non esiste un’opzione WebP senza perdita, quindi converti screenshot e grafiche con testo in PNG. Per file più leggeri, Comprimi immagini offre un cursore della qualità (75 per impostazione predefinita) e un peso massimo del file; vedi Le impostazioni di compressione delle immagini spiegate.
• I file JPG e i file BMP creati dal convertitore non hanno trasparenza, quindi le aree trasparenti diventano bianche. I file BMP, inoltre, non sono compressi: occupano 3 byte per pixel (ogni riga viene completata fino a un multiplo di 4 byte) più un’intestazione di 54 byte. Un’immagine di 1200 × 800 pixel diventa così un file di 2.880.054 byte (circa 2,9 MB), qualunque cosa mostri, quindi il BMP non è adatto alle pagine web.
• Un file ICO contiene una sola immagine PNG e mantiene la trasparenza. Un’immagine con un lato più lungo di 256 pixel viene rimpicciolita per rientrare in 256 × 256, quindi un logo di 1000 × 500 diventa 256 × 128; le immagini più piccole mantengono le loro dimensioni. Per un file favicon.ico con le dimensioni 16, 32 e 48 pixel, più le icone PNG e Apple touch, usa il Generatore di favicon.
• AVIF si può selezionare solo se il browser è in grado di creare file AVIF, cosa che al momento molti browser non sanno fare; altrimenti compare nell’elenco come «AVIF (non supportato da questo browser)». Se il browser non riesce a creare il formato scelto (anche l’output in WebP dipende dal browser), compare un messaggio e non viene salvato nulla, invece di salvare dati PNG con l’estensione sbagliata. Con più file, un solo errore di questo tipo interrompe l’intera conversione, e non viene creato alcun file ZIP.
• Ogni immagine viene ridisegnata e codificata da capo, quindi i dati EXIF, la posizione GPS e il profilo colore dell’originale non vengono trasferiti, e una GIF, un WebP o un AVIF animati diventano un’immagine fissa con un solo fotogramma. Il convertitore non crea file SVG, GIF o animati.

Problemi comuni e come risolverli

• Un logo trasparente ha un riquadro bianco o nero attorno. Probabilmente è stato salvato in JPG o come BMP senza trasparenza. Usa invece PNG o WebP; vedi perché la trasparenza si perde nel JPG.
• Il PNG è molto più pesante del JPG da cui deriva. Il PNG memorizza ogni pixel in modo esatto, compresi il rumore e gli artefatti di compressione del JPG, e la conversione non recupera i dettagli che il JPG ha già perso. Per le foto usa WebP o JPG.
• Un modulo di caricamento rifiuta WebP o AVIF. Alcuni moduli accettano solo JPG e PNG. Converti le foto in JPG e la grafica trasparente in PNG. Rinominare l’estensione non cambia il formato.
• Il file WebP è appena più leggero del JPG, o addirittura più pesante. Il JPG originale potrebbe essere già stato compresso molto, e la qualità 0,92 del convertitore conserva molti dettagli, compresi gli artefatti del JPG stesso, che occupano byte. Se in ogni caso il file resta troppo pesante, potrebbe essere ancora alle dimensioni originali della fotocamera. Riduci l’immagine alle dimensioni di visualizzazione, poi usa Comprimi immagini e confronta i risultati.
• I colori sembrano più spenti rispetto all’originale. Il convertitore disegna ogni immagine su un canvas del browser, che per impostazione predefinita lavora in sRGB, e non mantiene il profilo colore originale. Le foto in uno spazio colore più ampio, come Display P3 o Adobe RGB, possono perdere parte dei colori più saturi, e la differenza si nota soprattutto sugli schermi a gamut esteso. Esporta una copia in sRGB dal tuo programma di fotoritocco, controllala lì e converti quella.
• Una foto HEIC scattata con lo smartphone non viene accettata. HEIC non è tra i formati supportati dal convertitore. Molti smartphone possono esportare o condividere le foto in JPG; converti quella copia.

Cosa controllare prima di pubblicare

• Apri la pagina in due browser e su uno smartphone. Con <picture>, prova anche il formato di riserva rimuovendo temporaneamente le sorgenti AVIF e WebP.
• Confronta il nuovo file con l’originale alle dimensioni reali, osservando volti, testo e sfumature.
• Nel pannello Rete degli strumenti per sviluppatori del browser, controlla quale file è stato scaricato e quanto pesa.
• Se il sito ha una modalità scura, guarda le immagini trasparenti sia su sfondi chiari sia su sfondi scuri.
• Conserva gli originali e converti a partire da quelli: salvare di nuovo un file con perdita aggiunge nuovi errori a quelli già presenti.

Domande frequenti