Optimització d'imatges: 10 consells imprescindibles (1)

Primer de tot vaig a dir-vos que en aquest post no parlaré de qüestions de disseny, ni d'aconseguir triomfar a Instagram. Aquests consells posen més el focus en qüestions relacionades en com aconseguir una experiència d'ús més fluïda, més accessible i, ja que estem, amb un millor posicionament orgànic (parlarem bastant de SEO on page). 

Les imatges són un dels recursos que més poden abundar en una pàgina i una incorrecta optimització fa que la càrrega sigui molt més lenta i pesada, els usuaris es frustrin i els cercadors emprin un temps preciós que podrien estar utilitzant en rastrejar altres pàgines més útils per al negoci. Aquí tenim els primers 5 consells i veureu que amb pocs canvis es pot millorar notablement.

Google intenta fermament millorar en la seva capacitat per interpretar el contingut de les imatges. Qualsevol pista que li donem la agrairà i molt. 

Pensa en totes les fotos del teu eCommerce, les puges directament des de la targeta de la càmera? Les baixes de pàgines d'estoc i ja està? Si és així, em temo que tens unes quantes amb noms com "DSC32344345.jpg" o "stockphoto_id33236.jpg". Com pots imaginar això no aporta res al cercador, no hi ha cap estratègia al darrere. 

Les bones pràctiques de cara a Google i la resta de motors de cerca dicten que hauries prendre't el temps suficient per canviar el nom: 

• Utilitzant paraules descriptives que aportin un major valor contextual al bot corresponent. 

• Basant-nos en la keyword research per triar les que millor responguin a una intenció de cerca concreta i alineada amb el contingut de la pàgina de destinació. 

• Respectant la sintaxi: evita espais (millor separar les paraules amb guions mig), caràcters estranys com accents, enes i-grega, ces trencades...

Com ja hem dit, per als cercadors, les imatges segueixen sent conjunts de píxels, amb la qual cosa resulten completament opaques. És cert que estan avançant en el reconeixement, però aquesta frontera sembla més aviat llunyana. 

Afortunadament hi ha la possibilitat d'afegir cert valor semàntic a les imatges a través d'atributs com el denominat alt text o text alternatiu. El principal objectiu i la raó de ser del alt text és atendre les necessitats de les persones amb determinats requeriments d'accessibilitat com les dificultats visuals. 

Els navegadors, durant la navegació per veu, utilitzen el text alternatiu per indicar de paraula el contingut de les imatges. Només per això ja seria una bona pràctica, però és que, a més, és positiu des del punt de vista del SEO perquè trasllada aquesta informació semàntica al robot i això és determinant a l'hora de posicionar a les cerques per imatges (i fins i tot funciona com anchor text quan enllacem des d'una foto). 

Un alt text optimitzat haurà de: 

• Definir el contingut de la imatge sense repetir literalment el nom de l'arxiu. 

• Ser únic: no aporta valor que totes les imatges d'una mateixa pàgina tinguin el mateix nom. 

• Incloure keywords sense sobreoptimitzar. Seria ridícul i poc útil el repetir diversos sinònims i atributs sense sentit ni ordre semàntic-sintàctic. 

• Ha d'estar escrit de manera "natural", és a dir, no cal separar les paraules amb guions ni eliminar preposicions o articles. És simplement una descripció literal. 

Per cert: no és recomanable que utilitzis alt text en totes les imatges, sempre hi ha recursos gràfics amb una intenció exclusivament decorativa. No forcis la màquina amb aquest tipus d'imatges perquè es pot interpretar com un intent de sobreoptimització.

Ja ho comentava al principi: un dels punts més crítics en l'optimització de les imatges és el pes de les mateixes. Tenim certa tendència a pensar que com més grans millor per al client, però cal ser raonables en aquest aspecte.

Un major grandària i resolució impliquen sempre un pes superior amb la qual cosa ja estem incorrent en un error perquè la velocitat de càrrega es ressent, i amb ella, l'experiència d'ús. 

A més, cal tenir en compte que una imatge de 2165x3030 píxels difícilment tindrà justificació en una web. En general el que passa amb aquestes fotos és que són redimensionades pel CMS per mostrar-les a una mida determinada més lògica (imagina, per exemple, 850x500) Això alenteix encara més la càrrega. 

Compte també amb utilitzar imatges, per exemple, en els fons de mode decoratiu. És una forma bastant fàcil d’alentir el temps de càrrega.

Per fer-ho tens diverses opcions. Si tens traça pots utilitzar photoshop per optimitzar les imatges i si no és el teu fort i tampoc tens a mà un dissenyador no et preocupis perquè hi ha alternatives senzillíssimes d’utilitzar: 

• Jpegmini: un software d'escriptori disponible per Mac i PC que resulta molt intuïtiu i promet reduccions de fins a un 80% en el pes.

• Tinypng: servei 100% online que permet pujar fins a 20 imatges de fins a 5 megues i les processa juntes. El millor és que està pensat específicament per al format png amb la qual cosa conserva la transparència sense problema.

• Imageoptimizer: bastant auster pel que fa a interfície però resolutiu i amb algunes opcions. Pots utilitzar-ho online o descarregar-ho com software d'escriptori. 

Per saber quines són les imatges que necessiten passar per l'operació biquini et recomano que utilitzis algun recurs com Page Speed o l'extensió Lighthouse de Google o GT Metrix. Totes elles et diran exactament quines són i el percentatge que pots arribar a estalviar.

Això, unit al punt anterior, pot marcar la diferència entre una pàgina amb un bon aspecte i una pàgina amb el mateix bon aspecte però que carregui de manera eficient i ràpida. 

Hi ha diferents formats d'imatge, és clar, però és que cada un d'ells és apropiat per a una o altre finalitat: 

Format Jpeg o jpg 

Aquest és un dels clàssics en les imatges digitals. El millor de tot és que sempre té un marge d'optimització alt, però també porta molta informació de color que pot no fer falta segons el que vulguis mostrar. Una foto de producte en tot el seu esplendor? Ok, jpg és el teu format, una icona en 2 colors? Busca una altra opció més eficient. 

Format GIF 

Un altre vell rocker que mai acaba de desaparèixer. Els seus principals arguments són dos: la seva capacitat per mantenir la transparència dels fons i que són animats. Per contra, les animacions pesen bastant i quan intentes ajustar el pes solen perdre força qualitat. 

Format PNG 

L'alternativa ideal a GIF quan busquem transparència i un pes contingut en imatges amb poca informació de color com icones o il·lustracions. 

A més, png ve en dos sabors: png8 i png24. El nombre fa referència a la quantitat de colors amb els quals es componen les imatges (256 i 16 milions respectivament) per la qual cosa el de 24 és més indicat per fotos amb alguna tinta més, mentre que el de 8 és realment òptim per imatges bàsiques.

Llegeix la sèrie completa aquí: 

• Optimització d'imatges: 10 consells imprescindibles (2) 

Imatges | Pexels, Google Page Speed, Jpeg Mini.