▷ Come COMPRENDERE un'IMMAGINE in PHOTOSHOP

Avere un sito web non si basa esclusivamente sul caricamento incontrollato di contenuti, devi occuparti della struttura del web includendo ogni elemento che ospitiamo al suo interno. Bisogna tener conto del fatto che vi si accede tramite connessioni Internet e che, sebbene in molti luoghi ci siano alte velocità, in altri sono ancora un po' ritardati. Tutto questo senza tener conto dell'importanza del tema mobile e della spesa dei megabyte. Ecco perché comprimere le immagini senza perdere la qualità di Photoshop è un'attività molto ricercata dai creatori che pensano nell'interesse degli utenti.

Quello che non dovremmo fare è trasformare il nostro sito Web in uno spazio lento in cui le persone non vogliono più entrare, qualcosa che possiamo evitare se prendiamo in considerazione diversi elementi e impariamo a comprimere le immagini in Photoshop. Uno di questi e molto importante è il caricamento delle immagini. Se hai un sito con molti contenuti visivi, devi prendertene cura sia all'interno che all'esterno comprimendo le immagini di Photoshop e rendendo la pagina molto più veloce.

La velocità del nostro sito Web è essenziale per l'esperienza dell'utente poiché non è la stessa cosa entrare in una pagina veloce che non influisce sulla nostra connessione a un sito Web in cui tutti gli oggetti che vediamo si caricano molto lentamente. Inoltre, per vedere le immagini, devono essere scaricate sul server, quindi maggiore è il volume, più tempo impiegherà il caricamento e probabilmente l'utente si dispera e se ne va. Da qui l'importanza di modificare le immagini in Photoshop e migliorare il nostro sito Web o semplicemente il nostro spazio sapendo come comprimere le immagini in Photoshop.

Se carichi immagini molto pesanti, la tua pagina sarà lenta e gli utenti si stancheranno e se ne andranno. Se vuoi evitare di perdere visite, prenditi cura di tutto ciò che carichi e impara a comprimere un'immagine in Photoshop riducendone le dimensioni.

1. Tipi di formati immagine in Photoshop

Per parlare di ottimizzazione delle immagini dobbiamo distinguere che tipo di formato immagine abbiamo e quale è il migliore per noi.

Formato JPEG.webpPer l'uso fotografico generale, è il formato standard utilizzato con risultati di buona qualità. Supporta colori a 24 bit.

Formato PNG-8È l'alternativa alla GIF.webp ma senza animazioni e può visualizzare fino a 256 colori. La sua compressione per il web è una delle più adatte, consentendo una buona qualità con dimensioni ridotte.

Formato PNG-24È una buona opzione per esportare immagini di qualità proprio come JPEG.webp. Questo tipo di estensione è conveniente quando abbiamo un'immagine che contiene trasparenza. Visualizza anche fino a 16 milioni di colori in quanto supporta il colore a 24 bit.

Formato GIF.webpÈ il formato per le animazioni per eccellenza. Rappresenta fino a 256 colori in forme di grandi quantità di tinta unita, linee o testo.

Per questo tutorial sceglieremo due dei formati più utili e utilizzati per caricare immagini sul web: JPEG.webp e PNG-8.

2. Come comprimere un'immagine in Photoshop

Quando lavoriamo in uno spazio di lavoro in Photoshop, lo facciamo secondo determinati parametri a seconda dell'immagine o di natura generale. Uno di questi è la dimensione, le proporzioni dell'immagine con cui lavoriamo. La dimensione di un'immagine corrisponde al numero di pixel che contiene verticalmente e orizzontalmente, dando origine alla dimensione dell'immagine.

Ciò che chiamiamo risoluzione indica il numero di informazioni in uno spazio specifico, chiamato pixel per pollice o dpi. Ciò significa che maggiore è il numero di pixel per pollice, maggiore sarà la nostra risoluzione.

Una volta differenziati entrambi gli aspetti, va notato che due immagini possono avere la stessa dimensione, ma risoluzione e proporzioni diverse. Se sono immagini per il web, si consiglia di trattare le dimensioni in pixel. Per accedervi vai su Immagine/Dimensione immagine oppure premi la seguente combinazione.

Ctrl + Alt + I

NotaL'opzione Ricampiona immagine ci consente di modificare le dimensioni senza modificare la risoluzione. Seleziona l'opzione più appropriata per ciò di cui hai bisogno.

