Com comprimir imatges per a un lloc web

Segons el Web Almanac 2025 d’HTTP Archive, la pàgina d’inici mediana pesava 2,56 MB al mòbil, i 911 KB d’aquest pes eren imatges. A l’ordinador, la pàgina mediana contenia 1.058 KB d’imatges. Les imatges també són el que esperen els visitants: l’element més gran de la pantalla quan es carrega la pàgina, el Largest Contentful Paint (LCP), era una imatge en el 76% de les pàgines per a mòbil.

Les imatges més lleugeres es carreguen abans amb connexions lentes, gasten menys dades mòbils dels teus visitants i et costen menys amplada de banda. L’LCP és una de les Core Web Vitals, les mesures que Google fa servir per valorar l’experiència a la pàgina, de manera que unes imatges pesades poden costar més que uns quants segons de paciència.

La compressió no pot salvar una imatge molt més gran que l’espai que ocupa. Una foto de càmera de 4000 píxels d’amplada, mostrada en una columna de 800 píxels, té 25 vegades més píxels dels que la pàgina pot aprofitar. web.dev assenyala que enviar imatges de mida d’ordinador als telèfons pot consumir 2–4 vegades més dades de les necessàries.

• Bàners d’amplada completa: uns 1600–2000 píxels d’amplada són suficients per a la majoria de dissenys.
• Imatges dins la columna d’un article: aproximadament el doble de l’amplada de la columna, perquè es mantinguin nítides en pantalles d’alta densitat (per exemple, 1400 píxels per a una columna de 700 píxels).
• Miniatures i avatars: el doble de la mida en què es mostren, sovint 200–400 píxels.

El format determina amb quina eficiència es pot desar una imatge. En resum: les fotos van bé en JPG o WebP; els logotips, les captures de pantalla i tot el que tingui transparència, en PNG o WebP. La nostra comparativa de JPG, PNG i WebP explica quan convé cadascun.

Al voltant del 97% dels navegadors en ús mostren WebP, i sovint ocupa força menys. Per provar-lo, converteix amb JPG a WebP o PNG a WebP i compara el resultat amb l’original: un fitxer convertit no sempre és més petit, sobretot en gràfics senzills.

La compressió elimina dades que l’ull difícilment trobarà a faltar. Al compressor d’imatges de Bitinz pots deixar anar un lot de fitxers JPG, PNG o WebP i triar un dels tres nivells:

• Ràpid: prioritza la velocitat, per a lots grans.
• Equilibrat: el nivell predeterminat, i una bona opció per a la majoria d’imatges d’un lloc web.
• Màxim: triga una mica més a canvi de fitxers més petits; val la pena per a les imatges que apareixen a totes les pàgines, com ara bàners i fons.

Si mantens el format, Bitinz mai no et retorna un fitxer més gran que el que has pujat. Compara el resultat amb l’original a mida real, sobretot en imatges amb text fi o degradats suaus, i després baixa les que et convencin.

Una imatge ben comprimida encara pot alentir la pàgina si es carrega en el moment equivocat o amb la mida equivocada. Uns quants atributs HTML fan gairebé tota la feina:

• Indica width i height a cada imatge, perquè el navegador en reservi l’espai i el disseny no salti mentre es carrega.
• Afegeix loading="lazy" a les imatges que queden més avall de la pàgina, perquè només es carreguin quan el visitant s’hi acosti en desplaçar-se.
• No apliquis mai la càrrega diferida a la imatge principal de la part superior de la pàgina. Per a aquesta imatge, web.dev recomana fetchpriority="high", i com a màxim en una o dues imatges.
• Fes servir srcset i sizes per oferir diverses amplades de la mateixa imatge, de manera que els telèfons baixin un fitxer més petit que les pantalles grans.
• Serveix les imatges amb una durada de memòria cau llarga, a través d’una CDN si en tens, perquè els visitants que tornen no les hagin de baixar de nou.

Analitza la pàgina amb PageSpeed Insights o amb el tauler Lighthouse de Chrome. Des de Lighthouse 13, les comprovacions d’imatges s’agrupen en un sol apartat, “Improve image delivery”, que enumera les imatges que es podrien comprimir més, servir en un format modern o fer més petites. Les imatges que estalviarien menys de 4 KiB no hi apareixen, així que una llista curta és bon senyal.

Després, mira tu mateix la pàgina en un telèfon. Les vores nítides, el text dins de les imatges i els tons de pell són on primer es noten els problemes de compressió.

Si el teu lloc web afegeix imatges cada dia, per exemple a través d’un gestor de continguts o d’una botiga en línia, comprimeix-les durant la pujada o la publicació en lloc de fer-ho a mà. L’API per a desenvolupadors de Bitinz rep una imatge per HTTP i retorna un enllaç al fitxer comprimit, de manera que es pot executar des d’un script o un procés de compilació. Tots els comptes tenen una quota mensual gratuïta.

1. 01Ajusta cada imatge a aproximadament el doble de la mida en què es mostra.
2. 02Fes servir JPG o WebP per a fotos, i PNG o WebP per a gràfics i transparències.
3. 03Comprimeix amb el nivell Equilibrat i prova Màxim amb les imatges més grans.
4. 04Compara el resultat amb l’original abans de substituir-lo.
5. 05Indica l’amplada i l’alçada, aplica la càrrega diferida a les imatges que queden fora de la primera pantalla i mai a la imatge principal.
6. 06Torna a comprovar la pàgina a PageSpeed Insights.

Has de pujar imatges a un altre lloc que no sigui el teu web? Cada plataforma té les seves normes: consulta els requisits de mida d’imatge per al correu electrònic i les botigues en línia.