Google pagespeed – Ottimizza le immagini seguenti per ridurne le dimensioni

La speranza che si ha quando si crea un sito web e più nel dettaglio una pagina, è che questa pagina abbia una buona posizione su Google e gli altri motori di ricerca, e quindi una buona visibilità. Come Google ci insegna, sono oltre 200 i fattori che inficiano la posizione di una pagina sulle SERP di un motore di ricerca. Uno di questi fattori che spesso ci viene elencato in PageSpeed è Ottimizza le immagini seguenti per ridurne le dimensioni. Ma cosa significa questo errore? Andiamo a scoprirlo e vediamo come risolverlo. Le Risorse SEO presenti sul web sono molte e autorevoli. Amazon offre una vasta disponibilità di libri sul search engine optimization (SEO).

Ottimizza le immagini seguenti per ridurne le dimensioni

Questo avviso viene visualizzato quando PageSpeed ​​Insights rileva che le immagini nella pagina possono essere ottimizzate per ridurne loro spazio o la dimensione senza incidere significativamente sulla loro qualità visiva dell’immagine stessa.

Le immagini, di solito, rappresentano la maggior parte dei byte occupati da una pagina web. Ciò significa che l’ottimizzazione delle immagini è una delle più importanti ottimizzazioni da apportare al fine di ottenere risparmio di byte. Una pagina web di piccole dimensioni (parità di contenuto) equivale a migliori prestazioni, e questo per Google è un bene: minore è il numero di byte che il browser deve scaricare, minore è la larghezza di banda necessaria al cliente e più veloce sarà il browser a scaricare e renderizzare il contenuto sullo schermo. Questo potrebbe significare miglior posizionamento rispetto a un sito concorrente che tratta lo stesso argomento ma che ha un peso della pagina più ampio in termini di byte.

Raccomandazioni e consigli

Innanzitutto è importante trovare il formato ottimale di un’immagine. Questa ottimizzazione per ciò che concerne le immagine richiede un’analisi attenta sotto molti punti di vista:

• il tipo di dati codificati
• capacità formato immagine (gif, jpeg, png)
• qualità da utilizzare
• risoluzione dell’immagine

Inoltre, è necessario considerare se alcune immagini possono essere meglio servite in un formato vettoriale o se gli effetti desiderati può essere raggiunti tramite CSS (quindi solo testo ovvero dimensioni inferiori). Un’altro degli aspetti da tenere in considerazione, oggi ancor di più rispetto al passato visto l’ampia diffusione di terminali come smartphone e tablet, è quello di  scalare opportunamente le immagini in base al tipo di dispositivo.

Soluzione

Ovviamente non possiamo fornire una soluzione certa e unica in quanto ogni situazione è a se stante e necessita di determinate accortezze.

Possiamo però indicarvi la strada migliore da seguire nella maggior parte delle situazioni.

• Forniamo immagini scalate
  • Se dobbiamo fornire per esempio un’immagine da 200×200 px, evitiamo di utilizzare un’immagine di 400×400 per poi ridimensionarla tramite codice html (height e widht). Ridimensionare un’immagine in html significa rimpicciolirla alla vista ma non significa diminuirne le dimensioni in termini di byte
• Ridurre la qualità senza comprometterla
  • Alcuni programmi (photoshop per citare il più famoso) permettono di salvare l’immagine in formato web attraverso un’apposita voce nel menù file. Ciò significa ridurre le dimensioni (byte, non dimensioni) dell’immagine senza che questa ne perda in termini di qualità visiva. Sta all’utente decidere quali sia il livello accettabile di riduzione affinché la qualità visiva non sia compromessa
• Scegliere il formato corretto (gif, jpeg o png?)
  •  Ogni immagine ha caratteristiche proprie che possono fare o meno al nostro caso in particolari situazioni. Alcuni formati supportano la trasparenza, alcuni no. Atri vengono supportati da tutti i browsers, altre no. Ecco una tabella che riassumere principali caratteristiche di ciascun formato immagine.

  • Format	Transparency	Animation	Browser
    GIF	Yes	Yes	All
    PNG	Yes	No	All
    JPEG	No	No	All
    JPEG XR	Yes	Yes	IE
    WebP	Yes	Yes	Chrome, Opera, Android

• Ottimizziamo le nostre immagini
  • Esistono alcuni strumenti che ci permettono di ottimizzare ulteriormente le nostre immagini anche dopo aver fatto il possibile sia in termini di formato che di dimensioni. Questo strumenti vengono usati lato server altro non sono che comandi di sistema operativo, lanciati da riga di comando che permettono di ridurre il “peso” in byte di un’immagine.
    Noi ne usiamo in particolare 2, uno per il formato  jpg/jpeg (jpegoptim) e uno per il formato png (optipng).
    Iniziamo col dire che entrambe le utility hanno bisogno di sistema operativo unix like (linux, unix, mac osi, etc) e accesso al file system su cui risiedono le immagini. Facciamo conto che queste siano nel path /var/www/images. Accediamo a questo path tramite il comando

    cd /var/www/images

    e da qui lanciamo 2 comandi:

  • optipng *.pngper ottimizzare tutti i png presenti nella cartella e
  • jpegoptim -t *.jpg –strip-all

per ottimizzare tutti le immagini jpg/jpeg

Tutte queste accortezze possono sicuramente aiutare a fare in modo di limitare gli errori dovuti alla gestione delle immagini. Ovviamente ci sono molte altre ottimizzazioni da apportare in termini di immagini. La guida di Google per le immagini è sicuramente un’ottima fonte su cui fare affidamento. Altrimenti potete scegliere un buon libro manuale SEO da tenere al vostro fianco e da consultare ogni volta che si vuole

Se avete dubbi o domande da fare, commentate pure.