Come ridimensionare un'immagine per il web

Questo post spiega come ridimensionare un'immagine per il web. Innanzitutto in pixel in modo che l'immagine si adatti correttamente alla pagina web. Quindi in kilobyte per ridurre le dimensioni del file senza degradare troppo l'immagine.

Perché ridimensioniamo le immagini per il web?

Vogliamo che le immagini abbiano un bell'aspetto sullo schermo e che vengano scaricate rapidamente per i visitatori del sito web.

I siti web con immagini a caricamento rapido saranno posizionati più in alto nei motori di ricerca.

Perché i motori di ricerca preferiscono indirizzare gli utenti a siti Web che offrono una buona esperienza.

Ci sono due passaggi per un caricamento rapido dell'immagine:

• Il primo passo è ridimensionare l'immagine in pixel e dovrebbe venire prima.
  Quella è la larghezza e l'altezza. Deve essere della dimensione giusta per il suo posto sul sito web.
  Ci sono alcune stranezze nel dimensionamento delle immagini dall'introduzione dei siti web responsive.
  Un'immagine deve essere della dimensione giusta per un cellulare, un tablet, un desktop e una TV di cui parleremo in seguito.
• Il secondo passaggio consiste nel ridurre la dimensione dell'immagine in kilobyte , nota come compressione.
  La compressione riduce o combina i colori all'interno di un'immagine in modo da ridurre le dimensioni in kilobyte. È possibile farlo senza perdere troppa qualità.

L'esecuzione di entrambe queste attività, ridimensionamento e compressione, è nota come ottimizzazione di un'immagine per il Web.

Ti mostrerò le migliori pratiche per ridimensionare un'immagine e come farlo.

Le complicazioni con le immagini responsive

Iniziamo esaminando le immagini reattive, quelle che si ridimensionano per avere un bell'aspetto su schermi di dimensioni diverse.

Progettiamo prima per il mobile, quindi inizierò facendo riferimento alla versione mobile di un sito web.

Sui siti web per dispositivi mobili l'immagine di solito copre l'intera larghezza dello schermo. Le immagini si accumulano sopra il testo e gli utenti sono molto abituati a scorrere rapidamente pagine Web lunghe e ottimizzate per i dispositivi mobili.

Per un dispositivo mobile una larghezza molto buona per un'immagine è di 640 pixel. L'altezza può essere qualsiasi cosa desideri.

Ma il dimensionamento dell'immagine non finisce qui. Una taglia non va bene per tutti.

Immagini su diversi dispositivi

Pensiamo a quella stessa immagine su un monitor extra large o su uno schermo TV: sì, i siti Web ora sono accessibili tramite la tua smart TV.

L'immagine potrebbe trovarsi in una colonna a sinistra del testo.

Potrebbe coprire la larghezza dello schermo come nella versione mobile. Chiamiamo queste immagini degli eroi.

Immagina quanto deve essere grande quell'immagine adesso?

Per una TV, un'immagine pixel perfetta sarebbe larga 1920 pixel o più.

Se hai già ridimensionato l'immagine a 640 pixel per un cellulare, sembrerà terribile se provi a ridimensionarla a 1920 pixel. Lo allungheresti di oltre il 400%.

Il ridimensionamento delle immagini non sembra buono: i pixel si allungano e l'immagine appare sfocata.

Anche accontentarsi di mantenere le immagini a 1920 pixel non risolve il problema. Questi vengono scaricati così lentamente, specialmente su connessioni Internet lente.

Per aggiungere complicazioni: un'immagine dovrebbe avere le dimensioni esatte in pixel per l'uso sulla pagina. Ai motori di ricerca piace avere una buona idea della larghezza e dell'altezza, note come dimensioni.

Quindi puoi vedere: non esiste una dimensione standard e tutto diventa piuttosto complicato. Tutto quello che possiamo fare è il nostro meglio.

Plugin WordPress per immagini adattive

Esistono alcuni plug-in di WordPress che aiutano a fornire la dimensione dell'immagine corretta al dispositivo, chiamati immagini adattive.

Fondamentalmente viene scaricata prima una piccola immagine, indipendentemente dalle dimensioni o dalla risoluzione.

Se la risoluzione dello schermo è grande, il plugin fornisce la versione più grande. Questo accelera il tempo di attesa per il visitatore.

Questa è la soluzione se desideri utilizzare immagini di grandi dimensioni ma sei preoccupato per il tempo di download.

Ecco due plugin di immagini adattive che mi piacciono:

• Immagini adattive per WordPress di Nevma
  Invia semplicemente versioni più piccole delle immagini ai dispositivi mobili, quindi un plugin molto semplice che fa il lavoro una volta che le impostazioni sono state salvate dopo l'attivazione.
