032 BASI: Formati grafici per il Web (svg, gif, png e jpg)

Che differenza c’è tra un formato grafico e l’altro e quando vanno usati e perché? Quali file mi devo far consegnare dall’Agenzia Web a fine lavori? Posso inviarti un selfie da mettere sulla pagina Chi siamo del sito web?


IN PRIMO PIANO:

INSTAGRAM: @cercasiai
EMAIL: aaaicercasi @ gmail.com
TWITTER: @Aicercasi

Myfoglio.com è l’app di fatture freemium, sicura e completa già dalla versione non a pagamento. Provala qui:
https://www.myfoglio.com/

Concorso 2021: inviami un email a aaaicercasi @ gmail.com con indicato cosa fai e perché sei un ascoltatore “specialissimo” e a fine 2021, se mi avrai convinto, potrai vincere un abbonamento myfoglio premium!

TinyPNG
strumento di compressione online
https://tinypng.com/

WPOptimize
plugin per WordPress
https://getwpo.com/

Argomenti della puntata:

  • I file sorgenti vanno sempre richiesti e conservati
  • Immagini vettoriali vs raster
  • Come funzionano le immagini svg
  • Differenza tra gif e png
  • Qualità delle jpg
  • Come inviare un selfie utilizzabile online
  • Ottimizzazione delle immagini Web

Ascoltala qui:

Iscriviti:
iTunes | Spreaker | Spotify | CastBox (Android) | Google Podcast | Deezer | Podchaser

Trascrizione:

Un logo jpg 100x50px per il sito Web va bene? Una mia foto 250x250px 72dpi può andare per il Chi siamo del sito? Risposta corretta: NO. Non vanno bene. E in questa puntata ti spiego finalmente il perché.Sì perché ci si vergogna quasi a chiedere spiegazioni semplici e definitive sui formati grafici per il Web. È più facile imbattersi nel tuttologo esperto di Illustrator che ti fa notare che quelle infografiche che hai disegnato al volo per un power point di un cliente non hanno i tracciati in compound path o che le icone che hai fatto di 1px di spessore, per accontentare l’ennesimo stakeholder, non sono scalabili, piuttosto che ci sia qualcuno che ammetta candidamente che non riesce a capire quali formati grafici vadano usati in determinati contesti, soprattutto nel Web. E invece a me capita più e più volte con i miei clienti, giustamente, perché non è un disonore non sapere queste cose, assolutamente, che non solo non riescano a comprendere la differenza tra i formati, ma spesso anche che non richiedano i sorgenti dei propri loghi o del materiale che si fanno realizzare dalle agenzie, quando in realtà è un loro diritto averli e conservarli, sempre che non sia differentemente specificato nel contratto. È una puntata base, per cui non la semplificherò al massimo. Vettoriali e raster Innanzi tutto partiamo dai due tipi principali di immagini: l’immagine di tipo vettoriale e l’immagine raster, detta impropriamente bitmap. L’immagine vettoriale è quella realizzata con punti, linee e coordinate nello spazio. Quando salvi un’illustrazione realizzata con Illustrator, per intenderci, stai salvando un vettoriale, un’immagine svg è un’immagine anch’essa vettoriale. Se trascinerai l’svg sul notepad ti mostrerà una lunga descrizione di codice xml che va a descrivere i punti e le forme geometriche nelle specifiche coordinate. Ovviamente ciò accade se il disegno è una forma ‘pura’, se hai importato un’immagine bitmap all’interno del tuo Illustrator o incorporato un file di Photoshop, che lavora con le bitmap, ovviamente anche se lo salvassi in svg, manterrebbe solo un collegamento ad una bitmap. Ma se hai disegnato la tua grafica con lo strumento curve di Bézier e le forme geometriche semplici, sicuro che il tuo svg mostrerà tanto codice quanto più sarà complessa la forma che hai realizzato. In generale questo tipo di immagini vengono usate per le icone, le illustrazioni, i loghi etc. Hanno il vantaggio di essere molto leggere, se il disegno è molto semplice, ma più che la leggerezza in termini di KB sono apprezzate per la scalabilità ovvero per il fatto che puoi allargarle o rimpicciolirle e non perdono mai di definizione. Quando un’agenzia ti realizza un logo, ricordati di farti consegnare anche il sorgente e di tenertelo conservato in un archivio tuo personale. Il sorgente serve per modificare facilmente le caratteristiche di un logo, per risalire al font con cui è stato realizzato il logo e per apportare delle variazioni senza doversi ricostruire il disegno da zero. Se non vuoi avere problemi di importazioni varie tra versioni e programmi diversi tra un’agenzia e l’altra o tra un’ agenzia che fa il logo e il web designer che ti sviluppa il sito, consiglio di farsi esportare qualsiasi immagine vettoriale in svg. Oltretutto l’svg costringe chi realizza il logo a realizzarlo in maniera molto ‘pulita’ senza inserire sfumature bitmap o maschere di Photoshop che andrebbero a creare dei problemi quando lo si andrà a scalare in contesti vari. Ora vediamo invece cos’è una bitmap, meglio detta, raster. L’immagine bitmap è un’immagine realizzata da una serie di pixel affiancati descritti uno ad uno. Per intenderci al volo, immagini di tipo raster o bitmap sono tutte le immagini di tipo fotografico. Un’immagine bitmap conterrà tante informazioni in base alla sua risoluzione. Un’immagine di risoluzione 72dpi è un’immagine che contiene relativamente pochi pixel per pollice e che quindi peserà in termini di KB meno di una da 300dpi a parità di larghezza e altezza. Però se per il web una risoluzione di 72dpi è accettabile, anche se ormai è diffuso anche il 96dpi, per la stampa un’immagine a 72 dpi è di qualità troppo bassa, come minimo un service di stampa la richiede di 300dpi. Le poche regole e buone sono queste. Per le vettoriali, per immagini illustrate in maniera semplice, esportare in svg è quasi la soluzione a qualsiasi problema. Ci sono ovviamente le eccezioni che confermano la regola, ma più o meno vale per la maggior parte dei casi. Per le immagini fotografiche, o bitmap o raster, l’importante è che ci sia spazio di manovra per poterle lavorare. Per cui considerando un monitor di 2560 px come limite e ponendo il caso che l’immagine fotografica la si voglia utilizzare come sfondo non si può scendere sotto i 3000px di larghezza e a una risoluzione standard Web di 72dpi. Se vanno utilizzate in altri contesti o possono essere più piccole, sarebbe sempre preferibile quando si consegna il materiale per un sito, non scendere al di sotto dei 1900px di larghezza a 72dpi. Questo perché le bitmap non possono mai essere ingrandite, nel caso solo rimpicciolite. Perdono informazioni ogni volta che le si rimpicciolisce per cui ingrandendole è il programma di grafica che tenta di simulare e ricreare le informazioni perdute, spesso con scarsi risultati. Ultima cosa da aggiungere sulle immagini bitmap che si realizzano amatorialmente. Quando fai un selfie e ti viene particolarmente bene e decidi che solo quella è l’immagine giusta e rappresentativa di te stesso da inserire sul ‘Chi siamo’ del sito della tua azienda, per prima cosa assicurati di avere impostato i parametri del tuo smartphone alla migliore qualità possibile, senza compressioni. Poi, una volta verificato questo, quando lo invii tramite posta, assicurati di inviarla anche lì senza ulteriori compressioni. Questo perché prima di inviare un’immagine di grandi dimensioni, l’app dello smartphone chiede di ottimizzarla in automatico facilitarne l’invio. Formati delle immagini raster I formati delle raster sono il GIF, conosciuto attualmente per via dei numerosi meme che altro non sono che GIF animate, i PNG, le JPG e molti altri formati, ma elenco solo i più comuni sul Web. Le GIF hanno il vantaggio di poter essere animate, ma lo svantaggio che perdono molto di qualità e che non possono avere un fondo totalmente trasparente. L’unica trasparenza possibile con le gif è applicargli un colore che non sia presente nell’immagine, solitamente un colore tipo verde lime, e cancellarlo. Spesso però questo produce il classico alone fluo attorno alle immagini che presentano una leggera sfumatura di pixel sul contorno. Attualmente sono tornate alla ribalta appunto con meme dei vari WhatsApp o Telegram. Le PNG col tempo hanno sostituito quasi tutti i casi in cui si usavano le GIF, proprio perché avevano la trasparenza. Le JPG sono quelle che consentono una compressione maggiore delle immagini fotografiche. L’effetto è che più si abbassa la qualità di un’immagine jpg più questa si ‘impasta’ ovvero diventa meno definita e sfuocata proprio perché cerca di perdere un po’ di informazioni per singolo punto. Le immagini raster per un sito web quindi devono essere essenzialmente grandi almeno 1900px di larghezza e meglio se superiori a 72dpi, ovviamente per inserirle in un sito Web andranno ottimizzate e ridotte di peso, ma poiché questa azione presuppone una perdita di informazioni irrecuperabili una volta effettuata, è necessario partire dall’immagine più definita possibile. Online ci sono poi degli strumenti che aiutano ad ottimizzare le immagini come Tinypng https://tinypng.com/. Oppure come il plugin di ottimizzazione delle immagini di wordpress WpOptimize. Per tornare alla domanda iniziale quindi: Un logo jpg 100x50px per il sito Web va bene? No perché un logo, se è realizzato con forme geometriche e testo, come quasi sempre accade, è meglio che sia in formato svg affinchè sia anche scalabile. Una mia foto 250x250px a 72dpi può andare per il ‘Chi siamo’ del sito? No, perché è troppo piccola.

%d blogger hanno fatto clic su Mi Piace per questo: