Se si dispone di un blog, negozio online, o un sito web normale che si vuole guardare incredibile, vale la pena di ottimizzare ogni immagine che si carica.

Quando parliamo di come “ottimizzare” le immagini per il web, puoi pensarci in tre modi: 1) rendere le immagini belle, 2) caricare rapidamente le immagini e 3) rendere le immagini facili da indicizzare per i motori di ricerca.

La maggior parte dei post va oltre un aspetto dell’ottimizzazione delle immagini o un altro, ma in questo post li coprirò tutti., Ancora meglio è che puoi ottimizzare le immagini con strumenti gratuiti e facili da usare.

1. Inizia con immagini di alta qualità

Stock photography: Non devi essere un fotografo professionista per utilizzare grandi immagini sul tuo sito web. Ogni giorno sembra che ci sono più di alta qualità stock photo siti dove è possibile scaricare foto gratis per uso commerciale. Alcuni dei nostri preferiti sono:

  • Unsplash
  • Barn Images
  • PicJumbo
  • SplitShire
  • Little Visuals
  • …e con un sito web Jimdo, immagini stock gratuite sono disponibili direttamente nella tua libreria di immagini.,

Quando scarichi un’immagine da uno di questi siti web, probabilmente sarà un file JPEG davvero grande. Per comprimerlo per il tuo sito web, dovrai ridurre le dimensioni e caricare una versione più piccola (maggiori informazioni qui sotto). Va bene, però. Iniziare con un grande formato è l’ideale, perché puoi sempre ridurre un’immagine di grandi dimensioni. (Fare una piccola immagine più grande non funzionerà così bene).

Scattare le tue foto (migliori): Naturalmente, non puoi usare le foto stock per tutto (come la tua squadra o il tuo prodotto)., Ci sono alcuni semplici trucchi per rendere le tue immagini ben illuminate e più professionali, anche senza apparecchiature fotografiche di fantasia (come questo tutorial sulla creazione della tua lightbox).

Grafica: Se stai cercando qualcosa di più basato sulla grafica, ci sono un sacco di nuovi strumenti online gratuiti che puoi utilizzare per creare le tue infografiche o foto con sovrapposizioni di font. Amiamo Canva e PiktoChart. Se stai cercando un logo, ti consigliamo di consultare il nostro Logo Creator.

2., Usa il tipo di file giusto: JPEG o PNG

Se ti stai chiedendo di diversi file di immagine come JPG, PNG, GIF e SVG, sappi che sul tuo sito Web è più probabile che tu usi un formato JPEG (JPG) o un formato PNG. Ci sono pro e contro di ciascuno, ma per la maggior parte dei casi è possibile ricordare quanto segue:

  • Le fotografie devono essere salvate e caricate come JPG. Questo tipo di file può gestire tutti i colori di una fotografia in un file di dimensioni relativamente piccole ed efficienti. Usando JPEG, non finirai con l’enorme file che potresti ottenere se salvassi una fotografia come PNG.,
  • I grafici, specialmente quelli che utilizzano aree di colore grandi e piatte, devono essere salvati come PNG. Questo include la maggior parte dei disegni, infografica, immagini con un sacco di testo in loro, e loghi. I PNG sono di qualità superiore rispetto ai JPEG, ma in genere hanno anche dimensioni di file più grandi. Come i loro parenti, il file SVG, i PNG trattano aree di colore e testo con belle linee nitide, in modo da poter ingrandire e non perdere alcuna qualità. Essi supportano anche sfondi trasparenti (che si vorrà se si sta utilizzando un logo)., Se hai una scelta, ti consigliamo di salvare i PNG come formato “24 bit” piuttosto che” 8 bit ” a causa della migliore qualità e della gamma più ricca di colori supportati.

Porta il tuo business online con Jimdo.

Le fotografie di solito devono essere salvate come JPEG, ma grafica come questa e loghi devono essere salvati come PNG.

Cosa succede se stai usando una fotografia con del testo sopra?, Se la maggior parte dell’immagine è una fotografia, quindi attenersi a un JPEG.

La maggior parte dei programmi di immagini semplici consentono di scegliere JPG o PNG andando su “Salva con nome”, “Esporta” o “Salva per il web” e scegliendo il tipo che preferisci. Ci sono anche strumenti online gratuiti basati su browser come Zamzar che convertirà i file per te.

