Evaluación inicial sin contraseñas Presupuesto antes de intervenir Especialista responsable de principio a fin

Images And Responsive Media

AVIF o WebP en WordPress en 2027: qué formato elegir

AVIF o WebP en WordPress en 2027: calidad, compatibilidad del alojamiento y entrega en móvil antes de convertir todas las imágenes del catálogo.

Portfolio fotográfico de Almira Kho con grandes retratos editoriales e interfaz sobria
Referencia visual: Almira Kho — Photography, acreditada en Awwwards a Anastasiya Viachorka y Colin Demouge. Fotografía: Almira Kho. Referencia de diseño; no es un proyecto nuestro, una comparativa de compresión ni una auditoría de rendimiento.

¿AVIF o WebP para WordPress en 2027?

Elige el formato que entregue una imagen suficientemente nítida con el menor coste práctico en tu web. Prueba AVIF en fotografías grandes y conserva WebP donde dé mejor resultado o encaje con la entrega que ya tienes. Ninguna extensión arregla una imagen gigante en móvil, una portada que llega tarde o un zoom de producto borroso. Gana el archivo que recibe la persona, no la medallita del plugin.

Esta guía sirve para planificar 2027 y está preparada en octubre de 2026 con las capacidades documentadas disponibles hoy. No presupone funciones de una futura versión de WordPress, mejoras de un plugin ni subidas automáticas en Google.

Si estás eligiendo formato para todo un catálogo, empieza por una muestra pequeña y representativa. Una foto de paisaje estupenda no puede entrevistar, ella sola, a cinco mil fotografías de producto.

Primero decide qué necesita mostrar cada imagen

Una fotografía de portada y una ficha de producto tienen trabajos distintos. La primera presenta una marca y crea una sensación. La segunda puede necesitar enseñar la trama de un tejido, el acabado de una pieza metálica o una etiqueta pequeña. Antes de quitar peso, concreta qué detalle tiene que seguir viéndose.

AVIF y WebP ofrecen opciones modernas de compresión, con capacidades y límites diferentes; la guía de formatos de MDN permite consultar sus características. No existe un número de calidad universal que iguale dos codificadores. Sus controles se prueban: no son una unidad de medida compartida.

Punto de partida para una muestra, sin resultados garantizados
Uso Qué comparar Qué puede descartar el archivo
Fotografía grande de portada AVIF y WebP con el recorte visible Pérdida de textura, cambio de color o descubrimiento tardío
Listado de productos Miniatura servida en móvil y escritorio Etiquetas ilegibles, descargas enormes o recortes incoherentes
Zoom de producto Un detalle con resolución útil Pérdida de información necesaria para valorar la compra
Captura de una interfaz Letras y líneas finas Texto borroso, halos o un archivo más pesado
Gráfico con transparencia Bordes sobre el fondo real de la página Contornos extraños, transparencia o color incorrectos

Habrá imágenes que convenga dejar como están. Una biblioteca con varios formatos y un criterio claro se defiende mejor que una conversión donde todos los nombres terminan igual y todas las fotos han empeorado.

Comprueba WordPress y el alojamiento por separado

WordPress incorporó WebP en la versión 5.8. AVIF llegó en la 6.5 y depende del procesamiento de imágenes del servidor. Revisa «Tratamiento de medios» en la información de Salud del sitio. Tener WordPress actualizado no demuestra que el alojamiento genere los tamaños AVIF necesarios.

Después, sube una imagen corriente en una copia controlada de la web. ¿Se crean los tamaños que utiliza el tema? ¿Funciona el editor de medios? ¿Puede una persona del equipo sustituir el recurso sin necesitar un rescate técnico? Conserva el original y anota el resultado. Aceptar una subida y tener un proceso de publicación usable son comprobaciones diferentes.

Si falta capacidad de procesamiento, pide al alojamiento o al desarrollador que la resuelva. Permitir una extensión en el filtro de subida no instala un codificador. En una red multisitio, comprueba además los tipos de archivo permitidos para esa web concreta.

La compatibilidad del navegador va por otro lado. Revisa los dispositivos de tus clientes y los navegadores integrados que sean relevantes. Un porcentaje mundial no sustituye esa decisión: en una tienda B2B puede importar mucho un ordenador de compras antiguo que utilizan clientes habituales.

Cómo comparar AVIF y WebP sin hacer trampas sin querer

