Come ottimizzare le immagini per il Web: una guida dettagliata per migliorare le prestazioni del sito

Non c'è dubbio che le immagini siano una risorsa inestimabile per il world wide web. Dalla visualizzazione dei dati alla suddivisione di paragrafi di testo fino alla presentazione del lavoro del portfolio, le foto e la grafica sono una parte importante della maggior parte dei progetti di siti Web e aiutano gli utenti a vivere fantastiche esperienze online.

Avere una grafica eccezionale, tuttavia, può mettere a dura prova il tuo sito web. Con risoluzioni più elevate si ottengono file di dimensioni maggiori, il che significa anche tempi di caricamento più lenti. AKA, le immagini sono spesso la causa delle scarse prestazioni del sito. E ricorda, lo scopo dell'aggiunta di immagini al tuo sito Web è creare un'esperienza migliore per i tuoi utenti (o forse anche aumentare le vendite e le conversioni!), Cosa difficile da fare con un sito lento.

Quindi, come si bilanciano le prestazioni del sito con il design visivo?

Ottimizzando le tue immagini.

Ci sono molte piccole cose che puoi fare durante il processo di creazione delle immagini per ottimizzare le dimensioni dei file, in particolare pensando al tuo sito web.

In questa guida dettagliata all'ottimizzazione delle immagini, tratterò:

• Cos'è l'ottimizzazione delle immagini?
• Perché l'ottimizzazione delle immagini è importante?
• 7 modi per ottimizzare le immagini per il web

Che cos'è l'ottimizzazione delle immagini?

In generale, l'ottimizzazione delle immagini è l'atto di ridurre le dimensioni del file senza perdere la qualità. Puoi ottimizzare le tue immagini nella fase di creazione (usando le giuste opzioni di "Esporta" in Photoshop) o direttamente sul tuo sito web (usando il lazy load per visualizzare i media sul tuo sito). L'obiettivo è ridurre la quantità di dati che un utente deve scaricare, in modo che possa ottenere il contenuto che sta cercando più velocemente senza sacrificare la qualità.

Perché l'ottimizzazione delle immagini è importante?

Le persone hanno tempi di attenzione brevi quando si tratta del Web, motivo per cui è importante caricare il tuo sito Web in due secondi o meno. E uno dei fattori più comuni che rallentano il tuo sito sono le tue immagini. (Anche se il tuo sito Web è in esecuzione sui migliori server, come otterrai con un host WordPress gestito, le immagini possono essere la rovina delle prestazioni.)

Sfruttando le migliori pratiche di ottimizzazione delle immagini, manterrai le dimensioni del file ridotte e il tempo di caricamento rapido, creando un'esperienza migliore per i visitatori del tuo sito.

C'è un altro motivo per cui l'ottimizzazione delle immagini è importante, tuttavia, direttamente legata ai profitti della tua azienda. Oltre a rallentare il tuo sito web, le immagini occupano spazio su disco sul server che alimenta il tuo sito. La maggior parte dei provider di hosting impone un limite di larghezza di banda per piano, il che significa che non hai risorse illimitate e le tue immagini occuperanno rapidamente quello spazio.

Anche se non è la fine del mondo se superi tale limite, potresti ricevere un addebito per l'eccedenza o, peggio, la chiusura del tuo sito web.

Ottimizzando le tue immagini, sarai in grado di ottenere il massimo dallo spazio di archiviazione del tuo sito ed evitare quel limite di larghezza di banda.

Ora che sai quanto sia importante l'ottimizzazione delle immagini, parliamo di come farlo! Questa guida dettagliata coprirà tutto, dai suggerimenti di Photoshop alle pratiche di sviluppo.

Come ottimizzare le immagini per il Web

Questa guida dettagliata coprirà tutto ciò che puoi fare per ottimizzare le immagini, iniziando da Photoshop e finendo sul tuo sito.

Segui questi passaggi per ottimizzare le tue immagini per migliorare le prestazioni del sito:

