Ottimizzazione delle immagini: risorse per principianti ed esperti SEO

2)Scegliere il formato giusto per le vostre immagini
Come regola generale, GIF e PNG sono i migliori formati per piccole immagini: loghi, icone ed elementi di design. JPG sono considerati migliori per le immagini più rappresentative della pagina web, con una vasta gamma di colori e maggiori dettagli.
Risorse: https://litmus.com/blog/png-gif-or-jpeg-which-ones-should-you-use-in-email

3)Immagini uniche
Particolarmente importante per siti di ecommerce. Sempre meglio utilizzare le proprie immagini originali, ma quando questo non è fattibile e si sta utilizzando le stesse immagini prelevate dal produttore, tutti i vostri concorrenti stanno facendo la stessa cosa, cercare quindi di creare una immagine unica aggregando più immagini dello stesso prodotto, lavorando anche sulle dimensioni delle stesse, al fine di fornire comunque informazioni diverse relativa a quella immagine ai motori di ricerca. Non hai Adobe Photoshop? È possibile modificare le imamgini con strumenti gratuiti come Pixlr o Gimp.
Risorsa: http://searchenginewatch.com/article/2120682/Image-Optimization-How-to-Rank-on-Image-Search

4)Scalare le immagini
Operazione fondamentale per chi opera nel campo dell’ottimizzazione di siti web e sulla velocità di caricamento delle pagine.
Risorsa: http://stackoverflow.com/questions/14412099/what-is-a-scaled-image-and-how-do-i-serve-one-in-a-webpage

5)Ridurre qualità: sweet spot
In questo periodo storico in cui il mobile sta crescendo in modo esponenziale, risulta fondamentale cercare di operare sulla dimensione dei file, cercando di ridurla maggiormente, cercando pero’ di non sacrificare la “percezione” di qualità.
Risorsa: http://www.html5rocks.com/en/tutorials/speed/img-compression/

6)Modificare il nome del file
Cercare di fornire un nome descrittivo e preciso alla vostra immagine, non riempitela di parole chiave, utilizzate trattini e lettere minuscole. Per esempio ha molto più senso avere un’immagine denominata fantastiche-spiagge-cuba.jpg che rappresenta la bellezza delle spiagge a Cuba, piuttosto che un nome del tipo DSC773gdbb36.jpg. Fornendo un nome descrittivo logico e preciso avrete maggiore possibilità di migliorare il rank in serp.

7)Aggiungere alt text
Inserire nel tag alt dell’immagine il testo alternativo, “alt text”, un attributo che fornisce informazioni sul tag immagine, in questo modo: —- img src = “/ images / cuba / fantastiche-spiagge-cuba.jpg ” alt = “Spiagge fantastiche a Cuba” —–
Risorsa: http://www.mattpolsky.com/image-optimization-and-alt-text-best-practices/

8)Utilizzare una strategia di immagini in miniatura
Una possibile strategia è cercare di fornire un nome del file ed un alt text diverso per le immagini in miniatura rispetto alle immagini canoniche, mettendo poi tutte le miniature in una directory separata, bloccando poi la directory nel file robots.txt.
Risorsa: https://support.google.com/webmasters/answer/35308?hl=en

Ulteriori consigli per SEO a livello intermedio:

9)Eliminare e sostituire tutte le immagini non necessarie con i CSS e JS
E ‘probabile che molti degli elementi di design che vuoi sul tuo sito web – pulsanti, gradienti, ombre, angoli arrotondati, e immagini sovrapposte – possano essere realizzate con CSS e JS.

10)Sostituire tutte le immagini con testo codificato con immagini + web font
Allo stesso modo.. webfonts soddisfa il desiderio di tipografia efficace e allo stesso tempo puo’ consentire ai visitatori – tra cui i non vedenti – di copiare / incollare, ridimensionare o utilizzare un lettore di schermo. Inoltre è possibile classificare questo testo – spesso testo del titolo – come H (1,2,3,..) ecc tag di primo piano.
Risorsa per il punto 9 e 10: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#eliminating-and-replacing-images

