Checklist para diseñadores web: optimizar imágenes sin perder calidad
Las imágenes suelen suponer más de la mitad del peso de una página web típica — y casi siempre son la razón de que un sitio cargue lento. La buena noticia es que dejarlas a punto lleva solo unos pasos, sin necesidad de software especializado. Aquí tienes un checklist para repasar antes de cada publicación.
A continuación, siete pasos que conviene repasar antes de publicar cualquier imagen en una web, desde una ficha de producto hasta un banner de fondo. Cada paso lleva un par de minutos como mucho y no necesita nada más que un navegador — sin instalar Photoshop, sin pelearte con una herramienta de línea de comandos como ImageMagick.
Paso 1. Elige el formato correcto
Para fotografías e imágenes complejas con degradados, la mejor opción es un formato moderno como AVIF o WebP: pesan entre un 30 y un 50% menos que un JPG con una calidad comparable. Para gráficos sencillos de color plano (iconos, logos), PNG encaja mejor. Convierte los archivos que ya tengas con el Convertidor a AVIF o pasa de JPG a WebP.
La diferencia se nota especialmente en imágenes con muchas transiciones de color suaves — atardeceres, sombras, fondos desenfocados: ahí es justo donde AVIF y WebP ahorran más frente a JPG.
Paso 2. Ajusta el tamaño exacto según la maqueta
No le entregues al navegador una imagen de 4000×3000px si en la página solo se muestra en un bloque de 800×600 — esos píxeles de más solo añaden peso sin ningún beneficio. Cambiar tamaño permite fijar el ancho y el alto exactos para un bloque concreto de la maqueta, manteniendo las proporciones.
Esto importa especialmente en las versiones móviles de un sitio, donde el bloque de imagen suele ser dos o tres veces más estrecho que en escritorio — si maquetas de forma responsive, conviene preparar un par de tamaños para los distintos breakpoints en lugar de depender de una sola imagen universal.
Paso 3. Comprime con un nivel de calidad razonable
Una vez fijados el formato y el tamaño, queda la compresión: Comprimir imagen con una calidad del 70–85% suele dar una pérdida que el ojo humano no llega a notar, a la vez que reduce bastante el peso del archivo. Revisa el resultado a simple vista antes de publicar — en fotos con mucho detalle fino, a veces conviene subir la calidad un 5–10%.
Una regla útil: si la diferencia entre un 70% y un 85% de calidad no se nota al ver la página con normalidad, elige el valor más bajo — el ahorro en peso reduce de forma notable el tiempo de carga para los usuarios con una conexión móvil lenta.
Paso 4. Recorta lo que sobre
Si el encuadre tiene márgenes sin contenido u objetos sueltos en los bordes, Recortar imagen los elimina antes de comprimir — así el archivo final concentra su peso en lo que realmente importa, en vez de en zonas a las que el usuario ni siquiera va a prestar atención.
El recorte es especialmente útil en capturas de pantalla de interfaces, que a menudo dejan barras del navegador o espacios vacíos en los bordes — no aportan nada de contenido, pero suman peso al archivo sin falta.
Paso 5. Prepara una alternativa para navegadores antiguos
AVIF y WebP están soportados por todos los navegadores actuales, pero si la audiencia de tu web puede incluir versiones antiguas, conviene preparar un JPG de reserva con una etiqueta <picture> con varias fuentes — el navegador elegirá el formato que sí soporte.
La etiqueta <picture> también ayuda si parte de la audiencia navega desde el navegador integrado de una app de mensajería o un componente web del sistema muy antiguo, que a veces no soporta los formatos más nuevos aunque el navegador principal del dispositivo esté actualizado.
Paso 6. No te olvides de las fotos de producto ni de las capturas de interfaz
Para fichas de producto con fondo limpio, ayuda recortar antes el fondo con Quitar fondo — esto mantiene coherente el estilo visual del catálogo y reduce el peso del archivo gracias a la zona transparente uniforme.
Un fondo transparente (o de un solo color) constante en todas las fichas de producto queda más profesional que una mezcla de fotos con fondos reales, y facilita futuros cambios de maquetación — por ejemplo, si el catálogo pasa más adelante a un tema oscuro. Si el catálogo ya está publicado sin un fondo único, actualizar las fichas antiguas puede hacerse poco a poco, empezando por los productos más vistos.
Paso 7. Comprueba cómo se comportan las imágenes al cargar
Incluso las imágenes optimizadas tardan algo en cargar, sobre todo en conexiones móviles. Define los atributos width y height en la etiqueta <img> para que el navegador reserve el espacio de inmediato y no desplace el texto cercano cuando termine de cargar — esto afecta directamente a la métrica Cumulative Layout Shift en los informes de rendimiento de la página. Cargar de forma diferida las imágenes que quedan fuera de la primera pantalla acelera aún más la percepción de velocidad de carga.
Paso 8. Comprueba el efecto con una herramienta de análisis de velocidad
Después de publicar, conviene pasar la página por Google PageSpeed Insights o una herramienta similar — el informe mostrará exactamente qué imágenes afectan más al tiempo de carga y si merece la pena repasar el checklist para algún archivo concreto. También ayuda a detectar imágenes que se añadieron más tarde y se colaron sin pasar por el checklist, algo que ocurre más de lo que parece en sitios con actualizaciones frecuentes del catálogo.
Repasa los ocho pasos y acabarás con imágenes que cargan rápido y se ven nítidas — y todo el proceso lleva un par de minutos en el navegador, sin Photoshop y sin enviar archivos a servicios de terceros. Como cualquier checklist, no es un trámite de una sola vez sino un hábito que conviene fijar en el proceso de publicar contenido — por ejemplo, añadiendo un punto al checklist de los gestores de contenido y no solo al de los diseñadores. Elegir un formato, ajustar el tamaño, comprimir, recortar lo que sobra, preparar una alternativa, no olvidar los atributos de maquetación y comprobar el resultado al final — unos minutos de trabajo que ahorran segundos a los usuarios en cada carga de página.