Luigi Sabbetti

Il mondo del web a 360 gradi

Immagini sfocate in wordpress come fare

WordPress immagini sfocate: come risolvere


di // Pubblicato il: 22 Agosto 2019

I contenuti visivi del nostro sito sono importantissimi. Nell’articolo di oggi, WordPress immagini sfocate, vedremo assieme come risolvere questa incombenza molto spiacevole. Nelle scorse puntate, invece, abbiamo anche visto come fare quando i nostri file di tipo immagine non si vedono.

Capita spesso, infatti, di caricare delle immagini sul nostro sito per poi renderci conto che la resa a schermo non è proprio quella che ci aspettavamo di ottenere. Ma perché questo accade? Possono essere diversi gli scenari. Cerchiamo di analizzarli assieme e fare così in modo che i nostri utenti finali possano fruire di immagini in buona definizione senza che esse vadano ad incidere sulle prestazioni del nostro sito.

Se è vero, infatti, che la definizione di una foto è importantissima (si pensi ad esempio alle foto dei prodotti in un e-commerce), è pur vero che dobbiamo sempre dare un occhio al peso finale, in termini di byte, di esse.

Indice

Perché caricare immagini in alta definizione

Il web è fatto principalmente di immagini. Quest’ultime, oltre a rendere piacevole la consultazione di una pagina, permettono di dare indicazioni aggiuntive all’utente finale. Se, ad esempio, sei il titolare di e-commerce che vende scarpe, capirai benissimo quanta potenza comunicativa possano avere le tue foto.

Quale utente comprerebbe scarpe senza guardarle da vicino? Pochissimi. Ecco perché la definizione è un punto importantissimo che potrebbe elevare notevolmente la tua capacità di conversione. A volte, però, non basta scattare foto con una macchinetta fotografica professionale. Bisogna essere in grado di trattare le immagini al meglio evitando di caricarle così come ci arrivano dalla macchinetta fotografica.

Le moderne fotocamere, infatti, sono in grado di scattare foto in altissima definizione, ma non sempre esse sono necessarie per il nostro sito. Ricorda sempre che la resa finale è data dai pixel, ragion per cui se la foto andrà in un box di 300 pixel di larghezza per altezza, è sostanzialmente inutile caricare li dentro un immagine di 7000 pixel con un peso di 10MB. Andrebbe solo ad appesantire inutilmente il tuo sito.

Solitamente, infatti, vengono utilizzate delle miniature in buona definizione e, se l’utente lo vorrà, potrà scaricare quella in alta all’occorrenza, magari semplicemente passando il mouse sopra la miniatura.

Caricare immagini in versione retina

Negli ultimi anni abbiamo assistito ad un incremento notevole dei display “Retina”, se non in 4K. Naturalmente la densità di pixel di questi display necessita di immagini con una definizione maggiore rispetto ai normali display di un tempo.

Può capitare, dunque, di aver caricato immagino non “Retina Ready” e questo fa sì che, chi utilizza un display ad alta definizione, veda immagini sfocate e con una definizione che lascia decisamente a desiderare. Fortunatamente, abbiamo la possibilità di poter caricare diverse versione di immagini, una per chi fa uso di display normali ed una adatta a display dalle alte prestazioni.

Come fare, dunque, a caricare immagini per i display retina su WordPress? Possiamo utilizzare questo plugin che porta il nome di WP Retina 2x. Sostanzialmente le immagini adatte ai display retina dovranno avere dimensioni doppie rispetto a quelle che utilizziamo normalmente.

wp retina 2x
Immagini retina con wp retina 2x

Rivedere le impostazioni dei plugin di ottimizzazione

A volte, invece, potrebbero esserci dei problemi nei settaggi che utilizziamo all’interno di plugin di ottimizzazione delle immagini. Questo può accadere, ad esempio, quando facciamo manutenzione su di un sito non sviluppato da noi.

