Optimizar imágenes en Photoshop para web en formato WebP

Cada vez más empresas están pidiendo a sus equipos de diseño que migren todas las imágenes de sus webs a WebP, dejando atrás los clásicos JPG y PNG. El motivo no es un capricho: tiene mucho que ver con la velocidad de carga, el SEO y la experiencia de usuario. El problema es que, si trabajas con Photoshop o Lightroom Classic, puede que te hayas encontrado con que, de primeras, estos programas no parecen llevarse especialmente bien con este formato.

Si te han pasado una carpeta entera de archivos .png y .jpeg y te han pedido que los conviertas a WebP, es normal que te entren dudas: ¿cómo exportarlos bien?, ¿qué ajustes usar para no perder calidad?, ¿qué pasa con el perfil de color?, y con los navegadores que aún no soportan WebP? En esta guía te voy a contar, paso a paso, cómo optimizar imágenes en Photoshop para web en formato WebP, qué debes vigilar en cuanto a peso, calidad y SEO, y cómo integrarlo en tu web o ecommerce sin liarla.

Qué es WebP y por qué todo el mundo habla de él

WebP es un formato de imagen moderno desarrollado por Google pensado específicamente para la web. Utiliza técnicas avanzadas de compresión (basadas en la codificación de fotogramas de VP8 y predicción por bloques) para reducir el tamaño del archivo manteniendo una calidad visual muy similar a JPG y PNG. De ahí que Google PageSpeed, Lighthouse, Semrush y otras herramientas de auditoría no paren de recomendarlo.

La gran ventaja de WebP es que consigue archivos hasta un 30% más ligeros que sus equivalentes en JPEG o PNG, tanto con compresión con pérdida como sin pérdida. Esto, llevado a la práctica, significa que tu sitio cargará más rápido, reducirá el consumo de ancho de banda y mejorará la experiencia del usuario, algo que Google valora de forma muy positiva en el posicionamiento.

Otra de sus grandes bazas es la versatilidad: soporta compresión con pérdida y sin pérdida, transparencia (canal alfa) como PNG y animaciones como los GIF, pero con un peso mucho menor. Por eso, WebP es especialmente interesante para tiendas online, blogs con muchas imágenes, landings de producto y webs con gran carga visual.

Para que te hagas una idea real, hay casos prácticos en los que una imagen que pesaba más de 600 kB en PNG se ha reducido a menos de 5 kB en WebP, sin que el usuario perciba una pérdida de calidad destacable. Hablamos de pasar a un archivo unas 80 veces más pequeño, lo que se nota, y mucho, en la velocidad de la página.

Ventajas de WebP frente a JPG, PNG, GIF y otros formatos

Antes de lanzarte a convertir medio servidor a WebP, viene bien tener claro qué aporta realmente este formato frente a los más usados en la web. La foto general es esta:

JPG (o JPEG): es el habitual para fotografías. Trabaja con compresión con pérdida, lo que permite reducir bastante el tamaño sacrificando parte de la información original de la imagen, normalmente sin que el ojo humano lo note demasiado. Permite ajustar la calidad y es ideal para fotos de productos, retratos o escenas complejas, pero no tiene transparencia.

PNG: muy usado para logotipos, iconos y gráficos con transparencias. Emplea compresión sin pérdida, de forma que conserva todos los datos de la imagen. Esto se traduce en archivos con mejor fidelidad pero generalmente más pesados. PNG-24 mantiene todos los colores y calidad; PNG-8 reduce la paleta y, por tanto, puede implicar pérdida de información.

GIF: históricamente el rey de las animaciones sencillas en la web. Soporta una paleta de colores reducida y animación por fotogramas, pero el tamaño de archivo suele ser grande para lo que ofrece. Hoy en día, WebP lo supera prácticamente en todo.

SVG: es un formato vectorial, muy recomendable para logotipos, iconos e ilustraciones que deban escalar sin perder nitidez. El problema es que, si lo usas para lo que no es (por ejemplo, meter una imagen rasterizada enorme en un SVG), puedes acabar con archivos inmensos, varias veces más pesados que un PNG o WebP equivalente.

WebP: combina lo mejor de todos los anteriores: compresión con pérdida o sin pérdida, soporte de transparencia, animaciones, metadatos EXIF y XMP y tamaños un 25-34% más pequeños que JPG y alrededor de un 26% menores que PNG, según estudios de Google. Además, los navegadores modernos como Chrome, Firefox, Edge y Safari (desde la versión 14) lo soportan ampliamente.

Por qué optimizar las imágenes de tu web (no solo por WebP)

Las imágenes suelen representar entre el 60% y el 65% de los bytes totales que carga una página web. Si no las controlas, por muy bien que tengas montada la parte técnica, la web se va a arrastrar. Esto tiene efectos directos en prácticamente todo:

Mejora de la velocidad de carga: al reducir el tamaño de las imágenes (ya sea con WebP, con buena compresión JPG o PNG optimizado), las páginas se cargan mucho más rápido. Esto se nota sobre todo en móviles y conexiones lentas, donde cada kilobyte cuenta.

Menor consumo de ancho de banda: menos peso implica menos recursos consumidos en tu servidor y en la tarifa de datos del usuario. A escala de un ecommerce con miles de visitas al día, el ahorro de tráfico puede ser muy considerable.

SEO y posicionamiento: Google y otros buscadores tienen muy en cuenta el tiempo de carga y la experiencia de usuario. Un sitio rápido suele tener más facilidad para posicionar mejor, aumentar las visitas orgánicas y, al final, generar más negocio.

Conversión y ventas: en ecommerce, cada segundo de retraso en la carga supone una pérdida de pacientes, leads o ventas. Imágenes ágiles y nítidas se traducen en menos fricciones y más posibilidades de que el usuario complete la acción que quieres.

Además, cuidar las imágenes transmite una sensación de web bien trabajada y profesional. Imágenes borrosas, pixeladas o que cargan a trompicones dan una impresión bastante cutre, que puede arruinar el trabajo de diseño y copy más cuidado.

Elegir el formato correcto antes de exportar

Uno de los fallos más comunes es subir todas las imágenes en el mismo formato “por costumbre”, sin pararse a pensar qué necesita realmente cada caso. Elegir bien entre JPG, PNG, SVG o WebP marca la diferencia entre una web ligera y una que pesa como un camión.

En general, las recomendaciones son:

• Fotografías y fondos complejos: JPG o WebP con compresión con pérdida bien ajustada.
• Logotipos, iconos y gráficos con transparencia: PNG (si necesitas máxima fidelidad) o, mejor aún, WebP con transparencia para reducir peso.
• Gráficos vectoriales puros: SVG bien preparado, sin incrustar imágenes rasterizadas gigantes.
• Animaciones ligeras: WebP animado en lugar de GIF, siempre que el navegador objetivo lo soporte.

Hay casos en los que cambiar solo el formato es un game changer. En un proyecto real, se detectó una imagen en SVG que no estaba usando vectores y pesaba más de seis veces que las otras imágenes importantes del sitio. Al pasarla a PNG se redujo el peso a unas 20 veces menos y, al convertirla a WebP, el archivo final se quedó en menos de 5 kB. Esto no es magia, es simplemente elegir el formato adecuado.

Equilibrio entre tamaño, resolución y peso de la imagen

Cuando hablamos de optimizar imágenes para la web, hay tres factores que siempre van de la mano: dimensiones en píxeles, resolución (PPP o DPI) y peso en kilobytes. Descuidar cualquiera de ellos suele acabar en imágenes sobredimensionadas o pobres de calidad.

Dimensiones en píxeles y la propiedad width en CSS: subas la imagen que subas, debe ajustarse al hueco real que va a ocupar en la web. Si un banner se mostrará a 400×400 píxeles, no tiene sentido subirlo a 800×800 “por si acaso”, porque se verá visualmente a 400×400 pero seguirá pesando como la imagen grande. Tampoco te quedes corto: si subes una de 200×200 para un espacio de 400×400, el navegador la estirará y la imagen se verá borrosa.

Resolución (PPP o DPI): para web no necesitas las resoluciones de impresión. Mientras que para imprenta se suelen usar 300 dpi o más, para pantalla 72 dpi es suficiente. En realidad, muchas plataformas ignoran el valor de DPI y trabajan directamente con píxeles, pero mantenerlo bajo para web ayuda a no arrastrar ficheros preparados para impresión con tamaños desmesurados.

Peso en KB: al final, lo que marca el rendimiento es cuánto ocupa el archivo. Como regla general, intenta que una imagen individual no pase de 200 kB, sobre todo en páginas clave (home, fichas de producto, landing de campaña). Y cuida que el total de imágenes por página no supere 1 MB siempre que sea posible.

Photoshop y otros editores permiten ir jugando con estos parámetros para lograr el mejor equilibrio calidad/peso. El truco está en ir bajando la calidad de compresión poco a poco hasta que empieces a notar artefactos o pérdida de detalle, y luego subir un punto.

Cómo optimizar imágenes para web en Photoshop

