Te pasan las fotos nuevas de la empresa, eliges las que mejor cuentan el trabajo y las subes a la web. En pantalla quedan estupendas. El problema puede estar en lo que no se ve. Esa foto que ocupa un recuadro pequeño quizá sigue siendo un archivo de varios megas, preparado para mucho más que una visita desde el móvil.
Optimizar imágenes para web consiste en ajustar sus dimensiones, elegir el formato adecuado y reducir su peso manteniendo la calidad que necesitas. Después hay que comprobar que la página sirve esa versión y que se ve bien. Exportar un archivo ligero y dejarlo olvidado en una carpeta cuenta como buena intención, pero todavía no acelera nada.
Puedes hacerlo antes de subir las imágenes con herramientas gratuitas o automatizar parte del trabajo con un plugin de WordPress. Las dos vías pueden convivir. Si cambias tres fotos de vez en cuando, quizá te baste con prepararlas a mano; si mantienes un catálogo o publicas continuamente, la automatización empieza a tener más sentido.
Qué tamaño y peso deben tener las imágenes de una web
Lo primero es distinguir dimensiones y peso. Una foto puede medir 4000 × 3000 píxeles y ocupar 6 MB. Los píxeles indican cuánta información visual contiene; los megas, cuánto ocupa el archivo. Reducir dimensiones y comprimir son operaciones distintas, aunque ambas pueden ayudar a aligerarlo.
Cuando nos pasan una carpeta de fotos, solemos empezar por decidir dónde irá cada una. Una cabecera, una miniatura y una ficha de producto con zoom no necesitan la misma exportación. Prepararlas todas con un único tamaño resulta cómodo durante cinco minutos y menos cómodo cuando toca corregirlas.
El ancho visible no siempre coincide con los píxeles del archivo
Imagina una foto que se muestra a 600 píxeles de ancho. Un archivo de 600 puede ser suficiente en una pantalla convencional; en una de mayor densidad, una versión de 1200 puede aportar nitidez. Es un ejemplo, no una orden de multiplicar todas las imágenes por dos. Importan el espacio disponible, el detalle y cómo se vea al tamaño real.
Lo que normalmente no aporta es servir la foto de 4000 píxeles en ese mismo espacio sin aprovechar ninguna variante. Si no sabes qué ancho necesita tu web, consulta las medidas del bloque o el ancho de contenido de la plantilla. Ese dato es más útil que seguir una recomendación genérica de «todas a 1920».
Además, un móvil no necesita siempre el archivo más pequeño. Puede tener una pantalla de alta densidad. La web debería ofrecer varios tamaños y permitir que el navegador elija el adecuado. Así lo explica la guía de rendimiento de imágenes de web.dev. No hace falta que escribas ese código para preparar las fotos, pero sí que tu plantilla lo resuelva correctamente.
Cuánto debería pesar una imagen
No hay una cifra de kilobytes que sirva para todo. Una captura con texto pequeño puede necesitar conservar más detalle que una fotografía ambiental. Y diez imágenes de tamaño moderado también suman, aunque ninguna parezca preocupante por separado.
Un ejemplo de nuestro propio blog ayuda a verlo. Una de las portadas partía de un PNG de 1448 × 1086 píxeles y unos 2,2 MB. Al preparar versiones de 1280 × 960, el AVIF quedó en unos 43 KB y el WebP en 83 KB, manteniendo una calidad visual que aceptamos para ese uso.
Ahí se combinaron redimensionado, cambio de formato y compresión. Otra imagen dará otros resultados. Lo útil es conservar el original, comparar las exportaciones y elegir la más ligera que siga funcionando visualmente. El objetivo tampoco es conseguir una foto irreconocible que gane el campeonato de pesar poco.
Qué formato elegir entre JPG, PNG, WebP, AVIF y SVG
El formato se elige según el contenido y el sistema que lo mostrará. WebP y AVIF son buenas opciones para muchas fotografías, pero conviene probarlos sobre la imagen concreta. Un archivo moderno mal exportado también puede pesar demasiado o verse peor.
| Tipo de imagen | Por dónde empezar | Qué conviene revisar |
|---|---|---|
| Fotografías de servicios, productos o artículos | WebP o AVIF; JPG cuando encaje mejor con el flujo de publicación | Detalle, degradados, peso y compatibilidad del sistema |
| Fotografías con transparencia | WebP o AVIF con transparencia, o PNG | Bordes, sombras y fondo sobre el que se mostrará |
| Capturas y esquemas con texto | PNG o WebP sin pérdida como punto de partida | Que letras y líneas sigan nítidas al tamaño real |
| Logotipos e iconos vectoriales | SVG si dispones del archivo vectorial correcto | Que sea adecuado para la web y se gestione de forma segura |
WebP tiene un soporte muy amplio y permite compresión con pérdida o sin ella. AVIF puede ofrecer archivos más pequeños para una calidad visual similar, aunque el resultado depende de la imagen y de los ajustes. Comparar dos exportaciones suele resolver más dudas que discutir el formato en abstracto.
El JPG sigue siendo una opción válida para fotografías. El PNG resulta útil cuando necesitas conservar con precisión píxeles, textos o transparencias, aunque no conviene usarlo automáticamente para todas las fotos. SVG describe formas vectoriales; cambiar la extensión de una foto de .jpg a .svg no la convierte en un vector, por mucho entusiasmo que pongamos.
En WordPress, AVIF se admite desde la versión 6.5 cuando el servidor lo soporta. Conviene comprobarlo antes de organizar todo el flujo alrededor de ese formato. Admitir WebP o AVIF no significa que WordPress convierta automáticamente cada JPG que subes.
Cómo optimizar imágenes gratis antes de subirlas
Para una web pequeña, preparar bien las nuevas imágenes puede ser suficiente sin añadir otro plugin. El proceso consiste en elegir el encuadre, ajustar píxeles, exportar y comprobar. Las herramientas cambian; ese orden sigue siendo útil.
Recortar elimina parte del encuadre. Redimensionar cambia sus dimensiones manteniendo la escena completa si conservas la proporción. Antes de hacerlo, piensa qué tiene que seguir viéndose. En una foto de producto, cortar el detalle importante para encajar en una tarjeta no suele ser una mejora.
Tres herramientas gratuitas que merece la pena conocer
| Herramienta | Para qué la usaríamos | Qué tener presente |
|---|---|---|
| Squoosh | Redimensionar, elegir formato y comparar calidad y peso de una imagen | Da más control, pero requiere revisar cada exportación |
| TinyPNG | Comprimir archivos de forma sencilla, también en formatos modernos | Su modalidad gratuita tiene límites de lote y archivo; algunas funciones son de pago |
| iLoveIMG | Recortar, redimensionar y comprimir varias imágenes con un proceso sencillo | Son operaciones distintas; comprimir no sustituye al redimensionado |
Squoosh es especialmente cómodo cuando quieres ver cuánto detalle estás sacrificando. Según su documentación oficial, la imagen se procesa en tu dispositivo. TinyPNG e iLoveIMG resultan prácticos para otras tareas, con las condiciones y límites que muestre cada herramienta en ese momento.
Cómo comprimir una imagen con Squoosh paso a paso
- Abre una copia del original. Conserva el archivo de partida por separado. Si más adelante necesitas otro encuadre o una versión mayor, agradecerás tenerlo.
- Ajusta las dimensiones. Activa el redimensionado, fija el ancho que necesites y conserva la proporción para no deformar la imagen.
- Elige el formato de salida. Para una foto, puedes empezar por WebP y compararlo con AVIF si tu web lo admite.
- Ajusta la calidad mientras comparas. Mira el peso y utiliza la vista de comparación. Revisa también la imagen al tamaño al que se publicará, no solo ampliada al máximo.
- Descarga y abre el resultado. Comprueba que conserva el encuadre, la transparencia si la necesita y el detalle importante. Ponle un nombre reconocible antes de subirlo.
No existe un porcentaje de calidad que funcione igual en todos los formatos y herramientas. Un 80 en un exportador no equivale necesariamente a un 80 en otro. Si aparecen manchas en un fondo, bordes sucios o letras borrosas, has ido demasiado lejos para ese archivo.
La expresión «comprimir sin perder calidad» necesita matices. La compresión sin pérdida conserva los datos de la imagen. La compresión con pérdida elimina información para reducir más el peso; puede mantener una apariencia suficiente para tu uso, pero no es idéntica al original. Conviene saber cuál estás aplicando, sobre todo en capturas, esquemas y fotografías con detalles delicados.
Plugins para optimizar imágenes en WordPress
Un plugin puede comprimir las nuevas subidas, procesar la biblioteca existente y generar formatos modernos. Es útil cuando intervienen varias personas, se añaden productos a menudo o mantener un proceso manual acaba dependiendo de que alguien se acuerde.
Antes de instalarlo, revisa qué hacen ya el alojamiento, el tema y las herramientas de rendimiento. Puede que parte del trabajo esté resuelto. Tener tres sistemas intentando convertir y servir las mismas imágenes añade decisiones y posibles conflictos, no tres veces más optimización.
EWWW, Imagify y ShortPixel como opciones de partida
| Plugin | Qué ofrece | Límite o condición que revisar |
|---|---|---|
| EWWW Image Optimizer | Optimización, redimensionado y conversión a WebP en su modalidad gratuita | La modalidad local depende del servidor; AVIF y otros servicios se ofrecen en opciones premium |
| Imagify | Compresión, lotes y generación de WebP o AVIF | La modalidad gratuita está limitada por volumen de MB procesados |
| ShortPixel Image Optimizer | Compresión, redimensionado y generación de WebP o AVIF | Funciona con créditos; las miniaturas optimizadas también pueden consumirlos |
Son ejemplos de herramientas que resuelven este trabajo, no una clasificación basada en una prueba de rendimiento nuestra. Sus modalidades gratuitas sirven para empezar, pero hay que mirar qué incluyen. Cien créditos no tienen por qué equivaler a cien fotografías de la biblioteca: una sola subida puede tener varias miniaturas.
Para elegir, comprobaríamos si permite conservar originales, limitar dimensiones, excluir imágenes que necesitan más detalle y servir los formatos generados con tu configuración. Después probaríamos unas pocas fotos representativas antes de procesar toda la biblioteca. Una fotografía de producto, una captura con texto y una cabecera dicen más que una única imagen fácil de comprimir.
Una comprobación que solemos hacer es distinguir «el plugin ha creado un WebP» de «el visitante está recibiendo ese WebP». Puede existir el archivo convertido y que una parte del diseño siga solicitando el original. El porcentaje de ahorro del panel no termina de resolver el trabajo hasta que revisas una página real.
Cómo escribir el nombre y el texto alternativo de las imágenes
Una imagen ligera también necesita estar bien incorporada al contenido. Usa un nombre corto y descriptivo antes de subirla, como reforma-cocina-valencia.webp, si eso es lo que muestra. No hace falta convertir cada archivo en una lista de palabras clave.
El texto alternativo, o alt, explica la información que aporta la imagen cuando alguien no puede verla. En una foto de trabajo puede describir lo relevante; en una imagen que funciona como enlace, debe ayudar a entender su función. La guía de Google para imágenes recomienda descripciones útiles y advierte del exceso de keywords.
Si la imagen es puramente decorativa en ese contexto, lo apropiado puede ser un alt vacío, como explica W3C WAI. No se trata de rellenar todos los campos de WordPress por obligación. Ni el nombre del archivo sustituye una descripción útil ni repetir la keyword añade información a quien está leyendo.
Cómo comprobar las imágenes en móvil y su velocidad de carga
Después de subirlas, abre la página completa en escritorio y móvil. Revisa nitidez, encuadre y lectura. Si es un esquema con letras pequeñas, quizá necesite una composición vertical; reducir la misma imagen horizontal hasta que nadie pueda leerla no arregla el problema. Lo desarrollamos también en diseño web responsive.
Comprueba luego qué archivo se descarga. Quien revise la parte técnica puede verlo en la pestaña Red o Network de las herramientas del navegador, filtrando por imágenes. Interesan la URL, el formato, las dimensiones del recurso y su peso. Abrir el original de la biblioteca no confirma que sea ese el que utiliza la página.
Hay otras dos comprobaciones importantes. La primera es que la imagen principal visible al abrir no quede esperando a la carga diferida, especialmente si es el elemento LCP. Google recomienda expresamente no aplicar lazy load a la imagen LCP. Las imágenes que quedan más abajo sí pueden beneficiarse de cargar cuando se aproximan a la zona visible.
La segunda es que la página reserve espacio para ellas, mediante sus dimensiones o su proporción. Así el contenido no salta cuando aparece una foto. Es una de las medidas que recoge la guía de estabilidad visual de web.dev.
PageSpeed Insights puede señalar imágenes sobredimensionadas, posibilidades de compresión o una entrega mejorable. Úsalo para localizar el recurso concreto y comparar después, como explicamos en cómo leer PageSpeed. Una nota mejor no sustituye la revisión visual, y una imagen más ligera no arregla por sí sola un servidor lento o un problema de JavaScript.
Por dónde empezar si tu web ya tiene muchas imágenes
No hace falta repasar miles de archivos antes de notar que algo está mejor preparado. Empieza por las páginas importantes y las imágenes que más afectan a su primera carga. Después revisa galerías y plantillas que repiten el mismo problema en muchas URLs.
Conserva una copia recuperable antes de un proceso masivo y prueba una muestra. Si trabajas a mano, deja acordados los tamaños y el procedimiento para las próximas subidas. Si utilizas un plugin, comprueba que su configuración cubre lo que necesitas y que las cuotas permiten mantener el ritmo de publicación. La mejora debe sobrevivir al próximo «te adjunto unas fotos».
Y si al revisar descubres que las imágenes ya son razonables, toca mirar otras causas. La guía para acelerar WordPress desarrolla ese diagnóstico más amplio. Dentro del mantenimiento web, lo útil es identificar qué está fallando, aplicar una mejora concreta y comprobar su efecto en la página que usa tu cliente.
Escrito en Nereida Studio, estudio de diseño web y posicionamiento en Valencia. Así trabajamos.
