{"id":6681,"date":"2019-09-11T02:00:02","date_gmt":"2019-09-11T00:00:02","guid":{"rendered":"https:\/\/nicholastinelli.com\/it\/?p=6681"},"modified":"2025-08-21T10:46:49","modified_gmt":"2025-08-21T13:46:49","slug":"come-ottimizzare-immagini-web-con-photoshop","status":"publish","type":"post","link":"https:\/\/nicholastinelli.com\/it\/come-ottimizzare-immagini-web-con-photoshop\/","title":{"rendered":"Come ottimizzare immagini per il web con Photoshop"},"content":{"rendered":"

Sapevi che se le pagine del tuo sito impiegano pi\u00f9 di 3 secondi <\/strong>a caricare l\u2019utente perde interesse<\/strong> e se ne va?<\/span><\/p>\n

\"\"<\/p>\n

Pi\u00f9 tempo di caricamento<\/span><\/em><\/strong> ——<\/span>>><\/span><\/strong><\/span> M<\/strong><\/em>eno clienti<\/em><\/strong><\/span>\u00a0——<\/span>>><\/span><\/strong><\/span> M<\/strong><\/em>eno entrate per la tua attivit\u00e0<\/em><\/strong><\/span><\/span><\/p>\n

In questo articolo, ti spiegher\u00f2 come ottimizzare immagini per il web con Photoshop<\/strong> e perch\u00e9 \u00e8 cos\u00ec importante per il tuo sito.<\/span><\/span><\/p>\n

\n

 <\/p>\n

Le immagini<\/strong> sono uno degli elementi che pi\u00f9 rallenta<\/strong> la velocit\u00e0 di caricamento su internet. <\/span><\/p>\n

Quindi la domanda viene spontanea: posso farne a meno?<\/span><\/p>\n

No. Secondo uno studio di ricerca pi\u00f9 dell\u201980% delle persone sono inclini a leggere un contenuto se questo presenta immagini<\/strong> e un 64% avr\u00e0 un maggiore ricordo di quello che ha letto.<\/strong><\/span><\/p>\n

L\u2019unica soluzione \u00e8 una buona ottimizzazione!<\/strong><\/em><\/span><\/p>\n

Dopo tanto lavoro per costruire il tuo sito e consolidare la tua idea, tra la scelta dell\u2019hosting, la struttura e i testi da inserire, sono certo che non vorrai sbagliarti proprio qui, inserendo immagini pesanti, che andranno a peggiorare l\u2019esperienza dell\u2019utente. <\/span><\/p>\n

Questo vale ancora di pi\u00f9 se sei fotografo e le immagini rappresentano una porzione importante del tuo sito.<\/span><\/p>\n

Pensa a te:<\/span><\/p>\n

Non perdi la pazienza<\/strong> quando un sito impiega troppo tempo a caricare<\/strong>? Sono sicuro di s\u00ec! <\/span><\/p>\n

Succede lo stesso con i tuoi visitatori!!<\/strong><\/span><\/p>\n

\"un<\/p>\n

Dovrai mantenere alta la qualit\u00e0<\/strong> e ridurre notevolmente il peso<\/strong>.\u00a0<\/span><\/p>\n

Quali benefici otterrai con una buona ottimizzazione?<\/strong><\/em><\/span><\/h2>\n

1. Migliorer\u00e0 il caricamento delle pagine del tuo sito<\/strong> con visitatori felici che avranno un rapido accesso al tuo contenuto;<\/span><\/p>\n

\"Un<\/h4>\n

2. Con file pi\u00f9 leggeri vedrai un miglioramento nella SEO<\/strong> (Search Engine Optimization<\/em>).<\/span><\/p>\n

L\u2019algoritmo di Google tende a posizionare prima e meglio le immagini pi\u00f9 leggere<\/strong> e i motori di ricerca in generale preferiscono siti leggeri e veloci da caricare<\/strong>.<\/span><\/p>\n

3. Backup pi\u00f9 veloci<\/strong> e meno spazio occupato sul server<\/strong>. Anche la scelta dell\u2019hosting andr\u00e0 ad influire sulle performance del sito.<\/span><\/p>\n

Sai qual\u2019\u00e8 il tempo di caricamento del tuo sito?<\/strong><\/em><\/span><\/h2>\n

Puoi controllarlo con alcuni degli strumenti gratuiti<\/strong> disponibili sul web:<\/span><\/p>\n

1. PageSpeed Insights<\/em><\/a><\/span><\/p>\n

2. Page Weight<\/em><\/a><\/span><\/p>\n

3. GTmetrix<\/em><\/a><\/span><\/p>\n

4. Pingdom<\/em><\/a><\/span><\/p>\n

5. Google Web Page Test<\/em><\/a><\/span><\/p>\n

6. Varvy<\/em><\/a><\/span><\/p>\n

Detto questo \u00e8 importante tenere in chiaro qual\u2019\u00e8 il peso<\/strong> e la risoluzione ideale per un\u2019immagine web: <\/strong><\/span>tra gli 80<\/strong> e i 400 KB<\/strong>, con una risoluzione standard di 72 PPI<\/strong> (pixel per inch). <\/span><\/p>\n

Ricordati che ogni immagine \u00e8 differente e alcune, di pi\u00f9 alta qualit\u00e0, con una texture dettagliata e molti colori, risulteranno pi\u00f9 difficili da ridurre.<\/span><\/p>\n

Le misure finali dipenderanno dall\u2019utilizzo che ne farai<\/strong>. Per esempio l\u2019immagine di copertina nella homepage del mio sito, ha una dimensione in pixel maggiore rispetto ad una che ho inserito nel box di illustrazione dei servizi (foto in basso).<\/span><\/p>\n

\"Dimensione<\/h4>\n

\"Dimensione<\/h4>\n

L\u2019estensione di Chrome Page Ruler, che ho utilizzato per l\u2019esempio qui sopra, pu\u00f2 aiutarti a capire e scegliere le dimensioni degli elementi in una pagina web<\/strong>, facilitandoti il lavoro.\u00a0<\/span><\/p>\n

 <\/p>\n

Una volta chiarita la parte teorica, passiamo al lato pratico:<\/strong><\/span><\/p>\n

 <\/p>\n

Come ottimizzare le immagini del tuo sito web con Photoshop senza perdere qualit\u00e0?<\/strong><\/em><\/span><\/h2>\n

 <\/p>\n

Utilizza lo strumento \u201cSalva per web\u201d.<\/strong><\/em><\/span><\/p>\n

Lo trovi nel men\u00f9 superiore, sotto la voce:<\/span><\/p>\n

File<\/strong>\u00a0——<\/span>>><\/strong><\/span> Esporta<\/strong>\u00a0——<\/span>>><\/strong><\/span> Salva per<\/strong> web (versione precedente)<\/strong><\/span><\/p>\n

\"Ottimizzare<\/p>\n

Si aprir\u00e0 una finestra dove vedrai diverse opzioni:<\/span><\/p>\n

– Scelta del formato<\/strong> (JPEG<\/strong><\/em>);<\/span><\/p>\n

– Qualit\u00e0 dell\u2019immagine<\/strong>, da 0 a 100. Valore che andr\u00e0 ad influire su peso e qualit\u00e0. In generale\u00a0 <\/span>applico un valore tra i 40 e 60. Sotto i 40 nella maggior parte dei casi \u00e8 evidente la perdita dei dettagli e il degrado dei colori;<\/span><\/p>\n

– Progressione ottimizzata<\/strong> (permette il caricamento progressivo dell\u2019immagine sulla pagina web);<\/span><\/p>\n

–\u00a0 <\/span>Incorpora profilo colore<\/strong>: spunta s\u00ec;<\/span><\/p>\n

– Convertire in sRGB<\/em><\/strong> ((e’ lo spazio colore ideale per uso web. Fai attenzione a non spuntare la casella nel caso l’immagine sia gia’ in sRGB);<\/span><\/p>\n

– Possibilit\u00e0 di scegliere quali metadati inserire<\/strong>. Queste informazioni possono includere il copyright, dove, quando e con che valori \u00e8 stata scattata la fotografia.<\/span><\/p>\n

\"\"<\/p>\n

Al lato vedrai le anteprime dell\u2019immagine: l\u2019originale<\/strong> e la versione finale<\/strong>, con le dimensioni in basso.<\/span><\/p>\n

Una volta scelti i valori non ti rimane altro che salvare l\u2019immagine<\/strong> e rinominarla con le sue parole chiave principali<\/strong>, pronta per essere caricata sul web. Google infatti cerca le parole chiave anche nella descrizione dell\u2019immagine, oltre che nel testo ALT<\/strong>. Se le inserisci correttamente, come nell\u2019esempio qui sotto, favorirai il posizionamento SEO delle tue immagini<\/strong> nei motori di ricerca<\/strong>.<\/span><\/p>\n

\"Immagine<\/h4>\n

Non sei ancora soddisfatto? Hai un sito WordPress e vuoi ridurre ulteriormente i tuoi file di un 5-10%?<\/strong><\/em><\/span><\/h2>\n

Puoi provare ad utilizzare alcuni plugin di compressione<\/strong> come Imagify<\/a>, Smush Images Optimization<\/a> o Short Pixel<\/a>.<\/span><\/p>\n

L’ideale \u00e8 poi servire le immagini anche in WebP<\/a> attraverso uno di questi plugin di WordPress.<\/em> Il WebP \u00e8 oggi supportato dalla maggior parte dei browser web.<\/span><\/p>\n

Consiglio:<\/strong><\/em> non esagerare nella compressione, un uso eccessivo pu\u00f2 influire in maniera negativa sull\u2019immagine<\/strong> e deteriorarne i colori. Un dettaglio molto importante, soprattutto se lavorate nel campo della fotografia.<\/span><\/p>\n

\n

 <\/p>\n

Saper ottimizzare le immagini per il web <\/strong>con Photoshop o altri strumenti di tua scelta \u00e8 fondamentale<\/strong> perch\u00e9 il sito sia veloce e funzionale. Occupati personalmente di ridurre le dimensioni dei tuoi file o affidati a uno sviluppatore competente che tenga in conto questi aspetti, cruciali per i motori di ricerca<\/strong> e per l\u2019esperienza dell\u2019utente <\/strong>sul tuo sito, oltre alla crescita della tua attivit\u00e0<\/strong>.<\/span><\/p>\n

Se sei interessato ad approfondire le tue conoscenze di Photoshop, puoi dare un’occhiata alla mia proposta formativa<\/a>. Se hai domande a riguardo o sull’articolo, puoi scrivermi nei commenti qui sotto o tramite il modulo di contatto<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Sapevi che se le pagine del tuo sito impiegano pi\u00f9 di 3 secondi a caricare l\u2019utente perde interesse e se ne va? Pi\u00f9 tempo di caricamento ——>> Meno clienti\u00a0——>> Meno entrate per la tua attivit\u00e0 In questo articolo, ti spiegher\u00f2 come ottimizzare immagini per il web con Photoshop e perch\u00e9 \u00e8 cos\u00ec importante per il … Leggi tutto<\/a><\/p>\n","protected":false},"author":2,"featured_media":10495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[209,212],"tags":[402,438,550,439,403,440],"class_list":["post-6681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-photoshop-it","category-seo-it","tag-ottimizzare-immagini-per-il-web","tag-photoshop-it","tag-photoshop-it-2","tag-seo-it","tag-velocita-sito","tag-wordpress-it"],"modified_by":"Nicholas Tinelli","_links":{"self":[{"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/posts\/6681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/comments?post=6681"}],"version-history":[{"count":0,"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/posts\/6681\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/media\/10495"}],"wp:attachment":[{"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/media?parent=6681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/categories?post=6681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nicholastinelli.com\/it\/wp-json\/wp\/v2\/tags?post=6681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}