Si tens una pàgina web segur que té un gran contingut gràfic com fotografies, icones, il·lustracions, etc.. Et pots trobar amb la necessitat de pujar les noves imatges o bé renovar les que hi ha actualment, ja siguin imatges creades per impactar, per mostrar els teus productes o per mantenir l’atenció dels usuaris. Aquestes imatges sempre s’hauran de veure correctament per treure’n el màxim partit! Per això resulta tan important optimitzar correctament les nostres fotografies abans de penjar-les a la nostra pàgina web. Bàsicament es tracta de triar el format adequat, que facin la mida exacta i que no siguin massa pesades; per exemple, que no sobrepassin els 500Kb en fotos grans, els 200Kb en fotos de mida mitjana i els 100Kb en imatges petites.

Per què ens convé que les nostres imatges no pesin gaire?

Tot i que cada vegada naveguem a més velocitat, unes imatges molt pesades poden provocar que la nostra pàgina web trigui força a carregar, sobretot si la nostra pàgina web conté un gran contingut gràfic o està formada per imatges que ocupen gran part o tota la pantalla. Si la nostra pàgina web és lenta, l’usuari es cansarà i l’abandonarà ràpidament, cosa que no podem acceptar de cap manera.

Unes imatges ben optimitzades ens ajudaran a obtenir un millor posicionament, ja que Google, des de fa un temps, té en compte factors com la rapidesa a l’hora de carregar una pàgina.

Quin format triarem?

Per començar, haurem d’escollir quin és el format més adequat per guardar les nostres imatges i podem triar entre:

• GIF: es tracta d’un format cada vegada més obsolet. Pràcticament només s’utilitza per exportar imatges animades i formades per pocs colors plans.
• JPG: perfecte per guardar fotografies de tot tipus, sobretot si aquestes son de grans dimensions i amb gran detall. La seva compressió és molt més elevada que un PNG. No es recomana a l’hora d’exportar imatges amb textos petits, ja que aquests perden nitidesa i queden poc definits.

• PNG: és el format ideal per imatges planes o amb pocs colors, del tipus il·lustracions, icones, logotips, gràfics, etc. Els textos exportats a imatges PNG seran més nítids. Un altre dels motius per utilitzar PNG és que ens permet utilitzar imatges amb transparència.

• SVG: és un format vectorial, cosa que el converteix en redimensionable. La imatge que sigui guardada en SVG es veurà sempre nítida, es presenti a la mida que es presenti. Aquest format és ideal per guardar imatges que s’hagin creat amb vectors, com logotips, il·lustracions, icones, etc., sobretot per webs responsives. Un dels inconvenients és que encara hi ha versions antigues d’Internet Explorer que no admeten aquest format.

Com optimitzar les nostres imatges?

És important que les imatges que guardem estiguin a la mida exacta en píxels en que es mostraran a la pàgina web. Si exportem una imatge en JPG la qualitat haurà de ser d’entre 80 i 90. Si el que fem és exportar un PNG podem triar entre un PNG-8, PNG-24 o PNG-32. Es recomana utilitzar PNG-24 o PNG-32, ja que la qualitat de la imatge serà superior, sobretot si està composada per molts colors.

Un dels inconvenients que podem trobar quan exportem una imatge a PNG transparent és que resulti ser força pesada, sobretot si aquesta és una fotografia a tot color. Un recurs molt útil i fàcil que hem descobert no fa massa és https://tinypng.com/, des d’on podrem comprimir fins a un 70% els nostres PNG’s transparents d’una manera senzilla i ràpida.

Si la imatge que estem tractant l’hem capturat nosaltres, és important triar l’espai de color sRGB i no AdobeRGB o cap altre, ja que sRGB és un format més universal. Veurem la imatge amb els mateixos colors que l’original i es veurà pràcticament igual a tots els navegadors, el que el converteix en l’espai ideal per a web.

Una excepció: les pantalles Retina Display

Des de fa un temps, els dispositius creats per la marca Apple com iPad, iPhone, MacBook, etc. tenen en comú les pantalles Retina Display, que ofereixen una qualitat d’imatge molt superior a la que estàvem acostumats. Això es deu a que tenen una densitat de píxels molt més elevada que les pantalles convencionals, podent arribar a mostrar fins a quatre vegades més píxels en un mateix espai. Per tant, quan visualitzem una imatge en un d’aquests dispositius, la podem veure borrosa i amb poca definició. Per aconseguir que es vegin correctament les imatges en aquest tipus de pantalles es recomana guardar-les al doble de la seva mida. Si tenim una imatge de 50 x 50 px, la guardarem a 100 x 100 px. Es recomana també utilitzar el format SVG, ja que amb aquest no tindrem cap problema en la redimensió perquè mai perd definició al mantenir les propietats vectorials. Amb les imatges grans a tota pantalla no aplicarem la mateixa solució, no existeix el mateix problema de falta de definició i obtindríem imatges massa pesants per a la nostra pàgina web.

Vist tot això, es tracta de trobar l’equilibri entre la qualitat i el pes per acabar obtenint unes imatges que llueixin el màxim possible a la nostra pàgina web sense que ens facin perdre rapidesa al navegar.