Elige la muestra antes de tocar los controles: producto claro, producto oscuro, textura fina, rostro, degradado, borde transparente y captura con texto pequeño. Añade una imagen que suela dar problemas al equipo editorial. Es una propuesta de prueba, no un ensayo que hayamos realizado sobre tu tienda.

  1. Parte del mismo original de la mejor calidad disponible. Evita enfrentar un AVIF obtenido de un WebP recomprimido varias veces con un WebP recién sacado del archivo maestro.
  2. Iguala dimensiones y recorte. Apúntalos. Una imagen más pequeña puede ganar en peso y perder justo el detalle necesario.
  3. Ajusta cada codificador por separado. Busca una calidad visual aceptable, sin imponer el mismo número a ambos.
  4. Mira el tamaño de presentación real. Abre también el zoom o la vista de alta densidad cuando formen parte de la compra.
  5. Registra bytes y excepciones. Guarda la opción elegida, los defectos visibles, el tiempo de conversión y las imágenes que dejarías intactas.

Utiliza el mismo fondo y condiciones de visualización al revisar. Mira expresamente piel, colores de marca, tejidos y letras pequeñas. La persona responsable del catálogo debería aprobar el detalle que influye en la compra. «A mí me parece bien» tiene poco recorrido cuando el cliente ya no distingue dos acabados.

La hoja de trabajo puede ser sencilla: recurso, uso, dimensiones, peso actual, peso candidato, calidad aceptada, entrega comprobada y decisión. Deja las mediciones de rendimiento en otra columna. Guardar un archivo más pequeño y conseguir una página más rápida son preguntas relacionadas, pero no equivalentes.

Si el problema es que la conversión moderna pesa más, tienes el diagnóstico específico en por qué una imagen WebP puede pesar más que el JPEG original. Aquí elegimos una política de formatos; allí investigamos un resultado inesperado de una conversión existente.

Mira qué imagen descarga realmente el navegador

Con la muestra visual aprobada, abre una página real en una ventana estrecha y otra ancha. En la pestaña Red del navegador, identifica la petición de la imagen visible. Anota URL, tipo de contenido, dimensiones y tamaño transferido. Comprueba una visita nueva y otra repetida sin comparar por accidente una respuesta en caché con otra que aún no lo está.

Si la tarjeta de producto móvil continúa descargando el original de escritorio, comprimir otra vez puede estar atacando el problema equivocado. Revisa por qué WordPress sirve imágenes a tamaño completo en móvil antes de convertir el resto. La variante adecuada tiene que llegar a la plantilla, no limitarse a existir en una carpeta.

La entrega puede resolverse de varias maneras. El elemento picture permite ofrecer formatos alternativos con una imagen de respaldo. Un CDN puede negociar el formato. Comprueba el sistema que utiliza tu web: instalar otro plugin puede sumar reglas de conversión y reescritura que se pisan.

Si hay negociación, pregunta cómo distingue la caché las respuestas y cómo se purga al deshacer un cambio. Si hay fuentes alternativas explícitas, comprueba que el respaldo carga y que el elemento de imagen conserva un texto alternativo adecuado. Inspecciona las peticiones reales; la extensión que ves en el HTML no siempre cuenta toda la historia.

Una portada más ligera también tiene que llegar a tiempo

La referencia de Almira Kho muestra por qué el detalle fotográfico merece atención: rostros, pelo y transiciones tonales forman parte del diseño. La imagen no permite saber qué formato sirve esa web ni si carga rápido. Aquí no hemos auditado su rendimiento.

En tu página, identifica el elemento que explica la primera impresión lenta. Reducir bytes puede ser útil y aun así dejar una portada tardía. También intervienen el descubrimiento, la planificación de la petición y el renderizado; la documentación de Google sobre LCP describe esas partes. Compara el antes y el después en condiciones semejantes.

No hagas esperar la fotografía principal visible a un disparador de desplazamiento innecesario. Tampoco des máxima prioridad a todas las miniaturas. Decide qué elemento importa en cada plantilla, verifica su carga y conserva el resto del contenido necesario. Una primera pantalla coherente vale más que veinte imágenes dándose codazos en la cola.

Mide la página completa después. Guarda URL, condiciones de dispositivo, fecha y ajustes cambiados junto al resultado. Una puntuación de laboratorio ayuda a investigar; no demuestra un futuro puesto en Google, la aprobación de Core Web Vitals con datos de campo ni ventas adicionales.