Aunque mucha gente sigue subiendo fotos directamente desde la cámara o el móvil, lo profesional es pasar siempre por un editor como Photoshop para ajustar tamaño, resolver el perfil de color y comprimir correctamente. Photoshop lleva años incorporando herramientas pensadas justo para esto.

Una de las funciones clave es “Guardar para web” (en las versiones clásicas), que permite previsualizar cómo afecta cada nivel de compresión al peso y a la calidad. Se accede desde el menú de archivo o con el atajo rápido Ctrl + Alt + Shift + S en Windows (o el equivalente en macOS). Ahí puedes:

• Elegir el formato de salida: JPG, PNG-8, PNG-24, GIF, etc., y ajustar cada uno según sus opciones específicas.
• Ajustar la calidad del JPG: suele ser suficiente con valores de 70-80 para web, donde el ojo apenas percibe diferencia con 100 pero el peso baja notablemente.
• Controlar la paleta en PNG-8 y GIF: reduciendo colores cuando el diseño lo permite.
• Escalar la imagen directamente en el cuadro de diálogo, sin tener que redimensionarla antes en el lienzo.

Además, Photoshop permite optimizar la paleta de color, la inclusión o exclusión de metadatos y otras técnicas de compresión que, bien afinadas, te ayudan a sacar el máximo partido a cada imagen antes de convertirla a WebP.

Exportar a WebP desde Photoshop y Lightroom Classic

Aunque durante bastante tiempo Photoshop y Lightroom Classic no daban soporte nativo a WebP, hoy en día existen varias formas de trabajar con este formato sin tener que salir de tu flujo habitual, bien mediante funciones incorporadas en versiones recientes o añadiendo un plugin específico.

Si trabajas con una versión en la que aún no aparece la opción de WebP en “Exportar”, puedes instalar un plugin oficial para habilitar la exportación a este formato directamente desde Photoshop. Tras la instalación, verás WebP como formato disponible al exportar o guardar para web, y podrás ajustar parámetros como:

• Tipo de compresión: con pérdida (lossy) o sin pérdida (lossless).
• Calidad: un valor intermedio (en torno a 70-80) suele dar un resultado excelente en la mayoría de fotografías.
• Transparencia: mantener o no el canal alfa en los casos en que lo necesites.
• Metadatos: decidir si conservas EXIF y XMP o los eliminas para ahorrar unos cuantos KB.

En Lightroom Classic, el flujo típico consiste en revelar y ajustar la foto como siempre, y luego exportar en un formato tradicional (por ejemplo, JPG con buena compresión) para, a continuación, convertir ese JPG a WebP con una herramienta externa o script. No es tan directo como en Photoshop con plugin, pero permite mantener todo el trabajo de revelado en LrC.

Si tienes que convertir grandes volúmenes de imágenes, una opción muy recomendable es crear en Photoshop un droplet, es decir, un pequeño ejecutable sobre el que arrastras las carpetas de fotografías y que automatiza la conversión masiva a WebP con los ajustes que definas. Esto te ahorra repetir el mismo proceso cientos de veces.

Si no quieres usar Photoshop o prefieres otra alternativa ligera, puedes probar editores portátiles como PhotoDemon que también facilitan flujos de trabajo rápidos para procesar lotes.

Conversores online y automatización para lotes grandes

Si no quieres tocar Photoshop o no puedes instalar plugins, tienes la alternativa de usar conversores online para pasar de PNG/JPG a WebP. Algunos de los más utilizados permiten:

• Elegir el grado de compresión (algo imprescindible para controlar la calidad).
• Subir múltiples archivos a la vez, hasta un cierto límite por lote.
• Convertir también animaciones GIF a WebP animado.

El inconveniente de estos servicios es que suelen limitar el número de archivos por tanda, el peso máximo o la velocidad de descarga, y además dependes de una conexión estable para subir imágenes grandes.

Si eres desarrollador o tienes alguien de sistemas cerca, otra opción muy potente es automatizar la conversión usando Node.js con módulos como imagemin y el plugin imagemin-webp. De este modo, puedes integrar la conversión en tus scripts de build, pipelines de CI/CD o procesos nocturnos, para que el sistema convierta automáticamente a WebP las imágenes nuevas que se añadan a tu proyecto.

Compresión WebP: con pérdida vs sin pérdida

Una de las preguntas clave cuando exportas a WebP es si usar compresión con pérdida (lossy) o sin pérdida (lossless). La elección depende de si priorizas la calidad absoluta o el rendimiento.