1. Confronta la velocità del tuo sito attuale.
2. Sapere come scegliere il miglior tipo di file immagine.
3. Ridimensiona le tue immagini prima dell'esportazione.
4. Comprimi le immagini per ridurre le dimensioni del file.
5. Automatizza l'ottimizzazione delle immagini con un plug-in di WordPress.
6. Utilizzare la tecnica "sfocatura" per caricare prima un'immagine di qualità inferiore.
7. Usa il caricamento lento.

1. Confronta la velocità del tuo sito attuale

Prima di fare tutto questo lavoro per ottimizzare le tue immagini, inizia eseguendo uno speed test sul tuo sito! Alla fine, sarai in grado di vedere l'impatto che hai avuto (in più puoi condividerlo con il tuo team o capo, per complimenti extra). Alcuni strumenti di test di velocità popolari sono:

• Google PageSpeed ​​Insights
• Strumenti Pingdom
• GTMetrix
• WebPageTest

Questi strumenti basati su browser funzionano tutti in modo abbastanza simile tra loro: apri il link, quindi inserisci il tuo URL per un rapido rapporto sulla velocità e le prestazioni del tuo sito.

2. Sapere come scegliere il miglior tipo di file immagine

Quando hai finito di creare immagini (salvandole dalla fotocamera o esportandole da uno strumento come Photoshop), avrai la possibilità di specificare il tipo di file. I tipi di file più comuni da utilizzare sul Web sono JPEG, PNG e GIF. E come sono sicuro che puoi immaginare, hanno tutti i loro pro, contro e le migliori pratiche quando vengono inseriti nel tuo sito web.

JPEG

Le immagini JPEG funzionano meglio per mostrare fotografie a colori complesse sul tuo sito, in quanto consentono un'immagine di qualità superiore con una dimensione del file inferiore. Questo tipo di file funzionerà probabilmente per la maggior parte delle immagini che desideri utilizzare sul tuo sito, con un'importante eccezione: le immagini con uno sfondo trasparente. (Per quelli, vedi la prossima sezione sui PNG!)

Quando utilizzi un'immagine JPEG per il tuo sito web, considera di esportarla come "Progressiva". Ciò consente al browser di caricare istantaneamente una versione semplice dell'immagine prima di caricare completamente la piena risoluzione sul sito.

Se lavori in Photoshop, troverai questa impostazione quando esporti come "Salva per Web".

PNG