3. Cambia il profilo colore di Photoshop

Lo spazio colore in cui lavoriamo influenzerà anche il file finale. C'è da menzionare la differenza tra lo spazio sRGB e RGB. Il sistema Adobe RGB è stato introdotto dalla società nel 1998 e compone uno spettro di colori molto più ampio rispetto allo spazio sRGB. Questo non significa che sia peggio, ma che si dedicano a obiettivi diversi.

Il sistema RGB si avvicina con il suo spettro a quello del CMYK, che è orientato al mondo della stampa. Pur avendo più colori, lo standard distribuito digitalmente nei dispositivi, siano essi telefoni cellulari, monitor o qualsiasi dispositivo digitale, è quello dell'sRGB. Quando uno di questi dispositivi incontra RGB, cerca di comprimere i colori in eccesso e crea un falso sRGB con risultati peggiori.

Passo 1
Pertanto, si consiglia di scattare le fotografie, l'area di lavoro in Photoshop o ottimizzarle con questo sistema per migliorare la compatibilità dei colori. Per modificare il profilo colore di lavoro vai al menu Modifica e seleziona Converti in profilo.

Passo 2
Nella finestra successiva dovrai solo scegliere il profilo di cui hai bisogno, in questo caso sRGB.

4. Comprimi l'immagine senza perdere la qualità di Photoshop

Il formato JPG.webp è lo standard più utilizzato e sebbene permetta la compressione, non offre tanti parametri modificabili come PNG. Possiamo variare il peso finale della nostra immagine ridimensionando la nostra fotografia o durante l'esportazione.

Passo 1
Quando salviamo come JPEG.webp vediamo che abbiamo due opzioni, da un lato, configurare le opzioni dell'immagine (qualità) e, dall'altro, le opzioni di formato. Per fare ciò, vai al menu File / Salva come o la seguente combinazione e seleziona il formato JPEG.webp.

Maiusc + Ctrl + S

Passo 2
Questi parametri di configurazione vengono visualizzati nella finestra successiva. Vediamo cosa significa ciascuno.

Opzioni immagineQui dobbiamo scegliere la qualità finale dell'immagine, è evidente che maggiore è la qualità, maggiore è la dimensione del file, potendo vedere cosa occuperà finalmente se clicchiamo su Anteprima. Sposta la barra per poter modificare questi valori.

Se vogliamo stampare una fotografia in formato poster, dobbiamo selezionare una qualità molto più alta rispetto a se vogliamo un'immagine per il web, ricorda che maggiore è la dimensione dell'immagine, più risorse saranno necessarie per caricarla via web.

Opzioni di formatoAll'interno qui troviamo diverse alternative per dare il formato finale alla nostra immagine. La più consigliata è la linea di base standard in quanto di solito è la più compatibile.

• Linea di base ("Standard"). Impiega l'uso di un formato riconoscibile dalla stragrande maggioranza dei browser e dei programmi web. Attualmente gli ultimi programmi di solito non danno incompatibilità.

• Base ottimizzata. Questo formato creerà un file immagine che contiene colori ottimizzati, dandoti così una dimensione più piccola.

• Progressivo. Con questa opzione verranno mostrate diverse versioni che saranno sempre più dettagliate man mano che vengono scaricate. È l'utente che decide quanti ne verranno creati. È un formato che è stato utilizzato e viene utilizzato molto quando si passa a connessioni lente che richiedono il caricamento di sweep di sweep.

NotaVa detto che non tutti i browser riconoscono o supportano immagini JPEG.webp progressive o ottimizzate.

5. Comprimi immagini PNG in Photoshop

Passo 1
Per esportare come PNG dobbiamo fare lo stesso primo passaggio degli altri formati, andare nel menu File / Salva con nome e selezionare in questo caso PNG.

Passo 2
Ora vedrai nella finestra di salvataggio che appaiono diverse opzioni.

CompressionePossiamo selezionare il tipo di compressione che vogliamo o dire nessuno se non vogliamo che venga applicato. A seconda della scelta, la velocità di caricamento verrà aumentata o diminuita.

TessereQuesta opzione è importante, soprattutto se parliamo di piattaforme web. Vediamo la differenza:

• Nessuno dei due. Questa opzione consente di visualizzare un'immagine solo quando è stata caricata completamente, ovvero se abbiamo una connessione lenta o problematica, l'immagine non apparirà finché non viene caricata nel trasferimento Internet.

