{"id":308,"date":"2024-08-19T15:03:10","date_gmt":"2024-08-19T15:03:10","guid":{"rendered":"https:\/\/blog.devlancer.it\/?p=308"},"modified":"2024-08-23T10:11:08","modified_gmt":"2024-08-23T10:11:08","slug":"seo-come-ottimizzare-le-immagini","status":"publish","type":"post","link":"https:\/\/blog.devlancer.it\/en\/seo-come-ottimizzare-le-immagini\/","title":{"rendered":"SEO: Come ottimizzare le immagini"},"content":{"rendered":"

L<\/strong>e pagine web <\/strong>caricano molte risorse<\/b><\/strong>: stili CSS per la grafica, file Javascript per i plugin, file dei font per i caratteri, e appunto le immagini<\/strong>. Se usiamo immagini troppo pesanti<\/strong>, la pagina si caricher\u00e0 pi\u00f9 lentamente<\/strong>\u00a0e questo pu\u00f2 risultare in un posizionamento peggiore, soprattutto su Google per quanto riguarda i Core Web Vitals<\/a>.<\/p>\n\n

Formati e dimensioni<\/h2>\n

Per questo motivo \u00e8 consigliato utilizzare pi\u00f9 formati e pi\u00f9 dimensioni per ogni immagine. In genere si usano i formati JPEG, PNG e WEBP<\/strong>. Le dimensioni possono essere inferiori ai 1920px di larghezza<\/strong> (gli schermi Full HD sono 1920×1080) e i 1080px di altezza<\/strong>.<\/p>\n

Chiaramente, per un piccolo sito web \u00e8 meno importante<\/strong>. Se usiamo una sola immagine nel nostro articolo avremo pochi problemi di prestazioni.<\/p>\n

Scrivere per\u00f2 un articolo con una decina di immagini<\/strong> JPEG 1000×1000, dove ognuna pesa 2MB, significher\u00e0 che l\u2019utente dovr\u00e0 scaricare oltre 20MB per caricare la pagina. Questo pu\u00f2 significare il raggiungimento di tempi di caricamento lunghi<\/strong>, anche di svariati secondi, soprattutto su reti internet pi\u00f9 lente.<\/p>\n

La soluzione pi\u00f9 semplice<\/strong>, alla portata di chiunque, \u00e8 di convertire le immagini in una<\/b> versione pi\u00f9 leggera<\/b><\/strong>. Un JPEG<\/strong> solitamente non ha bisogno della massima qualit\u00e0<\/strong>. Carichiamo una versione con qualit\u00e0 inferiore<\/strong>, cos\u00ec il peso sar\u00e0 molto minore<\/strong> ma la differenza visiva sar\u00e0 quasi impercettibile<\/strong>.<\/p>\n

Usando Photoshop<\/strong> possiamo salvare l\u2019immagine con qualit\u00e0 7<\/strong>. Con GIMP<\/strong> possiamo esportare le immagini in qualit\u00e0 <\/strong>60<\/strong>. Controlliamo di aver ottenuto un buon compromesso tra peso e qualit\u00e0 visiva<\/strong> e carichiamo la nostra immagine nel sito.<\/p>\n

Da qualche tempo ormai si stanno diffondendo sempre di pi\u00f9 nuovi formati di immagini<\/b>, WEBP e AVIF, che usano una compressione che permette di ridurre di molto, anche del 50%, il peso di una immagine<\/b>. Questo diventa importante per rendere la pagina web pi\u00f9 veloce da caricare.<\/p>\n

Per quanto riguarda larghezza e altezza<\/strong>, un buon compromesso in genere \u00e8 tra i 600x600px e i 1000x1000px<\/strong>. Dipende anche dal tipo di contenuto: un prodotto potrebbe richiedere una immagine pi\u00f9 grande, anche per esigenze grafiche, mentre un banner<\/b> a schermo intero o un hero probabilmente richieder\u00e0 una dimensione di circa 1920x600px<\/b>.<\/p>\n

\n

Leggi anche: SEO: Come ottimizzare i video e i file audio<\/a><\/p>\n<\/div>\n

Software di conversione<\/h2>\n

Possiamo riuscire a convertire<\/b> facilmente JPEG e PNG in WEBP<\/b> e<\/b> AVIF<\/b>, quest\u2019ultimo un po\u2019 meno diffuso, anche se sta prendendo piede un po\u2019 alla volta. I programmi pi\u00f9 usati in genere sono Photoshop e GIMP<\/a>, quindi vediamo velocemente cosa possiamo fare con questi software.<\/p>\n

Adobe Photoshop<\/b> ha una sua guida<\/a> dedicata alla conversione in WebP<\/b>, se per\u00f2 usiamo una versione precedente alla 23.2<\/b> possiamo installare un plugin disponibile su Github<\/a>. Anche per il formato AVIF<\/b> possiamo trovare un plugin per la conversione<\/a>, scaricandolo da Github.<\/p>\n

GIMP<\/b>, disponibile gratuitamente, a partire dalla versione 2.10 supporta nativamente il formato WebP<\/a>. In alternativa possiamo usare un plugin per la conversione WebP<\/a>, disponibile su Github. Per quanto riguarda AVIF<\/b>, questo formato \u00e8 supportato da GIMP<\/a> a partire dalla versione 2.10.22.<\/p>\n

CMS<\/strong> come WordPress<\/strong> spesso fanno queste operazioni di conversione in automatico. \u00c8 opportuno comunque verificarlo. \u00c8 possibile anche usare dei plugin<\/b> per il proprio CMS per ottimizzare le immagini <\/b>in modo automatico e programmatico<\/b>, come LiteSpeed Cache per WordPress<\/a>, oppure EWWW Image Optimizer<\/a>.<\/p>\n

Le librerie di conversione immagini<\/h2>\n

Una breve digressione tecnica<\/b> per i pi\u00f9 curiosi (o nerd): in genere le conversioni di questo genere vengono effettuate tramite librerie disponibili gratuitamente<\/b>, che in alcuni casi si possono anche installare sul proprio PC<\/b> ed eseguire da riga di comando: libwebp<\/a> e libavif<\/a> per i nuovi formati citati, ma anche libjpeg<\/a> e libpng<\/a> per i formati vecchi.<\/p>\n

Allo stesso modo si possono generalmente installare anche sul proprio server<\/b> e poi programmare un cron per eseguire in modo schedulato la conversione in massa di immagini<\/b>, ad esempio tramite ImageMagick<\/a>. Ecco un esempio di comando<\/a> per la conversione da PNG a WebP:<\/p>\n

magick wizard.png -quality 50 -define webp:lossless=true wizard.webp<\/code><\/pre>\n
Link utili<\/h2>\n