Ridimensionare le tue foto per il Web

Molti di noi pubblicano le nostre foto sul Web e spesso sorge la domanda sulle dimensioni le foto dovrebbero essere usate. Se pubblichi immagini con file di dimensioni troppo grandi, impantanerai il tuo sito Web e renderai insoddisfatti gli utenti (e i motori di ricerca). Allo stesso tempo, vuoi che le tue foto abbiano un aspetto il più bello possibile.

Ho buone notizie:la risposta è piuttosto semplice. Dipenderà, tuttavia, da dove stai caricando le tue foto. Molto spesso non sarà necessario ridimensionarli affatto e quando lo fai il processo è facile. In questo articolo ti mostrerò quello che devi sapere sul ridimensionamento delle tue foto e, per quelle occasioni in cui devi ridimensionarle, ti mostrerò come farlo in Photoshop e Lightroom.

Caricamento in una galleria web

Se stai pubblicando le tue foto in una galleria web offerta da un servizio come SmugMug, SquareSpace o anche Flickr, non devi preoccuparti di ridimensionare le tue foto. Il servizio ridimensionerà le foto per te. Basta caricare i file JPEG più grandi che hai sul sito web. Il servizio li ridimensionerà per te e creerà anche foto di dimensioni diverse da utilizzare come immagini in miniatura e per l'utilizzo su dispositivi mobili.

Lo stesso vale per i siti di social media come Facebook e Instagram. Ridimensioneranno la foto riducendola notevolmente (spesso molto più di quanto vorresti). Basta caricare JPEG a grandezza naturale e tutto andrà bene.

Se stai caricando su uno di questi servizi, cosa che ti consiglio di fare, non dovrai mai pensare a ridimensionare le tue foto per il web. Ho caricato personalmente le mie foto su SmugMug per anni e non ho mai nemmeno pensato di ridimensionarle. Non dovevo farlo finché non ho iniziato a utilizzare WordPress per questo sito web.

Caricamento sul tuo sito web

Se stai creando il tuo sito Web, incluso l'utilizzo di una piattaforma di blogging come WordPress, dovrai ridimensionare le tue foto. Le dimensioni dei file JPEG che escono dalla tua fotocamera (indipendentemente dalla fotocamera che stai utilizzando) saranno troppo grandi e impantaneranno il tuo sito web.

Quanto piccolo dovresti fare i file per il tuo sito web? Probabilmente molto più piccolo di quanto pensi. Ci sono due variabili che controlli (e ti mostrerò come controllarle più avanti in questo articolo):

• la dimensione – misurata in pixel; e
• la qualità – misurata in percentuale.

Per prima cosa ti mostrerò come determinare le dimensioni e la qualità corrette dell'immagine, quindi ti mostrerò come procedere per l'impostazione loro.

1. Taglia

Per determinare la dimensione corretta della tua immagine, la prima cosa da fare è determinare la larghezza dell'area del contenuto del tuo sito web. Ciò potrebbe richiedere un po 'di scavo da parte tua, poiché siti diversi hanno larghezze diverse. Ad esempio, su questo sito Web, la mia area di contenuto principale per gli articoli è larga 1024 pixel. Pertanto, non ha senso avere immagini più larghe di così. Quindi so immediatamente che dovrei ridurre tutte le immagini a non più di 1024 pixel di larghezza.

Altri siti Web utilizzeranno aree di contenuto più piccole, di solito perché includono barre laterali e altre aree di contenuto. Ad esempio, scrivo per Digital Photography School e la loro area di contenuto principale è larga 750 pixel (fino a poco tempo fa era larga solo 600 pixel). Pertanto, DPS non utilizza immagini di larghezza superiore a 750 pixel.

Ricorda che questi sono massimi. Potresti volere che la tua immagine sia più piccola dell'area del contenuto effettiva. In tal caso, devi solo decidere quale percentuale dell'area di contenuto vuoi riempire con l'immagine, quindi impostare le dimensioni in base alla percentuale di quell'area di contenuto.

2. Qualità

Una volta che hai deciso la dimensione dell'immagine, puoi comunque controllare la qualità impostazione, che determinerà ulteriormente la dimensione dell'immagine. La riduzione della percentuale di qualità riduce le dimensioni del file, il che è positivo. Gli effetti di riduzioni di qualità da lievi a moderate non sono evidenti.

Inoltre, una riduzione della percentuale di qualità comporterà una riduzione percentuale maggiore delle dimensioni del file. In altre parole, diminuendo la percentuale di qualità del 5% (ad esempio, dal 100% al 95%) si otterrà una riduzione delle dimensioni del file molto superiore al 5%. Ogni 5% di riduzione della qualità riduce le dimensioni del file di circa il 15%, anche se questa riduzione diminuisce quanto più riduci la qualità.

Di quanto dovresti diminuire la percentuale di qualità delle tue immagini? Non c'è una regola fissa qui, devi solo usare il tuo giudizio.

Come guida per te, le persone della Digital Photography School - che sanno una cosa o due su come ridimensionare le foto - consentono solo foto sul loro sito Web fino a 200 kilobyte (KB). Anche dopo aver ridotto la dimensione dell'immagine a 750 pixel sul lato lungo (la loro dimensione massima), spesso devo ridurre la qualità dell'immagine tra il 70 e il 90% per ottenere una dimensione del file inferiore a 200 KB.

Sono più indulgente sul mio sito Web perché non ho il volume di immagini (o traffico) di DPS, permetto alle mie immagini di essere un po' più grandi. Tuttavia, cerco di mantenerli a circa 200 KB e non li lascio mai andare oltre i 450 KB. Trovo che le mie pagine si aprano ancora abbastanza velocemente in questo modo.

Ancora una volta, non esiste una regola ferrea con le percentuali di qualità. Avrò alcuni esempi di seguito che ti daranno un'idea di come potrebbero apparire i tuoi file dopo che sono stati ridotti. Penso che rimarrai sorpreso di quanta poca differenza vedi nei file ridotti.

3. Dimensione file

Il punto principale da togliere è che le foto che pubblichi sul Web dovrebbero essere misurate in kilobyte (KB) e non megabyte (MB) quando vengono pubblicati sul Web. Il tipico file Raw che esce dalla mia fotocamera è di circa 24 MB e anche quando converto il file in JPEG è ancora di routine 7-10 MB. Questo è modo troppo grande per un file web. Non ti fa bene e impantana il tuo sistema.

Esempi

Come esempio di ciò di cui sto parlando in questa pagina, di seguito sono riportate alcune versioni diverse della stessa immagine.

Grande vs Extra Large

Innanzitutto, come punto di partenza, la parte superiore di questa pagina è una foto che ho scattato di recente all'area naturale statale di Torre Pines in California. Ho ridimensionato l'immagine per adattarla all'area del contenuto di questo sito Web, che è larga 1024 pixel. Inoltre, ho anche ridotto l'impostazione della qualità all'80%. Ciò ha comportato una dimensione del file di 450 kilobyte.

A scopo di confronto, ho anche postato la stessa immagine qui sotto, ma due volte più grande. Questa immagine è larga 2048 pixel e ho mantenuto l'impostazione della qualità al 100%. Il risultato è un file di 3,8 MB, che è circa 8 volte più grande di un file rispetto all'immagine nella parte superiore dello schermo.

Dai un'occhiata a entrambe le immagini. (So ​​che non sono fianco a fianco, ma avrò un esempio del genere di seguito). Puoi dire molta differenza tra l'immagine qui sotto e quella nella parte superiore dello schermo? Immagino che tu non possa.

La maggiore dimensione in pixel ovviamente non fa nulla per te. La larghezza dello schermo è di soli 1024 pixel, quindi avere l'immagine più ampia non va bene. Anche l'aumento della percentuale non aiuta. Come ulteriore dimostrazione di ciò, controlliamo la stessa immagine con diverse impostazioni di qualità.

Diverse impostazioni di qualità

Ora diamo un'occhiata a un altro esempio, questa volta utilizzando immagini affiancate. Le 4 immagini sottostanti hanno esattamente le stesse dimensioni, ma di qualità molto diversa. In particolare, ciascuna delle immagini sottostanti è larga 512 pixel, ma ha un'impostazione della qualità di:

• Impostazione della qualità al 100% (file da 234 KB)
• Impostazione della qualità dell'80% (file da 115 KB)
• Impostazione della qualità del 60% (file da 70 KB)
• Impostazione della qualità del 40% (file da 44 KB)

Li ho mischiati. Puoi dire qual è quale? Una volta che hai la tua ipotesi, confrontala con la risposta nella didascalia qui sotto.

Sei stato in grado di determinare quale era quale? Se sei come me, non potresti. Non vedo molta differenza in queste immagini.

Eppure il più piccolo di loro è solo il 25% della dimensione del file dell'immagine più grande. Pertanto, il punto di tutto questo è che probabilmente non devi preoccuparti troppo di ridurre la dimensione del file delle tue immagini prima di pubblicarle sul Web.

Con questo in mente, esaminiamo come ridimensionare le tue foto.

Come ridimensionare le tue foto

Quando devi ridimensionare le tue foto, come lo fai? Dipende dal software che stai utilizzando. Sia Photoshop che Lightroom faranno un buon lavoro e non avrai bisogno di alcun software di ridimensionamento separato.

Ecco come farlo in ogni programma:

Ridimensionare le foto in Photoshop

In Photoshop. utilizzare la funzione Salva per Web. Ti consentirà di impostare le lunghezze esatte in pixel dei lati dell'immagine e ti consentirà anche di impostare la percentuale di qualità come preferisci.

Nel menu File, seleziona Salva per Web. Apparirà una finestra di dialogo che ti permetterà di impostare la dimensione e la qualità dell'immagine:

Le regolazioni delle dimensioni dell'immagine sono verso il basso. Basta impostare la larghezza o l'altezza sulla lunghezza desiderata e l'altro lato cambierà automaticamente in una lunghezza corrispondente. La dimensione del file apparirà in basso a sinistra. Regola l'impostazione della qualità in alto a destra finché la dimensione del file non è quella che desideri.

Il processo è semplice e hai il controllo completo su di esso. L'unica limitazione è che devi ridimensionare ogni immagine individualmente. Lightroom funziona in modo leggermente diverso e ti consente di elaborare più foto contemporaneamente.

Ridimensionare le foto in Lightroom

In Lightroom utilizzerai la funzione Esporta per ridimensionare le tue foto. Per visualizzare la funzione Esporta, fare clic con il pulsante destro del mouse, selezionare Esporta, quindi selezionare nuovamente Esporta. Apparirà la seguente finestra di dialogo:

In Lightroom, puoi impostare la dimensione dell'immagine impostando la larghezza, l'altezza o entrambe. Puoi anche impostare in pixel, pollici o centimetri.

Quando si tratta di determinare la dimensione del file, Lightroom ti consente di farlo in due modi:

• impostando un limite specifico alla dimensione del file, oppure
• impostando la qualità (in percentuale, come con Photoshop).

Ma non puoi fare entrambe le cose. Puoi scegliere la dimensione o la qualità del file.

Dopo aver fatto clic su Esporta, Lightroom creerà una nuova copia dell'immagine in qualsiasi cartella designata.

Nessuno dei due programmi è migliore dell'altro nel ridimensionare le foto. Usa quello con cui ti senti più a tuo agio. In entrambi i casi, ridimensionare le tue foto è semplice e sarà molto facile una volta che lo avrai fatto una o due volte.

Conclusione

A questo punto, dovresti avere una buona idea di come ridimensionare le tue foto e di quanto piccolo rendere i file quando pubblichi sul web. Per rafforzare questo, e semplicemente cose, il processo spiegato in questo articolo può essere riassunto in pochi passaggi:

• Determina se devi anche preoccuparti di ridimensionare le tue immagini. Se utilizzi SmugMug, SquareSpace, Flickr o un altro servizio per pubblicare le tue foto sul Web, non lo fai. Pubblicali così come sono e il tuo fornitore di servizi gestirà tutto per te. Ma se stai creando il tuo sito Web o WordPress, devi ridimensionare correttamente le tue immagini.
• Se hai bisogno di ridimensionare le tue immagini, determina la dimensione (in pixel) della tua immagine in base alle dimensioni del contenitore sul tuo sito web e alla quantità di quel contenitore che vuoi riempire con l'immagine.
• Utilizzare la funzione Salva per Web in Photoshop o la funzione Esporta in Lightroom per ridimensionare l'immagine, iniziando impostando la dimensione determinata nel passaggio 2.
• Imposta una percentuale di qualità per ridurre ulteriormente la dimensione del file dell'immagine (oppure puoi utilizzare la dimensione massima del file in Lightroom). Cerca di mantenere la dimensione dell'immagine su un massimo di circa 250 KB.
• Non aver paura di utilizzare percentuali di qualità fino al 50%.

Questo processo dovrebbe far sì che le tue foto abbiano un bell'aspetto sul tuo sito web, ma non si impantanino.