• Immagine adattiva Shortpixel di ShortPixel
  Questo plugin è intelligente. Inizierà a ritagliare e comprimere le immagini per schermi diversi non appena viene attivato. Anche se puoi avere un maggiore controllo se necessario. Anche la documentazione di ShortPixel è completa. Puoi persino confrontare un'immagine prima e dopo la compressione con il loro test di compressione dell'immagine.
  

Quindi, quello che farei è usare questi plugin adattivi, ma non fare affidamento su di essi e scaricare le foto sul tuo sito WordPress direttamente da una fotocamera. Mantieni pulita la tua libreria multimediale.

Ridimensiona prima l'immagine e comprimi al minimo per ridurre la KB. Una volta caricato su WordPress, il plug-in per immagini adattive farà il resto.

Iniziamo a ridimensionare un'immagine per il web.

Ridimensiona un'immagine per il web – in pixel

Con tutto ciò di cui abbiamo discusso in mente, scegli la larghezza dell'immagine.

• Un fotografo avrebbe bisogno di immagini di ottima qualità. Per visualizzarli a schermo intero su un monitor extra large avranno bisogno di un'immagine piuttosto grande. Ridimensiona le foto ad almeno 1920 pixel.
• Chiunque altro, consiglio di andare per 1200 pixel. Questo è un buon equilibrio. Le persone su monitor extra large vedranno una pixelizzazione sulle immagini a tutta larghezza, ma è un compromesso per un'immagine a caricamento rapido.

Per il mio sito Web e blog utilizzo immagini con una larghezza massima di 1200 pixel, la maggior parte delle pagine sono 800. Ecco perché:

• Le immagini a tutta larghezza non vengono mai utilizzate sul mio sito web. Mi piace mantenere tutto molto veloce.
• La mia attività non è particolarmente visiva, le persone non hanno bisogno di vedere le mie foto a una risoluzione così alta.
• Uso immagini separate e di dimensioni esatte per Open Graph e ciò non richiede nulla di più grande di 1200.
• Da Google Analytics so che le persone che visitano il mio sito utilizzano un dispositivo palmare o un laptop. Informazioni utili.

Lo lascio alla tua discrezione.

Software gratuito di modifica delle immagini

Ci sono molti strumenti gratuiti disponibili online e programmi di modifica delle immagini che possono essere scaricati.

Per le foto attenersi al formato di file JPEG, ed è quello che tratteremo qui.

Per i vettori, scegli PNG o SVG, e questo è per un tutorial futuro.

Software di modifica delle immagini GIMP

'GIMP' (il programma di manipolazione delle immagini GNU) è un editor di immagini completamente gratuito.

Scarica l'attuale versione stabile di GIMP dal sito web.

GIMP fornisce un tutorial sulla modifica delle dimensioni (dimensioni) di un'immagine (scala).

Editor di immagini online

Una rapida ricerca di "ridimensiona immagine online" in Google ti darà tutta una serie di opzioni per consentirti di caricare, ridimensionare, comprimere e scaricare il tuo Jpeg.

Il primo risultato che ho trovato è stato resizeimage.net. Molto semplice da usare: ritaglia, ridimensiona e comprime un'immagine.

Se desideri ritagliare l'immagine, usa l'opzione numero 2, ma l'ho ignorata e sono passato direttamente all'opzione numero 4 dove posso ridimensionarla in pixel.

Metti 1200 nel campo larghezza, Nan in altezza e spunta la casella Mantieni proporzioni.

Il formato dell'immagine di output sarà JPG.

Scegli un'opzione di compressione.

La compressione progressiva mostrerà una versione pixelata del JPEG non appena il visitatore sarà sulla pagina. Il resto delle informazioni verrà scaricato progressivamente per creare l'immagine finale. Mi piace molto questa opzione perché il visitatore sa aspettare.

Riduci la qualità dell'immagine di circa il 75%, sempre a seconda di quanto spietato vorresti essere.

Ridimensionamento di un'immagine in KB – compressione

La compressione è molto diversa dal ridimensionamento. Tutte le immagini devono essere compresse prima del caricamento, anche se utilizzi un plug-in per immagini adattive.

La compressione riduce la dimensione del file dell'immagine riducendo i pixel, quindi scarica più velocemente.

Durante la fase di compressione cerca di non compromettere troppo la qualità dell'immagine.

Cerca di raggiungere un equilibrio tra l'aspetto gradevole dell'immagine e il download rapido.

Le immagini possono essere compresse anche utilizzando il software GIMP.

Tutorial di GIMP sulla modifica della dimensione (FileSize) di un Jpeg.