Compresión con pérdida: es la opción recomendada cuando el rendimiento del sitio es la prioridad. WebP con pérdida utiliza algoritmos que eliminan información redundante o poco perceptible, basados en predicción y transformaciones matemáticas. Según Google, las imágenes WebP con pérdida pueden ser un 25-34% más pequeñas que sus equivalentes JPG, manteniendo una calidad visual muy similar en la mayoría de los casos.

Compresión sin pérdida: es la alternativa si necesitas mantener todos los detalles intactos, por ejemplo, en gráficos corporativos muy sensibles al color o en recursos que deban editarse más adelante. En estas situaciones, WebP sin pérdida sigue siendo interesante porque, de media, logra archivos alrededor de un 26% más pequeños que PNG, con un aspecto idéntico al original.

En la práctica, la mayoría de páginas web y tiendas online optan por compresión con pérdida bien ajustada para fotos de producto, banners y recursos visuales pesados, y reservan la compresión sin pérdida para elementos muy concretos en los que cada píxel cuenta.

Adaptar las imágenes a versión responsive y diferentes dispositivos

Optimizar las imágenes no es solo cuestión de formato y compresión, también debes pensar en cómo se van a entregar según el dispositivo. No tiene sentido mandar la misma imagen de 2.000 píxeles de ancho a un móvil que a un monitor 4K.

Lo ideal es generar distintas versiones de cada imagen adaptadas a móviles, tablets y escritorio, y hacer que el navegador escoja la más adecuada con técnicas de responsive images. Así evitas que un móvil tenga que descargar una imagen gigantesca que luego se muestra reducida.

Además, en la versión responsive conviene evitar mostrar imágenes prescindibles. Muchas landings y secciones llevan decoración extra que se ve bien en escritorio, pero que en móvil solo sirve para hacer scroll infinito y consumir datos. En esos casos, recortar, sustituir o eliminar imágenes “de relleno” ayuda muchísimo a aligerar la experiencia en pantallas pequeñas.

Uso de WebP en HTML: cómo no romper la web en navegadores antiguos

Uno de los puntos que más preocupa cuando se pasa a WebP es la compatibilidad con navegadores que todavía no lo soportan. Aunque el soporte es ya muy amplio (Chrome, Firefox, Edge, Safari moderno, etc.), todavía puede haber usuarios con navegadores antiguos.

La forma recomendada de introducir WebP sin dejar a nadie fuera es cambiar el marcado clásico de <img> por un <picture> en tu HTML. El patrón básico es:

<picture>
<source srcset=»img/imagen.webp» type=»image/webp»>
<img src=»img/imagen.jpg» alt=»Texto alternativo»>
</picture>

De este modo, los navegadores que soportan WebP cargarán la versión moderna, mientras que los que no lo hacen usarán automáticamente la imagen JPG de fallback. Puedes añadir varias etiquetas <source> con diferentes resoluciones o incluso condicionar su uso con media queries para servir, por ejemplo, WebP solo en móviles o según el ancho de la pantalla.

Esta técnica te permite aprovechar las ventajas de WebP sin romper la compatibilidad, y es especialmente útil cuando trabajas con proyectos grandes en los que no puedes controlar con precisión el navegador del usuario.

Uso de WebP en CSS y Modernizr

En CSS el tema es algo más delicado, porque no existe un mecanismo nativo tan cómodo como <picture> para probar soporte de WebP en imágenes de fondo. Aquí suele recurrirse a librerías JavaScript como Modernizr.

Modernizr se encarga de detectar si el navegador soporta o no WebP y, en función del resultado, añade clases específicas al elemento <html>. A partir de ahí, puedes escribir reglas de CSS condicionadas, por ejemplo:

.webp .hero { background-image: url(«imagen-hero.webp»); }
.no-webp .hero { background-image: url(«imagen-hero.jpg»); }

Con este enfoque, los navegadores modernos descargarán el fondo en WebP, y los antiguos seguirán usando el JPG o PNG sin que tengas que duplicar HTML. Es una solución muy útil cuando usas muchas imágenes como background-image en CSS.

WebP y WordPress: soporte nativo y plugins

Si tu sitio está montado en WordPress, la buena noticia es que, a partir de la versión 5.8, el CMS soporta imágenes WebP de forma nativa. Es decir, puedes subir archivos WebP a la biblioteca de medios como si fueran JPG o PNG, y WordPress generará las miniaturas correspondientes.

Si trabajas con una versión anterior o por algún motivo no puedes actualizar, existen varios plugins que añaden soporte para WebP. Estos plugins suelen encargarse de:

• Permitir la subida de archivos WebP al gestor de medios.
• Convertir automáticamente JPG y PNG existentes a WebP, manteniendo un fallback para navegadores no compatibles.
• Reescribir las URLs de las imágenes para entregar WebP siempre que el navegador lo soporte.

Además, puedes combinarlo con plugins de optimización como Imagify u otros compresores que se encargan de reducir aún más el peso de las imágenes (WebP incluido), afinando parámetros de calidad y eliminando metadatos innecesarios. Así, WordPress se convierte prácticamente en un sistema automático de optimización y entrega inteligente de imágenes.

Subir fotos de producto a un ecommerce: checklist imprescindible

Cuando se trata de una tienda online, las imágenes de producto son una de las piezas clave para vender. Pero también pueden convertirse en el mayor lastre de rendimiento si no las trabajas bien. Antes de subir nada a tu ecommerce, repasa siempre estos puntos:

1. Tamaño adecuado: no subas fotos más grandes de lo estrictamente necesario. Define qué dimensiones vas a usar en fichas de producto, miniaturas, listados, etc., y exporta ya a ese tamaño. Nada de subir la foto a 6.000 píxeles cuando solo vas a mostrar 1.200.

2. Nombre de archivo optimizado: en lugar de dejar los clásicos IMG_1234.webp, pon nombres descriptivos con palabras clave, del tipo zapatillas-deportivas-negras-hombre.webp. Esto ayuda al SEO de imagen y da contexto a Google.

3. Atributo ALT y descripciones: rellena siempre el texto alternativo (ALT) con una descripción clara y relevante. No solo mejora la accesibilidad, también ayuda al SEO y a que Google entienda de qué va la imagen.

4. CDN para imágenes: si tu tienda tiene tráfico internacional, considera servir las imágenes a través de un Content Delivery Network (CDN). De esta forma, las WebP y el resto de recursos se entregan desde el servidor más cercano al usuario, reduciendo la latencia.

Qué hacer si ya tienes muchas imágenes subidas

Puede que tu sitio ya esté montado y tenga cientos o miles de imágenes sin optimizar. Rehacerlas una a una es un infierno, pero hay atajos, sobre todo si utilizas WordPress.

Plugins como WP Smush (y otros similares) permiten optimizar en bloque grandes cantidades de imágenes. Con un solo clic puedes procesar hasta 50 imágenes por tanda en la versión gratuita, reduciendo su tamaño sin necesidad de descargarlas, editarlas en Photoshop y volver a subirlas.

Al combinarlos con plugins que convierten a WebP y gestionan los fallbacks, puedes transformar el grueso de la biblioteca multimedia de tu sitio sin apenas trabajo manual. A partir de ahí, solo tienes que mantener una buena rutina de exportación y nombrado para las imágenes nuevas.

Herramientas externas y flujos complementarios

Incluso aunque tu flujo principal pase por Photoshop, es muy recomendable añadir una capa extra de compresión con herramientas online como TinyPNG o TinyJPG (y sus equivalentes para WebP). Funcionan de forma muy sencilla: subes la imagen, el sistema aplica compresión inteligente y descargas un archivo algo más ligero, casi siempre sin pérdida apreciable de calidad.

En entornos más avanzados, puedes integrar estas optimizaciones en tareas automatizadas del build de tu proyecto (por ejemplo, con gulp, webpack o scripts de npm) para que, cada vez que añadas una imagen nueva a tu repositorio, se comprima y convierta a WebP de forma transparente, sin intervención manual.

Comprobar si tus imágenes están bien optimizadas

Por último, para saber si todo este esfuerzo está dando sus frutos, puedes utilizar herramientas como Google PageSpeed Insights. Solo tienes que introducir la URL de la página que quieras analizar y pulsar en “Analizar”.

En el informe verás distintos apartados relacionados con la optimización de imágenes, el uso de formatos de próxima generación (como WebP) y las oportunidades de mejora. Si todo está en verde, vas por buen camino. Si aparece en rojo o amarillo, PageSpeed suele indicar qué imágenes concretas están dando problemas y cómo resolverlo.

Cuidar el formato, la compresión, el tamaño y la entrega de las imágenes con herramientas como Photoshop, WebP, plugins de WordPress y técnicas de responsive no solo consigue que la web “vaya más ligera”, también mejora el SEO, reduce el consumo de recursos y da una sensación de profesionalidad que los usuarios perciben desde el primer golpe de vista; si además automatizas la conversión y revisión periódica con las herramientas adecuadas, mantener una web visualmente potente y a la vez rápida deja de ser un quebradero de cabeza para convertirse en parte natural de tu flujo de trabajo.