X


Immagini e web: quali formati scegliere?

Immagini e web: quali formati scegliere?

Partiamo dalla fine per spiegare che il mondo del web non è perfetto, anzi tutt'altro.

Troppi sono i browser a disposizione e tutti con differenze di interpretazione.

Lo standard non è riconosciuto da tutti ed in particolare sulle immagini vi sono "lotte di formato" che non aiutano, così come da sempre accade nel mondo audio/video, come ad esempio nel passato fra VIDEO2000 / VHS / Betamax o nel digitale fino ad arrivare ai vari formati di codifica dei file audio e video. Non sempre il formato migliore vince questa gara e purtroppo non sempre è così facile definire standard che vadano bene a tutti.

Sempre più si parla di SEO, ovvero l'ottimizzazione per il posizionamento siti web, e uno fra i principali fattori determinanti da un punto di vista tecnico per l'ottimizzazione, è il tempo di caricamento delle pagine.

Quando si parla di tempo di caricamento uno dei fattori determinanti è la parte grafica del sito web, che non è l'impaginazione come molti possono pensare, ma i veri e propri contenuti, ovvero le immagini ed eventuali video presenti nella pagina web che viene caricata.

Dove si trovano le immagini?

Le immagini possiamo trovarle un po' ovunque in una pagina web, partendo dal logo, fino ad arrivare a delle icone, o spesso in testate a scorrimento definite slide.

Quello che accade spesso purtroppo è che le immagini, disseminate nelle varie parti della pagina non sono gestite correttamente e quindi portano ad un appesantimento della pagina che ne compromette la velocità di caricamento.

Scopriamo ora assieme dove è possibile trovare maggiormente i file immagini e come gestirli al meglio.

Dove sono nascoste le immagini?

  • Logo
  • Icone di navigazione e social media
  • Slide
  • Tabs
  • Sfondi
  • Finiture grafiche
  • Footer
  • Prodotti e Categorie

Partiamo da una premessa comune

Le immagini devono essere della corretta proporzione, risoluzione e dimensione. Non è bello vedere immagini deformate, di bassa qualità o pesanti a tal punto da fare fatica a caricarsi (nel digital, così anche nel web si usano i Pixels e gli schermi dei dispositivi per quanto grandi, sono piccoli). Caricare immagini da 10.000px x 4000px per una slide non ha senso ed avere una risoluzione sopra i 100dpi (punti per pollice) ancora meno in quanto non serve andare in stampa su dei cartelloni stradali.

I formati emergenti per il web sono il jpeg2000 ed il webp *. Purtroppo non essendo ancora formati riconosciuti da molti browser utilizzati diventa difficile scegliere di utilizzarli e chi lo fa lo fa a proprio svantaggio in quanto si otterranno queste situazioni in diversi casi.

Schermata-2022-10-11-alle-10.19.44.png

Schermata-2022-10-11-alle-10.20.14.png

Come si può notare il browser non ha correttamente caricato le immagini, perché di un formato non riconosciuto. Invece da un browser compatibile come nell'esempio seguente, le immagini verranno correttamente interpretate e quindi visualizzate.

Schermata-2022-10-11-alle-10.22.41.png

Schermata-2022-10-11-alle-10.23.12.png

Una bella grafica non rende un sito web efficace, ma dei difetti od errori di caricamento e visualizzazione portano quasi certamente il navigatore ad abbandonare il sito compromettendone l'efficacia.

Un sito non posizionato a causa della mancanza di ottimizzazione non porta clienti che stanno facendo ricerche, quindi non serve a nulla avere un bel sito. Serve avere un sito che trasmetta fiducia.

Logo

Il logo rappresenta l'azienda o il brand e tutti vogliamo che sia bello ed efficace, oltre che integrarsi nella pagina web correttamente. Il logo nel web si deve fondere con il lo sfondo (background) della pagina web, che potrebbe essere uniforme o no e che potrebbe cambiare saltuariamente. Pertanto la soluzione migliore per la praticità è che sia una immagine trasparente, cioè scontornata. Per questa ragione la scelta del jpg, come del jpg2000 non è consigliata in quanto non supportano trasparenze e quindi viene applicato uno sfondo bianco dove il contenuto dell'immagine in origine sarebbe mancato per creare le trasparenza. I formati consigliati sono png, webp ed svg.

Icone di navigazione e social media

Le icone di navigazione sono spesso utilizzate nei menu per suddividere graficamente categorie, specie negli ecommerce, ma in generale utilizzate dagli sviluppatori in tanti menu di navigazione per la creazione siti web, che per lo sviluppo gestionali web. Tutte queste icone, per quanto piccole (ma purtroppo numerose) tendono ad appesantire il caricamento delle pagine. Quello che si può consigliare vivamente è di smettere di considerarle icone in quanto tali graficamente, ma considerarli caratteri. La soluzione ottimale è quindi di visualizzare icone che sono gestite tramite servizi come ad esempio FontAwesome, che consente già in versione gratuita di avere quasi tutto il necessario per arricchire i propri siti con icone di varie tipologie e settori, anche social.