Puoi convertire un PNG in JPEG, ma non guadagni nulla convertendo un JPEG in un file PNG. Questo perché un file JPG è già memorizzato in quello che viene chiamato un formato con perdita di dati: i dati dell’immagine sono già stati persi quando sono stati compressi, quindi non è possibile riportarli magicamente., Ad esempio, se hai solo il tuo logo come JPG, dovrai andare direttamente al tuo designer e chiedere un file PNG dal loro programma di progettazione originale, piuttosto che cercare di decodificare un PNG da un file JPEG.

3. Ridimensionare le immagini per ottimizzare la velocità e l’aspetto della pagina

Con le immagini web, si desidera trovare il giusto equilibrio tra dimensioni e risoluzione. Maggiore è la risoluzione, maggiore sarà la dimensione del file. Nel mondo della stampa, le immagini ad alta risoluzione sono una buona cosa. Ma sul web, le immagini di grandi dimensioni e ad alta risoluzione possono rallentare la velocità della pagina del tuo sito web., Questo fa male l’esperienza dei tuoi utenti e, alla fine, il tuo posizionamento nei motori di ricerca. Grandi immagini e tempi di caricamento lenti sono particolarmente fastidiosi per i visitatori mobili.

In questo post dimostrerò principalmente con la versione gratuita basata su browser di Pixlr, che è un semplice strumento per l’editing di immagini di base. Se siete interessati ad altri strumenti, controlla il nostro post Come modificare le foto senza Photoshop.

Ci sono momenti in cui ti consigliamo di utilizzare immagini di grandi dimensioni sul tuo sito web, come per lo sfondo o l’immagine dell’eroe., Se si utilizzano immagini di bassa qualità e cercare di farli saltare in aria per essere abbastanza grande, sembrerà sfocato.

Così come si fa a trovare il giusto equilibrio tra dimensioni e qualità? Innanzitutto, è importante capire che quando si tratta di immagini, “dimensione” è un termine relativo. Quello che ti serve per la stampa è di solito molto più grande di quello che ti serve per un sito web. Ecco una panoramica dei tre aspetti principali che compongono “size”:

  • Dimensione ottimale del file: il numero di byte che il file occupa sul tuo computer. Questo è il fattore che può rallentare il tuo sito web verso il basso. Un’immagine da 15 MB (megabyte) è enorme., Un’immagine 125KB (kilobyte) è molto più ragionevole. Se la dimensione del file è davvero grande, è un indicatore che le dimensioni dell’immagine sono troppo grandi o la risoluzione è troppo alta.
  • Dimensione immagine: Le dimensioni effettive dell’immagine, in pixel. Probabilmente pensi alle foto stampate tradizionali come 4×6, 5×7 o 8×10. Ma sul web, l’altezza e la larghezza sono misurate in pixel. Ad esempio, un’immagine tipica su un sito web o un blog potrebbe essere 795×300 pixel.,
  • Risoluzione per le immagini web: Lasciato dal mondo della stampa, la risoluzione è la qualità o la densità di un’immagine, misurata in punti per pollice (dpi). Una stampante professionale potrebbe richiedere che le immagini siano almeno 300dpi. Ma la maggior parte dei monitor di computer visualizza 72dpi o 92dpi, quindi qualcosa di più alto di quello è eccessivo e rende la tua immagine inutilmente grande. Quando un programma di progettazione ha la possibilità di “salvare per il web”, significa salvarlo a una risoluzione bassa, web-friendly.

Scopri di più sulla grafica web nella nostra Guida per principianti.,

Come trovi la dimensione del file, la dimensione dell’immagine e la risoluzione della tua immagine?

Puoi trovare la dimensione del file e la dimensione dell’immagine direttamente sul tuo computer. Se sei su un PC, fai clic con il pulsante destro del mouse sul file immagine, scegli “Proprietà” e quindi la scheda “Riepilogo”. Su un Mac, Ctrl+clic sul file immagine e scegliere ” Ottieni informazioni.”

Trovare la risoluzione richiede un programma fotografico più avanzato come Photoshop, ma la maggior parte dei programmi di editing di immagini di base salverà automaticamente le immagini a un dpi più basso, web-friendly che è una risoluzione migliore per le immagini web.,

Cheat Sheet per dimensioni immagine, dimensioni file e risoluzione

Ora che conosci i diversi modi per descrivere le dimensioni di un’immagine, ecco alcune regole pratiche da tenere a mente:

  • Dimensione ottimale del file: le immagini di grandi dimensioni o le immagini di sfondo a schermo intero non devono superare 1 MB.
  • La maggior parte degli altri piccoli grafici web può essere 300 KB o meno.
  • Se si utilizza uno sfondo a schermo intero, il team di assistenza clienti di Jimdo consiglia di caricare un’immagine larga 2000 pixel.,
  • Risoluzione per le immagini web: se hai l’opzione, sempre “Salva per il web” che darà alla tua immagine una risoluzione web-friendly.
  • Si può fare una grande immagine più piccola, ma è molto difficile fare una piccola immagine più grande. Sembrerà sfocato e pixelato.

