Come ottimizzare le tue immagini per essere SEO friendly (guida completa)

Le prestazioni del tuo sito Web dipendono da diversi fattori che vanno dallo specifico host web che scegli, alle seguenti linee guida sull’accessibilità del sito Web, alle dimensioni dei file di immagine che usi.


La loro formattazione per dimensioni adeguate, tuttavia, può ridurre la qualità a causa delle modifiche apportate. La buona notizia è che puoi mantenere una qualità dell’immagine ottimale e ottenere la giusta dimensione con alcune tecniche e trucchi.

Che cos’è l’ottimizzazione delle immagini?

dimensioni di ottimizzazione dell'immagineLe pagine Web possono subire un rallentamento significativo quando sono presenti immagini di grandi dimensioni. Ciò può ridurre i tempi di caricamento e rendere l’esperienza complessiva inferiore ai visitatori del tuo sito.

Diminuire la dimensione del file è l’ottimizzazione dell’immagine. Per questo puoi usare uno script o un plugin.

Ciò si traduce quindi in tempi di caricamento più rapidi per le tue pagine. La compressione senza perdita e senza perdite sono i due metodi di ottimizzazione più comuni.

Vantaggi della formattazione delle immagini

dimensioni medie delle immagini sul webSi stima che circa il 54 percento del peso totale di una pagina Web sia dovuto alle immagini.

Quando lavori sull’ottimizzazione del sito Web, le tue immagini dovrebbero essere la tua prima attività a causa di ciò. I vantaggi della formattazione delle immagini includono:

  • Velocità di caricamento della pagina migliorata
  • È più veloce creare backup
  • È richiesto meno spazio di archiviazione sul server
  • SEO migliorato con il plugin SEO giusto
  • Viene utilizzata meno larghezza di banda

Come migliorare le prestazioni con l’ottimizzazione delle immagini

L’obiettivo è bilanciare uniformemente la qualità accettabile e la dimensione del file più bassa possibile. C’è più di un modo per farlo. Prima di caricare, comprimere le tue immagini è un’opzione comune. A questo scopo puoi utilizzare uno strumento o un plug-in (eccone alcuni).

È importante considerare il tipo di compressione e il formato file che si utilizza. La giusta combinazione consente di ridurre le dimensioni dell’immagine fino a cinque volte.

Sperimenta con diversi formati di file e tipi di compressione per determinare la migliore combinazione per le tue esigenze.

Scegli il miglior formato di file

Per scegliere il tipo di file migliore, è importante sapere quali sono disponibili. Questi sono i più comuni:

  • JPEG: Questo tipo utilizza l’ottimizzazione lossless e lossy. È possibile trovare un solido equilibrio tra dimensioni e qualità del file regolando il livello di qualità.
  • PNG: Questo tipo tende ad avere una dimensione del file maggiore, ma le immagini sono di qualità superiore. È possibile utilizzare la compressione con perdita o senza perdita.
  • GIF: Questo è l’ideale per le immagini animate. Puoi utilizzare solo la compressione senza perdita. Utilizza solo 256 colori.

formati di file immagine

Ci sono altre opzioni, ma queste sono tra le più comuni e facili da lavorare. Altre opzioni includono JPEG XR e WebP. Non tutti i browser supportano questi due, quindi fai attenzione.

Possono essere una scelta praticabile, tuttavia. Ad esempio, rispetto a un’immagine JPEG comparabile, c’è una riduzione della dimensione del file del 30 percento con WebP, in media.

A causa della mancanza di supporto universale per queste due opzioni, l’applicazione avrà bisogno di una logica aggiuntiva sui server o sull’applicazione per fornire la risorsa appropriata:

  • L’ottimizzazione delle immagini è un servizio fornito da alcuni CDN, tra cui WebP e JPEG XR.
  • Per rilevare il client, fornire il miglior formato immagine disponibile e verificare i formati supportati è possibile aggiungere ulteriori log applicativi.
  • Alcuni strumenti open source automatizzano la conversazione, l’ottimizzazione e il servizio di risorse appropriate.

Dimensione vs. qualità di compressione

La bassa compressione tende a fornire una qualità superiore, ma le dimensioni dei file sono generalmente più grandi. È vero il contrario con un’elevata compressione. I file sono più piccoli, ma la qualità tende a diminuire.

qualità dell'immagine vs compressione

Idealmente, vuoi un totale di uno o due MB per il peso complessivo della tua pagina web. Quindi, considera quante immagini devi usare e dividere questo numero per circa 1,5. Questo ti dà la dimensione per immagine che consente la migliore velocità di caricamento.

Lossless vs. Lossy Optimization

Questi sono i due tipi di compressione che utilizzerai. È importante capire cosa fanno:

  • Compressione lossless vs lossySenza perdita: Questo comprime i dati ed è un filtro. Prima di eseguire il rendering dell’immagine, deve essere non compresso. Tuttavia, la qualità non è ridotta. Esistono diversi strumenti che eseguono la compressione senza perdita di dati.
  • lossy: Questo elimina alcuni dati ed è un filtro. Fai attenzione a quanta riduzione fai perché degraderà l’immagine. Puoi utilizzare diversi editor di immagini e strumenti per regolare le impostazioni di qualità dell’immagine.

