JPG / JPEG – Il formato
JPG (Joint Photographic Experts Group) è un formato fotografico. Ciò significa che supporta milioni di colori ed è quindi ideale per immagini e foto reali. Quello che molte persone non sanno: JPG è “in perdita"; cioè ad ogni nuovo salvataggio come JPG il file perde quantità irrevocabilmente massicce di dati e quindi di qualità.
I vantaggi di JPG sul Web: questo formato di immagine richiede pochissimo spazio di archiviazione e può essere caricato e scaricato rapidamente. Per semplici fotografie nel web o nell'area dei social media, JPG è sicuramente consigliato. Tuttavia, non appena le animazioni e le trasparenze delle immagini, i loghi o i simboli devono essere visualizzati, vengono utilizzati altri formati di file.
GIF – Il formato animazioni
GIF (Graphics Interchange Format) è stato sviluppato per facilitare l'invio di immagini anche con connessioni di rete lente. A differenza di JPG, GIF conserva tutti i dati contenuti nel file. I GIF sono di solito più piccole delle JPG, ma possono accettare solo fino a 256 colori indicizzati. Pertanto, un GIF non può essere descritta come lossless e non è nemmeno adatta per la riproduzione di foto.
I vantaggi delle GIF sul Web: Sono adatte a grafiche piccole e semplici e possono essere animate! Questo fornisce un metodo efficace per portare movimento nei vostri canali online. Se possibile, animazioni di alta qualità o icone, dovrebbero essere animate da Canvas o CSS o SVG.
PNG – Il formato dei loghi
PNG (Portable Network Graphics) è la scelta migliore se si vuole lavorare con un'immagine complessa e la dimensione del file non è un problema. I PNG sono più comunemente usati per le immagini statiche. Come per il formato GIF, anche qui è possibile realizzare animazioni.
PNG-8 è simile a GIF perché supporta 256 colori indicizzati e trasparenza.
PNG-24 può supportare fino a 16 milioni di colori.
Vantaggi di PNG sul Web: Nessun dato viene perso durante la compressione. I PNG sono ideali per la grafica dettagliata e le illustrazioni che contengono aree monocromatiche. La trasparenza, anche in combinazione con l'effetto drop shadow, è ben supportata.
SVG – Il formato moderno per loghi ed icone
SVG (Scalable Vector Graphics) è un formato vettoriale per immagini statiche o animate con o senza perdita di compressione. È più potente di altri formati di file web. A differenza dei raster JPG, GIF e PNG (basato su pixel), un'immagine SVG viene tratta da forme e curve dichiarate matematicamente (basate su vettoriali). Tuttavia, l'integrazione dei formati SVG non è ancora supportata in modo coerente sul web e spesso porta ad errori di visualizzazione, specialmente con il browser Internet Explorer 11, ormai superato.
Vantaggi di SVG sul Web: SVG può essere animato, supporta la trasparenza e qualsiasi combinazione di colori o gradienti. Si tratta di un formato di file lossless come GIF e PNG, ma può essere scalato tutte le volte che vuoi e rimane nitido e chiaro a qualsiasi risoluzione e dimensione. Un altro grande vantaggio: rispetto ad altri formati, la dimensione del file è molto piccola.
Avete mai sentito di WebP?
La velocità di caricamento è uno dei fattori più importanti per l'ottimizzazione di un sito e proprio per questo è importante utilizzare immagini compresse.Il motore di ricerca Google, già nel 2010, ha presentato il proprio formato immagine royalty-free, per siti web più veloci grazie appunto a WebP.
WebP: Il formato efficiente per le immagini sul web
Il formato video VP8 è servito come modello per il formato chiamato WebP. Google ha migliorato WebP grazie a caratteristiche come la modalità di compressione lossless, la trasparenza (canale alfa) e l'animazione. Tutto il software per l'editing e la visualizzazione di WebP è concesso in licenza BSD come standard. Google utilizza questo formato, ad esempio, nel Chrome Web Store e nelle applicazioni mobili di Google.
Chrome e Opera hanno supportato il formato di compressione per un bel po' di tempo – come anche una varietà di browser, come Safari e Firefox, ma finora solo sperimentali.
Vantaggi del WebP sul Web: Fin dall'inizio, WebP ha avuto lo scopo di ridurre le immagini sul web alla dimensione più piccola possibile. Mentre questi due formati classici si basano su diversi metodi di compressione - PNG lossless, JPEG lossy - WebP permette entrambe le possibilità. Grazie a questa flessibilità, il formato è adatto sia per foto, che per piccole immagini e grafica.
Le caratteristiche di compressione e altre elementi chiave del formato WebP:
- Compressione (lossy): La compressione lossy con WebP si basa sulla codifica keyframe del VP8.
- Compressione (lossless): La compressione lossless con WebP si basa su varie tecniche che trasformano i parametri e i dati dell'immagine.
- Trasparenza: Il canale alfa a 8 bit fornito dal formato WebP può essere utilizzato anche con la compressione RGB lossy.
- Metadati: WebP può contenere metadati EXIF e XMP tipicamente generati dalle telecamere.
- Profilo colore: Il formato Google può contenere profili ICC incorporati (set di dati che descrivono lo spazio colore).
- Animazioni: Il formato WebP consente di salvare sequenze di immagini.
-> Informazioni sempre aggiornate sul supporto del browser per WebP e SVG possono essere trovate su caniuse.com
Preparazione dei loghi per il Web:
Infine, un consiglio generale per l'utilizzo dei loghi: Il formato EPS è sempre la scelta migliore come file di origine. L'EPS è un formato vettoriale che si scala facilmente e può avere uno sfondo trasparente. Viene solitamente utilizzato nel settore della stampa. Oh, ma poi non posso usarlo sul web?Sì, in linea di principio è corretto, ma il web designer può semplicemente creare il formato più adatto per la particolare applicazione a partire dall'EPS meravigliosamente adattabile - come ad esempio un logo con sfondo trasparente per il vostro sito web.