Imatges

Les imatges representen un percentatge molt alt del volum total d’un lloc web. Hi ha una tendència a utilitzar imatges cada vegada més grans als llocs web i, des d’una perspectiva sostenible, aquesta és una mala pràctica. D’acord amb el que anteriorment hem mencionat respecte a procurar sortir-se del joc de l’economia de l’atenció, us proposem posar la nostra creativitat al servei del nostre planeta: allunyem-nos de la «cridaneria» de posar mil imatges i vídeos, qüestionem també el que el déu màrketing ens imposa... Fóra bo començar preguntant-nos de quines imatges podriem prescindir, però us avancem també quatre consells molt bàsics:

• Reduiu el volum d’imatges que useu al web.
• Reduiu la qualitat: a major compressió (i pot resultar imperceptible en termes de qualitat), menor volum i menor impacte ambiental...
• Reduiu les dimensions: una amplada i una alçada duplicades respecte al que finalment es mostra significa aproximadament quatre vegades més bytes. 
• Escolliu el format més adequat i optimitzat per a cada tipus d’imatge (veure comparatives a continuació).
• Totes les imatges han d’estar a resolució 72 o màxim 93ppp (no té sentit que tinguin millor resolució perquè la pantalla no pot mostrar més que això). PPP=Píxels/punts Per Polzada, o el que és el mateix DPI=Dots Per Inch. No confondre amb els Megapíxels amb el que descriuen la mida i qualitat dels seus sensors les càmares fotogràfiques, res a veure.
• Useu plugins d’optimització d’imatges.
• Useu plugins de caché.

I quina imatge hi ha absolutament a tots els webs? Comencem pel logo. El projecte The Low-tech Magazine arriba a modificar el seu logo per fer-lo més lleuger, prioritzant el seu contingut i no la seva estètica. Entenem que a tothom ens enamora el nostre logo i que li hem dedicat temps, esforços i diners com per carregar-se'l en un tres i no res, però sí podem considerar un parell de factors per optimitzar la seva grandària:

• En la seva aplicació al web usar sempre la seva versió monocroma (d’un sol color).
• Molts logos es porten molt bé amb el format GIF, que treballa amb color indexat (el número de colors que composen la imatge determina la seva mida). Com els logos acostumen a tenir pocs colors i plans, el GIF pot ser una molt bona opció per reduir al màxim el seu volum. 
• Valorar utilitzar un inline SVG, tal com suggereixen també des de The low-tech magazine, que és un format escalable i lleuger (veure apartat SVG en línia). 

A The Low-tech magazine fan servir un caràcter (una fletxa) com a logo, sota el potent argument que «La identitat visual reclama tenir consistència conceptual més que uniformitat visual». Per pensar-s'ho!!

Per a la resta d’imatges: 

Imatges interpol·lades (dithered images) 

Si us atreviu a revisitar estètiques «retro», utilitzeu imatges interpol·lades (aquest terme remet al mètode matemàtic que usa el programari per a calcular valors de gris a partir d’intervals de color de la imatge original). És un altre format de color indexat però únicament amb grisos, amb una estètica a base de línies de punts molt característica. S’ha de dir que és una solució de disseny no necessàriament òptima per a certes imatges i que, en el cas de The low-tech magazine, ha estat escollida per cridar l’atenció sobre el fet de l’excés d’imatges a tot color. Aquest web és un referent que ens encanta mencionar per la manera com treballa el disseny posant l’estètica al servei del concepte i del valor prevalent de la sostenibilitat ambiental. 

SVG en línia (inline SVG) 
(traduït de The Low-tech magazine) 

Podem utilitzar el format SVG (Scalable Vector Graphics, un llenguatge especialitzat per crear gràfics) com a fitxers de comandes (externalfile.svg) o bé podem enganxar el seu codi al fitxer html com a codi en línia (< svg> ... < /svg>). Qualsevol aplicació capaç de produir dibuixos vectorials hauria de poder exportar-los en format SVG i, per obtenir el seu codi, podem simplement obrir el fitxer en un editor de text.

Els SVG en línia eviten peticions de càrrega d'imatges al servidor, i també tenen un altre avantatge: es poden personalitzar amb classes CSS. D’aquesta manera, per a qualsevol icona que requereixi estats «hover» és ideal el format SVG en línia. (Una nota: com que els SVG són essencialment comandes de dibuix, la sintaxi de SVGS difereix de l'estil dels elements HTML. Llegiu més sobre SVG a MDN)

JPG vs. PNG

Ambdós són formats comprimits que ofereixen prou qualitat i moltes possibilitats per configurar el nivell de compressió, i per això són els més habituals a la xarxa. Però no per això són les òptimes per a tots els casos en termes de volum: PNG és el que se’n diu un arxiu amb compressió sense pèrdua o lossless (manté tota la informació originària però és més grossa) mentre que en el JPG la compressió amb pèrdues (lossy) fa que l’arxiu sigui més lleuger però perdi qualitat. 

Si necessiteu incloure imatges fotogràfiques, utilitzeu el format JPG preferiblement, atès que podem aconseguir una mida menor, però si necessitem imatges amb fons transparent, o icones o gràfics poc complexos o linials, és pereferible utilitzar el format PNG, ja que tot i no estar comprimides, per si mateixes haurien d’ocupar poc. Per certs tipus d’imatges, com hem dit abans, és preferible l’ús del format GIF.

Imatges compil·lades (Image sprites)
(traduït de The Low-tech magazine)

Les sprites d’imatges (o el que hem batejat com a imatges compil·lades) combinen diverses imatges petites en una de sola per minimitzar les peticions HTTP. A mode de corroboració, sis fitxers d’imatges (150 x 150 cadascun) sumen 9 KB, mentre que si els ajuntem en una sola imatge combinada (150 x 900) obtenim un fitxer de 6 KB que només es carrega una vegada.

Un cop pujada la imatge, el fitxer CSS la configura com a fons i ajusta la part de la imatge que s’ha de mostrar segons la classe. 

Elements gràfics que hauriem d’evitar:

EINES

- Programaris com Gimp (retoc d’imatges) o Krita (dibuix) ofereixen possibilitats múltiples per reduir la mida de les imatges, canviar el seu format o aplicar la interpol·lació en el procés de guardar. Programari privatiu com Adobe Photoshop també ofereix opcions específiques per guardar els arxius amb format i compressió per web.
- Programaris com Inkscape ens permeten treballar el format vectorial SVG.
- Coneix les possibilitats del format SVG (Scalable Vector Graphics) i el programari Inkscape
- Editors de webs estàtiques: Jekyll (popularitzat per GitHub Pages), Hugo, Pelican, Sutty, Sketch o Publii (desenvolupat per la Free Software Foundation)
- Plugins de caché: WP Super Cache o W3 Total Cache
- Plugins d’optimització d’imatges per a Wordpress