Convierte por lotes y deja preparada la vuelta atrás

Antes de una conversión masiva, acuerda quién conserva los originales, dónde se generan las variantes y qué ocurre con las URLs existentes. Los feeds de producto, los correos, los documentos descargables y las integraciones pueden usar imágenes fuera del tema principal. Incluye los usos relevantes en el alcance.

Elige qué mecanismo hace la conversión. Si alojamiento, CDN y dos plugins dicen encargarse, dibuja el recorrido real antes de cambiarlo. Una regla automática nueva puede dejar al editor sin entender qué recurso acaba publicando.

WordPress ofrece el filtro image_editor_output_format para definir correspondencias de salida. Es una herramienta de implementación, no un plan de migración completo. Resuelve aparte los archivos existentes, los tamaños requeridos, las reglas de entrega y la recuperación.

Con la muestra aceptada, empieza por una categoría o plantilla acotada. Registra los recursos modificados y los ajustes anteriores. Comprueba tarjetas, galerías, zoom, móvil y usos externos importantes. Detén el lote cuando aparezca un defecto repetible: sale mejor corregir una causa que fabricar el mismo fallo por todo el catálogo.

La conversión también necesita espacio operativo. Pregunta dónde se procesa, si las subidas pueden quedar en cola y cómo ve un editor los fallos. Evita juntar una regeneración grande con el lanzamiento de una campaña sin acordar quién la supervisa y qué obliga a pararla.

Qué pedir a un servicio de optimización de imágenes

Un encargo útil identifica las plantillas afectadas, el problema visible y el detalle que debe conservarse. Añade URLs de ejemplo e indica si hablamos de portada, listados, galerías o subidas del equipo. Esa conversación puede empezar sin enviar contraseñas por correo ni exportar todos los clientes.

Pide una muestra acordada, una estrategia de entrega, excepciones documentadas y un despliegue controlado. La aceptación debería incluir el recurso servido en móvil, la aprobación visual del responsable del catálogo, una comprobación de página repetible y la forma de recuperar el estado anterior. Delimita lo que queda fuera: rediseño, migración de alojamiento o sustitución de toda la fotografía, por ejemplo.

El servicio de optimización de imágenes WordPress trabaja con ese alcance: localizar la capa que falla, acordar la muestra y verificar la entrega antes de ampliar el lote. Si las imágenes ya son eficientes, la mejora útil puede estar en la plantilla o sus reglas de carga.

Dudas antes de elegir formato para 2027

¿Conviene convertir todas las imágenes de WordPress a AVIF?

No. Elígelo donde lo justifiquen la muestra, el proceso editorial y la entrega real. Conserva excepciones cuando el archivo empeore, pese más o necesite otro tratamiento.

¿Pasar a AVIF mejora el SEO automáticamente?

El cambio de formato no compromete una posición. Comprueba que las imágenes sean el cuello de botella y mide la página completa. Separa la aceptación técnica del trabajo de su evolución posterior en buscadores.

¿Hay que cambiar todas las URLs de las imágenes?

No necesariamente. Pregunta cómo gestiona la solución elegida los originales, las variantes, la caché y las referencias externas. Acuerda y prueba ese comportamiento antes de convertir a gran escala.

¿Qué elijo si no puedo mantener un sistema complicado?

Elige un proceso que tu equipo sepa publicar, comprobar y recuperar. Unos archivos aceptables algo mayores pueden ser una decisión operativa mejor que una configuración sofisticada sin responsable.

ANTES DE ENVIAR LA SOLICITUD

Preguntas frecuentes.

¿Pedís contraseñas en el formulario?+

No. El formulario público nunca solicita accesos. Los datos seguros se piden únicamente después de aprobar el alcance y el presupuesto.

¿Quién revisa la incidencia?+

La solicitud llega a Jordi Ensenyat, fundador de Code Barcelona y especialista WordPress con más de 15 años de experiencia.

¿Se cambia algo antes del presupuesto?+

No. Primero se revisan los síntomas visibles y se define el alcance. La intervención empieza tras la aprobación y con una vía de vuelta preparada.

¿Trabajáis con webs en inglés y fuera de España?+

Sí. WP Repair atiende incidencias WordPress y WooCommerce en inglés y español, con servicio remoto.

Evaluar mi incidencia↗