Uno dei punti essenziali quando si lavora sulla creazione di un sito o di un blog: ottimizzare le immagini per il web. In che modo? Qual è il miglior formato per presentare il visual su una risorsa che hai curato e studiato per guadagnare l’attenzione necessaria?
La risposta non è semplice, o meglio: devi valutare una serie di elementi che possono avere conseguenze precise sulla qualità e sulla prestazione del tuo progetto. Ottimizzare immagini online vuol dire essere in grado di dare qualcosa in più al proprio lavoro.
In che modo avviene questo? Come puoi migliorare le foto e le grafiche che aggiungi sul sito o su una qualsiasi pagina? Non temere, ecco una guida che ti aiuterà a farti largo nel mondo di chi prova, in ogni modo, a ottimizzare le immagini per il web. Da dove iniziamo? Io direi dal buon rapporto tra la SEO e l’usabilità.
Peso ideale: riduci dimensioni delle foto
Questo è il punto di partenza per ottimizzare le immagini per il web: devi ridurre il peso. Il motivo è semplice e riguarda la necessità di comprimere i tempi di caricamento delle pagine. Questa è una buona norma da seguire per migliorare l’user experience, l’esperienza utente. Ma anche per andare incontro alle esigenze di Google che ha, da tempo, indicato la velocità di upload di una pagina come fattore di posizionamento. Ecco cosa dice il comunicato ufficiale:
“Starting in July 2018, page speed will be a ranking factor for mobile searches. The Speed Update, as we’re calling it, will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries. It applies the same standard to all pages, regardless of the technology used to build the page.”
Speed Update, un passo avanti per migliorare il rapporto tra contenuti e mobile. Quindi, qual è il tuo compito? Usare foto e grafiche leggere. In questo caso ottimizzare le immagini per il web vuol dire tagliare le foto nella dimensione necessaria (ti serve 600 x 400 pixel? La tagli così) per evitare peso inutile e, soprattutto, comprimere prima di fare l’upload.
Quindi, qual è il peso giusto per una foto sul web?
Non esiste un parametro base, tutto dipende dalle necessità. Se sei un fotografo e devi mostrare delle foto di qualità le immagini avranno una dimensione ampia e una risoluzione importante. Quindi anche un peso diverso rispetto a una foto caricata su un blog come quello che stai leggendo.
Diciamo, per comodità, che un’immagine 600×400 pixel da caricare su un blog post dovrebbe rimanere sotto i 100 Kb, e se la ottimizzi bene puoi arrivare tranquillamente sotto i 50 Kb che è un ottimo risultato. A proposito, come si ottimizzano le immagini per il web? Continua a leggere.
Come comprimere le immagini per il web
La compressione di un’immagine riguarda l’attività che ti consente di togliere peso inutile e mantenere una buona qualità del prodotto finale. Per valutare la buona riuscita del lavoro puoi usare una serie di tool come:
- PageSpeed Insight
- GTmetrix
Il primo è di proprietà Google, ma il secondo è molto più dettagliato nell’individuare problemi nella pagina. In ogni caso entrambi fanno il proprio dovere. E comunicano le foto che avrebbero bisogno di essere alleggerite. In che modo? Puoi usare programmi di fotoritocco come Photoshop, in realtà il web è pieno di tool per ridurre peso delle immagini. Qualche nome utile:
- Optimizilla
- Kraken.io
- Iloveimg
- Befunky
In realtà puoi usare dei plugin che ottimizzano il caricamento delle immagini su WordPress e consentono di avere foto e grafiche già alleggerite. L’estensione più famosa: Smush Image Compression and Optimization che dà la possibilità di comprimere le immagini già presenti più quelle che verranno inserite.
Altra estensione utile: Media Cleaner, in questo modo puoi eliminare le immagini che non usi dal tuo archivio. Questo fa parte del grande equilibrio per lavorare sull’ottimizzazione SEO on-page. Ma soprattutto è un tassello decisivo per prendersi cura dell’attività svolta dall’utente.
Dove trovare le immagini gratis di qualità
Altro aspetto importante: ottimizzare le immagini per il web significa sfruttare visual di buona fattura. Puoi comprare le foto sui vari stock immagini come Fotolia e Depositphoto, ma spesso io preferisco scaricare materiale CC0 che è sempre di grande qualità. E ti consente di risparmiare sui diritti. A proposito, quali sono i migliori siti di immagini gratis?
- Unsplash
- Pixabay
- Pexel
- Gratisography
- Picjumbo
Nella maggior parte dei casi questi siti web offrono immagini Creative Commons Zero, vale a dire licenza che non esige menzioni o link di riferimento. In ogni caso puoi controllare sempre il tipo di licenza e verificare le necessità dell’autore. Per approfondire puoi dare uno sguardo alla lista di Creative Commons disponibili.
Miglior formato delle immagini web
Qual è il formato ideale per migliorare il visual online? Dipende da cosa stai mettendo nella risorsa, ci sono formati differenti che possono essere usati per ottenere determinati risultati. Io ti consiglio di prendere in esame queste soluzioni, le più diffuse per il web:
- JPG: da usare per foto con molte sfumature.
- PNG: perfetto per grafiche e creatività.
- GIF: da dedicare alle immagini in movimento.
Il formato JPG è ideale per le foto, mantiene il miglior rapporto possibile tra leggerezza e qualità del risultato finale. Con il PNG, invece, hai la possibilità di sfruttare immagini create da zero, con colori ridotti e determinate esigenze in termini di compressione. Poi ci sono le GIF, il formato che ti aiuta a presentare prodotti che effettuano evoluzioni e movimenti. Se vuoi ottimizzare le immagini per il web questa è la strada da seguire.
Dimensioni immagini per WordPress
Prima ho affrontato il tema delle dimensioni. Quanto deve essere grande un’immagine nel momento in cui la carichi sul blog o sul sito web? Dipende dagli ingombri necessari per occupare uno spazio. Ciò che sottolineo sempre è la necessità di avere foto già sagomate, non compresse attraverso il codice HTML.
<img src="ciao.jpg" alt="Saluto" height="50" width="50">
Ricorda che per velocizzare la visualizzazione delle foto il browser esige le dimensioni in pixel nel codice. I tag height e width (esempio sopra) comunicano questi valori e su WordPress vengono aggiunti in automatico, ma solo quando scrivi post e pagine web. Nella sidebar, ad esempio devi inserire questi elementi lavorando con il codice HTML.
In questo caso puoi usare diversi tool online per tagliare e sagomare le foto, ma oltre il classico Photoshop io consiglio il già citato Befunky. Sto parlando di un’applicazione che riunisce gli strumenti per modificare rapidamente una foto online. E per ritagliare più immagini nello stesso momento puoi usare un’altra vecchia conoscenza: Iloveimg.
Non dimenticare l’ottimizzazione SEO
Preparare l’immagine per il web è un lavoro importante, e in quest’opera c’è tutto ciò che riguarda i miglioramenti lato SEO. Che però coincidono con quell’attenzione in più che dai in termini di accessibilità e usabilità di una pagina web. Quali sono i fattori da considerare in questi casi?
- Aggiungi un testo alternative per ogni immagine.
- Inserisci parole dotate di senso nel nome file.
- Se necessaria metti una didascalia sotto alla foto.
- Potrebbe essere utile aggiungere un elemento title.
Il fattore decisivo è quello relativo al testo alternative, il micro-contenuto che il motore di ricerca usa per capire cosa si trova in quell’immagine. In realtà quest’informazione viene dedotta da ogni stringa di testo che la circonda (per questo è utile inserire la didascalia e contestualizzare al meglio la foto) ma il tag alt resta centrale. Ma non devi puntare alla sovraottimizzazione. La stessa guida di Google suggerisce di non:
Scrivere nomi file molto lunghi, inserire parole chiave nel testo alternativo o copiare e incollare frasi intere.
Questo per dire che la soluzione migliore è quella di usare le immagini solo quando servono e di descriverle nel modo più naturale e semplice possibile, le forzature sono sempre viste con sospetto. Una buona cosa da fare, se vuoi che le immagini siano presenti nei risultati del motore di ricerca, è l’uso di una sitemap per i contenuti visual da inserire nella search console insieme a quella principale.
Vuoi ottimizzare le immagini per il web?
Queste sono le indicazioni di base per ottimizzare le immagini online. Tu lavori in questa direzione? Cosa hai fatto e cosa stai facendo per migliorare quest’aspetto fin troppoignorato a favore di altre tecniche e strategie di content marketing? Lascia nei commenti le tue esperienze e i dettagli della tua attività. Hai delle domande? Prego, risolviamo insieme i tuoi dubbi.
