Com (i per què) comprimir imatges per a la web?

Eines i motius per a optimitzar les imatges de la teva pàgina web.

Posar fotografies a tot arreu per il·lustrar-ho tot, ho fa tothom: és més atractiu, visual, crida l’atenció, etc. Però aquestes imatges poden ser un problema per a la teva pàgina web. En aquest article t’expliquem per què has d’optimitzar les imatges i et proposem eines per fer-ho. No te’l perdis!

Per què és important optimitzar les imatges de la teva web?

·
Evitar rebots: que la pàgina web vagi com una tortuga i, per tant, que trigui molt a carregar genera una taxa de rebots molt elevada. Ja sabem que la paciència no és el nostre fort, i els usuaris abandonen la pàgina quan triguen en accedir al contingut. I no volem perdre usuaris per culpa de la lentitud de càrrega!
·
Posicionament: els buscadors de Google puntuen les pàgines web segons les velocitats de càrrega. Per tant, com menys pes tinguin les imatges més bona puntuació tindrà la web i més bona posició!
·
Diferents dispositius: la tendència de navegació vira cap als dispositius mòbils que ja superen a la navegació per ordinador. Però la velocitat de navegació des d’aquests dispositius (3G o 4G) és més baixa que la banda ampla o la fibra òptica. Per tant, posar imatges que pesin menys ajudarà a la càrrega de la web als mòbils.

Foto: Pixabay

La flor dent de lleó optimitza el màxim el pes de les seves llavors i les dota d'elements aerodinàmics per tal que arribin al més lluny possible.

Quins formats d’imatges podem fer servir?

JPG:

És el format més habitual per utilitzar fotografies.

Ideal per a imatges fotogràfiques, amb molts colors i detalls, de mida gran.
Permet una reducció de mida personalitzada, però...
La compressió genera pèrdues, és a dir, es redueix el pes a costa de la qualitat. La fotografia perd nitidesa i poden aparèixer errors cromàtics a la fotografia.
TOP: Buscar l’equilibri entre qualitat i pes.

PNG:

Permet transparències, per tant és ideal per imatges no quadrades.
Molt útil per a imatges amb pocs colors o grans espais en blanc.
No és possible reduir tant el pes com en un JPG, ja que no utilitza un sistema de compressió amb pèrdues.

GIF:

Ideal per a imatges animades.
No recomanat utilitzar-lo per imatges estàtiques, ja que no està tan optimitzat com els anteriors.
Només utilitza 256 colors.
Format obsolet, excepte per riure una estona a les xarxes socials.

SVG:

Format vectorial.

Són escalables: ens permet canviar la seva mida sense augmentar el seu pes.
Ideal per a logotips, icones o gràfics.
/ Format professional, és a dir, no tothom el pot crear o modificar.

Pots veure el nostre post d’animacions web html5 i css si vols saber com utilitzar les imatges GIF i SVG per destacar continguts.

Les diferències entre els tipus de formats i els avantatges de cadascun estan molt ben explicats a NoJPG.org. Dóna-li un cop d’ull!.

Adaptar les mides a cada pantalla.

Actualment, les pàgines web es veuen en múltiples pantalles, com monitors grans, tauletes o petits dispositius mòbils. Això és important tenir-ho en compte quan preparem una pàgina web.

És recomanable utilitzar diferents resolucions d'imatges per a cada dispositiu, sempre que el programa d'edició o maquetació ens ho permeti. D'aquesta manera evitarem que en un dispositiu mòbil, per exemple, amb una resolució de pantalla de 360 píxels, carregui la mateixa imatge que mostrem a 1900 píxels en una pantalla d'ordinador.

Foto: Ryan Baker

Els arbres fruiters determinen la mida dels seus fruits depenent de les substàncies que poden obtenir de la terra. Optimitzen la mida perquè el fruit pugui ser, sempre, viable, gran exemple d’adaptació!

Resolucions i el mite dels 72 dpi.

La resolució de les imatges és la densitat de punts per polzada que té. Com més punts per polsada té la imatge, més qualitat. DPI = dots per inch.

No obstant això, només afectarà la qualitat de les impressions. Quan mostrem imatges en una pantalla, el que és important són els píxels que mesura la foto, independentment de la resolució que tingui.

Podríem utilitzar imatges d'1 dpi o 1000 dpi amb la mateixa mida de píxels i la veuríem idènticament iguals en pantalla. Ho podeu comprovar amb aquestes dues imatges:

Exemple:

1 dpi

1000 dpi

D’on ve, llavors, el mite del 72 dpi?

