{"id":227586,"date":"2022-09-14T10:53:00","date_gmt":"2022-09-14T07:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227586"},"modified":"2022-11-09T00:41:53","modified_gmt":"2022-11-08T21:41:53","slug":"come-servire-immagini-in-scala-in-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-servire-immagini-in-scala-in-wordpress\/","title":{"rendered":"Come servire immagini in scala in WordPress"},"content":{"rendered":"\n

\u00c8 ovvio che le foto sono parte integrante della nostra vita. Di conseguenza, difficilmente possiamo immaginare un sito web senza immagini. Le immagini attirano<\/strong> la vista dei visitatori e aiutano a organizzare i contenuti del sito. Le immagini rendono una pagina interessante, ricca di informazioni e migliorano l’esperienza dell’utente.<\/p>\n

Le immagini sovradimensionate hanno un effetto negativo sulle prestazioni di un sito Web<\/strong> e le immagini dovrebbero essere ridimensionate in base al tema attivo. Sono elementi importanti in un sito web e meritano di essere mostrati nel miglior modo possibile. \u00c8 molto importante fornire immagini in scala su un sito WordPress.<\/p>\n

Le dimensioni delle immagini in scala si adattano alla giusta dimensione in base a quelle definite in HTML e CSS. Tuttavia, non molti webmaster prestano attenzione a questo importante dettaglio di design. Prendi l’esempio di un’immagine con 500 x 500 pixel per una miniatura di 50 x 50. Il browser web deve scaricare l’immagine e ridimensionarla in modo che possa essere mostrata al visitatore. Chiaramente, questo \u00e8 inefficiente e rallenter\u00e0<\/strong> il sito web.<\/p>\n

La differenza di risoluzione non \u00e8 visibile e quindi il peso che le immagini di grandi dimensioni portano con s\u00e9 spesso passa inosservato. La maggior parte delle persone non \u00e8 nemmeno consapevole del fatto che questa risoluzione eccessiva sta causando problemi e il problema non \u00e8 stato risolto. Lasciano il problema da gestire al browser.<\/p>\n

Perch\u00e9 servire immagini in scala su un sito WordPress<\/h2>\n

\"Come<\/a><\/p>\n

Il motivo principale per la pubblicazione di immagini in scala \u00e8 che le immagini ad alta risoluzione completa rallentano<\/strong> un sito Web e aumentano i tempi di caricamento<\/strong>. Una pagina lenta porta a un’esperienza utente scadente<\/strong> e invece di rimanere e tornare, se ne andranno e staranno lontani. Le statistiche di Kissmetrics mostrano che le pagine che impiegano pi\u00f9 di tre secondi per essere caricate avranno una frequenza di rimbalzo maggiore<\/strong>.<\/p>\n

Con le dimensioni dell’immagine ottimizzate su un sito Web, i tempi di caricamento saranno pi\u00f9 brevi<\/strong>. \u00c8 pi\u00f9 probabile che le persone rimangano pi\u00f9<\/strong> a lungo sul sito Web e tornino<\/strong> pi\u00f9 tardi. Questo migliora la SEO<\/strong> e il posizionamento del sito web salir\u00e0<\/strong>.<\/p>\n

Immagini di grandi dimensioni causano problemi diversi<\/h3>\n
    \n
  1. Aumenta lo stress sulle prestazioni del browser<\/strong>. Il browser dovr\u00e0 eseguire richieste server aggiuntive. Non pu\u00f2 mostrare l’immagine velocemente, ma richieder\u00e0 tempo e risorse per ridimensionare l’immagine. I siti Web con immagini pesanti richiedono pi\u00f9 tempo per essere caricati.<\/li>\n
  2. Se le immagini ad alta risoluzione di grandi dimensioni vengono visualizzate di piccole dimensioni su un sito Web, sprecano tempo e scaricano dati<\/strong>. Questo \u00e8 il caso, ad esempio, quando un selfie da un telefono cellulare viene utilizzato non elaborato per un minuscolo Gravatar.<\/li>\n<\/ol>\n

    Come ridimensionare le immagini su siti Web WordPress<\/h2>\n

    Manualmente<\/h3>\n

    \"Come<\/a><\/p>\n

    Per iniziare dall’inizio, analizza le immagini<\/strong> sul sito utilizzando uno strumento come GTMetrix. GTMetrix \u00e8 uno strumento di analisi delle prestazioni, progettato da GT.net. Questa azienda \u00e8 famosa per il monitoraggio e l’ottimizzazione della velocit\u00e0 e Pingdom. Dopo che GTMetrics ha analizzato il sito Web, genera un rapporto. Questo mostra quali problemi<\/strong> sono stati rilevati e quali miglioramenti<\/strong> consiglia.<\/p>\n

    Durante la revisione del rapporto, prestare particolare attenzione alla scheda Struttura<\/strong>. In questa scheda, fai clic su Immagini di dimensioni corrette. Mostrer\u00e0 un elenco di immagini che non sono dimensionate correttamente.<\/p>\n

    WordPress non riduce automaticamente le immagini quando possibile, ma le aggiunge al sito senza elaborarle. Per risolvere questo problema ci sono due opzioni.<\/p>\n

    Anche se l’uso dei plugin non \u00e8 il modo desiderato, ci sono altre opzioni. Il primo modo per ridimensionare le immagini \u00e8 regolare manualmente le dimensioni di ciascuna utilizzando un editor di foto, come Photoshop<\/strong>. Pu\u00f2 sembrare che questo metodo sia inefficiente ma in realt\u00e0 non lo \u00e8.<\/p>\n

    \"Come<\/a><\/p>\n

    In Photoshop ci sono pi\u00f9 opzioni oltre a regolare l’altezza e la larghezza<\/strong> dell’immagine. Un’altra cosa da controllare qui \u00e8 la risoluzione<\/strong> dell’immagine. Il pi\u00f9 delle volte, per le applicazioni web, 72 PPI sono sufficienti per una buona esperienza visiva.<\/p>\n

    Il secondo \u00e8 usare un plugin<\/strong> per ridimensionare le immagini. Questa opzione \u00e8 facile e veloce. WordPress ha la sua funzione per farlo, srcset<\/strong>. Questo strumento pu\u00f2 convertire la grafica, come le immagini, in file reattivi<\/strong>. Le immagini reattive vengono adattate automaticamente a diversi dispositivi e dimensioni dello schermo. Di seguito sono riportati alcuni altri plugin che fanno un ottimo lavoro nel ridimensionamento delle dimensioni delle immagini.<\/p>\n

    Ottimo<\/h3>\n

    \"Come<\/a><\/p>\n

    Uno strumento eccellente per servire immagini in scala \u00e8 Optimole<\/strong>. \u00c8 un plugin per WordPress in grado di ridimensionare le immagini per diversi dispositivi. Ridimensiona automaticamente alla dimensione ottimale per un’immagine, in base ai diversi tipi di dispositivi. I risultati sono immagini in scala di alta qualit\u00e0<\/strong>.<\/p>\n

    Queste sono alcune delle caratteristiche che rendono Optimole una scelta interessante:<\/p>\n