Cómo pasar con seguridad las imágenes de tu web a WebP, paso a paso
WebP puede hacer tus imágenes aproximadamente entre un cuarto y un tercio más pequeñas que el JPG con calidad parecida, y todos los navegadores actuales pueden mostrarlo. Pasar a WebP es fácil si lo haces en el orden correcto y evitas unas cuantas trampas. Esta guía explica qué se gana y qué se pierde, y te da un plan seguro.
Qué es WebP y por qué merece la pena considerarlo
WebP es un formato de imagen creado por Google. Puede comprimir fotos con cierta pérdida de datos, como el JPG, o sin pérdida, como el PNG, y admite transparencia y animación. Como es más eficiente, la misma imagen suele ser mucho más pequeña, lo que significa páginas más rápidas y menores costes de ancho de banda. La explicación sobre WebP cubre los antecedentes.
WebP frente a JPG y PNG: ventajas e inconvenientes
| Formato | Puntos fuertes | Puntos débiles |
|---|---|---|
| WebP | Archivos más pequeños, transparencia, modos con y sin pérdida | Algunas herramientas y plataformas antiguas aún lo rechazan |
| JPG | Funciona en todas partes | Archivos más grandes, sin transparencia |
| PNG | Sin pérdida, con transparencia | Muy grande en fotos |
Ventajas de cambiar
- Normalmente entre un 25 y un 35 por ciento más pequeño que el JPG con la misma calidad visual.
- Un solo formato puede sustituir a JPG y PNG en muchos casos.
- Mejor velocidad de página, lo que favorece los Core Web Vitals.
Inconvenientes y límites
- Algunos clientes de correo, programas antiguos y vistas previas de redes sociales no manejan bien WebP.
- Recodificar un JPG existente a WebP ahorra menos que partir del original.
- Hay que gestionar formatos de respaldo y probar los resultados.
Qué imágenes convertir y cuáles dejar como están
- Convertir: fotos grandes, imágenes de cabecera, fotos de producto y cualquier PNG que en realidad sea una foto.
- Convertir con cuidado: gráficos y capturas de pantalla en PNG, donde WebP sin pérdida o un ajuste de calidad alto mantiene los bordes nítidos.
- Dejar como están: logotipos e iconos vectoriales, que deben seguir siendo SVG, y archivos diminutos, que casi no ganan nada.
- Mantener en JPG o PNG: imágenes Open Graph y de tarjetas de X (Twitter), y todo lo que compartas por correo o en aplicaciones que puedan no aceptar WebP.
Paso a paso: cambia con seguridad
- 1Audita las páginas importantes. Pasa las páginas clave por PageSpeed Insights y mira la sugerencia sobre servir imágenes en formatos de nueva generación. Enumera los archivos y el ahorro potencial.
- 2Convierte a partir de los originales. Para fotos usa JPG a WebP, y para gráficos y capturas de pantalla usa PNG a WebP, que conserva la transparencia. Una calidad de 75 a 85 sirve para la mayoría de las fotos.
- 3Compara antes de sustituir. Abre cada resultado junto al original y fíjate en el detalle fino, el texto y los degradados suaves. Si el WebP no es más pequeño o ves daños, conserva el original o sube la calidad.
- 4Sirve un formato de respaldo. Usa un elemento
picturecon una fuente WebP y unimgJPG o PNG, como se muestra en la guía de imágenes adaptables. Muchos CMS, plugins y CDN pueden hacerlo por ti. - 5Redimensiona y comprime también. La conversión es un buen momento para ajustar el tamaño de las imágenes con Redimensionar imagen.
- 6Conserva los originales. Son tu fuente para futuras ediciones y tu red de seguridad.
- 7Vuelve a medir y vigila los resultados. Ejecuta de nuevo PageSpeed Insights, revisa las páginas clave en un móvil y busca imágenes rotas.
Errores frecuentes
- Convertir un JPG muy comprimido, lo que ahorra poco y puede añadir daños visibles. Parte del original.
- Eliminar por completo los formatos de respaldo. Es un seguro barato frente a navegadores y herramientas poco habituales.
- Convertir todos los archivos, incluidos iconos diminutos y logotipos SVG.
- Usar WebP para las imágenes Open Graph, que algunas plataformas ignoran.
- No comparar la calidad. Mira siempre el resultado antes de sustituir un archivo.
Preguntas frecuentes
¿WebP es mejor que JPG?
Para webs, normalmente sí. Los archivos WebP suelen pesar entre un 25 y un 35 por ciento menos con calidad parecida, y además admiten transparencia. El JPG sigue siendo la opción más segura para compartir archivos con herramientas que puedan no aceptar WebP.
¿Todos los navegadores admiten WebP?
Todos los navegadores principales actuales pueden mostrar WebP. Mantén un formato de respaldo en JPG o PNG para navegadores antiguos, clientes de correo y otras herramientas.
¿Debo convertir PNG a WebP?
Para fotos guardadas como PNG, sí, el ahorro es grande. Para gráficos y capturas de pantalla, WebP también funciona y conserva la transparencia, pero compara el resultado para asegurarte de que los bordes siguen nítidos. Conserva el SVG para los logotipos vectoriales.
¿Perjudicará WebP a mi SEO?
No. Google puede indexar imágenes WebP, y los archivos más pequeños ayudan a la velocidad de tu página. Mantén textos alternativos y nombres de archivo descriptivos.
¿Debo usar AVIF en lugar de WebP?
AVIF puede ser aún más pequeño, pero tarda más en crearse y es algo menos universal. WebP es la opción más sencilla para la mayoría de las webs, y puedes añadir AVIF más adelante con un elemento picture. Consulta la guía de AVIF para ver qué se gana y qué se pierde.