L'optimització d'imatges web consisteix en una sèrie de tècniques que podeu aplicar fàcilment per donar visibilitat a la vostra pàgina.
Independentment de si vols muntar una botiga en línia o millorar la teva web o bloc personal, el més probable és que el teu lloc contingui força fotografies i, si et guies per les tendències de disseny web actuals, les imatges siguin molt detallades i de resolució molt alta.
Malauradament, moltes empreses tenen problemes per posicionar-se perquè les fotografies de les pàgines pesen molt. Potser 400 KB no semblen tant avui dia, però per als cercadors el pes sí que és un element important, ja que té molt a veure amb la velocitat de càrrega de la nostra web i, per tant, amb l'experiència de l'usuari.
Com ja us hem explicat aquí, el temps de càrrega no només és un factor de posicionament SEO (com més lenta sigui la teva pàgina, pitjor la posicionaran els cercadors), sinó que també té un impacte directe en la quantitat d'abandonaments, sobretot entre els usuaris mòbils, la connexió dels quals a internet no és tan potent com la que tenim a casa.
És més, l'optimització d'imatges també fa possible consumir menys dades de transferència del nostre allotjament web. Per això, veurem com optimitzar les teves imatges sense perdre qualitat i de forma senzilla.
Com optimitzar una imatge en 5 passos
1. format
Quan guardem un fitxer gràfic, podem triar entre un munt de formats: TIFF, JPEG, GIF, PNG… Tot i que la compressió s'inclou en l'algorisme de moltes d'aquestes extensions, existeixen diferències subtils i grans entre una i altra.
En general, JPG i PNG són les més convenients per preparar imatges per a web. Aquí us deixem una costella per saber quan triar quina:
- extensió .JPG: per a les fotografies, sobretot les grans i les que tenen molts colors i degradats.
- extensió .PNG: per a les imatges planes o amb transparències o espais en blanc, com els logotips o les pantalles.
Resumint, reservarem el format JPG per a les fotos, i guardarem la resta d'imatges que componen la nostra web (icones, botons…) a PNG.
2. mida
Un altre pas important és determinar la mida de la imatgen, o, el que és el mateix, les dimensions en píxels de la fotografia. Com més píxels tingui, més gran o «pesat» serà el fitxer i més trigarà a carregar.
Si la pàgina de producte o l'article del bloc necessita una foto de 300 x 300 píxels, no utilitzis una més gran i t'acontentis de reduir-la de mida. Carrega-la directament amb aquestes dimensions.
3. Programa de compressió d'imatges
També podeu utilitzar un editor de fotografies per comprimir imatges sense perdre qualitat. Avui dia disposem d'una gran quantitat d'eines per reduir la mida de les imatges sense afectar el resultat final, aquestes són només unes quantes:
- it: plug-in per a WordPress.
- io: de fàcil ús.
- io: molt semblant, però amb una versió de pagament molt interessant.
- TinyPGN: compressió avançada d'imatges.
- ImageOptim: per a usuaris de Mac.
4. Nom del fitxer
Mentre que els passos anteriors tenien un caràcter més «tècnic», els dos següents se centren a la part nominativa.
El nom que us posem a la foto quan la guardem al servidor del nostre allotjament web ajuda a posicionar-la al cercador d'imatges de Google (incís: per esbrinar el posicionament a Google Imatges de la teva web i veure quants usuaris ens arriben per aquest mitjà , podem fer servir Consola de cerca de Google).
Atès que la tecnologia de reconeixement d'imatges segueix tenint problemes per interpretar el contingut d'una fotografia, cal facilitar el treball de comprensió als motors de cerca.
En aquest sentit, el nom del fitxer és com el títol de la imatge. Per això, en lloc de deixar el nom genèric que la càmera assigna a cada foto, com DCMI0003.jpg, l'ideal sigui guardar-la amb un nom com Vestit-tweed-escoces-gris.jpg.
La clau per crear un bon nom de fitxer és:
- informar sobre el significat de la imatge;
- utilitzar la paraula clau més important;
- ser concís (no cal incloure preposicions o articles);
- separar les paraules mitjançant
5. Atribut alt
Si el pas anterior el donàvem abans de carregar la imatge a la nostra pàgina, aquest es fa després.
En concret, cal emplenar l'anomenada etiqueta alternativa o atribut Alt (de l'anglès «text alternatiu» o text alternatiu).
Això és fonamental per dos motius: per una banda, els cercadors usen aquesta etiqueta per entendre què hi ha en una foto i posicionar-la millor, i, de l'altra, perquè és el text que apareix si per alguna raó la imatge no es carrega amb el resta del contingut de la pàgina (de fet, fins i tot quan la imatge sí que es mostra, pots veure l'atribut Alt en passar el punter del ratolí per sobre).
Per emplenar bé l'etiqueta Alt, cal:
- Descriure el contingut amb paraules senzilles.
- Incloure la paraula clau principal.
Compte de tractar de fer trampes, perquè els cercadors penalitzen les webs que fiquen massa paraules clau tractant de posicionar-se amb totes (per exemple, alt=»Vestit de tweed impecable de qualitat superior en oferta Madrid»).
últims consells
Per aprofitar al màxim aquestes bones pràctiques per optimitzar les imatges de la teva web, tingues en compte tot el context. En altres paraules, recorda que tot el contingut de la pàgina ha d'anar relacionat i ser pertinent.
En la mesura que sigui possible, les fotografies han de tenir relació amb les capçaleres, el títol de la pàgina i el text que les envolta i han de comptar amb la seva pròpia llegenda per aportar més valor.
Per llegir més sobre aquest tema, fes una ullada a les recomanacions de Google sobre optimització d'imatges. Encara que de moment, amb els programes per comprimir imatges i les breus indicacions d'aquest article, podràs reduir la mida de les teves fotos en qüestió de minuts per millorar el teu posicionament web i treure més partit al teu pla de hosting.