Cosa fai se la tua immagine è troppo grande per il tuo sito web?

Se hai una bella fotocamera digitale, potresti scattare foto che sono di diversi megabyte molto più grandi di quello che ti serve per il tuo sito web. Foto da siti di alta qualità tendono a venire con file di grandi dimensioni troppo., Se la tua immagine è superiore a 1 MB, ci sono alcune cose che puoi fare:

  • Ridimensiona l’immagine. Se la tua foto è larga 5000 pixel, puoi facilmente ridimensionarla a 2000 pixel di larghezza, 1200 pixel di larghezza o anche più piccola a seconda di come prevedi di utilizzarla sul tuo sito web. Ciò ridurrà significativamente le dimensioni del file. Quando si ridimensiona, assicurarsi di mantenere le proporzioni uguali in modo da non distorcere l’immagine.
  • Ridurre la risoluzione. La maggior parte dei programmi fotografici comprimerà automaticamente la risoluzione dell’immagine in una dimensione “web-friendly” (72 dpi e 92 dpi, rispettivamente)., Puoi farlo anche in Photoshop con l’opzione’ Salva per il web’. Puoi anche “Salva come” in molti programmi fotografici e quindi regolare il livello di qualità da lì.
  • Comprimi la tua immagine con un programma gratuito come TinyPNG o TinyJPG. Entrambi ridurranno significativamente le dimensioni del file senza interferire con la qualità.
Ridimensionare un’immagine è facile. La foto stock originale era 6302×4789 pixel e 16,2 MB, molto più grande di quello che mi serve per il mio sito web., Usando Pixlr, l’ho ridotto a 1000×760 pixel, risultando in una dimensione del file più piccola e più web-friendly (132KB-perfetto!).

4. Rendi le immagini della stessa dimensione e stile

Le immagini su una pagina Web avranno un aspetto migliore se si utilizza uno stile e una dimensione coerenti. La coerenza aiuterà anche quando si allineano il testo, le colonne e altre informazioni sulla pagina. Per vedere cosa intendiamo, dai un’occhiata agli esempi qui sotto.

Nel primo, tratto dal nostro sito web “Make-Believe Coffee”, le foto sono tutte di dimensioni diverse., Uno è orientato verticalmente, mentre gli altri sono orizzontali. Ciò rende la pagina disorganizzata.

In questo esempio, le foto non corrispondono e hanno dimensioni diverse, quindi la pagina appare un po ‘ sciatta.

Nel prossimo esempio, ho ritagliato ogni foto su un pixel 1000×760 più uniforme. La foto in alto della tazza di caffè bianco brillante sentiva fuori luogo, così ho sostituito con uno che era simile per stile e colore alle mie altre due foto., Ho anche sperimentato con i filtri di immagine in Jimdo e messo in una sottile sovrapposizione su ogni foto (un po ‘ come un filtro Instagram) per dare loro un aspetto più coerente.

In questo esempio, ho scelto le foto che hanno lo stesso stile e ritagliate ognuna per avere le stesse dimensioni. Questo rende la mia pagina più coerente.

Poiché le foto sono tutte della stessa dimensione e orientate allo stesso modo, si adattano perfettamente in una colonna, con i miei paragrafi in un’altra., Nessun aggiustamento o congetture necessarie!

E ricorda, con un sito web Jimdo, le tue immagini vengono automaticamente importate e disposte perfettamente, quindi non devi preoccuparti del tuo design.

Ritagliare un’immagine in Pixlr per renderla delle stesse dimensioni delle mie altre immagini.

Ok, ora che le tue foto sono ridimensionate e sembrano grandi, come puoi ottimizzarle per i motori di ricerca?, Sui siti web Jimdo, gran parte del servizio di pulizia SEO è curato per te, ma ci sono ancora alcune modifiche che puoi apportare per ottimizzare le tue immagini.

5. Assegna un nome al file immagine correttamente per aiutare il tuo SEO

La maggior parte delle persone non pensa molto ai loro nomi di file. Essi possono chiamare una foto ” Photo1.jpg ” o “Schermata 2018-06-02 a 3.41.15 PM”. Se questo suona familiare, prendere un momento per rinominare le immagini prima di caricarle sul tuo sito web. Perché? Perché così facendo rende le tue foto più facili da gestire., A seconda di dove le immagini appaiono online, può anche dare al tuo SEO una spinta