• Intrecciate. Questa opzione è più consigliata per i servizi Web in quanto mostra versioni ridotte dell'immagine durante il caricamento. Questo aiuta il processo di download a essere più piccolo e anche l'utente saprà che l'immagine viene scaricata.

6. Salva le immagini JPG.webp per il web di Photoshop

Passo 1
Una delle opzioni più vantaggiose che abbiamo in Photoshop per l'ottimizzazione delle immagini è Salvato come web, che ci consente di regolare manualmente vari parametri. Questo salvataggio è molto utile per le immagini dedicate al caricamento sul web, consentendo immagini di qualità, ma con dimensioni ridotte. Per questo andiamo File / Salva per web o eseguiamo la seguente combinazione.

Alt + Maiusc + Ctrl + S

Passo 2
Se vogliamo selezionare JPEG.webp avremo queste impostazioni.

Qualità dell'immagineSeleziona la qualità dell'immagine che preferisci da Bassa a Massima o con i valori a destra. Puoi vedere la variazione di taglia sotto l'immagine a sinistra.

ProgressivoL'immagine si caricherà a poco a poco, cioè passeremo dal vederla in bassa risoluzione a quella vera.

interlacciatoVisualizza l'immagine solo quando è completamente caricata.

AloneSe l'immagine è trasparente, seleziona un colore dell'alone equivalente allo sfondo della pagina in cui verrà incorporato.

Incorpora profilo coloreSeleziona questa opzione per preservare il profilo ICC dell'immagine, alcuni browser web lo usano per correggere il colore.

Converti in sRGBUtilizzare questo profilo per migliorare la compatibilità dei colori su dispositivi e monitor.

Hai altre opzioni come la modalità di anteprima, i metadati o il ridimensionamento con o senza restrizioni.

7. Salva immagini PNG per Photoshop web

Passo 1
Come già sappiamo per poter accedere a Salvati per Web in PNG dobbiamo andare su File / Salva per web. Ricorda che questo formato è molto buono per le immagini con una destinazione web poiché il suo risultato offre un ottimo rapporto tra qualità e peso del file.

Passo 2
Per esportare come PNG selezionalo dal menu a tendina. Ricorda che PNG 24 offre più quantità di colore quindi le dimensioni sono molto più alte di quelle di PNG-8. Consigliamo quest'ultimo per le immagini web standard. La finestra che appare è simile a quella di JPEG.webp e oltre alle opzioni già viste nella sezione precedente, possiamo anche scegliere:

TrasparenzaQui puoi selezionare il tipo di trasparenza più adatto alla tua immagine o rimuoverlo e selezionare un colore specifico con Halo.

Adatta al WebQuesto parametro consente di comprimere ulteriormente l'immagine, maggiore è la percentuale di regolazione, maggiore è la compressione, minore è la qualità e minore è la dimensione.

8. Salva le immagini per il web di Photoshop

Passo 1
Per poter eseguire una compressione automatica sia per PNG che per JPEG.webp, apriamo il salvataggio per web in File / Salva per Web o la seguente combinazione di tasti.

Alt + Maiusc + Ctrl + S

Passo 2
A destra dell'opzione Predefiniti, fai clic sulla scheda del menu che appare e seleziona Ottimizza alla dimensione del file.

Passaggio 3
Ora devi solo selezionare la dimensione dell'immagine che desideri avere e il programma eseguirà automaticamente la compressione per te. È possibile variare i valori per ottenere risultati diversi.

Passaggio 4
Puoi anche andare alla finestra chiamata 4 copie e selezionare una delle versioni che ti vengono fornite da lì e salvarla.

Passaggio 5
Se vuoi modificare le dimensioni e la velocità di trasferimento, clicca sui valori sotto l'immagine e selezionali automaticamente.

Come puoi vedere, ci sono diversi modi per ridurre le dimensioni delle tue immagini a seconda del loro scopo. Ci sono molti parametri che devi tenere in considerazione, ma a seconda del livello richiesto, l'uno o l'altro sarà più utile sapere come comprimere l'immagine di Photoshop. Nel seguente video ti mostreremo graficamente come ottimizzare e comprimere le immagini in modo semplice e completo. Se vuoi una compressione veloce, il primo metodo andrà bene per te e se stai cercando qualcosa di più complesso in cui puoi modificare tutti i parametri, il tuo metodo è il secondo.