Immagini, come ottimizzarle per il web!

Condividi il post!

Pubblicare immagini online, su blog, siti web o social network, potrebbe apparire come una cosa banale o comunque semplice da realizzare in mancanza di regole o standard da rispettare. Niente paura, non c’é nulla di complicato! In realtà, se ci interessa interessa soltanto condividere l’immagine con amici e parenti, probabilmente é davvero così. Se invece desideriamo che la nostra immagine sia perfettamente ottimizzata per un uso web, multipiattaforma o che abbia caratteristiche SEO friendly, allora propongo di concentrarci per un attimo e approfondire l’argomento.

Cominciamo parlando dello strumento fondamentale, realmente indispensabile per l’ottimizzazione delle immagini, mi riferisco naturalmente del software grafico per foto ritocco. Il più noto ed utilizzato software di questo tipo é certamente Adobe Photoshop, veramente l’ideale per l’editing professionale di immagini. In realtà esistono diversi altri prodotti in grado di fornirci un servizio simile, altrettanto validi ma meno costosi. Per dovere di cronaca ricordiamo che, per uso non commerciale, sono in vendita licenze Adobe Photoshop complete a prezzo ridotto, per poche centinaia di Euro, fornite anche su piattaforma Cloud. Esistono anche diverse alternative eccellenti ad un prezzo più abbordabile come Corel PaintShop Pro o addirittura in versione Open Source come il celeberrimo Gimp. Sono disponibili inoltre alcuni strumenti online che ci offrono un servizio simile, gratuitamente o a prezzi estremamente contenuti, come ad esempio Pixlr, PickMonkey etc.

La fase più importante per ad una corretta ottimizzazione é senza dubbio il controllo della dimensione dell’immagine. I siti moderni, come ben sappiamo, sono ricchi di immagini che spesso gravano in modo significativo sul peso complessivo della pagina limitandone l’uso a chi dispone di strumenti e risorse di banda adeguate alla corretta visualizzazione. E’ importante dunque che l’immagine sia trattata in modo tale da ridurla al minimo indispensabile, salvaguardandone la qualità, per poter essere utilizzata in rete dal maggior numero di utenti possibile. La dimensione, intesa come peso in KB é funzionale ad alcuni parametri collegati tra loro e gestibili dal software.

Il primo di questi parametri é la dimensione totale dell’ immagine in pixel, che dipende appunto dal prodotto lato x lato della nostra immagine, ad esempio 800X600 pixel per una immagine in 4/3 standard che avrà una quantità di pixel pari a 480K pixel. Quando scattiamo l’immagine con la fotocamera o con lo smartphone, la dimensione totale varia al variare della qualità in Mega Pixel del sensore di cui disponiamo. Normalmente l’immagine non compressa scattata con un sensore da 8MPixel avrà le dimensioni teoriche di 8MPixel, Va da se che non sarà possibile pubblicare una foto nella qualità massima espressa dall’hardware della nostra macchina fotografica all’ultimo grido e dunque l’immagine andrà ridimensionata e compressa secondo le nostre esigenze di pubblicazione.

Altro parametro importante è la risoluzione dell’immagine, nel nostro caso si misura in PPI (pixel per pollice), che corrisponde alla quantità di pixel per unità di superficie. Tornaniamo al nostro problema, tenendo conto che la risoluzione standard di un monitor per pc é di 72 pixel per pollice, intuiamo facilmente che una immagine con risoluzione superiore non sarebbe godibile sino in fondo e dunque uno spreco di risorse che andrebbe ad appesantire inutilmente il nostro file. E giusto dire che, grazie ai dispositivi in alta risoluzione, esistono anche altri parametri da rispettare, ma per complessità tratteremo l’argomento in un futuro post.

La compressione del file immagine durante il salvataggio é il terzo ed importante parametro da considerare prima della pubblicazione. Tutti i software moderni sono dotati della funzione “Esportazione per il web” che offre la possibilità, una volta configurata la dimensione e la risoluzione, di comprimere il file per un migliore utilizzo. La cosa serve ad impedire che l’immagine risulti inutilmente pesante e difficile da caricare tramite browser. Le immagini destinate alla pubblicazione web vanno ottimizzate generalmente per la dimensione scelta, ad esempio 800X600 pixel, una risoluzione di 72 pixel per pollice ed un valore di compressione che varia a seconda dei gusti personali e della qualità di dettaglio che si desidera mantenere, normalmente 80% nei files jpg per immagini di buona qualità. Per quanto riguarda le estensioni con cui salvare i files, le più utilizzate sono appunto jpeg o jpg, png e gif. Personalmente comprimo in jpg quasi tutto e mi limito a png per le immagini che necessitano della trasparenza.

Il percorso di ottimizzazione delle immagini per il web non finisce qui, comincia ora la fase che completa l’immagine con caratteristiche SEO fiendly, consentendo alla stessa di essere correttamente riconosciuta ed indicizzata dai motori di ricerca.

Il nome é il primo fattore che la identifica l’immagine e ne descrive il contenuto ponendola all’attenzione dei motori di ricerca. Il consiglio é quello di nominare il file secondo uno schema descrittivo in modo che lo stesso sia utile ad una migliore comprensione e classificazione dell’immagine, ad esempio (costiera_amalfitana_tramonto.jpg). Ricordiamo, a proposito dell’importanza del nome file, che l’URL dell’immagine si compone, nella sua parte finale, del nome del file stesso.

E possibile inoltre aggiungere un contenuto descrittivo all’interno dell’attributo di testo alt, direttamente nel codice HTML con la funzione di fornire un testo alternativo per descrivere il contenuto dell’immagine e renderla maggiormente comprensibile e fruibile ai motori di ricerca. Non tutti lo utilizzano ma é possibile assegnare all’immagine anche un attributo title, per aggiungere appunto un titolo che identifichi l’immagine dando alla stessa un’identita univoca.

<img src=”../costiera_amalfitana_tramonto.jpg” title=”Tramonto in Costiera Amalfitana” alt=”tramonto sul mare, veduta da Amalfi” width=”800″ height=”600″>

I moderni CMS includono alcune funzionalità interessanti relative all’immagine, alla quale possono attribuire oltre al titolo ed al testo alternativo, come già visto, anche una descrizione ed una didascalia per completare le funzionalità SEO disponibili.

In conclusione possiamo dire che utilizzare con metodo una corretta ottimizzazione e gestione delle immagini web, nonostante possa apparire come una pratica faticosa e non sempre gradita, é invece estremamente utile ed in grado di produrre in breve tempo risultati veramente apprezzabili in termini di prestazioni del nostro sito web, nonchè aumentarne significativamente le caratteristiche SEO.

Condividi il post!

Lascia un commento

*

code