Magari chi ci ha preceduto ha smanettato un pò troppo con le impostazioni dei plugin di ottimizzazione rendendo le immagini quasi inservibili. Uno dei plugin più utilizzati, a tal fine, è Smush che permette di ottimizzare le immagini “on the fly” ovvero al caricamento stesso.

Smush
Smush -Ottimizzazione immagini

Vi consiglio, dunque, di verificare se sul sito è installato tale plugin o altri similari e rivedere le impostazioni. Una volta cambiate le impostazioni, però, sarete costretti a rigenerare tutte le miniature per vedere gli effetti delle operazioni effettuate. Rigenerare le miniature è fortunatamente un compito abbastanza semplice e, anche questo, può essere effettuato attraverso un plugin.

Il plugin in questione si chiama Regenerate Thumbnails e permette, per l’appunto, di ricreare in un colpo solo tutte le miniature presenti sul sito. Se il tuo sito ha molte immagini, allora, dovrai avere un pò di pazienza, ma almeno risolverai il problema delle foto sfocate!

Esporta immagini in alta qualità

Non è detto, infine, che il problema sia legato a WordPress. Può essere, infatti, che tu stia commettendo un errore a monte, ovvero in fase di esportazione.

Molti di noi utilizzano software come Adobe Photoshop per esportare le immagini, ma anche qui ci sono diversi settaggi da poter customizzare e, soprattutto i meno esperti, potrebbero combinare qualche pasticcio.

Se usi photoshop per esportare le immagini, ti consiglio di utilizzare la nuova funzione di esportazione che trovi sotto il menù file -> esporta come. Questa nuova modalità, a differenza della vecchia “Salva per web”, ti permette di esportare meglio le immagini, mantenendo una risoluzione migliore.

Una cosa importante è sicuramente la percentuale di qualità alla quale esporti l’immagine. Non scendere oltre il 70%. Sotto quella soglia, infatti, le JPG iniziano a perdere gran parte della loro definizione.

In alternativa potresti esportarle al 100% di risoluzione e poi utilizzare strumenti esterni di ottimizzazione, come ad esempio l’ottimo sito web TinyPNG che, tra l’altro, mette a disposizione anche un plugin da installare in Photoshop.

Disattiva la compressione di WordPress

WordPress, di default, comprimere le immagini mentre genera le miniature. Solitamente, questa operazione non dovrebbe causare problemi ma, ad ogni modo, è possibile disattivarla.

Per fare questo dovremo mettere mani al file functions.php del nostro tema. Ti consiglio, quindi, di fare un backup di questo file prima di procedere, soprattutto se non sei un programmatore esperto.

Il file si trova all’interno della directory wp-content/themes/tuo-tema/functions.php

Puoi modificare questo file sia attraverso una connessione FTP, che utilizzando direttamente il backend di WordPress. Ti basta andare nel menù Aspetto->Editor, selezionare il tuo tema e ricercare il file functions.php dalla barra che si trova sulla destra.. Recati nell’ultima riga di questo file, aggiungi uno spazio ed inserisci questo semplice codice.

add_filter('jpeg_quality', function($arg){return 100;});

Così facendo dirai a WordPress di mantenere la qualità delle immagini al 100%.

Conclusioni

Come abbiamo potuto vedere esistono diverse possibilità per migliorare la resa dei nostri contenuti visivi. Avere immagini ben definite è importantissimo all’interno di un sito web. A nessuno piace vedere immagini sgranate, sfocate o con problemi di risoluzione di qualsiasi altro tipo.

Cerchiamo, quindi, di mantenere un buon equilibrio tra peso e definizione in modo tale da rendere il più piacevole possibile l’esperienza utente. Se conosci altri metodi per migliorare le immagini in WordPress, scrivimi pure e sarò lieto di aggiungere i tuoi consigli in questo articolo.

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Mi piace scrivere e condividere conoscenze informatiche attraverso il mio sito web. Vuoi chiedermi qualcosa? Contattami su Linkedin