El mite dels 72 dpi es va originar quan Apple va crear el primer Macintosh. Ells varen establir un sistema WYSIWYG (What You See Is What You Get). Aquest sistema es basava en el fet que si s'imprimia el que es veia a la pantalla del Macintosh, el resultat fos exacte tant en paper com en pantalla. I varen determinar que 72 dpi era la resolució ideal tant per tipografies com per imatges.

Però això només era real en el seu ordinador, en cap més. De fet, avui en dia tenim infinitat de tipus de pantalles, resolucions, mides, tipografies, etc. que fan que la teoria dels 72 dpi que va establir Apple quedi totalment obsoleta. Si voleu saber més sobre aquest mite, podeu consultar aquest blog!

Per tant, en conclusió, no li donis importància als DPI de la imatge sinó a la mida en píxels i optimitza-les amb alguna de les eines que et mostrem a continuació.

La foto més gran de la història, conté 846 gigapíxels i es va realizar el 2015 a Kuala Lumpur. La segona és la foto de la lluna feta per la NASA amb 681 gigapíxels.

Eines per optimitzar imatges.

PHOTOSHOP

L'eina per excel·lència en retoc i edició d'imatges és Photoshop. Per optimitzar una imatge correctament, un cop hem determinat la mida que volem, la guardem utilitzant l'opció "Guardar para Web".

File > Export > Save for web (legacy)
Archivo > Exportar > Guardar para web

En quin format ho exportes?

JPG

Els paràmetres: la barra de qualitat de la imatge va del 0 al 100, sent 0 la compressió màxima i 100 que no hi ha compressió. Sí, sembla que estigui al revés.
Un punt intermedi seria entre 60 i 80% a la casella de 'qualitat'.

Què és l'opció 'progressiu'? El fet que la imatge, que es guardarà per capes de diferents qualitats, es carregarà de manera progressiva, és a dir, primer es veurà de baixa qualitat i, a poc a poc, a mesura que es vagi carregant anirà augmentant la seva qualitat.
Si decideixes no utilitzar aquesta opció, la imatge apareixerà directament en alta qualitat, segurament a batzegades perquè li costarà de carregar.

PNG

Si t’has fixat, Photoshop et dóna dues opcions de format PNG: PNG-8 i PNG-24. La diferència:
PNG-8: comprimeix un màxim de 256 colors, els mateixos que el GIF.
PNG-24: comprimeix amb 16 milions de colors.
Crec que la decisió està presa!
Com ja hem comentat abans, el PNG suporta la transparència, sempre que la imatge estigui dissenyada per ser sense fons o sense alguna part.
El tipus de càrrega: l’opció d’entrellaçat. És molt semblant al ‘progressiu’ del format JPG.

IMAGEOPTIM ()

Tot i que Photoshop optimitza correctament les imatges si utilitzem la seva opció de guardar per a web, encara queden dades que podem eliminar que ens permetran reduir encara més el pes d’aquesta. Una d’aquestes eines gratuïtes per MAC és ImageOptim.

Simplement arrossegarem les imatges generades del Photoshop al programa i ens les optimitzarà segons la configuració que li donem.
Integra eines d’optimització: PNGOUT, AdvPNG, extended OptiPNG, PngCrush, JpegOptim, jpegtran, jpegrescan i Gifsicle.
Programa a instal·lar, només disponible per MAC.

RIOT ( )

Podríem dir que és l’alternativa a ImageOptim per a ordinadors PC. També és gratuït.

Previsualització de les imatges abans de comprimir-les.
Té un petit editor amb filtres o amb la possibilitat de girar la imatge.
Es pot especificar el pes que volem que tingui.
Processar més d’una imatge a la vegada (versió 0.4).
Admet imatges en PSD de Photoshop.
Podem guardar les imatges en tres formats: JPG, PNG i GIF.
La versió portàtil només està disponible per les versions de Windows 2000 fins a la 7.
Programa a instal·lar, només disponible per Windows.

TINYPNG (online )

També existeixen compressors online com ara TinyPNG que és totalment gratuïta i et permet reduir i comprimir imatges tant en format PNG com JPG.

Permet processar fins a 20 imatges d’un sol cop.
Instal·lant un plugin, es pot guardar a través de TinyPNG des de Photoshop.
Limitació de la mida dels arxius: arxius de màxim 5MB en la versió gratuïta, fins a 25MB en la versió de pagament.

Foto: Arhnue

Els pops, gràcies a la seva morfologia, poden comprimir el seu cos fins a reduir-lo a la mida de la seva mandíbula, que és l'única part dura del seu cos.

Ja ho saps: optimitza, a Google sempre és millor tenir-lo com a amic!

Si ens vols conèixer millor,
contacta'ns. I si t'agrada, segueix-nos!