AVIF o WebP per a WordPress el 2027?
Tria el format que lliuri una imatge prou nítida amb el menor cost pràctic al teu web. Prova AVIF en fotografies grans i conserva WebP quan doni un resultat millor o encaixi amb el sistema de lliurament actual. Cap extensió arregla una imatge gegant al mòbil, una capçalera que arriba tard o un zoom de producte borrós. Guanya el fitxer que rep la persona, no la medalla del connector.
Aquesta guia ajuda a planificar el 2027 i està preparada l’octubre de 2026 amb les capacitats documentades disponibles avui. No pressuposa funcions d’una versió futura de WordPress, novetats d’un connector ni pujades automàtiques a Google.
Si has de decidir el format de tot un catàleg, comença amb una mostra petita i representativa. Un paisatge magnífic no pot fer, tot sol, l’entrevista a cinc mil fotografies de producte.
Primer decideix què ha de mostrar cada imatge
Una fotografia de capçalera i una fitxa de producte fan feines diferents. La primera presenta una marca i crea una sensació. La segona pot haver de mostrar la trama d’un teixit, l’acabat d’una peça metàl·lica o una etiqueta petita. Abans de treure pes, concreta quin detall ha de continuar sent visible.
AVIF i WebP ofereixen opcions modernes de compressió, amb capacitats i límits diferents; la guia de formats de MDN en recull les característiques. No hi ha un número de qualitat universal que iguali dos codificadors. Els controls s’han de provar: no són una unitat de mesura compartida.
| Ús | Què comparar | Què pot descartar el fitxer |
|---|---|---|
| Fotografia gran de capçalera | AVIF i WebP amb el retall visible | Pèrdua de textura, canvi de color o descoberta tardana |
| Llistat de productes | Miniatura servida al mòbil i a l’escriptori | Etiquetes il·legibles, descàrregues enormes o retalls incoherents |
| Zoom de producte | Un detall amb una resolució útil | Pèrdua d’informació necessària per valorar la compra |
| Captura d’una interfície | Lletres i línies fines | Text borrós, halos o un fitxer més pesant |
| Gràfic amb transparència | Vores sobre el fons real de la pàgina | Contorns estranys, transparència o color incorrectes |
Hi haurà imatges que valgui la pena deixar tal com estan. Una biblioteca amb diversos formats i un criteri clar es defensa millor que una conversió on tots els noms acaben igual i totes les fotos han empitjorat.
Comprova WordPress i l’allotjament per separat
WordPress va incorporar WebP a la versió 5.8. AVIF va arribar a la 6.5 i depèn del processament d’imatges del servidor. Revisa el tractament dels mèdia a la informació de Salut del lloc. Tenir WordPress actualitzat no demostra que l’allotjament generi els formats AVIF necessaris.
Després, puja una imatge corrent en una còpia controlada del web. Es creen les mides que utilitza el tema? Funciona l’editor de mèdia? Algú de l’equip pot substituir el recurs sense necessitar un rescat tècnic? Conserva l’original i anota’n el resultat. Acceptar una pujada i disposar d’un procés de publicació usable són comprovacions diferents.
Si falta capacitat de processament, demana a l’allotjament o al desenvolupador que ho resolgui. Permetre una extensió al filtre de pujada no instal·la un codificador. En una xarxa multilloc, comprova també els tipus de fitxer admesos al lloc concret.
La compatibilitat del navegador és una altra qüestió. Revisa els dispositius dels clients i els navegadors integrats que siguin rellevants. Un percentatge mundial no substitueix aquesta decisió: en una botiga B2B pot importar molt un ordinador antic del departament de compres que fan servir clients habituals.
Com comparar AVIF i WebP sense fer trampes sense voler
Escull la mostra abans de tocar els controls: producte clar, producte fosc, textura fina, rostre, degradat, vora transparent i captura amb text petit. Afegeix-hi una imatge que acostumi a donar problemes a l’equip editorial. És una proposta de prova, no un assaig que hàgim fet sobre la teva botiga.
- Parteix del mateix original amb la millor qualitat disponible. Evita comparar un AVIF obtingut d’un WebP recomprimit diverses vegades amb un WebP acabat de generar del fitxer mestre.
- Iguala dimensions i retall. Apunta’ls. Una imatge més petita pot guanyar en pes i perdre just el detall necessari.
- Ajusta cada codificador per separat. Busca una qualitat visual acceptable, sense imposar el mateix número a tots dos.
- Mira la mida de presentació real. Obre també el zoom o la vista d’alta densitat quan formin part de la compra.
- Registra bytes i excepcions. Desa l’opció triada, els defectes visibles, el temps de conversió i les imatges que deixaries intactes.
Fes servir el mateix fons i condicions de visualització en la revisió. Mira expressament pell, colors de marca, teixits i lletres petites. La persona responsable del catàleg hauria d’aprovar el detall que influeix en la compra. «A mi em sembla bé» té poc recorregut quan el client ja no distingeix dos acabats.
El full de treball pot ser senzill: recurs, ús, dimensions, pes actual, pes candidat, qualitat acceptada, lliurament comprovat i decisió. Deixa les mesures de rendiment en una altra columna. Desar un fitxer més petit i aconseguir una pàgina més ràpida són preguntes relacionades, però no equivalents.
Si el problema és que la conversió moderna pesa més, tens el diagnòstic específic a per què una imatge WebP pot pesar més que el JPEG original. Aquí triem una política de formats; allà investiguem un resultat inesperat d’una conversió existent.
Mira quina imatge descarrega realment el navegador
Amb la mostra visual aprovada, obre una pàgina real en una finestra estreta i una d’ampla. A la pestanya Xarxa del navegador, identifica la petició de la imatge visible. Anota URL, tipus de contingut, dimensions i mida transferida. Comprova una visita nova i una de repetida sense comparar per accident una resposta en memòria cau amb una altra que encara no hi és.
Si la targeta de producte del mòbil continua descarregant l’original d’escriptori, tornar a comprimir pot estar atacant el problema equivocat. Revisa per què WordPress serveix imatges a mida completa al mòbil abans de convertir la resta. La variant adequada ha d’arribar a la plantilla, no limitar-se a existir en una carpeta.
El lliurament es pot resoldre de diverses maneres. L’element picture permet oferir formats alternatius amb una imatge de reserva. Un CDN pot negociar el format. Comprova el sistema que fa servir el web: instal·lar un altre connector pot afegir regles de conversió i reescriptura que es trepitgen.
Si hi ha negociació, pregunta com distingeix la memòria cau les respostes i com es purga quan es desfà un canvi. Si hi ha fonts alternatives explícites, comprova que la reserva carrega i que l’element d’imatge conserva un text alternatiu adequat. Inspecciona les peticions reals; l’extensió que veus a l’HTML no sempre explica tota la història.
Una capçalera més lleugera també ha d’arribar a temps
La referència d’Almira Kho mostra per què el detall fotogràfic mereix atenció: rostres, cabells i transicions tonals formen part del disseny. La imatge no permet saber quin format serveix aquell web ni si carrega de pressa. Aquí no n’hem auditat el rendiment.
A la teva pàgina, identifica l’element que explica la primera impressió lenta. Reduir bytes pot ser útil i, tot i així, deixar una capçalera tardana. També hi intervenen la descoberta, la planificació de la petició i la renderització; la documentació de Google sobre LCP descriu aquestes parts. Compara l’abans i el després en condicions semblants.
No facis esperar la fotografia principal visible a un activador de desplaçament innecessari. Tampoc donis prioritat màxima a totes les miniatures. Decideix quin element importa a cada plantilla, verifica’n la càrrega i conserva la resta del contingut necessari. Una primera pantalla coherent val més que vint imatges fent-se cops de colze a la cua.
Mesura la pàgina completa després. Desa l’URL, les condicions del dispositiu, la data i els ajustos canviats amb el resultat. Una puntuació de laboratori ajuda a investigar; no demostra una futura posició a Google, l’aprovació de Core Web Vitals amb dades de camp ni vendes addicionals.
Converteix per lots i prepara la tornada enrere
Abans d’una conversió massiva, acorda qui conserva els originals, on es generen les variants i què passa amb els URL existents. Els canals de producte, els correus, els documents descarregables i les integracions poden utilitzar imatges fora del tema principal. Inclou els usos rellevants a l’abast.
Tria quin mecanisme fa la conversió. Si allotjament, CDN i dos connectors diuen que se n’encarreguen, dibuixa el recorregut real abans de canviar-lo. Una regla automàtica nova pot deixar l’editor sense entendre quin recurs acaba publicant.
WordPress ofereix el filtre image_editor_output_format per definir correspondències de sortida. És una eina d’implementació, no un pla de migració complet. Resol a part els fitxers existents, les mides requerides, les regles de lliurament i la recuperació.
Amb la mostra acceptada, comença per una categoria o plantilla acotada. Registra els recursos modificats i els ajustos anteriors. Comprova targetes, galeries, zoom, mòbil i usos externs importants. Atura el lot quan aparegui un defecte repetible: surt més a compte corregir una causa que fabricar el mateix error per tot el catàleg.
La conversió també necessita marge operatiu. Pregunta on es processa, si les pujades poden quedar en cua i com veu els errors un editor. Evita ajuntar una regeneració gran amb el llançament d’una campanya sense acordar qui la supervisa i què obliga a aturar-la.
Què demanar a un servei d’optimització d’imatges
Un encàrrec útil identifica les plantilles afectades, el problema visible i el detall que s’ha de conservar. Afegeix URL d’exemple i indica si parlem de capçalera, llistats, galeries o pujades de l’equip. La conversa pot començar sense enviar contrasenyes per correu ni exportar tots els clients.
Demana una mostra acordada, una estratègia de lliurament, excepcions documentades i un desplegament controlat. L’acceptació hauria d’incloure el recurs servit al mòbil, l’aprovació visual del responsable del catàleg, una comprovació de pàgina repetible i la manera de recuperar l’estat anterior. Delimita què queda fora: redisseny, migració d’allotjament o substitució de tota la fotografia, per exemple.
El servei d’optimització d’imatges de WordPress treballa amb aquest abast: localitzar la capa que falla, acordar la mostra i verificar el lliurament abans d’ampliar el lot. Si les imatges ja són eficients, la millora útil pot ser a la plantilla o a les regles de càrrega.
Dubtes abans de triar format per al 2027
Convé convertir totes les imatges de WordPress a AVIF?
No. Tria’l quan ho justifiquin la mostra, el procés editorial i el lliurament real. Conserva excepcions si el fitxer empitjora, pesa més o necessita un altre tractament.
Passar a AVIF millora el SEO automàticament?
El canvi de format no compromet una posició. Comprova que les imatges siguin el coll d’ampolla i mesura la pàgina completa. Separa l’acceptació tècnica de la feina de l’evolució posterior als cercadors.
Cal canviar tots els URL de les imatges?
No necessàriament. Pregunta com gestiona la solució triada els originals, les variants, la memòria cau i les referències externes. Acorda i prova aquest comportament abans de convertir a gran escala.
Què trio si no puc mantenir un sistema complicat?
Tria un procés que l’equip sàpiga publicar, comprovar i recuperar. Uns fitxers acceptables una mica més grans poden ser una decisió operativa millor que una configuració sofisticada sense responsable.