La configurazione ottimale della configurazione senza perdita o con perdita dipende dai tuoi criteri, come il compromesso tra artefatti introdotti e dimensioni del file e il contenuto dell’immagine.

Non esiste un’unica impostazione universale che si applica a tutte le immagini. Alla fine, vuoi giocare con diverse immagini per vedere quale funziona meglio.

Ridimensionamento delle immagini in scala

Grazie a pagine reattive su siti, come WordPress, otterrai diverse dimensioni di file nella tua libreria multimediale. Il tuo browser può scegliere la dimensione migliore e scaricarla. La dimensione scelta dal browser si basa sulla risoluzione del dispositivo.

ridimensionamento dell'immagine in wordpress

Il file originale rimane intatto e conservato. Puoi utilizzare plugin per evitare di salvare l’originale per risparmiare spazio su disco, se preferisci.

Sostituzione ed eliminazione di immagini

Hai bisogno di tutte le immagini su una pagina web? In caso contrario, rimuovere quelli che non sono necessari. Tuttavia, se tutti sono pertinenti al contenuto, è consigliabile sostituire le immagini di qualità più grande o inferiore con opzioni migliori.

In alcuni casi, i caratteri web e gli effetti CSS possono prendere il posto delle immagini pur fornendo una bella estetica visiva sulla pagina. Con i caratteri Web, i caratteri tipografici utili possono aiutare a migliorare l’usabilità e fornire un aspetto più personalizzato alle tue pagine.

Può anche migliorare la tua leggibilità e il tuo marchio. Assicurati solo di poter facilmente cercare, selezionare e ridimensionare il testo senza che abbia problemi di leggibilità.

Gli effetti CSS includono elementi, come ombre e sfumature. Anche questi possono ulteriormente marchiare. Le animazioni possono fornire un richiamo visivo sulla tua pagina web ad ogni livello di zoom e risoluzione. Rispetto ai file di immagine, questi sono una frazione dei byte.

Immagini raster o vettoriali

rastor vs vector

Raster e vettore sono due dei tipi di file di immagine principali. Per creare immagini raster vengono utilizzati programmi basati su pixel, uno scanner o una fotocamera.

Questi sono ampiamente usati su Internet e più comunemente usati. Il software vettoriale viene utilizzato per creare immagini vettoriali. Questi sono comuni per le immagini che vanno su prodotti fisici e in ingegneria, CAD e grafica 3D.

Le immagini vettoriali sono indipendenti dalla risoluzione e dallo zoom. Quando sono coinvolte forme geometriche, il vettore è l’ideale. Quando le immagini sono complesse e presentano numerosi dettagli e forme irregolari, sono preferite le immagini raster.

La grafica raster codifica i singoli valori di ciascun pixel all’interno di una griglia rettangolare per rappresentare un’immagine. La grafica vettoriale rappresenta un’immagine usando punti, linee e poligoni.

Implicazioni dello schermo ad alta risoluzione

È importante distinguere tra i due diversi tipi di pixel, che includono pixel del dispositivo e pixel CSS. Più pixel del dispositivo possono essere presenti in un singolo pixel CSS. I dettagli sullo schermo diventano più fini con più pixel del dispositivo.

css pixel vs dispositivo pixelPer sfruttare appieno i conteggi dei pixel del dispositivo più elevati, le risorse dell’immagine devono avere maggiori dettagli.

Questo compito è ideale per immagini vettoriali poiché possono produrre risultati nitidi quando eseguito il rendering a qualsiasi risoluzione.

Poiché le immagini raster utilizzano una base per pixel per codificare i dati delle immagini, sono più difficili. Questo mentre le dimensioni dei file raster aumentano con l’aumentare dei pixel.

Pertanto, gli schermi ad alta risoluzione necessitano di immagini ad alta risoluzione per trarne vantaggio. Le immagini vettoriali sono migliore per schermi ad alta risoluzione poiché forniscono sempre risultati nitidi a causa della risoluzione indipendente.

Ricorda solo che, indipendentemente dalla risoluzione, le tecniche di ottimizzazione delle immagini sono le stesse.

Ottimizzazione delle immagini vettoriali

La grafica vettoriale scalabile (SVG) è supportata da tutti i browser moderni.

Questo è l’ideale per la grafica bidimensionale e il formato è basato su immagini XML. I file SVG possono essere creati manualmente utilizzando l’editor di testo che preferisci o con la maggior parte dei tipi di software basati su vettori.

Per ridurre la dimensione dei file SVG, è necessario minimizzarli. GZIP dovrebbe essere usato durante la compressione di file SVG.

Ottimizzazione delle immagini raster

Una griglia di pixel costituisce un’immagine raster. I singoli pixel si trovano su una griglia bidimensionale. Ad esempio, una sequenza di 10.000 pixel costituisce un’immagine di 100 per 100 pixel. Ogni pixel codifica per informazioni sulla trasparenza e sul colore.

