Com comprimir imatges per a una pàgina web

Per què optimitzar imatges millora una web

Les imatges solen representar una part important de les dades descarregades per una pàgina. Un fitxer gran retarda laparició del contingut, consumeix més dades mòbils i pot empitjorar lexperiència del visitant. L'optimització combina tres decisions: dimensions, format i nivell de compressió.

No hi ha cap límit perfecte per a totes les imatges. Una miniatura hauria de pesar molt menys que una fotografia que ocupa tota la pantalla. L'objectiu és lliurar suficients píxels i qualitat per a l'espai real, sense obligar el navegador a descarregar informació que no utilitzarà.

Flux recomanat pas a pas

1. Identifica l'amplada màxima amb què la imatge apareixerà al disseny.
2. Retalla l'enquadrament abans de comprimir per no conservar zones que seran eliminades.
3. Tria el format segons el contingut i la necessitat de transparència.
4. Obre el fitxer al compressor d'imatges i prova una qualitat mitjana-alta.
5. Compara el pes i examina text, vores, cares i degradats.
6. Publica el resultat i comprova la pàgina en mòbil i escriptori.

Dimensions: evita pujar més píxels dels necessaris

Si una targeta mostra una imatge a 600 píxels d'amplada, carregar una fotografia de 5000 píxels sol ser un malbaratament. El navegador la reduirà visualment, però abans haureu de descarregar el fitxer complet. Prepara una versió propera a la mida màxima requerida pel disseny.

Per a pantalles d'alta densitat pot ser útil proporcionar una versió aproximadament dues vegades més gran, però l'ideal és que el lloc faci servir imatges responsives amb srcset y sizes. Així cada dispositiu descarrega una variant apropiada en comptes del mateix fitxer gegant.

Quin format triar

• JPG: bona compatibilitat i mida raonable per a fotografies sense transparència.
• WebP: útil per a fotos i gràfics web; pot conservar transparència i oferir fitxers compactes.
• PNG: apropiat per a transparència, captures amb text nítid i gràfics simples; pot pesar molt en fotografies.
• SVG: ideal per a logotips i icones vectorials quan l'arxiu és segur i el disseny es va crear com a vector.

Convertir de format no garanteix un fitxer menor. Compara sempre el resultat i conserva el format original quan ja sigui lopció més eficient. Consulta la comparació entre JPG, PNG i WebP si no saps quina triar.

Com triar la qualitat de compressió

Comença amb un ajustament que prioritzi l'aparença i baixa a poc a poc. Les fotografies toleren millor la compressió que les captures interfície, els diagrames i el text petit. Si apareixen halos, blocs o vores borroses, augmenta la qualitat o prova un altre format.

Avalua el fitxer dins de la pàgina, no només en una vista ampliada. Una petita diferència que resulta visible al 300% potser no es noti a mida normal; en canvi, una lletra il·legible en una targeta sí que és un problema real.

La compressió no substitueix una bona implementació

A més d'optimitzar el fitxer, reserva l'espai amb atributs width y height per evitar salts de contingut. Fes servir càrrega diferida en imatges que estan fora del primer bloc visible, però no retardis la imatge principal si és necessària per entendre la pàgina.

També convé definir una memòria cau llarga per a fitxers amb nom versionat i evitar carregar la mateixa imatge en diverses resolucions mitjançant CSS. Aquestes decisions requereixen canvis al lloc, però complementen lestalvi aconseguit durant la compressió.

Errors comuns

Comprimir abans de decidir la mida

Redimensionar després obliga a processar dues vegades el fitxer i pot acumular pèrdua. Decideix primer l'enquadrament i les dimensions; comprimeix al final.

Convertir captures de pantalla a JPG amb qualitat baixa

Les lletres i línies fines poden produir taques. Prova PNG o WebP amb una qualitat més gran i compara el pes.

Usar una imatge petita com a capçalera

Ampliar-la no recupera cap detall. Parteix d'una font prou gran i genera variants més petites des d'aquesta versió.

Preguntes freqüents

Quant ha de pesar una imatge web?

Depèn de les seves dimensions, importància i complexitat. Usa com a criteri el menor pes que mantingui una qualitat acceptable en la seva mida final, en comptes de perseguir una xifra universal.

He de convertir totes les imatges a WebP?

No necessàriament. WebP és útil, però un PNG simple o un fitxer ja optimitzat pot no millorar. Converteix una mostra, mesura i conserva els originals.

Comprimir imatges millora per si sol el posicionament?

Ajuda a l'experiència i al rendiment, però el posicionament també depèn de contingut útil, rastreig, enllaços, intenció de cerca i molts altres senyals. La compressió és una part duna web ben preparada.