Per coerenza, usa lettere minuscole e numeri 0-9. Non introdurre punteggiatura o spazi. Ed è meglio usare i trattini piuttosto che i caratteri di sottolineatura. (Pensate torre Eiffel.jpg piuttosto che DSC12345.jpg).

Nota: Sui siti web Jimdo, non è necessario rinominare tutti i file sul tuo sito web-basta aggiornare il testo Alt (vedi sotto).

6. Compila le didascalie e il testo alternativo

Una volta che le persone caricano un’immagine sul loro sito web, spesso dimenticano di compilare le informazioni aggiuntive., Ma proprio come il nome del file, queste informazioni ti danno un po ‘ di succo SEO aggiunto.

I tag Alt (o testo alternativo) non saranno visibili al visitatore medio, ma danno ai motori di ricerca un’idea di base di ciò che riguarda ogni immagine. Quindi, una volta aggiunta un’immagine al tuo sito, assicurati di compilare il campo di testo alternativo con una frase che descrive ciò che la foto mostra, preferibilmente con una parola chiave mirata. (Il testo alternativo aiuta anche i visitatori ipovedenti a navigare nel tuo sito con un software basato su audio, quindi è un bel modo per migliorare l’accessibilità del sito web.,) Ecco alcuni suggerimenti su come scrivere buoni tag alt.

I nomi dei file e i tag alt sono particolarmente importanti per la SEO delle pagine dei prodotti. Se ha senso, aggiungi anche una didascalia alla tua immagine, dal momento che le persone leggono le didascalie delle foto più di altri testi del sito web.

Non dimenticare di inserire il testo Alt e la didascalia!

Nota: la compilazione di tag alt, nomi e didascalie è buona per SEO, ma non provare a parole chiave., Vuoi solo descrivere con precisione un’immagine in inglese semplice—l’aggiunta di parole chiave irrilevanti o ripetitive ti penalizzerà dalle divinità dei motori di ricerca.

7. Metti l’immagine vicino al testo pertinente

Scegli le immagini che sono correlate a ciò che il testo sta dicendo, piuttosto che qualcosa di completamente fuori dal blu. Un’immagine che è circondata da informazioni rilevanti (con parole chiave correlate) si classificherà meglio.

Questo suggerimento ti aiuta anche a evitare cliché di foto stock. Se il tuo sito web riguarda l’istruzione, non ottieni alcuna spinta SEO dall’avere una foto di una mela., Le foto di insegnanti, studenti e aule saranno più interessanti per i lettori e più pertinenti alla tua materia.

Riepilogo: Ottimizzazione dell’immagine di un sito web per qualità e SEO

Quindi diamo un’occhiata a queste regole con un esempio dal mio sito web di caffè finto. Ho trovato una foto di una tazza di caffè su Unsplash. Quando l’ho scaricato, il nome era ” fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg ” ed era 2509 x 1673 pixel. La sua dimensione era 586KB. Non terribile, ma ancora molto più grande di quanto ho bisogno solo per la visualizzazione come una piccola foto sulla mia pagina web., Quindi, per una migliore ottimizzazione dell’immagine, farei quanto segue:

  1. Rinominare l’immagine in qualcosa che abbia più senso. Forse qualcosa come un caffè-cappuccino finto.jpg
  2. Utilizzare uno strumento foto per ridimensionare e ritagliare l’immagine alla dimensione desiderata. Per questo esempio ho scelto 1000×760. Se si voleva un quadrato si potrebbe fare 1000×1000.
  3. Assicurati che sia la giusta dimensione del file. Una volta che ho ritagliato alla dimensione che volevo e scaricato dal photo editor, la dimensione del file era 117KB-perfetto!
  4. Caricalo sul tuo sito web e non dimenticare di compilare il testo Alt!, Ho anche aggiunto una didascalia per buona misura.

Anche se questa lista di controllo potrebbe sembrare molto, diventerà più veloce una volta che sei abituato al processo (e potresti contrassegnare questa pagina in modo da poter fare riferimento ad essa).

Inoltre, passare attraverso questi passaggi renderà le tue immagini migliori, aiuterà il tuo sito web a caricarsi più velocemente e, in definitiva, a beneficio del tuo SEO. Entra nelle giuste abitudini di immagine ora e raccoglierai i benefici in tutto il tuo sito web.,

Controlla la nostra Guida su “Come creare un sito web” per ulteriori suggerimenti!

Porta il tuo business online con Jimdo.