Immagini raster nel browser
Un'immagine raster è una griglia di pixel con metadati: larghezza, altezza, canali colore e formato contenitore. JPEG, PNG e WebP bilanciano diversamente compressione, fedeltà, trasparenza e supporto. Questa famiglia converte, ridimensiona, ispeziona e campiona colori interamente nel browser, senza caricare i byte del file su un server.
Per ottenere un WebP più leggero da una foto, usa Da JPG a WEBP. Il formato finale dipende dal destinatario: CMS datato, limite di dimensione, design system con alfa o budget prestazionale.
Formati e pipeline
JPEG comprime fotografie con perdita e non possiede canale alfa. Una nuova codifica a qualità inferiore elimina altri dettagli; JPEG in PNG non recupera dettagli già persi. PNG è senza perdita e supporta trasparenza, ma le fotografie PNG sono spesso grandi. WebP offre modalità lossy e lossless e spesso file minori a qualità simile.
La pipeline legge un File locale, decodifica un bitmap, disegna un canvas alla dimensione richiesta, esporta con tipo MIME e qualità opzionale e scarica il risultato. Il cursore qualità riguarda JPEG e WebP lossy; PNG rimane lossless per il buffer canvas. Convertendo PNG o WebP trasparenti in JPEG, le aree alfa vengono di norma composte su uno sfondo pieno.
Strumenti della famiglia
- Da JPG a WEBP e Da PNG a WEBP.
- Da WEBP a JPG, Da PNG a JPG e Da JPG a PNG.
- Ridimensiona per larghezza o altezza, Informazioni immagine e Colori dominanti.
Dimensioni, metadati e limiti
Specifica solo larghezza o altezza per mantenere le proporzioni. Ridurre aiuta il web; ingrandire inventa pixel. Peso su disco e megapixel misurano cose diverse: Informazioni immagine li mostra insieme. Canvas è una pipeline di pixel, non un archivio EXIF completo; può applicare l'orientamento, ma i tag GPS e della fotocamera raramente passano all'esportazione.
L'estrazione della palette conta o raggruppa colori dopo eventuale downsampling e fornisce campioni hex/RGB per CSS. Assunzioni sRGB e sottocampionamento cromatico JPEG cambiano i risultati. Evita catene lossy come JPEG → WebP → JPEG: WebP 80 non equivale a JPEG 80. Immagini enormi possono esaurire la memoria della scheda; TIFF CMYK e animazioni multi-frame non fanno parte del flusso previsto. Conserva un master e crea una sola codifica di consegna.