Dominant l'Optimització d'Imatges: Com Accelerar la Velocitat de la teva Web
En la recerca incansable del rendiment del lloc web, els desenvolupadors sovint passen hores minimitzant JavaScript, ajustant CSS i ajustant els temps de resposta del servidor. Tot i que aquestes optimitzacions són importants, sovint es troben a faltar l'elefant de l'habitació: Imatges.
Segons l'Arxiu HTTP, les imatges representen més del 60% del total de bytes descarregats a la pàgina web mitjana. Una única imatge de fons no optimitzada pot pesar més que tot el vostre paquet de React, el vostre marc CSS i tots els vostres tipus de lletra personalitzats combinats.
Les imatges no optimitzades causen retards greus en la representació de la pàgina, frustrant els usuaris i fent que les taxes de rebot es disparin. A més, Google penalitza fortament els llocs web lents mitjançant les seves mètriques Core Web Vitals (específicament la pintura de contingut més gran o LCP).
Si voleu que el vostre lloc web ocupi un lloc alt i se senti ràpid, dominar l'optimització d'imatges no és opcional. Aquí teniu la guia definitiva per optimitzar imatges per a la web moderna.
1. Trieu el format adequat
S'han acabat els dies de simplement desar-ho tot com a JPEG o PNG. L'elecció del format de fitxer correcte és la base de l'optimització.
JPEG (Grup conjunt d'experts en fotografia)
- El millor per a: Fotografies complexes amb milions de colors, degradats i ombres. - Pros: Suport universal, compressió decent. - Contres: Compressió amb pèrdua (els artefactes apareixen de baixa qualitat), no admet la transparència.
PNG (gràfics de xarxa portàtils)
- El millor per a: Logotips, icones, gràfics i imatges que requereixen un fons transparent. - Pros: Qualitat sense pèrdues, admet transparència (canal alfa). - Contres: Mides massives de fitxers per a fotografies complexes. No utilitzeu mai PNG per a una imatge d'heroi a pantalla completa d'un paisatge!
WebP (l'estàndard modern)
Desenvolupat per Google, WebP ara és compatible amb tots els principals navegadors moderns. - El millor per a: Gairebé tot. Substitueix tant JPEG com PNG. - Pros: Ofereix compressió amb pèrdues i sense pèrdues. Una imatge WebP amb pèrdues sol ser d'un 25% a un 35% més petita que una imatge JPEG comparable, i una WebP sense pèrdues és un 26% més petita que un PNG. També admet la transparència. - Contres: Els navegadors més antics (com IE11) no ho admeten, i requereixen una alternativa.
AVIF (The Bleeding Edge)
AVIF és un format encara més nou derivat del còdec de vídeo AV1. Rutinàriament supera WebP, oferint mides de fitxer fins a un 50% més petites que els JPEG amb una qualitat increïble. El suport del navegador està creixent ràpidament, però encara heu de proporcionar alternatives WebP o JPEG mitjançant l'element HTML '<'picture'>'.
2. Canvia la mida a les dimensions exactes de la pantalla
L'error més comú que cometen els desenvolupadors és publicar una imatge de 4000 x 3000 píxels directament des d'una càmera digital per mostrar-la en un petit avatar d'imatge de perfil de 300 x 300 píxels.
Fins i tot si comprimiu la imatge de 4000 píxels, esteu forçant el telèfon mòbil de l'usuari a descarregar milions de píxels innecessaris, mantenir-los a la memòria i utilitzar la potència de la CPU per reduir la imatge per adaptar-se a la pantalla.
La regla: No publiqueu mai una imatge més gran que el contenidor on viu.
Si l'àrea de contingut del vostre bloc té una amplada màxima de 800 píxels, canvieu la mida de totes les imatges del bloc a exactament 800 píxels d'amplada abans de penjar-les. Per a les pantalles d'alt DPI (Retina), podeu proporcionar una imatge el doble de la mida (1600px), però utilitzeu l'atribut HTML srcset perquè les pantalles estàndard només baixin la versió més petita.
3. Compressió agressiva (perdudes vs sense pèrdues)
Un cop escollit el format i les dimensions correctes, és el moment de comprimir.
- Compressió sense pèrdues: elimina les metadades invisibles (com les dades EXIF que detallen el model de la càmera, les coordenades GPS i la data de presa) i optimitza l'estructura de dades sense alterar ni un sol píxel de la imatge visual. - Compressió amb pèrdues: llença de manera intel·ligent dades visuals que l'ull humà no pot percebre fàcilment.
Per al web, gairebé sempre hauríeu d'utilitzar Compressió amb pèrdues. Marcar un JPEG o WebP fins a un 75% o un 80% de qualitat reduirà dràsticament la mida del fitxer (sovint a la meitat) mentre no es pot distingir visualment de l'original per a l'usuari mitjà.
4. Implementa la càrrega mandrosa nativa
Fins i tot si les vostres imatges estan perfectament optimitzades, baixar 50 imatges al mateix temps quan un usuari obre una pàgina per primera vegada paralitzarà la seva connexió a la xarxa.
La càrrega mandrosa soluciona això indicant al navegador que només baixi les imatges que es poden veure actualment a la pantalla. Les imatges més avall de la pàgina només es descarreguen quan l'usuari es desplaça a prop d'elles.
L'HTML modern fa que això sigui increïblement fàcil. Simplement afegiu l'atribut loading="lazy" a les vostres etiquetes '<'img'>':
<img src="optimized-photo.webp" alt="Bon paisatge" loading="lazy" width="800" height="600">Nota: Incloeu sempre els atributs "amplada" i "alçada"! Això reserva l'espai a la pàgina abans que es carregui la imatge, evitant molestos "canvis de disseny" que arruïnen l'experiència de l'usuari.
Conclusió
L'optimització d'imatges és la fruita més baixa en el rendiment web. Si canvieu a WebP, canvieu la mida de les imatges a les seves dimensions de visualització, apliqueu una compressió amb pèrdues i utilitzeu la càrrega mandrosa, podeu reduir fàcilment megabytes de la mida de càrrega de la pàgina.
Preparat per començar a optimitzar? Utilitzeu el convertidor d'imatges totalment gratuït, segur i que prioritza la privadesa aquí mateix a UtilX per convertir, canviar la mida i comprimir els vostres actius directament al vostre navegador!