raster pesanteI valori RGBA sono memorizzati da ciascun pixel. Questi includono:

  • Canale Rosso
  • Canale blu
  • Canale Verde
  • Canale alfa (trasparenza)

256 sfumature (valori) sono allocate internamente dal browser. Per canale, questo si traduce in otto bit. Per pixel, si tratta di quattro byte. Ciò consente di calcolare le dimensioni del file utilizzando le dimensioni della griglia. Non ci vuole molto perché le dimensioni del file diventino molto grandi.

Quindi, per ridurre la dimensione del file immagine, ci sono alcune strategie:

  • Riduci la profondità di bit dell’immagine. Puoi farlo usando un pallete di colore più piccolo.
  • Ottimizza i dati archiviati dai singoli pixel.

Strumenti e messa a punto dei parametri

Non esiste uno strumento di immagine perfetto, un insieme di parametri di ottimizzazione o un formato che funzionerà per ogni immagine. Il contenuto dell’immagine e i suoi requisiti tecnici e visivi determineranno quale utilizzare.

Una volta trovato un buon set di impostazioni, puoi usarlo per immagini simili in futuro per risparmiare tempo. Tuttavia, assicurarsi di non assumere mai che le stesse impostazioni debbano essere utilizzate per comprimere tutte le immagini.

Conoscere alcuni strumenti comuni può aiutarti a fare la scelta giusta. Questi quattro sono tra i più utilizzati:

  • Gifsicle: Ciò consente di ottimizzare e creare varie immagini GIF.
  • optipng: Utilizzato per consentire l’ottimizzazione PNG senza perdita di dati.
  • jpegtran: Questo ti consente di ottimizzare le immagini JPEG.
  • pngquant: Utilizzato per consentire l’ottimizzazione PNG con perdita di dati.

Fornitura di risorse di immagini in scala

Esistono due criteri principali da considerare quando si esegue l’ottimizzazione dell’immagine:

  • Ottimizzazione del numero totale di pixel di un’immagine.
  • Ottimizzare il numero di byte necessari per codificare ciascun pixel in un’immagine.

albero formato immagineLa dimensione del file immagine è suddivisa in pixel totali moltiplicati per i byte totali necessari per la codifica dei singoli pixel. Questo è. Tienilo a mente quando stai lavorando per determinare la dimensione ottimale per i file di immagine sul tuo sito web.

Per questo motivo, il modo più efficace e semplice per ottimizzare le immagini è assicurarsi che non vengano spediti più pixel di cui è assolutamente necessario mostrare la risorsa nel browser alla dimensione prevista.

Così, non affidarti solo al tuo browser per ridimensionare le immagini. Ciò può causare la visualizzazione a una risoluzione inferiore. Utilizza anche molte risorse CPU aggiuntive.

In genere non è possibile garantire l’esatta dimensione di visualizzazione per ogni singolo bene consegnato. Tuttavia, è importante assicurarsi di ridurre al minimo tutti i pixel non necessari.

È inoltre indispensabile consegnare i tuoi beni di grandi dimensioni il più vicino possibile alle loro dimensioni di visualizzazione.

Elenco di controllo per l’ottimizzazione delle immagini

Tutte le informazioni qui ti consentono di ottimizzare le tue immagini in modo che le tue pagine web siano più veloci. Sarai comunque in grado di utilizzare splendide immagini, ma non causeranno un rallentamento significativo con i tempi di caricamento della tua pagina.

Questo renderà felici i tuoi visitatori e migliorerà la funzione generale del tuo sito web. Considera i seguenti punti della checklist quando stai ottimizzando le tue immagini:

  • Prendi in considerazione i formati vettoriali poiché funzionano per dispositivi ad alta risoluzione e multipli perché sono indipendenti dalla scala e dalla risoluzione.
  • Tutti gli asset SVG devono essere compressi e minimizzati. Ciò rimuove i metadati non necessari.
  • Per i formati raster, gioca con le impostazioni di qualità ottimali. Questo può farti risparmiare un numero significativo di byte.
  • Per ogni risorsa, scopri i tuoi requisiti funzionali e scegli il formato migliore per le immagini raster.
  • Automatizza ogni volta che puoi per garantire un’ottimizzazione coerente dell’immagine.
  • Offri immagini ridimensionate in modo che le dimensioni naturali dell’immagine e le dimensioni del display siano il più simili possibile.

Per riassumere, c’è sia una scienza che un’arte per l’ottimizzazione delle immagini. Gli algoritmi e le tecniche altamente sviluppati servono come scienza.

La mancanza di risposte definitive per quanto riguarda la compressione dell’immagine individuale è l’arte. Alla fine, dovresti giocare e sperimentare. Ciò ti consente di fare la scelta migliore per i tuoi file di immagini e in che modo contribuiscono alla velocità della tua pagina web.

Con la crescente popolarità e raffinatezza dei costruttori di siti Web di terze parti come Wix, è facile per i progettisti diventare sciatti ma rimanere concentrati sullo sviluppo e il mantenimento di buoni processi di ottimizzazione delle immagini, sia che si esegua lo schiaffo di un modello o la creazione di un sito da zero.

Riferimenti e crediti di immagini:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map