Immagini Web

Come ottimizzare immagini per web

Scegliere e modificare immagini web giuste per gestire la dimensione, il peso e le proporzioni è fondamentale su un sito web, sia per vendere un prodotto e-commerce, un semplice sito vetrina aziendale o un blog.

La diffusione dei social network non ha aiutato l’utente medio nel capire i meccanismi con cui bisognerebbe trattare un’immagine.

Un esempio semplice è l’utilizzo dei cellulari per caricare foto su Facebook, Instagram, Twitter ecc.

Un cellulare medio ormai utilizza fotocamere potenti che creano immagini sui 5 Megabyte.

Quando le immagini si caricano sui social network, vengono ridimensionate e compresse, per trasformare il peso sotto i 200kb, perdendo qualità senza che l’utente debba intervenire per modificare l’immagine.
I siti aziendali, in cui i contenuti vengono aggiornati autonomamente all’interno dell’azienda, sono programmati in maniera simile ai social network per rendere più semplice il caricamento, questo riempie il web di siti internet con immagini mediocri e di bassa qualità.

Come ridurre le dimensioni di una foto e modificare le immagini per siti web:

Alcune linee guida per ridurre dimensioni foto e un sito web più veloce:

Modificare e ridurre dimensione foto sempre prima di caricarla sul sito

Se possibile evitare di modificare dimensioni foto online.

Nel caso di siti web realizzati con WordPress, Joomla, Drupal o qualsiasi altro CMS che permetta di aggiornare i contenuti autonomamente, conviene modificare l’immagine prima d’inserirla sul sito. Anche se il sito è stato impostato per la compressione automatica al caricamento delle immagini.

Perché modificando personalmente l’immagine si può valutare il compromesso migliore tra la qualità e la fruibilità.

Utilizzare le giuste dimensioni e ridurre peso immagini

Le fotocamere solitamente sono settate per scattare foto in alta risoluzione adatte alla stampa, quindi con risoluzione immagini minima di 300 dpi, i monitor lavorano con una risoluzione di 72 dpi, utilizzare immagini di risoluzione superiore non serve a nulla e rende solo le immagini più pesanti rallentando il caricamento del sito web.

Stesso discorso per la grandezza delle immagini, una fotocamera digitale di solito crea dei file con minimo 3200 pixel per il lato lungo della foto. Un monitor di 24 pollici ha una risoluzione massima dello schermo di 1920 pixel. Pertanto è necessario ridurre pixel foto.

Inserire su un sito un’immagine con risoluzione superiore alla risoluzione massima del monitor non permetterebbe di visualizzare l’intera foto e rendendola sempre più pesante del necessario.

In generale una fotocamera digitale crea immagini da minimo 5/6 mega. Avere un sito anche con una foto di queste dimensioni comporterebbe tempi di caricamento assurdi soprattutto se si visualizza il sito web da uno smartphone.

Una pagina web con una galleria di 50 immagini, sarebbe impensabile anche per le connessioni più veloci. Conviene quindi preparare le immagini con le giuste modifiche.

Ci sono molti software sul mercato per comprimere immagini e ridurre risoluzioni immagini alcuni anche gratuiti ad esempio:

Photoshop

Gimp (gratuito)

Utilizzare il giusto formato immagine

Nel web i formati più utilizzati sono 3:  formato JPEG, PNG e GIF. Per velocizzare il sito conviene usare il formato giusto a seconda dello scopo.

Formato JPG

Il formato JPG è quello più frequente, si usa spesso per fotografie, illustrazioni e banner.

Formato PNG

Il PNG si usa solo in casi in cui bisogna avere uno sfondo trasparente, ad esempio per loghi e icone. Tende a essere più pesante del JPG quindi meglio usarlo solo quando è necessario per esigenze grafiche ben definite.

Formato GIF

Il GIF è un formato che è stato usato tantissimo nel web fino a qualche anno fa. Veniva usato per creare immagini animate.

Negli ultimi anni il formato GIF viene utilizzato per una tecnica particolare che si chiama Cinemagraph, per  creare foto animate di grande effetto.

Immagini Web Design: come modificare le foto per un sito web professionale

Utilizzare immagini originali e creative

Il visitatore medio in circa 5 secondi, se non è attratto da una pagina web, smetterà di visionarla per dirigersi da un’altra parte.

Le immagini sono una componente importante per attrarre l’utente che può essere un potenziale cliente. È sempre meglio valutare i contenuti e le immagini in modo che siano inerenti al contenuto del sito, al prodotto o azienda che si vuole sponsorizzare.

Utilizzare immagini creative, d’impatto e originali rende un sito unico e più interessate per i visitatori.

Non utilizzare immagini altrui illegalmente o senza citare le fonti

In alcuni casi non è possibile creare immagini originali per questo si cercano su Google, bisogna tener conto che  le immagini potrebbero essere protette da diritto d’autore.

Utilizzare immagini coperte da diritto d’autore potrebbe portare problemi giuridici.

Ci sono diverse soluzioni per trovare in internet immagini da poter usare sul vostro sito senza problemi. Inoltre esistono numerosi siti che forniscono immagini web gratis, nel caso vi servissero suggerimenti leggete l’articolo Immagini gratis senza copyright per il tuo sito web.

Come ottimizzare immagini per comparire su Google

Modificare sempre il nome dell’immagine

La ricerca di Google immagini usa il nome che si assegna alla foto caricata sul sito per farla comparire nei risultati di ricerca, quindi evitare i nomi automatici creati dalla fotocamera, evitare nomi anonimi come immagine1.jpg.

Usare sempre parole che descrivano il contenuto o prodotto che si vuole sponsorizzare con l’immagine.

Inserire il tag alt dell’immagine sul sito

Il tag alt (o testo alternativo) è un codice collegato all’immagine che comunica a Google il contenuto dell’immagine, anche questo aiuterà a far comparire nella ricerca di Google immagini le tue foto.

Per modificare il tag alt su wordpress bisogna andare nei Media, selezionare la foto e a destra dello schermo comparirà il pannello raffigurato qui sotto per modificare il tag alt (o testo alternativo).