4 agosto 2016

Come ottimizzare le immagini per il blog

 
Come ottimizzare foto e immagini per il web
  • Condividi su:

Le immagini sono una parte fondamentale dell’appeal di un blog,  soprattutto ora che gli slider a tutta larghezza sono una delle features più usate nella grafica dei siti. L’altra faccia della medaglia è che, purtroppo, le immagini sono dei file piuttosto grandi e perciò pesanti da caricare e, di conseguenza, rallentano il caricamento delle pagine penalizzando la user experience e il ranking del vostro sito. Ma non disperate, ci sono degli accorgimenti e plugin che vi permettono di ottimizzare le immagini alleggerendole senza perdere qualità.

Ma partiamo dall’inizio. I formati di immagini supportati dal web sono essenzialmente tre: GIF, PNG e JPEG.

  • Il formato GIF è consigliato per brevi video e animazioni con pochi colori e/o dettagli
  • il PNG è consigliato per immagini vettoriali, ovvero gli elementi grafici, soprattutto se è necessario avere uno sfondo trasparente
  • infine il formato JPEG è consigliato per le fotografie, soprattutto se con tanti dettagli e sfumature di colore.

La risoluzione delle immagini su web è sempre 72 dpi. Tutte le immagini ad alta risoluzione vengono comunque riprodotte in questa definizione,  dunque è inutile appesantire la pagina con immagini a definizione superiore.

Un errore frequente da parte dei blogger è quello di usare immagini senza prepararle per il web e inserirle nella pagina, ovvero caricare delle immagini enormi che poi vengono automaticamente o manualmente ridimensionate sulla pagina. Il problema è che il browser carica comunque l’immagine originale e poi la ridimensiona. Questi passaggi prendono memoria e banda e quindi rallentano comunque la visualizzazione della pagina. La soluzione ideale è quella di caricare le immagini già delle dimensioni corrette, ovvero se la pagina del vostro post è larga 800 px, escludendo chiaramente l’eventuale colonna laterale, caricate immagini al massimo di 800 px.

Per gli slider “full-width”, le dimensioni ottimali sono al massimo di 1440 px di larghezza. Prima di lanciarvi su queste dimensioni date un’occhiata al vostro Google Analytics per capire le dimensioni degli schermi della maggioranza dei vostri lettori, vedrete che quasi sempre non superano 1200 px.

Se utilizzate Photoshop per preparare le immagini, un trucco per alleggerire l’immagine consiste nel salvare l’immagine con qualità “molto alta”, ovvero 70-80% dell’originale. La differenza è impercettibile. Come vedete dalle due schermate qui sotto, in un’immagine di 800×800 px con l’impostazione qualità “molto alta” invece che “massima”, posso risparmiare ben 2 secondi su una connessione ad alta velocità e non ci sono differenze visibili in termini di rendimento visivo.

Come ottimizzare le immagini per il web

 

Come ottimizzare le immagini per il web con Photoshop

 

 

Se non avete Photoshop, ci sono altre applicazioni gratuite sul web

che permettono di ottimizzare le immagini per il web:

GIMP un vero e proprio open source per l’elaborazione di fotografie incluso ritocco, composizione eccetera

Imageoptim app scaricabile o online

kraken.io online

Come avete visto bastano pochi accorgimenti per migliorare sensibilmente la performance del vostro sito senza comprometterne la qualità visiva, che costituisce sempre un elemento cruciale per il successo del vostro lavoro.

Happy Blogging!