Optimitzar imatges web en format png i jpg

Una part de l’experiència d’usuari en la seva visita a un lloc web ve determinada pel temps d’espera mentre es carreguen els continguts. Alguna cosa que ens pot ajudar a convèncer d’aquesta importància és que Google valora la velocitat com un dels paràmetres que té en compte en el posicionament en cercadors (sempre mirant pels usuaris, don’t be the evil).

El pes de les imatges sol ser un punt crític. La quantitat d’imatges i el pes sumat de totes elles pot ser un dels majors reptes quan estem optimitzant la velocitat del nostre website.

Aquests últims anys han anat apareixent serveis que permeten reduir la mida dels arxius d’imatges, que habitualment són format jpg o png, de forma fàcil i sense una pèrdua apreciable de la qualitat.

El format jpg és, per si mateix, un format amb pèrdua, és a dir, la imatge resultant perd qualitat. Conceptualment segueix el mateix esquema que un mp3 en el cas de l’àudio. La incapacitat de l’ull humà per veure tota la gamma de colors que pot contenir una imatge facilita que els píxels que la formen, i que tenen colors semblants o propers, gràcies a la compressió es converteixin en un.

El perill ve perquè, disminuint el pes, si utilitzem molta compressió acabarem tenint artefactes com el que veiem en l’ampliació de la imatge. Es deixen d’apreciar molts matisos en tenir tant soroll.

Els fitxers PNG funcionen d’una forma diferent. Els anomenats PNG8 treballen sobre una paleta de, com a màxim, 256 colors, per la qual cosa només són recomanables per a imatges amb pocs colors i vores definides, com pot ser un logotip o una imatge de l’estil flat design. Si el que vols utilitzar és fotografia, llavors, molt millor el format jpg.

Van néixer per substituir els gifs sobre els quals existia una patent relativa a la forma de compressió i això en el món web sempre és una limitació que es busca evitar.

Existeix un PNG24 que suporta 16 milions de colors i s’utilitza especialment si vols usar transparència en el fons de la teva imatge.

Els serveis d’optimització d’imatges poden actuar de les següents formes:

1. La transparència del png24 simular-la en png8.
2. Els metadades que conté el fitxer, com l’autor o la data, eliminar-los. No serà el major estalvi però tot suma.
3. Generar més pèrdua de qualitat sense que es noti per a l’ull humà i, per tant, tenir un menor pes.

Hi ha websites que treballen pujant els fitxers online i, des d’allà, gestionar la compressió, habitualment amb algun tipus de restricció (pes de les imatges, nombre total d’imatges).

Altres es poden instal·lar a l’escriptori del teu sistema operatiu Apple o bé per a Windows. I altres, gràcies a la seva API (Application Programming Interface), els pots integrar, per exemple, en un Wordpress, o utilitzant sistemes d’automatització de tasques, com Grunt, perquè facin la seva feina de forma gairebé transparent i automàtica.

Alguns exemples d’aquest tipus de serveis:

Kraken.io

Per al meu gust, i el d’altres a Ondho, és del millor que hi ha en quant a compressió d’imatges per la seva versatilitat i flexibilitat.

Per facilitar la vida dóna suport tant per a PNG com JPG. Disponible per a Wordpress com a plugin i també per als que treballem en Grunt.

JPEGMini

Com el seu nom indica, treballa només amb el format jpg. Sol ser el format habitual de les fotos, per la qual cosa té molt sentit que es vulguin centrar en ell ja que la majoria de les imatges d’un website seran fotografies.

Pot treballar en instal·lació a l’escriptori, simplement has d’arrossegar les imatges i el programa farà la resta. Disponible per a Windows i Mac.

Compta amb versió gratuïta, limitada a 30 dies, i una de pagament. Et pot estalviar fins a 5 vegades el pes de les imatges. Per als que fan un ús intensiu, té una versió per a servidor.

TinyPNG Optimitzador i TinyJPG

Dues urls diferents, amb un mateix desenvolupador, per la qual cosa podrem utilitzar-lo indistintament per comprimir les nostres imatges en JPG o PNG.

Molt fàcil d’utilitzar, van directes al gra, només entrar ja ens trobem amb la caixa per carregar les nostres imatges. No tot és comprensió d’imatges per millorar la conversió d’objectius a la nostra web.

Si utilitzeu Photoshop o Wordpress esteu d’enhorabona perquè disposen de plugins per les dues plataformes.

Smush.it

És un dels primers i més famosos serveis. Proporcionat per Yahoo, sempre ha estat un segell de qualitat. Desafortunadament, fa poc ha deixat de donar suport al projecte, per la qual cosa no sabem quin futur l’espera.

ImageOptim

És un dels clàssics. Funciona només per a la plataforma Mac OS X, d’Apple, i té, igual que jpegmini, una versió d’escriptori molt senzilla d’utilitzar. Disposa de compressió per als dos formats.

Per veure el potencial podem realitzar dues proves comprimint un fitxer de cada format, PNG i JPG, utilitzant els 4 serveis.

Provem Kraken, JPEGmini, ImageOptim i tiny (png i jpg) per veure quins resultats ens retornen amb dues imatges, una de cada format.

Imatge original en jpg, amb mida 866 kb (de l’apartat Nosaltres de la nostra web)

Imatge original en png, amb una mida de 14 kb (del nostre post sobre la importància de les paraules clau)

**Entendre per a què serveix cada format és essencial**, gran part de la compressió la guanyem amb una bona elecció del format. Triar un jpg, en comptes d'un png, quan té pocs colors segurament ja és una mala opció de partida. Finalment es pot acabar d'afinar el pes de la imatge amb una eina de compressió com aquestes.

Per últim, no oblidem que l’ús de molts dispositius diferents, i el suport de molts navegadors i sistemes operatius, fan que hi hagi alternatives de caràcter vectorial, com SVG, que poden comptar amb un gran futur en el desenvolupament d’imatges per a aplicacions mòbils i desenvolupament web.