Se non hai un sacco di colori nella tua immagine (come illustrazioni o icone piatte) o vuoi che abbia uno sfondo trasparente, ti consiglio di esportare come PNG. Assicurati di avere le giuste dimensioni dell'immagine e cerca l'opzione per salvare come PNG-24 (o 8, se non c'è perdita di qualità).

GIF

Il terzo formato di immagine più comune per il Web sono le GIF. Supportano solo 256 colori, quindi dovrai essere selettivo con questo tipo di file!

Per ottimizzare le GIF per il tuo sito Web, pensa in modo critico a quanto durano, se devono essere ripetute e quante ne hai davvero bisogno su una determinata pagina o sito.

3. Ridimensiona le tue immagini prima di caricarle

Uno dei modi più semplici per ottimizzare le immagini per il Web è ridimensionarle prima di caricarle sul tuo sito. Soprattutto se stai lavorando con immagini grezze da una fotocamera DSLR, le dimensioni sono spesso molto più grandi di quelle effettivamente necessarie.

Ad esempio, supponiamo che tu stia aggiungendo immagini a un articolo di blog sul tuo sito. Se il tuo tema WordPress visualizza immagini a 500 x 500 ma stai caricando immagini con una risoluzione di 1024 x 1024, tutti quei pixel in più aumentano solo le dimensioni del file e diminuiscono la velocità del sito senza fornire un reale vantaggio.

Ritagliando o ridimensionando le tue immagini prima del caricamento, ridurrai le dimensioni del file, il che aiuterà il tuo sito a caricarsi un po' più velocemente e a risparmiare spazio su disco per ancora più immagini.

Per ridimensionare la tua immagine, apri semplicemente il tuo software di modifica delle immagini preferito. Photoshop funziona bene oppure puoi anche utilizzare strumenti più semplici come Anteprima (per Mac), Paint (per Windows) o Canva (uno strumento del browser).

4. Comprimi le immagini per ridurre le dimensioni del file

Una volta che hai l'immagine finale, salvata nel formato giusto e ritagliata a una dimensione appropriata, c'è un altro passo che puoi fare per ottimizzarla prima di caricarla sul tuo sito: comprimerla.

Questo processo ti aiuterà a ridurre le dimensioni del file senza perdere una notevole qualità dell'immagine. Esistono due tipi principali di compressione: con perdita e senza perdita.

La compressione senza perdita manterrà lo stesso livello di qualità prima e dopo la compressione. La compressione con perdita eliminerà alcuni elementi della foto, ma in genere in un modo che l'occhio umano non noterà. Per saperne di più su questi tipi di compressione, consiglio questa guida di Imagify.

Se vedi un'immagine specifica sul tuo sito caricarsi e venire lentamente visualizzata, potrebbe essere un segno che necessita di compressione, ridimensionamento o entrambi.

Per comprimere le tue immagini, tutto ciò di cui hai bisogno è uno strumento di compressione delle immagini. I miei preferiti includono:

• TinyPNG: uno strumento gratuito basato su browser per la compressione di immagini PNG e JPEG.
• ImageOptim: un'app open source gratuita per la compressione delle immagini.
• JPEGmini: un'app di ricompressione di foto per Mac e Windows.
• RIOT: un'app Windows gratuita per l'ottimizzazione delle immagini.
• Image Optimizer: un componente aggiuntivo gratuito per Local.

PNG minuscolo

Questo strumento basato su browser ottimizza le immagini utilizzando una compressione con perdita intelligente, riducendo le dimensioni del file diminuendo il numero di colori utilizzati. (Ma non preoccuparti, non te ne accorgerai nemmeno!) È gratuito e veloce da usare per PNG e JPEG.

ImmagineOptim

Questa è un'app Mac gratuita che comprime le immagini rimuovendo il gonfiore non necessario, preservando la massima qualità dell'immagine possibile.

JPEGmini

JPEGmini è una potente opzione a pagamento che ti aiuta a ridurre le dimensioni del file mantenendo qualità e formato. Ha una prova gratuita, quindi puoi provarlo prima di acquistarlo.

RIVOLTA

Radical Image Optimization Tool (RIOT) è un'app Windows gratuita per ridurre le dimensioni dei file immagine. È dotato di una vista affiancata, in modo da poter confrontare la qualità dell'immagine prima e dopo la compressione.

Image Optimizer, un componente aggiuntivo gratuito per Local

Se utilizzi Local come ambiente di sviluppo locale, puoi utilizzare Image Optimizer Add-on per comprimere automaticamente le immagini offline. Esegue la scansione del tuo sito alla ricerca di tutti i file immagine, risparmiandoti il ​​tempo di comprimerli individualmente e velocizzando il tuo sito nel processo.

5. Automatizza l'ottimizzazione delle immagini con un plugin per WordPress

A questo punto, potresti iniziare a pensare che l'ottimizzazione delle immagini richieda molto lavoro, e può esserlo! Ma c'è anche un modo semplice per semplificare alcuni di questi passaggi, ovvero installando un plug-in di ottimizzazione delle immagini sul tuo sito WordPress.

Ho alcuni consigli e ognuno ha caratteristiche uniche. Ma in generale, un plug-in di ottimizzazione delle immagini comprime e ridimensiona le immagini quando le carichi sul tuo sito WordPress. Ciò significa che puoi saltare quei passaggi invece di eseguirli manualmente, un grande risparmio di tempo.

Questo metodo è utile anche se stai costruendo siti per i clienti. È una grande pressione per l'utente finale e per i creatori di contenuti provare a ricordare ogni fase del processo di ottimizzazione delle immagini. Installando un plug-in che farà la maggior parte del lavoro per loro, aiuterai a garantire la velocità e le prestazioni del sito che hai creato una volta che lo hai consegnato.

Per ottimizzare le immagini su un sito WordPress, consiglio questi plugin:

• EWWW Image Optimizer Cloud
• PNG minuscolo
• Kracken.io
• Immagina

EWWW Image Optimizer Cloud

Questo plug-in di WordPress ottimizzerà automaticamente le tue immagini quando le carichi sul tuo sito, oppure può anche ottimizzare le immagini che hai caricato in passato. Ciò lo rende incredibilmente vantaggioso se lavori con un sito esistente con immagini non ottimizzate.

PNG minuscolo

Questo plugin per WordPress del team TinyPNG può ottimizzare le immagini JPEG e PNG durante il caricamento. Se sei un fan dello strumento basato su browser, semplifica il processo con il loro plug-in gratuito!

Kracken.io

Il plugin Kracken.io può ottimizzare sia le immagini nuove che quelle esistenti sul tuo sito WordPress. Supporta anche le modalità di compressione lossless e lossy, offrendoti un grande controllo sul risultato finale.

Immagina

Questo plugin per WordPress ti aiuterà a ottimizzare le tue immagini senza perdere qualità. È anche compatibile con WooCommerce e NextGen Gallery, se utilizzi questi plugin.

Nota: prima di scegliere un plug-in, assicurati di osservare come funzionano. Alcuni utilizzano operazioni di tassazione del server che possono causare problemi sul tuo sito, mentre altri utilizzano le opzioni FTP per insegnare il carico sul tuo server web.

6. Utilizzare la tecnica "Blur Up" per caricare prima un'immagine di qualità inferiore

Anche dopo tutti i precedenti passaggi di ottimizzazione, ci sono casi in cui potresti ancora lavorare con file di grandi dimensioni o molte immagini su una pagina, rallentando la velocità del tuo sito. In questi casi, a volte è utile non solo ottimizzare le immagini, ma ottimizzare l'esperienza di caricamento in modo che i visitatori del sito pensino che i tuoi file multimediali si stiano caricando più velocemente di quanto non siano in realtà.

Ecco di cosa trattano questi due passaggi successivi: dare l'impressione di caricare più velocemente le immagini, quindi gli utenti non si limitano a fissare una pagina vuota mentre i file vengono caricati.

Un modo per farlo è caricare prima un'immagine di qualità inferiore (LQI). Caricando una versione più piccola dell'immagine prima di caricare l'intera dimensione, offre all'utente qualcosa da guardare mentre attende tutti i dettagli. Questo dà la percezione di un tempo di caricamento più rapido anche se, tecnicamente, tutto si sta caricando alla stessa velocità.

Un modo popolare per farlo è la tecnica "sfocatura", che puoi imparare a implementare con questo tutorial su CSS-Tricks.

7. Caricamento pigro delle immagini del tuo sito

Simile alla tecnica di "sfocatura", c'è un altro trucco che ti aiuterà a dare l'impressione di caricare più velocemente le immagini: il caricamento lento.

Quando qualcuno arriva sul tuo sito, inizia dalla parte superiore della pagina. Probabilmente impiegheranno un momento per scorrere l'intera pagina, specialmente se sono fidanzati. Invece di provare a caricare tutte le immagini contemporaneamente, il caricamento lento agisce partendo dal presupposto che gli utenti si preoccupino maggiormente del contenuto che possono vedere. Pertanto, le immagini all'interno della visualizzazione del browser vengono caricate completamente per prime, mentre le altre immagini caricano prima un segnaposto, finché l'utente non scorre fino a quella sezione della pagina.

Il caricamento lento è un'ottima tecnica da solo e ancora più potente se abbinato al resto di questi suggerimenti per l'ottimizzazione delle immagini! Ed è molto facile da fare su un sito WordPress, grazie al plug-in Smush.

Questo conclude la nostra guida passo passo per migliorare le prestazioni del sito ottimizzando le immagini! Per vedere l'impatto che ciò ha avuto sul tuo sito, esegui un altro test di velocità. Come hai fatto?

Con i giusti strumenti di ottimizzazione delle immagini, sarai in grado di vedere una migliore velocità e prestazioni del sito in pochissimo tempo!