[tweet “Come migliorare la qualità delle immagini JPEG in #WordPress con uno snippet”]
Per molti siti la qualità delle immagini è particolarmente importante.
Pensa ad un sito di moda, o di opere d’arte, dove i dettagli possono fare la differenza, o meglio ancora al sito di un fotografo.
Al momento di aggiungere un’immagine, WordPress crea tutti i thumbnail (miniature) necessari in formato JPEG, e di default comprime molto le immagini al fine di ottenere immagini di dimensioni ridotte, guadagnando spazio su disco e velocità di caricamento.
WordPress di default comprime le immagini con un rapporto del 90%, vediamo come ridurlo al valore preferito.
Va detto che bisognerebbe partire con immagini originali già ottimizzate, troppo spesso vedo situazioni in cui vengono caricate immagini direttamente dalla fotocamera, esageratamente grandi sia in dimensioni che in peso.
La compressione JPEG delle immagini si gestisce grazie ad un semplice snippet da inserire nel file delle funzioni di WordPress, il file functions.php:
add_filter( 'jpeg_quality', create_function( '', 'return VALORE;' ) );
Bisogna definire solo il dato da inserire al posto di “VALORE”, un numero tra 0 e 100 che indica la qualità delle immagini JPEG. Più è alto il valore, minore è la compressione e maggiore è la qualità risultante.
Per non comprimere per nulla le immagini, lasciarle cioè al massimo della qualità, va inserito il valore 100.
Va detto che decidere di non comprimere le immagini potrebbe essere una scelta drastica, un valore che mantiene un’ottima qualità, e allo tesso tempo contenere le dimensioni delle immagini, potrebbe essere 80
Per una compressione media, un valore compreso tra 40 e 60 in genere è quello che produce un buon rapporto tra qualità dell’immagine e peso della stessa.
Al di sotto di 40, il rapporto di compressione è molto elevato e la qualità ne risente parecchio.
Alcune considerazioni sulla compressione delle immagini in WordPress
- È bene ricordare che l’immagine originale non viene modificata, ma uploadata così com’è (anche per usi futuri). Solo le miniature (thumnail) subiscono la compressione di qualità
- È bene non fare l’upload di immagini di dimensioni esagerate o troppo pesanti, ma di ridimensionarle alla dimensione utile per gli ingrandimenti. Io di solito uso immagini tra 1200 e 1600 pixel per il lato maggiore.
- Lo snippet non è retroattivo, non modifica le immagini già presenti sul sito, ma solo quelle che inserirai in futuro.
Per correggere le immagini già presenti, se necessario, può tornare utile il plugin Regenerate Thumbnails (utile anche quando si cambia tema, e potrebbe essere necessario adattare le dimensioni delle miniature a quelle utilizzate dal nuovo tema)
13 risposte
Buongiorno, anche io sto avendo dei problemi con l’upload delle immagini sul mio sito; sono un fotografo e come tale ho bisogno che le mie foto vengano riprodotte in maniera eccezionale sul mio sito, Ho provato a seguire quanto detto nel post ma senza risultato…sai darmi una mano? Devo forse provare a cambiare tema?
ciao Daniele, bisogna capire se c’è qualcosa che va a interporsi e regola la qualità delle immagini, il tema o qualche plugin utilizzato
rob
Come faccio a capire questa cosa? Comunque come plugin ho provato a installare WP Smush e ho un plugin per la slider delle foto. Ho provato a interagire con le impostazioni dei media settando la qualità di compressione delle immagini jpeg a 100, stesso numero che ho utilizzato per lo snippet che ho aggiunto nel file function.php. Come tema uso GK Portfolio, ma anche provando con altri temi il problema risulta sempre lo stesso. Ho provato anche a caricare le foto direttamente sulla pagina pensando che fosse un problema del plugin dello slider, ma niente. Idee o suggerimenti?
Comunque se nel frattempo vuoi dare un’occhiata al sito è danieleorsi.it (ovviamente in fase di costruzione)
bisogna analizzare la struttura e capire se c’è qualche elemento che interagisce con le funzioni di upload, perché di default vengono prese le impostazioni date a wordpress.
ciao Rob
io ho provato ma non funziona: io ho un tema child (come consigli tu) e quindi sono andato nel file
-aspetto
-editor
– poi a sx mi trovo la scritta “Template-Questo child theme eredita i template da un tema genitore, Mystile.”
-clicco su Funzioni tema (functions.php)
-poi qui ho messo lo snippet dopo
ma non vedo differenze: sbaglio qualcosa?
Ciao Gianni, la procedura che hai descritto sembra corretta.
Va ribadito che lo snippet non è retroattivo, ma applicherà i nuovi valori solo con le nuove immagini che caricherai.
Per risistemare le precedenti, bisogna rifare le thumbnail, ci sono diversi plugin che lo fanno tipo Regenerate Thumbnails di Viper01.
Intendi questo?
rob
ho fatto un prodotto nuovo:
http://www.quiapassio.it/prodotto/borsa-da-donna-spalla-flowers/
l’immagine principale si vede sfuocata ma se ci clicchi è limpida. Come valore nello snippet ho messo 100:
<?php
/*———————————————————————————–*/
/* Start WooThemes Functions – Please refrain from editing this section */
/*———————————————————————————–*/
ecc
non capisco
grazie e scusa
Il problema della bassa qualità dell’immagine nel tuo caso non dipende dalla qualità della stessa, ma dai CSS e dalle impostazioni di WooCommerce.
Lo snippet per utilizzare una compressione diversa in questi casi è inutile.
È un problema che si riscontra spesso in molti temi.
In pratica, la tua pagina prodotto prevede per l’immagine uno spazio di 490 pixel di lato, ma l’immagine utilizzata è di 300 pixel di lato, per forza di cose l’immagine viene ingrandita con il prevedibile degradamento della qualità.
Lo stesso ti succede anche nelle pagine catalogo, dove viene utilizzata un’immagine di 150 pixel di lato ad una dimensione di più di 230 pixel di lato.
rob
grazie Roberto, molto gentile come sempre!
Mi sa che acquisterò un tema
Grazie mille!
Salve Roberto.
Volevo soltanto capire una cosa,lo snippet interviene soltanto sul formato jpeg ? quindi se inserisco immagini png la qualità rimane compressa al 90% ?
Grazie per la risposta…..
Aggiungo, lo snippet può essere inserito in qualsiasi punto del file functions.php ?
In genere si dice sempre di inserire i nuovi snippet alla fine del file functions.php, prima della chiusura del tag php “?>”
rob
Ciao Giovanni, JPEG e PNG sono formati diversi, e usano algoritmi diversi.
La compressione riguarda solo il JPEG, il PNG che io sappia viene solo ridimensionato.
rob