Nei giorni scorsi, mi è stato affidato il restyling del sito web di un’attività locale, o per meglio dire, un fotografo locale. La prima cosa a cui ho pensato è l’ottimizzazione delle immagini: In quanto a fotografo, ne inserirà a bizzeffe! Il budget poi, non era così alto per poter prendere un server così potente… quindi cosa si fa? Si cercano cose gratuite o, almeno, a basso costo!
La ricerca
Durante la mia poca esperienza come Webmaster (se così vogliamo chiamarci…), ho provato decine di plugin davvero validi e tutti più o meno funzionanti. L’ultimo provato fu EWWW Image Optimizer. Ma tutti i plugin provati finora, avevano una cosa in comune: Appesantiscono in maniera stratosferica le richieste al database, e sappiamo bene che ottimizzare il database su WordPress è davvero importantissimo per le prestazioni del sito web.
Quindi mi sono messo alla ricerca non di veri e propri plugin, ma di software terzi che facessero il lavoro per me, anche a pagamento. Quindi ho iniziato a fare le dovute ricerche, ho trovato una ventina di siti web che fanno ciò, ma uno in particolare uno mi ha colpito: TinyPNG. E no, puoi star tranquillo, non mi hanno pagato per fare questo articolo, anzi 😀
Le opinioni
La prima cosa che faccio quando mi trovo di fronte ad un nuovo servizio/plugin o qualsiasi cosa sia, non faccio altro che controllare da cima a fondo il sito web. Controllo tante cose, dalle prestazioni, all’efficienza del servizio stesso. Poi scendo in fondo al sito, noto utilizzatori del servizio davvero degni di nota: A partire da aziende come Samsung fino ad arrivare a Sony, Electronic Arts e addirittura Bank of America.
A questo punto inizio a pensare fossero scemenze: Come poteva, un sito come Sony, utilizzare questo servizio. Allora faccio delle ricerche: “TinyPNG opinioni“, trovo tanti articoli, datati anche 2012, come questo di Geekissimo. Allora li leggo uno ad uno, cercando quel qualcosa che non quadrava, quel trucco che mi permettesse di dire “AH! Ecco svelato l’arcano!“, e invece no, niente.
Utilizziamo questo TinyPNG!
A questo punto mi dico “utilizziamolo“, tanto che mi costa? Lo provo, al massimo torno indietro ripristinando il sito. Quindi entro sul sito web ed inizio a studiare come funziona questo servizio.
Come funziona
Il funzionamento è piuttosto semplice, in pratica vi riduce la quantità di sfumatura dei colori, passando da una tonalità a 24-bit, ad una a 8-bit, quindi vi riduce la quantità di colori presenti nell’immagine, eliminando poi tutti i dati inutili come locazione GPS e simili presenti nell’immagine. Il risultato? Un’immagine che, in media, pesa il 50% in meno. Nulla di eccezionale, quindi, lo potreste fare, se siete abbastanza bravi, anche con Photoshop. Anzi, hanno anche un’estensione del costo di 50$ per questo software.
Ma quando sono tante immagini? Ad esempio, avete un sito web da 1000 immagini, come si fa? Scaricate le immagini una ad una e le ottimizzate? Se avete tanta pazienza e tempo, allora ben venga. In caso contrario, ecco che entrano in gioco i plugin o API.
Possibilità di integrazione
Arrivati a questo punto, visto che non ho solo siti in WordPress, volevo capire se potesse essere utile anche per altri siti, tipo in HTML5 o Ruby on Rails. Leggendo la pagina dedicata alle API per gli sviluppatori, ho subito notato che questo servizio può essere integrato in qualsiasi tipo di siti web: Da Ruby a PHP, passando per Java, Node.js e Python. Inoltre, è anche possibile integrarlo nei server di Amazon S3.
Il plugin per WordPress
Ora non resta che provarlo davvero. Di certo non potevo provarlo sui siti web dei miei clienti, quindi ho usato questo sito web, sì, proprio questo. Quindi ho subito cercato nel repository ufficiale di WordPress, il plugin “Compress JPEG & PNG images” (scaricabile da qui).
Una volta scaricato, installato ed attivato, ci recheremo nella sezione “Impostazioni” e poi su “Media“. Ci troveremo così di fronte alla pagina inerente alle impostazioni:
Clicca per ingrandire
Come potete vedere nell’immagine, possiamo scegliere anzitutto le grandezze delle varie immagini e la spunta su “Organizza le cartelle sulla base di mese e anno” (cosa che potete fare anche senza plugin eh), ma rechiamoci subito in fondo: Potete scegliere quali immagini ottimizzare. Tutte le grandezze disponibili nel tema in uso. Per prova, ho selezionato tutto.
Inoltre, per le immagini originali, possiamo scegliere anche la grandezza massima che devono avere, quindi possiamo far eliminare le immagini più grandi di X Pixel.
Eh, mi serve l’API Key!
Esatto, questo plugin funziona con le API, ovvero “Application programming Interface“, ovvero un codice che serve al servizio per interfacciarsi col nostro sito web. Per avere questo codice, non ci resta altro che registrarci usando il link che troviamo nelle impostazioni (quello in alto nell’immagine sopra per intenderci) e verremo subito redirezionati verso il sito web. Inseriamo i dati richiesti e clicchiamo su “Get Your API“:
clicca per ingrandire
Una volta fatto ciò, avremo un messaggio con l’avvenuta registrazione, ove ci troveremo di fronte la nostra API Key:
clicca per ingrandire
E ottimizziamo finalmente!
Una volta finita la registrazione ed avuta la nostra API Key, beh, non ci resta altro da fare che provarlo! Rechiamoci quindi nella sezione dedicata, ovvero “Media” —> “Bulk Optimization“.
Clicca per ingrandire
Ci troveremo di fronte a questa schermata, divisa in questo modo:
- Nella parte a sinistra, vi sono le informazioni relative alla quantità di immagini caricate, quelle da ottimizzare (WordPress duplica le immagini e le divide per grandezza) ed il costo previsto per l’ottimizzazione, in caso le immagini superino le 500 gratuite;
- Nella parte di destra, invece, troviamo le informazioni relative alla grandezza totale delle immagini, alla quantità delle immagini dopo l’ottimizzazione (che ora vedete uguale perché non ancora ottimizzate) e la percentuale di riduzione;
- In basso, al centro, troviamo il pulsante di avvio ed ancora più sotto la lista delle immagini ottimizzate (che vedrete fra poco).
I risultati
La mia prova si è incentrata sulla parte gratuita: Quanto risparmio ottimizzando SOLO 500 immagini? Quindi, ho avviato senza pagare. L’ottimizzaizone è durata circa 10 minuti (davvero velocissima), e mi ha permesso di risparmiare ben 40 MB:
clicca per ingrandire
Da notare che io molte immagini le ottimizzo già da me, usando Photoshop o Paint (a seconda delle necessità). Direi che, comunque, i risultati sono evidenti. L’articolo più ottimizzato in assoluto, è stato quello relativo ai 10 temi per WordPress ottimizzati per la SEO. La qualità delle immagini è rimasta pressoché invariata, tranne per quelle enormi (forse da migliorare sotto questo aspetto), ma tutto sommato è davvero eccellente il lavoro fatto.
Il prezzo
Clicca per ingrandire
Molti siti web, negli articoli che ho letto, dicevano che questo fosse un servizio completamente gratuito, ma non è così. Per chi carica una o qualche decina di immagini direttamente dal sito, è così. Ma per chi, come me, ha un sito web con migliaia di immagini, il servizio è gratuito fino a 528 immagini. Che sono tante, direte voi, ma non è così: Ho solo 23 articoli, e già 892 immagini.
Ovviamente il prezzo non è così alto eh, si parla di 0,009$ per immagine, ma basta un migliaio di immagini per arrivare alla modica cifra di 13$ al mese. Sì, al mese. Ma il servizio è davvero eccellente.
Conclusione
In questo articolo ho voluto spiegarti un nuovo servizio che potrebbe davvero esserti utile per ottimizzare le immagini nel tuo sito web con WordPress e non. Se l’articolo ti è piaciuto, potresti condividerlo oppure commentare facendomi sapere cosa ne pensi e se usi altri plugin o altri servizi, mi farebbe piacere. Io, come sempre, ti ringrazio per essere arrivato sino a qui e mi auguro di vederti ancora da queste parti!
