Esempio di ottimizzazione immagine

in SEO On-Page

Come ottimizzare le immagini per il web

Spesso si dà tanta importanza a cercare o realizzare delle immagini belle ed accattivanti per il proprio blog; ed è giusto così, anche l’occhio vuole la sua parte. Ma Spesso si sottovalutano l’opportunità di ottimizzare le immagini per un sito web: ottenere immagini più leggere, pur mantenendo la stessa qualità, è importante e deve diventare un’abitudine. Ci sono strumenti come Photoshop, tools online gratuiti e, per i più esperti, anche un modulo da installare sul proprio server che le creano già ottimizzate, anche in modo automatico.

JPG progressivo

Il formato JPG permette, da qualche anno, di poter sfruttare la proprietà “progressiva” di una foto in jpg per la visualizzazione dell’immagine. Tecnicamente, quando il browser chiede al server la visualizzazione di una immagine, essa, se non è progressiva, viene visualizzata all’utente solo quando ha terminato di scaricarla.

Creando, invece, dei jpg con la progressione, esse iniziano a visualizzarsi anche solo dopo aver ricevuto pochi byte. Il vantaggio? Che l’utente non deve aspettare tempo per visualizzare l’immagine (quindi senza buchi bianchi sulla pagina). Ah, senza mai dimenticare di specificare gli attributi width ed height, oltre al famoso alt.

Ecco la differenza che vedrebbe un utente appena richiama la nostra pagina con un’immagine: l’immagine viene caricata “poco per volta” (a sinistra), mostrando già le sue dimensioni, e man mano che viene scaricata si compone fino ad ottenere l’immagine a destra.

Esempio immagine jpeg progressivo

Esempio di un’immagine jpeg progressiva durante il caricamento

Esistono sul web dei jpeg progressive checker per verificare se le nostre immagini sono progressive. Eccone uno: highloadtools.com/progressivejpeg. È sufficiente inserire il link della nostra immagine (per esempio questa sopra) per verificare se è progressiva.

Ottimizzare le immagini con Photoshop

Quando si crea la grafica di un sito web con Photoshop, quello che si fa una volta terminato il lavoro è passare alla realizzazione dell’html delle pagine, comprensivo di CSS e JS oltre alle immagini.

Nativamente, la funzionalità “Salva immagini per web…” ci viene in aiuto nel creare gli elementi grafici come file jpg o png ottimizzati, con la possibilità di scegliere il livello di compressione per quanto riguarda il formato jpg.

Oltre a scegliere il livello di compressione, c’è un’impostazione che si può utilizzare, ed è quella di utilizzare il JPG Progressivo. Velocemente vediamo come realizzare un’immagine jpg progressiva con Photoshop.

Dal meu File -> Salva per web e dispositivi… selezioniamo in alto a destra il formato JPG e subito sotto abilitiamo la voce Progressione ottimizzata. Ecco fatto. Volendo, è possibile salvare un preset in modo da essere sicuri di non dimenticarsi di abilitare la voce.

Photoshop jpg progressivo

Photoshop jpg progressivo

Ottimizzare le immagini online

Esistono un tool online per l’ottimizzazione delle immagini a mio avviso molto efficiente (in realtà  sono due ma che utilizzano lo stesso motore, quindi sia un sito che l’altro funzionano con entrambi i formati):

  • tinypng.com per la compressione di file png, mantenendo la trasparenza
  • tinyjpg.com per la compressione intelligente di file jpg
Smart JPEG compression

Smart JPEG compression online tool, tinyjpg.com

Questi strumenti, comprimono ulteriormente l’immagine, senza alterare qualità e dimensioni.

Di seguito un esempio di immagine prima e dopo l’ottimizzazione:

Esempio di ottimizzazione immagine

Esempio di ottimizzazione immagine, senza perdita di qualità.

Quello che si nota è… niente! Perchè le immagini sono praticamente identiche, con la differenza che una pesa 641 KByte e la stessa ottimizzata 162 KByte.

Facendo diversi test, si può arrivare a risparmiare oltre il 70% di peso per la stessa immagine, mantenendo le medesime dimensioni in pixel. E questo è un notevole risparmio di KByte e quindi di tempo di caricamento di una pagina web.

TinyJPG – Compress JPEG images intelligently

Foto catturata con il classico screenshot da un pc, di un area di 870 x 460 px

Un servizio online gratuito a mio riguardo ottimo, e soprattutto privo di watermark e che quindi ci permette di utilizzare tranquillamente le nostre immagini ovunque.

Lo stesso sito mette a disposizione anche un’estensione per ottimizzare le immagini con Photoshop, ad un prezzo accessibile di 50$. Uno strumento che un bravo web-designer potrebbe avere, ma non solo lui in realtà.

E per finire, non manca l’accesso al servizio API, gratuito ma limitato (esiste anche una versione a pagamento). È possibile collegarsi al solo servizio (tramite appunto delle chiamate ai loro server) inviando le immagini che vogliamo e ottenere le stesse immagini compresse, immediatamente. Un plus non indifferente, che permette l’automatismo di ottimizzazione delle immagini.

Ottimizzazione delle immagini con ImageMagick

Un’altro metodo tecnicamente forse più complesso ma che “fa tutto da sè” è l’utilizzo di ImageMagick, un software per creare, modificare, comporre o convertire immagini bitmap. Lavora con i più svariati formati di immagini e permette di realizzare da zero vere e proprie immagini, oltre a operazioni semplici come la compressione o il ridimensionamento.

Probabilmente non si otterranno gli stessi risultati (dopo aver eseguito di persona qualche test), ma è sicuramente un ottimo strumento.

Condizione necessaria, prima di tutto, è installare il componente. Il sito ufficiale è questo: imagemagick.org

Utilizzare ImageMagick con la Command Line

Una volta installato il nostro “motore”, possiamo convertire la nostra immagine in un jpg con qualità al 70% e specificando che deve essere progressiva. Ecco il comando:

//trasformo in jpg progressivo e in qualità 60
shell_exec("convert -strip -interlace Plane -quality 60 ".$foto." ".$foto."");

Utilizzare ImageMagick con Php

Sul nostro server, è possibile anche installare il modulo ufficiale, disponibile a questo link: https://pecl.php.net/package/imagick

Una volta configurato, ecco un esempio di codice php utilizzabile:

$image = new Imagick('image.jpg');
$image->thumbnailImage(500, 0);
$image->setInterlaceScheme(Imagick::INTERLACE_PLANE);
$image->writeImage('progressive.jpg');

Altri esempi, si possono trovare qui:

 

Il consiglio finale è sempre quello di “passare” le immagini per uno di questi tool: il risultato sarà sicuramente garantito.

 

Commenta con Facebook

commenti

Scrivi un commento

Commento