Optimitzar imatges: Guia pas a pas

02 juny Optimitzar imatges: Guia pas a pas

Tot i que es tracta d’un dels àmbits més ignorats, optimitzar imatges és imprescindible per a qualsevol lloc web. Avui dia, encara és comú trobar pàgines amb imatges enormes, amb noms d’arxiu sense descriure o amb dimensions que no es corresponen amb com es mostren.

Optimitzar imatges per a web

Una bona optimització d’imatges és clau des d’un punt de vista SEO per diversos motius. En primer lloc, cal tenir cura de la mesura de les imatges per assegurar que no fan empitjorar el temps de càrrega d’una web.

Per altra banda, els motors de cerca de Google encara no llegeixen imatges (tot i que tenen la capacitat per arribar a fer-ho) i utilitzen els textos alternatius per saber què hi apareix en elles. Per tant, pels motors de cerca, no comptar amb aquest tipus de text representa llegir la imatge com un espai buit.

També cal tenir en compte que els motors de cerca reconeixen el contingut de la pàgina a través de les paraules clau que es faciliten i un dels llocs on poden anar a buscar aquestes paraules és en el text alternatiu de les imatges.

En definitiva, un cop destacada la importància, la pregunta és: Com optimitzar imatges correctament? A continuació, detallem tots els aspectes que hauries de tenir en compte.

Revisar el format

Idealment, el format més recomanat és JPG (o JPEG) per imatges grans i amb molt de color i PNG per icones o imatges amb fons transparent. Tanmateix, segons les característiques i necessitats de cada imatge, pot ser que se n’hagi d’utilitzar un altre. En aquest cas, és important destacar que alguns formats com JPEG 2000, JPEG XR o WebP no són suportats per tots els navegadors, tot i que aquest últim cada vegada és més usat i actualment és el més recomanat per Google.

Optimitzar les mesures

La mesura de la imatge, d’ample i de llarg, hauria de ser la mateixa que s’acaba mostrant a la web. En cas contrari, es produeix una redimensió de la imatge a la mesura indicada i això comporta una feina extra quan se serveix la web a l’usuari.

Per saber quina és la mesura real de la imatge i a quina mesura es mostra, podem obrir la pàgina on es troba la imatge que ens interessa inspeccionar. Amb el ratolí a sobre de la foto, hem de fer clic al botó dret i se’ns desplegarà un menú, tornem a fer clic a “inspecciona”.

Tal com es veu a la imatge, se’ns obrirà una pestanya amb el codi de la web en HTML i, passant el ratolí per sobre la imatge, veurem la mesura real i com es mostra. Si els valors no coincideixen, llavors serà recomanable optimitzar la imatge.

Exemple:

Imatge amb mesures no optimitzades:

Imatge amb mesures optimitzades:

Optimitzar el pes

Evidentment, com menys pesi una imatge, millor, ja que reduirà el temps de càrrega de la web. Generalment, es recomana que una imatge estigui per sota dels 100KB. Per tal d’aconseguir-ho, es pot reduir la mesura, baixar la qualitat, reduir l’escala de colors o utilitzar altres formats d’imatge. Sigui com sigui, sobretot, s’ha d’anar amb compte de no empitjorar-ne la qualitat a vista de l’ull humà i, per tant, no pixelar la imatge.

Cal tenir cura de la quantitat de Punts Per Polzada (PPP’s) de la imatge, ja que la qualitat òptima per imprempta (300 ppp) no és la mateixa que la qualitat òptima per pantalla que sempre s’ha de reduir a 72 ppp’s. Aquest és un paràmetre optimitzable des de qualsevol editor d’imatges dels comentats en l’últim punt del post.

Títol i text alternatiu

Després de realitzar tots els passos anteriors, ja tindrem la imatge a punt per pujar al gestor. Tanmateix, abans de fer-ho, és recomanable canviar de nom l’arxiu evitant els caràcters especials, els símbols de puntuació i substituint sempre els espais per guions mitjans. A més, és preferible escriure sempre en minúscules.

Un cop pujada la imatge al gestor, s’hauria de definir un títol i un text alternatiu. És aconsellable que aquests dos elements incloguin també la keyword principal o alguna derivada. A més, es recomana que el text alternatiu sigui capaç d’il·lustrar allò que mostra la imatge.

Tal com us explicarem al nostre anterior post sobre la importància del text alternatiu, aquest element està conformat per un tipus de text que acompanya les imatges i que permet facilitar informació sobre elles. Per tant, la seva principal funció és il·lustrar el contingut de la imatge, especialment en aquells casos en què aquesta no és visible.

Eines per optimitzar imatges online

Avui dia, existeixen moltes eines per tal d’optimitzar imatges. Que es trobin online recomanem especialment: compressor.io, fotor.com, tinyjpg.com o squoosh.app. Com a eines d’escriptori, habitualment es fa servir Photoshop. Per altra banda, en cas de voler optimitzar imatges per WordPress, també existeixen diversos plugins, com per exemple Smush.

Necessites un cop de mà amb l’optimització d’imatges?

… I fins aquí aquesta petita guia sobre com optimitzar imatges. Recorda que, si necessites més informació o tens dubtes sobre com optimitzar per web, pots contactar amb nosaltres sense compromís. Estarem encantats de poder-te ajudar!