Ottimizzazione delle immagini

L'ottimizzazione delle immagini riduce i byte necessari per distribuire un'immagine, mantenendo la qualità che il caso d'uso richiede. Combina più passaggi: scegliere un formato adatto, ridimensionare alla dimensione visualizzata, comprimere, rimuovere i metadati non necessari e caricare le immagini solo quando servono.

Sul web, l'ottimizzazione riguarda anche la distribuzione. Il markup per immagini responsive (gli attributi srcset e sizes) permette al browser di scegliere un file adatto allo schermo. Il lazy loading rinvia le immagini fuori dalla vista, e una CDN serve i file da una posizione vicina.

Il risultato si misura in dimensione del file e in metriche di velocità della pagina come Largest Contentful Paint, uno dei Core Web Vitals di Google.

Converti i formati immagine

Un cambio di formato spesso produce il risparmio maggiore. Image Converter converte tra PNG, JPG e WebP nel browser.

Perché l'ottimizzazione conta

Le immagini sono spesso la parte più pesante di una pagina web. Le immagini sovradimensionate rallentano il caricamento sulle reti mobili, consumano il traffico dati dei visitatori e possono abbassare i punteggi di velocità della pagina. I file più piccoli rendono inoltre più gestibili i repository di documentazione, gli allegati email e le esportazioni PDF.

Tecniche di ottimizzazione

• Ridimensiona alla dimensione visualizzata più grande, ad esempio al doppio della larghezza CSS per gli schermi ad alta densità.
• Scegli il formato in base al contenuto: PNG per interfacce piatte, JPG o WebP per le foto.
• Imposta una qualità con perdita intorno a 75-85 e confronta i ritagli ingranditi.
• Rimuovi i metadati non necessari, ma conserva il profilo colore quando il colore conta.
• Usa il lazy loading per le immagini sotto la piega.

Ottimizzazione per gli screenshot

Uno screenshot Retina di una finestra larga 1440 pixel è largo 2880 pixel. Se una pagina di documentazione lo mostra a 720 pixel CSS, un file da 1440 pixel copre gli schermi 2× e ha un quarto dei pixel.

In Temposhot, per la condivisione scegli JPG Export (Adjustable Quality) con qualità da 1 a 100 (predefinita 85), e mantieni PNG Export (Lossless) per i master. Website Capture salva direttamente JPEG, PNG o WebP.

Errori comuni

• Caricare catture Retina complete per miniature piccole.
• Comprimere gli screenshot di testo così tanto che le lettere si sfocano.
• Convertire tutto in un unico formato, indipendentemente dal contenuto.
• Ottimizzare l'unica copia e perdere l'originale.

Hai un'immagine da correggere adesso?

Riduci la dimensione del file con Image Compressor, e controlla prima la dimensione in pixel con Screenshot Resolution Checker.

Domande frequenti

Per gli screenshot del mio sito conviene WebP?

WebP di solito produce file più piccoli di PNG o JPG a qualità simile ed è supportato dai browser attuali.

Quanto deve essere grande uno screenshot della documentazione?

Circa il doppio della sua larghezza CSS visualizzata copre gli schermi ad alta densità senza sprecare byte.

Fonti

• Largest Contentful Paint (web.dev)
• Image compression (Wikipedia)

Risorse correlate

• Formati di esportazione: opzioni PNG, JPG e WebP.
• Lazy loading: rinvio delle immagini fuori dalla vista.