11)Utilizzare CSS sprite di immagini
La combinazione di piccoli elementi di design immagine, loghi e icone in un unico file chiamato sprite, quindi utilizzando i CSS per fare riferimento a coordinate x, y per servire i singoli elementi, riduce il tempo di caricamento della pagina, perché richiede solo un round trip al server per recuperare e memorizzare nella cache il file immagine e lo sprite.
Risorsa: http://www.feedthebot.com/pagespeed/combine-images-css-sprites.html

12)Inserire link per visualizzare immagini più grandi
Immagini di grandi dimensioni forniscono una migliore esperienza utente, ma possono diminuire la velocità di caricamento della pagina. La soluzione è quella di offrire collegamenti a “Visualizzazione ingrandita” con effetti in pop-up oppure in una nuova finestra.

13)Aggiungere schema.org per immagini
Aggiungere dati strutturati o schema.org per il markup HTML che circonda le immagini, indubbiamente aiuta i motori di ricerca a capire informazioni semantiche sulla immagine ed il rapporto con il vostro business e il vostro sito. Anche se questo passo richiede un più alto livello di abilità e comprensione, dovrebbe essere attuata con l’aiuto di uno sviluppatore esperto, ma potete comunque seguire questo tutorial:
Risorsa: http://www.bruceclay.com/blog/10-image-optimization-tips-for-local-seo/

14)Immagini Geo-tag
Il local business acquista sempre maggiore importanza, se il tuo sito web rappresenta un business locale, è possibile associare le immagini sul vostro sito web con la vostra posizione. Questo è particolarmente rilevante per le immagini che riguardano la vostra location che rappresenta la struttura aziendale.
Risorsa: http://searchengineland.com/a-guide-to-geocoding-images-for-local-seo-88932

15)Utilizzare sitemaps images
Proprio come si crea XML Sitemaps per aiutare i motori di ricerca a trovare il contenuto delle pagine web, potete incoraggiarli a scoprire ed indicizzare il contenuto delle immagini con una Sitemap immagine.
Risorsa: https://support.google.com/webmasters/answer/178636?hl=en

Ulteriori consigli e risorse per il livello avanzato

Questi passaggi finali riguardano il lavoro di ottimizzazione lato server che richiedono particolare esperienza. Caching Browser mira a ridurre il numero di “chiamate” che il browser deve richiedere al server per restituire la pagina web. Le attività di cache relative alle immagini, ai file CSS ed ai JavaScript dovranno essere inoltre corredate di parametri che identificheranno per quanto tempo tali file rimarranno invariati.
Risorsa: http://fortheloveofseo.com/blog/performance/leverage-browser-caching-how-to-add-expires-headers/

17)Abilitare la compressione Gzip
Per abilitare la compressione per il vostro sito web, avrete bisogno di cercare la configurazione corretta sul server, poi fare una semplice modifica al file htaccess.
Risorsa: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

18)Ottimizzazione Critical Path Render
Risorsa: http://www.feedthebot.com/pagespeed/critical-render-path.html

19)Utilizzare Content Delivery Network (CDN)
Per molti siti – soprattutto siti di ecommerce – le reti di Content Delivery sono comunemente usati per ospitare contenuti in mirroring (come le immagini) sui server più vicino al client, riducendo così il tempo di andata e ritorno, velocità di caricamento della pagina, le risorse e la banda. CDN sono soluzioni formidabile per situazioni specifiche, e dovrebbero essere gestite con una corretta configurazione, aggiungendo una forte strategia canonica, e cercando di effettuare l’ottimizzazione delle immagini seguendo i consigli precedentemente indicati.
Risorsa: http://www.matthewwoodward.co.uk/tutorials/content-delivery-network-case-study/

Richiedi il servizio di web marketing per la tua azienda. Contattaci per un'analisi gratuita e preliminare del tuo sito web