Tipi di immagini per siti web

Tipi di immagini per siti web.

In questo post Elencheremo i tipi di immagini per i siti Web. È un problema a cui bisogna prestare attenzione poiché influenza il tempo necessario per caricare le pagine e lo spazio su disco sul server. È il prologo ad un altro in cui menzioneremo gli strumenti Linux per preparare le immagini.

Vi avevo detto qualche giorno fa che, su richiesta di un vecchio amico, ho ripreso temporaneamente lo sviluppo web (attività che avevo abbandonato perché non sopportavo i clienti) e ne approfitto per parlarvi di diverse soluzioni open source.

Tipi di immagini per siti web

Un sito ha due tipi di contenuti di base, testo e contenuti multimediali. Le informazioni su quel contenuto viaggiano sulla rete in formato bit e il browser le ricostruisce separando ciò che sono le parole dalle immagini, dai video o dai suoni.

Nel caso delle immagini, Vengono utilizzati diversi formati che contengono informazioni sulla posizione dei pixel, colori, dimensioni e algoritmo di compressione.

I formati di immagine più utilizzati sui siti Web sono:

  • APNG: È stato sviluppato da Mozilla per fornire funzionalità di animazione al formato PNG. Ideale per animazioni non sincronizzate con altre risorse come il suono. Funziona con una tavolozza di colori molto più ampia rispetto alla GIF.
  • AVIF: Non deve essere confuso con il formato video AVI. Il suo nome è l'acronimo di AV1 Image Format e codifica i bitstream AV1 nel contenitore HEIF (High Efficiency Image File Format). Ha una compressione con perdita migliore rispetto a JPG e PNG e una migliore compressione senza perdita rispetto a WebP. Supporta animazioni e trasparenza. Come punto negativo va notato che l'immagine deve essere scaricata completamente per essere visualizzata, anche se questo è compensato dal tempo di download più breve.
  • bmp: Cito il classico formato immagine di Windows, solo per dirti che non dovresti mai usarlo. Sebbene esistano alcuni modi per ridurne le dimensioni, tendono ad essere immagini piuttosto pesanti.
  • GIF: è un formato creato per comprimere la grafica a 8 bit senza perdite. È ideale per animazioni e immagini semplici su siti Web destinati a luoghi con connessioni lente, poiché consente di visualizzare l'immagine completa, ma con una qualità inferiore quando non ha terminato il download.
  • JPEG: È un formato di compressione con perdita ampiamente utilizzato per le foto, sebbene non sia consigliato per grafici o diagrammi.
  • PNG: Anch'esso ampiamente utilizzato, offre compressione senza perdite, eccellente gestione della trasparenza e una tavolozza di colori più ampia rispetto a GIF.
  • SVG: Al posto dei pixel, questo formato definisce le immagini con una serie di comandi che le costruiscono. È ideale per grafici e diagrammi che richiedono una rappresentazione precisa.
  • TIPO: Non è un formato molto utilizzato poiché genera immagini molto pesanti. Anche se può essere utile se ciò che desideri incorporare nel sito sono immagini scansionate. È possibile memorizzare più immagini in un unico file.
  • WebP: Questo formato per immagini fisse e animazioni produce file più piccoli con o senza compressione rispetto a JPEG e PNF. Può anche essere utilizzato per creare animazioni. Sebbene sia supportato da tutti i browser moderni, quelli più vecchi non sono compatibili.

Quale immagine utilizzare per ciascun caso

  • Fotografia: l'ideale è utilizzare JPEG o WebP. Nel caso in cui le dimensioni siano critiche è meglio utilizzare il secondo, se si vuole garantire la compatibilità con i browser più vecchi il primo.
  • Icone: la migliore compatibilità e rapporto dimensioni è offerta da PNG. Si può utilizzare anche WebP (tenendo conto che solo i browser moderni lo supportano) OPPURE SVG se vogliamo utilizzare un'immagine vettoriale che mostreremo ingrandita in altre parti del sito.
  • Screenshot: Tenendo conto che in questo tipo di immagini abbiamo bisogno che il testo sia visibile, è meglio utilizzare un'immagine con compressione senza perdita di dati come PNG o WebP. Puoi testare come appare usando JPEG.
  • Diagrammi e grafici: in questo caso, senza dubbio, la soluzione migliore è SVG, anche se possiamo inserire un'immagine in formato PNG come backup.

Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.