Acceleri el seu lloc web gestionant les imatges com un xef

Les imatges son indispensables en qualsevol lloc web, però si no es gestionen adequadament, poden causar que el lloc web respongui amb lentitud. Comparat al text, les imatges de un lloc web estàndard poden arribar a representar fins a vint vegades més que el lloc web pròpiament dit. Veurem diferents tècniques que es poden aplicar per reduir el efecte de les imatges en un lloc web, però primer, hem d’entendre els diferents tipus d’imatges i com s’estructuren en els fitxers associats.

 

Les imatges amb píxels

Aquestes son la majoria de les imatges que trobem en qualsevol lloc web, els formats més coneguts son: bmp, jpg, png, gif ...

Aquest tipus d’imatge s’enregistra creant una espècie de mapa de punts anomenats “píxels”. Cada punt (o píxel) conté el seu color amb tres bytes, un per cada color primari (vermell, verd i blau) en anglès RGB

Imatge amb píxels
Figura 1.- Exemple d'imatge amb píxels

 

La figura 1 representa una imatge de píxels amb una resolució de 7x10 (7 píxels a l’horitzontal i 10 píxels a la vertical). La imatge de la figura 1 necessitarà doncs 7x10x3 bytes en el seu fitxer associat, és a dir, 210B. Com les imatges tenen dues dimensions, el fitxer associat augmenta de volum de manera exponencial quan augmentem la resolució.

La qualitat de les imatges de píxels va íntimament lligada amb la seva resolució. Per poder veure la imatge de la figura 1 correctament en un ordinador ens caldrà una resolució de 700x1000, cosa que significa que el fitxer associat ocuparà 2.1MB sense compressió (veurem la compressió mes endavant)

 

Les imatges vectorials

Les imatges de vectors (o vectorials) han aparegut amb força relativament recentment i son minoritàries, el format més utilitzat és el “svg”

Aquest tipus de imatge guarda la informació en forma de vectors que representen la imatge i és el navegador que ha de interpretar els vectors i construir la imatge

 

Imatge vectorial
Figura 2.- Exemple d'imatge vectorial

 

La figura 2 ens mostra l’equivalent de la nostra imatge d’exemple en format vectorial. Els vectors no són més que línies que uneixen diferents punts i creen formes geomètriques que poden ser molt complexes. Els vectors son emmagatzemats en el seu fitxer utilitzant un format de text anomenat XML. El fitxer resultant de la figura 2 tindrà una mida inferior a 1KB, però el més important, la seva representació serà sempre perfecte independentment de la resolució de la pantalla.

Podríem pensar que les imatges vectorials haurien de ser sempre utilitzades, però la realitat és que només es poden utilitzar per dibuixos (que a vegades poden ser molt realistes, com es mostra en la figura 3) però no funcionen per les fotos

 

Imatge vectorial complexa
Figura 3.- Imatge vectorial complexa

 

Comprimir les imatges

Sense cap dubte, és la primera tècnica que s’ha d’aplicar ja que és la més fàcil de fer servir. Qualsevol imatge de píxels es pot comprimir reduint així considerablement el volum de les seves dades. El rei de la compressió es el format jpg que tothom coneix. La nostra imatge de la Figura 1 que feia 2.1MB si la comprimim en format jpg només ens ocuparà uns 20KB en funció del factor de compressió que utilitzem. L’inconvenient de la compressió es que la imatge es lleugerament modificada i, a vegades, els efectes de la compressió son visibles

 

Una resolució adaptada a la pantalla  

Com ja hem vist abans, els fitxers de imatges de píxels augmenten molt el volum quan utilitzem resolucions altes. Seria doncs lògic, que si mostrem la imatge en un mòbil, que té una pantalla més petita, la imatge que proporcionem sigui amb una resolució menor que si la mostrem a un ordinador. Un ordinador té una resolució de 1200x900 mentre que un mòbil la seva resolució es aproximadament de 340x480. Per tant, si el nostre servidor envia sempre una imatge de 1200x900 es veurà perfectament en ambdós dispositius, però el mòbil haurà de descarregar un volum molt important de dades que, a més a més, no li serveixen per res. Si sumem, que en un mòbil es probable que estiguem fora de casa i no connectats al WiFi, el problema se’ns multiplica.

En resum, una bona tècnica es la de proporcionar la mateixa imatge, però amb diferents resolucions en funció del suport on la imatge s’utilitza.

 

Utilitzar imatges vectorials sempre que sigui possible

Com ja hem vist, les imatges vectorials no depenen de la resolució i, sovint, necessiten menys dades per representar la imatge equivalent en mapa de píxels. Per tant, s’aconsella utilitzar imatges vectorials sempre que sigui possible. Hi ha molts programes de creació de imatges vectorials en el mercat, nosaltres us aconsellem inkscape que es bastant complert i, a més a més, gratuït

 

Carregar les imatges únicament quan es necessitin

Aquesta tècnica es diu “Lazy loading” o càrrega gandula. El principi es simple, quan carreguem la pàgina web, només les imatges que estan a la pantalla seran carregades i, a mesura que anem baixant en el contingut de la pàgina, les noves imatges es carreguen quan apareixen a la pantalla. Si ens parem a la meitat de la pàgina, totes les imatges que estiguin a la segona part no les haurem carregat mai.

Aquesta és una de les millors tècniques ja que, a més a més, evita el efecte de descarregar totes les imatges de la pàgina al principi que causa en general que moltes connexions en paral·lel es disputin per la capacitat de la connexió

 

kubiiks utilitza tots els mètodes que us hem descrit per optimitzar els seus llocs web, oferint així una experiència d’usuari única

 

Creat : 01-Apr-2020

Descobreixi com les noves tecnologies web el poden ajudar

Rebrà un correu electrònic al més amb explicacions de noves funcionalitats del web

Condiciones d’utilització de dades personals