WebP para TYPO3

Las imágenes representan entre el 50 y el 70 por ciento del peso de una página, y WebP las reduce en un tercio

Un sitio TYPO3 medio carga entre 2 y 5 MB de datos de imagen por página. Es el mayor factor individual del tiempo de carga y, por tanto, del Google PageSpeed Score. WebP es un formato de imagen desarrollado por Google que, con calidad comparable, ocupa entre un 25 y un 35 por ciento menos que JPEG y hasta un 80 por ciento menos que PNG. La extensión WebP para TYPO3 convierte automáticamente las imágenes JPG y PNG existentes en WebP sin que los redactores tengan que cambiar su comportamiento. Las imágenes se suben como siempre al backend FAL, la extensión genera la variante WebP en segundo plano y la entrega a los navegadores que soportan el formato. Todos los navegadores modernos soportan WebP desde 2020: Chrome, Firefox, Safari, Edge.

Para sitios ya optimizados en PageSpeed, la conversión a WebP suele ser el último paso que eleva la puntuación de 85 a 95 o más.

Los escenarios típicos afectan a sitios con mucha imagen, comercio electrónico y proyectos mobile-first

El escenario más frecuente son los sitios corporativos con mucha imagen. Un portal inmobiliario muestra entre 15 y 25 fotos por cada inmueble. Con 500 inmuebles, son 10.000 imágenes. Sin WebP, las imágenes pesan de media 250 KB (JPEG); con WebP, 170 KB. En una vista de listado con 20 inmuebles y una imagen principal cada uno, WebP ahorra 1,6 MB por cada carga de página. Con 50.000 cargas de página al mes, son 80 GB menos de tráfico, con impacto directo en los costes de hosting.

Un segundo escenario son las integraciones de comercio electrónico. Una tienda muestra las imágenes de producto en varios tamaños: miniatura, listado, detalle y zoom. Para cada tamaño se genera una variante WebP. En una tienda con 2.000 productos y cinco variantes de imagen cada uno, se generan 10.000 archivos WebP que aceleran de forma mensurable la carga de la vista de listado.

Tercer escenario: sitios mobile-first para públicos con conexión de red deficiente. Un portal de una ONG utilizado en regiones con redes 3G se beneficia de forma desproporcionada de los archivos de imagen más pequeños. La diferencia entre 5 segundos y 15 segundos de tiempo de carga decide si el visitante ve la página o la abandona.

La arquitectura técnica convierte las imágenes dentro del pipeline de procesado de TYPO3

La extensión se engancha en el pipeline de procesado de imágenes de TYPO3. Cuando TYPO3 procesa una imagen (redimensionado, recorte), la extensión genera adicionalmente una variante WebP en el mismo directorio. La entrega se realiza vía Content Negotiation: el servidor comprueba la cabecera Accept del navegador. Si el navegador acepta “image/webp”, envía el archivo WebP. De lo contrario, el JPEG/PNG original.

Técnicamente hay dos variantes de implementación: la primera utiliza reglas mod_rewrite en Apache o nginx que redirigen las peticiones de imagen a la variante WebP cuando existe. La segunda utiliza un middleware de TYPO3 que manipula la cabecera de respuesta. La variante mod_rewrite es más rápida porque se ejecuta antes que PHP.

La conversión en sí se realiza con libwebp (la herramienta de línea de comandos cwebp), ImageMagick con soporte WebP o la extensión PHP GD (si está compilada con soporte WebP). La calidad es configurable: por defecto 80 (sobre 100), lo que ofrece un buen equilibrio entre tamaño de archivo y calidad visual. Para contenidos fotográficos recomendamos entre 82 y 85; para capturas e ilustraciones, entre 75 y 78.

Para una compresión aún mejor, las versiones más recientes de la extensión soportan el formato AVIF, que aporta entre un 20 y un 30 por ciento adicional de ahorro respecto a WebP. AVIF está disponible en Chrome y Firefox, y en Safari desde la versión 16.

Los problemas habituales afectan a las librerías del servidor y a la configuración del CDN

El problema más frecuente es la ausencia del binario cwebp en el servidor. Los entornos de hosting compartido a menudo no tienen libwebp instalada y el proveedor no permite instalar binarios. La solución: usar PHP GD con soporte WebP (disponible en la mayoría de versiones de PHP desde la 7.1) o elegir un proveedor de hosting que ponga cwebp a disposición. En servidores gestionados y en contenedores Docker, la instalación es trivial: apt-get install webp.

Segundo problema: configuración del CDN. Si delante del sitio hay un CDN (Cloudflare, Fastly, AWS CloudFront), debe gestionar WebP correctamente. Dos enfoques: el CDN conoce Content Negotiation y cachea WebP y JPEG como variantes separadas (Vary: Accept). O bien el sitio TYPO3 entrega directamente URLs WebP (sin Content Negotiation) y el CDN cachea solo una versión. Cloudflare ofrece conversión automática a WebP mediante Polish, lo que hace parcialmente prescindible la extensión TYPO3.

Tercer tema: control de calidad. Con ajustes de calidad demasiado bajos (por debajo de 70) aparecen artefactos visibles, especialmente en degradados y texturas finas. Tras la configuración debería realizarse una comparación A/B (original vs. WebP) para asegurar que la calidad es aceptable para el caso de uso.

TYPO3 v12 y v13 están soportados, la extensión es una de las más estables del ecosistema

La extensión WebP figura entre las extensiones de rendimiento más instaladas en el ecosistema TYPO3. Se mantiene activamente y es compatible con TYPO3 v12 y v13. Como la funcionalidad central (hook de procesado de imágenes, conversión de archivos) se apoya en APIs estables de TYPO3, los breaking changes en los upgrades son poco frecuentes. Gosign configura WebP como estándar en cada nuevo proyecto TYPO3 y, cuando está disponible, activa además AVIF para la máxima compresión.