Millors formats d'imatge per al rendiment web el 2026 | Bulk Image Compressor
Les imatges són el teu problema de rendiment més gran
A la majoria de llocs web, les imatges representen entre el 40 i el 60% del pes total de la pàgina. Si la teva pàgina carrega lentament, les imatges en són probablement la raó principal. Una sola imatge hero no optimitzada pot ser més gran que tot el teu HTML, CSS i JavaScript combinats.
Això importa per als usuaris (ningú espera 5 segons perquè es carregui una pàgina) i per al posicionament als cercadors. Els Core Web Vitals de Google mesuren directament la rapidesa amb què apareix el teu contingut, i les imatges gairebé sempre són el coll d’ampolla.
Core Web Vitals i imatges
Tres mètriques componen els Core Web Vitals, i les imatges les afecten totes:
Largest Contentful Paint (LCP) mesura quant de temps triga a carregar l’element visible més gran. A la majoria de pàgines, això és una imatge. Google considera “bo” qualsevol valor inferior a 2,5 segons. Una imatge hero de 3 MB en una connexió lenta superarà aquest límit amb escreix.
Cumulative Layout Shift (CLS) mesura quant es mou la pàgina mentre es carrega. Les imatges sense dimensions d’amplada i alçada especificades provoquen canvis de layout perquè el navegador no sap quant espai reservar fins que la imatge es descarrega.
Interaction to Next Paint (INP) mesura la capacitat de resposta. Les imatges grans que bloquegen el fil principal durant la descodificació poden perjudicar aquesta puntuació, especialment en dispositius mòbils.
La solució per a tots tres comença amb l’ús del format i el nivell de compressió adequats.
Comparació de formats per al 2026
JPEG
Encara funciona. Encara compatible a tot arreu. Però per al rendiment web específicament, ara hi ha opcions millors. Els fitxers JPEG solen ser un 25-35% més grans que WebP a la mateixa qualitat, i no admeten transparència.
Utilitza JPEG quan necessitis compatibilitat fora del web: fitxers adjunts d’email, documents, pujades a xarxes socials que no acceptin WebP.
PNG
El mateix. PNG és perfecte per a captures de pantalla, logotips i gràfics, però les mides dels fitxers són més grans que les alternatives modernes. Per a imatges web sense pèrdua, WebP lossless produeix fitxers més petits.
Utilitza PNG quan necessitis compartir fitxers que s’obriran en editors d’imatges, o quan necessitis compatibilitat garantida en contextos no navegadors.
WebP
WebP s’ha convertit en el format d’imatge web per defecte el 2026. El suport del navegador és universal a Chrome, Firefox, Safari i Edge. Les CDN i els serveis d’imatges serveixen WebP automàticament. La majoria de plataformes CMS gestionen WebP de forma nativa ara.
Les xifres parlen per si soles: un 25-35% més petit que JPEG per a fotos, un 25% més petit que PNG per a gràfics, amb la mateixa qualitat visual. Admet lossy, lossless, transparència i animació.
Si només has de triar un format per al teu lloc web, WebP és l’opció òbvia avui dia. Per a una comparació més detallada amb JPEG i PNG, consulta la nostra comparativa JPEG vs PNG vs WebP.
AVIF: el següent pas
AVIF es basa en el codec de vídeo AV1 i porta l’eficiència de compressió encara més lluny. Els fitxers AVIF solen ser un 20-30% més petits que WebP, cosa que els fa aproximadament un 50% més petits que JPEG.
El suport del navegador ha millorat significativament. Chrome, Firefox i Safari admeten AVIF ara. Edge també el suporta. L’inconvenient principal és la velocitat de codificació: crear fitxers AVIF triga considerablement més que WebP o JPEG. Per a un lloc amb milers d’imatges, el temps de codificació s’acumula.
Val la pena utilitzar AVIF si el teu procés de build pot gestionar el temps de codificació. Per a la majoria de llocs, servir AVIF amb una alternativa WebP és la configuració ideal.
Imatges responsives amb srcset
Triar el format adequat és només la meitat de l’equació. També has de servir la mida adequada.
Un visitant amb un telèfon de pantalla de 390px d’amplada no necessita una imatge de 1920px. L’atribut srcset et permet proporcionar múltiples mides i deixar que el navegador triï la millor:
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
alt="Foto del producte"
width="1200"
height="800"
loading="lazy"
>Això li diu al navegador: en pantalles petites, utilitza la versió de 400px. En pantalles mitjanes, utilitza 800px. En pantalles grans, utilitza 1200px. L’estalvi d’ample de banda en mòbils és significatiu.
Fixa’t també en l’atribut loading="lazy". Això li diu al navegador que només carregui la imatge quan es desplaci fins a la vista. No utilitzis lazy loading a la teva imatge LCP (la primera imatge gran que veu l’usuari), però utilitza’l a tot el que estigui per sota del plec.
Recomanacions de format per tipus de contingut
Imatges hero i bàners: AVIF amb alternativa WebP. Aquestes són les teves imatges més grans i es beneficien més d’una millor compressió. Serveix amb una amplada màxima de 1920px, amb variants srcset més petites per a mòbils.
Fotos de producte: WebP lossy amb qualitat 80. Per al comerç electrònic, pots servir centenars d’imatges de producte per pàgina de categoria. Fins i tot una reducció del 10% de mida per imatge s’acumula ràpidament.
Imatges d’entrades de blog: WebP lossy amb qualitat 75-82. Les imatges de blog normalment es mostren amb una amplada de 800-1200px, així que no cal que siguen enormes. Redimensiona-les abans de comprimir.
Icones i logotips: SVG sempre que sigui possible. Per a logotips rasteritzats, WebP lossless o PNG. Aquests fitxers són petits de totes maneres, així que l’elecció del format importa menys aquí.
Captures de pantalla i diagrames: WebP lossless o PNG. Tots dos preserven el text i les vores nítides perfectament. WebP ofereix fitxers aproximadament un 25% més petits.
Contingut pujat per usuaris: Processa tot a WebP en pujar-lo. Utilitza Bulk Image Compressor per convertir per lots si estàs migrant biblioteques d’imatges existents.
Guany ràpids per a la velocitat de pàgina
Si vols millorar el rendiment d’imatges del teu lloc avui, aquí tens els canvis d’alt impacte:
- Canvia a WebP per a totes les imatges web. Només això pot reduir la càrrega d’imatges entre un 25 i un 35%.
- Redimensiona les imatges a les dimensions en què es mostren realment. No serveixis una foto de 4000px en un contenidor de 600px.
- Afegeix atributs d’amplada i alçada a cada etiqueta img. Això evita canvis de layout.
- Fes lazy loading de les imatges per sota del plec. Només les primeres imatges visibles s’haurien de carregar immediatament.
- Precarrega la teva imatge LCP si és un hero estàtic. Utilitza
<link rel="preload" as="image" href="hero.webp">a l’encapçalament del teu document. - Utilitza una CDN que serveixi imatges des de ubicacions properes als teus visitants.
I el futur?
JPEG XL era un altre format prometedor, però l’adopció als navegadors es va estancar. Chrome va eliminar el seu suport experimental, i sense Chrome, l’adopció generalitzada és poc probable. AVIF és l’opció més pràctica de cara al futur.
La tendència és clara: els formats més nous comprimeixen millor, i el suport dels navegadors es posa al dia amb el temps. WebP és el valor segur per defecte ara mateix. Val la pena adoptar AVIF si les teves eines ho permeten. Sigui com sigui, l’elecció del format combinada amb un dimensionament adequat i lazy loading evitarà que les teves imatges siguin un coll d’ampolla de rendiment.
Per a més informació sobre com funciona la compressió d’imatges a nivell tècnic, la nostra guia sobre per què les imatges web necessiten compressió cobreix els fonaments.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor