Ottimizzare le immagini per il web prima di caricarle su un sito o blog è fondamentale.
Uno dei criteri principali con i quali Google e altri motori di ricerca, indicizzano i siti, oltre alla rilevanza dell’argomento, è la velocità di caricamento delle pagine.
Pagine pesanti e lente a caricare sono penalizzate dai motori di ricerca, ma anche dagli stessi utenti, che se devono attendere quel secondo di troppo cambiano sito.
Come faccio a capire quanto è veloce il mio sito?
Vi viene in aiuto Google con Pagespeed insight, uno strumento che valuta con un punteggio 1-100 la velocità del vostro sito su desktop e mobile.
Attenzione all’ecosistema mobile, sempre più importante negli ultimi anni.
Nelle analisi date da questo strumento noterete parecchi suggerimenti, molti avranno a che fare con impostazioni, script e gestione delle risorse.
Se siete il webmaster del vostro sito e avete accesso FTP ad esso, dovrete rimboccarvi le maniche e studiare bene i vari argomenti.
Se siete su siti gestiti (WordPress.com, Wix,Weebly etc), non dovete (e potete) fare nulla, le impostazioni sono gestite dal vostro hosting.
Tornando invece alle immagini, la loro ottimizzazione è alla portata di tutti.
L’operazione è necessaria in quanto queste sono tra le componenti più pesanti di una pagina.
Hosting classico
Se siete su un hosting che vi permette l’installazione di plugin per il vostro CMS (compreso WordPress), la soluzione è installarne uno che compia l’operazione in maniera automatica, ecco due esempi
WordPress.com o siti senza plugin terzi
Se come me, non avendo tempo, vi affidate ad un hosting chiavi in mano come WordPress.com, non dovete preoccuparvi di cosa sia un CDN o il lazy loads (al contrario di un hosting classico), WordPress.com è gestito in maniera ottimale per quel che riguarda le prestazioni e il SEO, sollevando gli autori da un gran bel lavoro tecnico.
Ma di default (inspiegabilmente), WordPress.com non gestisce l’ottimizzazione delle immagini, da qui la necessità di installare dei plugin terzi.
Ma su WordPress.com questo non è possibile (se non con il piano Business).
Perciò dovrete operare manualmente ogni volta (Sigh).
Una (delle tante) soluzioni, Squoosh
Squoosh è una soluzione Browser side di compressione con diversi vantaggi:
- Non richiede installazione
- Interfaccia intuitiva ed elegante
- La compressione avviene in locale, nessuna immagine è caricata su server esterni
- Open-source (supportato da Google)
- Lavora anche offline
- Permette una preview della compressione in real-time, mostrando “lato originale vs lato compresso” o “compresso vs compresso”, tramite una barra mobile, in modo da accorgersi subito se il settaggio impostato è accettabile o quale è l’opzione migliore
- Ottimo risparmio dati
- Chrome app sul desktop
- Gratis
Ci sono diverse possibilità di opzioni, ma rimanendo sul semplice meglio concentrarsi su
La scelta del formato
MozJpeg
Compressione Lossy, ovvero con perdita di alcune informazioni, l’opzione migliore per foto.
OptiPNG
Compressione lossless, senza perdita di informazioni, più pesante come formato, ma con maggiore qualità finale, indicato in genere per Graphic art.
WebP
Formato sviluppato da Google per il web, usa tecniche lossy e lossless.
Livello di qualità
Meno qualità, immagine più leggera, dovete trovare voi il giusto compromesso.
Ridimensionamento
è inutile avere immagini da 4000 px di larghezza se la pagina web a da 1200.
Personalmente le ridimensiono a massimo 3000 px, proprio per sta larghi, il tema che uso ha uno spazio di 2000 px per le featured image, capite che è inutile averle molto più grandi.
Wix e Weebly
Sono due servizi che permettono di costruire facilmente un proprio sito web.
Wix ha un tool interno per l’ottimizzazione di immagini
Weebly sembra utilizzare anche lei una qualche forma di compressione automatica, anche se non ho trovato nulla nella documentazione ufficiale, anzi in diverse guide consigliano di usare tool esterni di compressione, se usate il loro servizio potete chiedere sul loro forum.
Zera's Castle 