{"id":24157,"date":"2024-01-07T12:45:44","date_gmt":"2024-01-07T12:45:44","guid":{"rendered":"https:\/\/yorkshiredesign.co.uk\/?page_id=24157"},"modified":"2025-04-17T12:01:12","modified_gmt":"2025-04-17T11:01:12","slug":"ottimizzazione-delle-immagini","status":"publish","type":"page","link":"https:\/\/yorkshiredesign.co.uk\/it\/guida-alla-velocita-della-pagina\/ottimizzazione-delle-immagini\/","title":{"rendered":"Ottimizzazione delle immagini"},"content":{"rendered":"
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Immagine Ottimizzazione<\/span><\/h1>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Stretta<\/span> Quei kb<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Servizio<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

L'ottimizzazione delle immagini snellisce il tuo sito web<\/p>\n

Meno peso, pi\u00f9 velocit\u00e0<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Vai a Immagina<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tVai a Immagina\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a> <\/div>\n <\/div>\n<\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Cosa \u00e8 Immagine<\/span> Ottimizzazione?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

L'ottimizzazione delle immagini \u00e8 un processo molto semplice. \u00c8 anche l'unica cosa che velocizzer\u00e0 maggiormente il tuo sito, soprattutto se hai un sito web ricco di immagini. In sostanza, ottimizzare un'immagine significa semplicemente ridurre le dimensioni del file. La tecnologia \u00e8 in continua evoluzione e al giorno d'oggi i migliori formati di immagine da utilizzare sono WEBP e AVIF. Entrambi i formati sono completamente supportati dai browser moderni e sono disponibili informazioni dettagliate sull'aspetto tecnico di queste tecniche di compressione delle immagini su Questo sviluppatore web<\/strong><\/a> pagina.<\/p>\n

A causa della qualit\u00e0 delle moderne fotocamere e delle immagini stock disponibili, le dimensioni dei file immagine possono essere molto grandi, alcuni anche 5-10 MB o pi\u00f9. Immagini di queste dimensioni semplicemente non possono essere utilizzate sui siti Web poich\u00e9 richiedono troppo tempo per essere scaricate e ti colpiranno punteggi di velocit\u00e0 di pagina<\/a> male. Quello che devi fare \u00e8 ridurli di dimensioni. \u00c8 qui che entra in gioco il software di ottimizzazione delle immagini.<\/p>\n

L'ottimizzazione delle immagini pu\u00f2 essere eseguita in due modi: manualmente o tramite software. Il metodo manuale \u00e8 ottimo se stai realizzando un file nuovo sito web<\/a>, ma per i siti Web esistenti spesso con centinaia o pi\u00f9 immagini, \u00e8 molto pi\u00f9 efficace in termini di tempo utilizzare un software di ottimizzazione delle immagini. Sono disponibili numerosi plugin per l'ottimizzazione delle immagini, ma quello che consiglio di pi\u00f9 lo \u00e8 Immagina<\/strong><\/a>. \u00c8 gratuito per un massimo di 200 immagini al mese, supporta WEBP e, secondo la mia esperienza, funziona con tutti i tipi di siti Web.<\/p>\n

Come prima, fornir\u00f2 un buon video che ne descriver\u00e0 le caratteristiche principali, scrivendo allo stesso tempo suggerimenti e cose a cui prestare attenzione lungo il percorso.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Stretta<\/span> Quei kb<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Servizio<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

L'ottimizzazione delle immagini snellisce il tuo sito web<\/p>\n

Meno peso, pi\u00f9 velocit\u00e0<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Vai a Immagina<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tVai a Immagina\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a>\n\t
\n\t\t
\n\t\t\t

Cosa \u00e8 Immagine<\/span> Ottimizzazione?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

L'ottimizzazione delle immagini \u00e8 un processo molto semplice. \u00c8 anche l'unica cosa che velocizzer\u00e0 maggiormente il tuo sito, soprattutto se hai un sito web ricco di immagini. In sostanza, ottimizzare un'immagine significa semplicemente ridurre le dimensioni del file. La tecnologia \u00e8 in continua evoluzione e al giorno d'oggi i migliori formati di immagine da utilizzare sono WEBP e AVIF. Entrambi i formati sono completamente supportati dai browser moderni e sono disponibili informazioni dettagliate sull'aspetto tecnico di queste tecniche di compressione delle immagini su Questo sviluppatore web<\/strong><\/a> pagina.<\/p>\n

A causa della qualit\u00e0 delle moderne fotocamere e delle immagini stock disponibili, le dimensioni dei file immagine possono essere molto grandi, alcuni anche 5-10 MB o pi\u00f9. Immagini di queste dimensioni semplicemente non possono essere utilizzate sui siti Web poich\u00e9 richiedono troppo tempo per essere scaricate e influiranno negativamente sui punteggi di velocit\u00e0 della pagina. Quello che devi fare \u00e8 ridurli di dimensioni. \u00c8 qui che entra in gioco il software di ottimizzazione delle immagini.<\/p>\n

L'ottimizzazione delle immagini pu\u00f2 essere eseguita in due modi: manualmente o tramite software. Il metodo manuale \u00e8 ottimo se stai creando un nuovo sito web, ma per i siti web esistenti spesso con centinaia o pi\u00f9 immagini, \u00e8 molto pi\u00f9 efficace in termini di tempo utilizzare un software di ottimizzazione delle immagini. Sono disponibili numerosi plugin per l'ottimizzazione delle immagini, ma quello che consiglio di pi\u00f9 lo \u00e8 Immagina<\/strong><\/a>. \u00c8 gratuito per un massimo di 200 immagini al mese, supporta WEBP e, secondo la mia esperienza, funziona con tutti i tipi di siti Web.<\/p>\n

Come prima, fornir\u00f2 un buon video che ne descriver\u00e0 le caratteristiche principali, scrivendo allo stesso tempo suggerimenti e cose a cui prestare attenzione lungo il percorso.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Cosa \u00e8 Immagine<\/span> Ottimizzazione?<\/h1>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

L'ottimizzazione delle immagini \u00e8 un processo semplice. \u00c8 anche l'unica cosa che velocizzer\u00e0 maggiormente il tuo sito, soprattutto se hai un sito web ricco di immagini. In sostanza, ottimizzare un'immagine significa semplicemente ridurre le dimensioni del file.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Servizio<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

La tecnologia \u00e8 in continua evoluzione e al giorno d'oggi i migliori formati di immagine da utilizzare sono WEBP e AVIF.<\/p>\n

Entrambi i formati sono completamente supportati dai browser moderni e sono disponibili informazioni dettagliate sull'aspetto tecnico di queste tecniche di compressione delle immagini su Questo sviluppatore web<\/strong><\/a> pagina.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

A causa della qualit\u00e0 delle moderne fotocamere e delle immagini stock disponibili, le dimensioni dei file immagine possono essere molto grandi, alcuni anche 5-10 MB o pi\u00f9. Immagini di queste dimensioni semplicemente non possono essere utilizzate sui siti Web poich\u00e9 richiedono troppo tempo per essere scaricate e influiranno negativamente sui punteggi di velocit\u00e0 della pagina. Quello che devi fare \u00e8 ridurli di dimensioni. \u00c8 qui che entra in gioco il software di ottimizzazione delle immagini.<\/p>\n

L'ottimizzazione delle immagini pu\u00f2 essere eseguita in due modi: manualmente o tramite software. Il metodo manuale \u00e8 ottimo se stai creando un nuovo sito web, ma per i siti web esistenti spesso con centinaia o pi\u00f9 immagini, \u00e8 molto pi\u00f9 efficace in termini di tempo utilizzare un software di ottimizzazione delle immagini.<\/p>\n

Sono disponibili numerosi plugin per l'ottimizzazione delle immagini, ma quello che consiglio di pi\u00f9 lo \u00e8 Immagina<\/strong><\/a>. \u00c8 gratuito per un massimo di 200 immagini al mese, supporta WEBP e, secondo la mia esperienza, funziona con tutti i tipi di siti Web.<\/p>\n

Come prima, fornir\u00f2 un buon video che ne descriver\u00e0 le caratteristiche principali, scrivendo allo stesso tempo suggerimenti e cose a cui prestare attenzione lungo il percorso.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>

<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Come usare Immagina<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Come Ottimizzare<\/span> Le tue immagini<\/h2>\n\n\t\t<\/div>\n\t<\/div>\n
\n
\n

\n \n <\/span>\n <\/span>\n <\/span>\n La questione del marchio<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify offre tre livelli di ottimizzazione: standard, aggressivo e ultra. Questi livelli riguardano essenzialmente la qualit\u00e0 dell\u2019immagine. Uno dei compromessi con l'ottimizzazione delle immagini \u00e8 che si perde la qualit\u00e0 dell'immagine. \u00c8 solo piccolo e normalmente impercettibile, ma pu\u00f2 diventare evidente se per te \u00e8 importante una qualit\u00e0 dell'immagine ultra elevata. Questo \u00e8 spesso il caso di siti web come siti di fotografia, arte o gioielli, ecc.<\/p>\n

Lo fa Degradare<\/span> Immagini Molto?<\/p>\n

Molto dipende dal tipo di immagini che usi. Ad esempio, la qualit\u00e0 standard non li degrader\u00e0 affatto, mentre l'ultra li pixeler\u00e0 un po', ma non troppo. Questo sito web \u00e8 impostato sulla qualit\u00e0 "aggressiva" come esempio. Il vantaggio \u00e8 che le immagini sono molto pi\u00f9 piccole rispetto all'impostazione standard e quindi si caricano pi\u00f9 velocemente, senza quasi nessuna perdita di qualit\u00e0 dell'immagine.<\/p>\n

Alcune persone scelgono direttamente l'impostazione ultra e notano davvero la differenza. Quando inizi a ottimizzare, assicurati di spuntare la casella per conservare gli originali<\/strong>. In questo modo, se non ti piace l'impostazione ultra, puoi tornare a una qualit\u00e0 superiore.<\/p>\n

Generalmente, l'impostazione aggressiva degrader\u00e0 la qualit\u00e0 delle immagini di circa 15% fino a un livello di 85%. Questo \u00e8 impercettibile all'occhio umano e nell'impostazione pi\u00f9 comune. Se la qualit\u00e0 dell'immagine non \u00e8 fondamentale o se utilizzi grafica in stile cartone animato anzich\u00e9 foto, scegli ultra. \u00c8 ancora perfettamente accettabile. Normalmente con un'impostazione ultra si ridurranno di circa 85% le dimensioni dell'immagine. Ci\u00f2 significa che un'immagine da 1 MB scender\u00e0 a una dimensione compresa tra 100 e 150 libbre, il che fa un'enorme differenza per tempo di caricamento della pagina e velocit\u00e0 della pagina<\/a> punteggi.<\/p>\n

Posso Fare tutto<\/span> Le mie immagini su una volta?<\/p>\n

S\u00ec, puoi: guarda il video per una guida su come funziona Imagify. UN il miglior consiglio \u00e8 includere anche il tema<\/a> cartella nelle ottimizzazioni. Il tuo tema conterr\u00e0 molte immagini, alcune delle quali verranno utilizzate nel tuo sito web. Inserendo le immagini del tuo tema, otterrai il massimo delle immagini che puoi ottimizzare sul tuo sito web.<\/p>\n

Per valutare quante immagini devi ottimizzare, guarda nella tua libreria multimediale. Ti dir\u00e0 quante immagini hai. Quindi moltiplicalo per 4 (in media). Questo perch\u00e9 WordPress crea pi\u00f9 versioni delle tue immagini per un design reattivo (miniatura, 300 x 300 px, ecc.). Devi ottimizzare ogni versione di ogni immagine<\/a> per ottenere tutti i vantaggi dell'ottimizzazione delle immagini su tutti i dispositivi.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Ottimizzazione manuale<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

L'ottimizzazione manuale delle immagini \u00e8 davvero per i puristi. Un vantaggio \u00e8 che carichi un'immagine completamente ottimizzata, con le dimensioni corrette e quindi non devi eseguire alcun software di ottimizzazione delle immagini. Inoltre risparmi spazio sul server poich\u00e9 non hai immagini a grandezza naturale. Tuttavia, \u00e8 piuttosto dispendioso in termini di tempo, quindi per la maggior parte delle persone consiglierei semplicemente di utilizzare Imagify.<\/p>\n

Io ho Il tempo<\/span> \u2013 Cosa \u00e8 coinvolto?<\/p>\n

Innanzitutto, devi conoscere le dimensioni dell'immagine che stai utilizzando. C'\u00e8 una buona guida su come farlo dimensioni delle immagini e best practice<\/strong><\/a> su questa pagina. Una volta che conosci le dimensioni dell'immagine, puoi ritagliare qualsiasi immagine di grandi dimensioni alla dimensione esatta utilizzando qualsiasi strumento software per immagini. Paint.net<\/strong><\/a> \u00e8 gratuito e normalmente abbastanza buono per questo.<\/p>\n

Dopo aver creato le immagini con le dimensioni corrette, puoi ottimizzarle utilizzando uno strumento online. Uno dei migliori che esiste da anni lo \u00e8 TinyPNG.com<\/strong><\/a>. Devi solo caricare le tue immagini e poi scaricare la versione molto pi\u00f9 piccola che verr\u00e0 creata. Due suggerimenti quando si caricano queste immagini su WordPress:<\/p>\n

Innanzitutto sembra sciocco, ma assicurati di caricare la versione appena ottimizzata sul tuo sito web dalla cartella "Download". \u00c8 cos\u00ec facile caricare quello sbagliato dal tuo desktop o ovunque memorizzi le tue immagini. In secondo luogo, utilizza un nome leggermente diverso per il nuovo titolo dell'immagine. Ci\u00f2 \u00e8 dovuto alla memorizzazione nella cache. La tua installazione di WordPress potrebbe non riconoscere la nuova dimensione dell'immagine per un po' di tempo se carichi l'immagine con lo stesso nome file.<\/p>\n

Dopo averlo fatto, potresti fare un ulteriore passo avanti e convertire le immagini appena ottimizzate nel formato WEBP. Fallo prima di caricarli. Vai a CloudConvert<\/strong><\/a> sito web. Segue esattamente lo stesso processo di TinyPNG, tranne che scegli di convertirli in WEBP. Quindi scarica i file e caricali sul tuo server.<\/p>\n

Usare software come Imagify \u00e8 molto pi\u00f9 semplice, ma alla fine avrai caricate immagini grezze ottimizzate, quindi non avrai bisogno di utilizzare strumenti di conversione delle immagini o di avere conversioni WEBP sempre in esecuzione.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Dovrei usare WEBP?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

WEBP \u00e8 un formato immagine pi\u00f9 recente sviluppato da Google. Le sue immagini sono molto pi\u00f9 piccole dei tradizionali formati JPG e PNG e quindi s\u00ec, dovresti usarle, a condizione che il tuo server supporti la conversione delle immagini tradizionali in WEBP.<\/p>\n

Il WEBP in realt\u00e0 \u00e8 nato nel 2010, ma nonostante ci\u00f2 \u00e8 ancora visto come un formato "emergente". Potresti leggere che hai bisogno delle immagini JPG \/ PNG originali come fallback cos\u00ec come dei formati WEBP, ma la verit\u00e0 \u00e8 che Chrome, Firefox, Safari e tutti gli altri principali browser lo supportano, quindi avere solo le versioni WEBP ora va bene.<\/p>\n

Il mio server Supporto<\/span> Loro?<\/p>\n

Imagify ha un'impostazione automatica per abilitarlo sul tuo server. La maggior parte degli ottimizzatori di immagini che convertono in WEBP fanno questo. Controller\u00e0 e ti dir\u00e0 se il tuo server non servir\u00e0 immagini WEBP. Fondamentalmente ci\u00f2 che deve accadere \u00e8 che WordPress debba riscrivere i file di immagine in due modi per funzionare. Alcuni server lo consentono, altri no:<\/p>\n

Il modo migliore \u00e8 tramite tag immagine. Questo \u00e8 un comando HTML5 che sostituir\u00e0 il file parte ad a etichetta. \u00c8 piuttosto semplice, ma non tutti i server lo supportano. Il secondo modo \u00e8 riscrivere i file tramite il file .htaccess. Questo non \u00e8 il modo preferito per farlo poich\u00e9 aumenta le richieste del server al caricamento della pagina. Tuttavia \u00e8 comunque vantaggioso utilizzare WEBP se \u00e8 necessario farlo in questo modo.<\/picture>\n

Kinsta \u00e8 NGINX ed \u00e8 gi\u00e0 configurato per WEBP nel caso in cui disponi di una configurazione del server non compatibile.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Quanto tempo ci vuole?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify \u00e8 un processo automatizzato molto veloce. Il tempo impiegato dipende molto dalle dimensioni dell'immagine che stai utilizzando. Un'immagine normale di meno di 1 MB richieder\u00e0 alcuni secondi per essere ottimizzata.<\/p>\n

Ricorda di moltiplicare la quantit\u00e0 di immagini mostrate nella tua libreria multimediale per 4 per consentire l'ottimizzazione di tutte le dimensioni reattive. Quindi supponiamo che tu abbia 100 immagini, 400 saranno ottimizzate. Moltiplicalo per una media di 5 secondi ciascuno e avrai l'idea. Per completarlo ci vorr\u00e0 poco pi\u00f9 di mezz'ora.<\/p>\n

Le immagini pi\u00f9 grandi possono richiedere pi\u00f9 tempo e il completamento dei negozi pu\u00f2 richiedere molto tempo. Ad esempio, se disponi di 10.000 immagini della libreria multimediale, devi ottimizzare 40.000 immagini reattive. Moltiplicalo per 5 secondi ciascuno e otterrai 2\/3 giorni per ottimizzare le tue immagini.<\/p>\n

Tuttavia, il sito web medio non ha neanche lontanamente questa quantit\u00e0 di immagini, quindi il processo dovrebbe essere completato entro circa un'ora.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Immagina \u2013 Guarda il video<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t\n\t\t\t