com optimitzar les imatges abans de pujar les al web

Per a que un web sigui el màxim d'efectiu cal parar especial atenció a les imatges.

D'una banda la qualitat visual de la imatge ajudarà a:

- Millorar la impressió general que els visitants s'emportin del teu web. En general, sempre parem més atenció a un web visualment agradable que a un que no ho sigui tant.

- Que el visitant tingui una major sensació de confiança en el producte o servei que li estàs oferint.

Per tant evita sempre que sigui possible la utilització de fotgrafies "massa casolanes" o de baixa qualitat.


D'altra banda, abans de pujar imatges al teu web, has de tenir en compte l'optimització de les mateixes, a nivell de mida i pes de l'arxiu, per a que la càrrega de la pàgina sigui el més ràpida possible.

Una velocitat ràpida de càrrega de la pàgina afecta positivament a:

- La fluïdesa de la navegació pel teu web, reduint els temps d'espera.

- La indexació del web per part dels cercadors d'Internet com Google. La velocitat de càrrega de la pàgina (en dispositius mòbils i en escriptori) és un dels factors, entre molts altres, que els cercadors tenen en compte a l'hora de decidir quins webs mostren abans que els altres en els resultats de la cerca.

Abans de començar has tenir dues coses clares:

1 - El format d'imatge més adequat per web és jpg / jpeg per la seva bona relació de compressió.

2 - Si la imatge original té una mida inferior a la que necessites per al web, tens un problema. Ampliar les imatges sol produir que es vegin poc definides o pixelades.


A continuació veurem els 3 passos a seguir per optimitzar fàcilment les imatges abans de pujar-es al web:


1. Retallar o donar una proporció determinada a una imatge. (Si la imatge original ja té la proporció que t'interessa pots saltar-te aquest pas)

Partint de la imatge original, et pot interessar retallar-ne una part per evitar mostrar algun detall concret o simplement per variar la proporció alt / ample (per exemple, si tens una imatge horitzontal però necessites que sigui quadrada per al web)


Per a realitzar aquesta operació hi han nombroses eines molt fàcils d'utilitzar, per exemple:

- Aplicació bàsica "Fotos" de Windows
- Microsoft Office Picture Manager (eina de l'Office 2010)
- Eines gratuïtes online com editor.pho.to


2. Ajustar la mida de la imatge en píxels

Un cop tens la imatge en la proporció desitjada has de comprovar si la seva mida en píxels és l'adequada per al web. Per això has de veure l'espai que ocuparà la imatge al web. Guia't sempre per l'amplada. Tenint en compte que una pantalla fullHD té 1920 píxels d'amplada total, pots preveure més o menys quants píxels ha de tenir la imatge segons l'espai que ha d'ocupar al web, per exemple:

Si la imatge s'ha de veure a pantalla completa necessitaràs que la mida sigui gran, de 1920 px d'ample (si és una mica menys tampoc passa res), però si la imatge ha d'ocupar només un espai petit de la pantalla (per exemple una tercera o quarta part de l'ample total) et caldrà reduir-la, mantenint la proporció amplada / alçada per a no deformar-la.


Pots fer-ho amb dues de les aplicacions esmentades anteriorment:

- Microsoft Office Picture Manager (eina de Office 2010)
- Eines gratuïtes online com editor.pho.to


3. Eliminar el "sobrepès" de la imatge

Un fitxer d'imatge jpg conté més elements dels que pots apreciar visualment. Es tracta d'informació sobre la imatge, la data i la càmera amb què es va realitzar, etc ... entre d'altres. Si consegueixes eliminar tota aquesta informació que no necessites sense perdre qualitat d'imatge, obtindràs la mateixa imatge amb menys pes.

Hi ha moltes eines gratuïtes en línia per realitzar aquest procés. Pots provar amb compressjpeg.com


Un cop tinguis la imatge optimitzada en grandària i pes ja pots pujar-la al web. Es mostrarà correctament sense penalitzar el temps de càrrega del web.