Slide

Le slide sono la parte più delicata della pagina: immagini grandi, spesso a tutto schermo e gli schermi oggi sono enormi e quindi si ha paura di avere immagini di bassa qualità che potrebbero risultare sgranate o poco definite. Il jpg è sicuramente se compresso un valido formato, ma potrebbe essere utilizzato anche il jpeg2000 o il webp. Difficilmente sarà utilizzabile un formato svg in quanto sono quasi sempre immagini con foto, quindi non adatte ad una grafica vettoriale. Sicuramente sconsigliato l'utilizzo del png in quanto formato più pesante e nelle slide non sono necessarie trasparenze, e sconsigliato anche il gif per la limitata gamma di colori gestita oltre che la pesantezza su immagini grandi. Quello che è consigliato è "non eccedere con il numero delle immagini" che a rotazione si visualizzeranno nella pagina web. Una sola immagine efficace sostituita saltuariamente potrebbe essere la scelta migliore.

Tabs

Come per le slide, anche le tabs sono una parte delicata della pagina: immagini medie, ma spesso numerose e che per motivi artistici vanno a sostituire talvolta elementi che potrebbero essere testuali. Anche in questo caso il jpg è sicuramente se compresso un valido formato, ma potrebbe essere utilizzato anche il jpeg2000 o il webp. A differenze delle slide, nelle tabs potrebbe essere utilizzabile un formato svg in quanto sono spesso immagini con elementi grafici adattabili a concetti che possono essere raffigurati con vettori o font come per i menù di navigazione, quindi sì a svg e a webfont come FontAwesome se possibile. Nei tab, potrebbe anche sorgere l'esigenza di rappresentare delle brevi animazioni, ed in questo caso, piuttosto che caricare un video, è sicuramente consigliato utilizzare il gif per realizzare l'animazione (gif animato).

Sfondi

Per gli sfondi se possibile è meglio evitare immagini che appesantiscono inutilmente il caricamento della pagina web. Meglio scegliere di creare gli sfondi con il CSS3 o al massimo elementi vettoriali in svg o utilizzare piccoli pattern ripetuti più volte in jpg o gif.

Finiture grafiche

Se possibile evitare di caricare immagini per delle finiture grafiche è meglio farlo, altrimenti utilizzare il formato compresso più adatto al caso senza eccedere in quantità e pesantezza.

Schermata-2022-10-11-alle-11.18.20.png

Footer

Spesso si trovano elementi grafici nel footer, con la funzione puramente decorativa, ma che però non servono a nulla se non ad appesantire ulteriormente tutte le pagine web del sito (è il footer e ce lo porteremo dietro in tutte le pagine del sito). Anche in questo caso, se possiamo evitare è meglio farlo. Se proprio non si può resistere a limitarsi a colori o ad elementi gestiti con il CSS, allora meglio utilizzare svg, webp, jpeg2000 o jpg se compresso.

Schermata-2022-10-11-alle-11.24.14.pngNon è stato fornito nessun testo alternativo per questa immagine

Prodotti e Categorie

Quando si ha un sito ecommerce si avranno sicuramente delle categorie per suddividere i prodotti (spesso numerosi), quindi sia nei menù di navigazione si apriranno dei pannelli (megamenu) contenenti immagini di differenti categorie e prodotti. Per queste immagini innanzitutto è sconsigliato utilizzare le immagini originali delle rispettive pagine, bensì delle immagini salvate appositamente con dimensioni e quindi pesantezza minore, nei formati consigliati jpg è sicuramente se compresso un valido formato, ma potrebbe essere utilizzato anche il jpeg2000 o il webp.

Riepilogo Compatibilità immagini

* Conviene rischiare?

Come dichiara Google ufficialmente, webp è sicuramente il formato del (si spera prossimo) futuro, ma purtroppo non essendo ancora compatibile al 100% i disagi si presentano molto frequentemente. E' però possibile risolvere questa problematica attuale, grazie al JavaScript rendendo compatibile il sito web fornendo così con le librerie un supporto ai browser che non sono compatibili.

Verifica il tuo sito web

1652341027288.jpeg

Schermata-2022-10-11-alle-11.46.21.png

Schermata-2022-10-11-alle-11.47.01.png

Se già hai un sito e non ottieni i risultati sperati, visita il sito della nostra web agency e contattaci tramite whatsapp al 334.9890342 per informazioni o pianificare una call online quando ti è più comodo.

 

Alcune testimonianze

Ecco un paio di testimonianze.

Desideri sapere cosa pensano altre aziende di noi?

Sei nostro cliente o ci conosci?

Per noi ed i nostri futuri clienti è importante avere un tuo feedback. Lascia una tua testimonianza sul canale che preferisci

Richiedi il check up del tuo sito web

La nostra web agency ti fornirà il report gratuito quanto prima

Selezionare un servizio di interesse

6+4=
  Autorizzo al trattamento dei dati personali ai sensi e per gli effetti del D.Lgs. 196/03. Leggi informativa completa