1. Sirve las dimensiones adecuadas
No subas una imagen mucho más grande que el espacio que ocupa. Una foto de móvil puede medir 4000 píxeles de ancho, pero si tu diseño la muestra en una columna de 800 píxeles, el navegador igualmente descarga todos los píxeles de más y luego descarta la mayoría.
Primero redimensiona y luego comprime. Para un diseño que muestra una imagen a 800 píxeles de ancho, suele ser sensato exportar a unos 1600 píxeles de ancho para que se mantenga nítida en pantallas de alta densidad, pero rara vez más que eso.
2. Elige un formato eficiente
Usa WebP o JPG para fotos, y PNG o WebP para gráficos con transparencia. Usa SVG para logotipos e iconos sencillos, porque se escala a cualquier tamaño desde un archivo pequeño.
Los archivos WebP suelen ser notablemente más pequeños que los JPG o PNG con una calidad visual similar, y los navegadores actuales en general lo admiten. Conviene reservar PNG para gráficos nítidos, capturas de pantalla e imágenes que necesiten colores exactos.
3. Comprime
Usa una calidad de entre 75 y 85 por ciento para fotos. Compara el resultado con el original a tamaño completo para confirmar que sigue viéndose bien, prestando atención a los degradados suaves, los cielos y los tonos de piel, donde los artefactos aparecen primero.
Una calidad menor ahorra más espacio, pero hay un punto en el que aparece el efecto pixelado. Detente justo antes de que se vea. Si no estás seguro, elige la calidad más alta para la imagen principal y una menor para las miniaturas pequeñas, donde los defectos son más difíciles de notar.
4. Carga solo lo necesario y reserva espacio
Añade el atributo loading="lazy" a las imágenes que están por debajo del pliegue para que se carguen cuando el visitante se desplace cerca de ellas. No apliques carga diferida a la imagen principal de la parte superior de la página, porque retrasaría el contenido más visible.
Dale a cada imagen los atributos width y height para que el navegador pueda reservar espacio antes de que llegue el archivo. Esto evita que la página dé saltos mientras se cargan las imágenes, algo molesto cuando alguien intenta leer o pulsar un botón. Los mismos atributos también ayudan al navegador a calcular las proporciones correctas cuando el CSS hace la imagen fluida.
Un ejemplo práctico (ilustrativo)
Imagina una entrada de blog con una foto principal directa de la cámara: 4000 por 3000 píxeles, un JPG de varios megabytes. La página la muestra a 900 píxeles de ancho.
Redimensionar a 1800 píxeles de ancho normalmente reduciría el archivo a una pequeña fracción de su tamaño. Comprimir a un 80 por ciento aproximadamente y convertir a WebP suele reducirlo aún más. El resultado podría ser de unos cientos de kilobytes en lugar de varios megabytes, sin diferencia visible al tamaño en que se muestra. Las cifras exactas varían de una foto a otra, así que comprueba siempre tu propio archivo.
Flujo de trabajo paso a paso
- Averigua el mayor tamaño al que se muestra la imagen en tu página.
- Redimensiona el original a aproximadamente el doble de ese ancho, o al ancho mostrado solo para pantallas pequeñas.
- Convierte a WebP o JPG y comprime a un 75-85 por ciento aproximadamente.
- Compara con el original y baja la calidad solo mientras siga viéndose igual.
- Añade width, height y, por debajo del pliegue, loading="lazy" en tu página.
- Recarga la página y comprueba que nada se vea borroso ni se desplace.
Prueba tus páginas con una herramienta como PageSpeed Insights antes y después, y mira primero la imagen más grande de la página. Pequeños cambios en esa sola imagen suelen marcar la mayor diferencia.
Errores comunes
- Comprimir una y otra vez un JPG ya muy comprimido, lo que añade daño visible cada vez. Empieza siempre desde el original.
- Aplicar carga diferida a todas las imágenes, incluida la de la parte superior.
- Usar PNG para fotos, lo que normalmente crea archivos muy grandes.
- Reducir las imágenes solo con CSS, de modo que el navegador igualmente descarga el archivo completo.
- Omitir width y height, lo que provoca saltos en el diseño.
Lista de comprobación rápida
- Dimensiones adecuadas para el diseño
- WebP o JPG para fotos, SVG para logotipos sencillos
- Calidad de entre 75 y 85 por ciento, revisada a simple vista
- Carga diferida solo por debajo del pliegue
- width y height definidos en cada imagen
- Páginas probadas antes y después
Hazlo con DoneImg en tu navegador
Abre la herramienta de redimensionar, establece el ancho que necesitas y descarga el resultado. Luego abre Comprimir, elige WebP o JPG y ajusta el control deslizante de calidad mientras observas el tamaño del archivo. Si necesitas otro formato, las herramientas de conversión se ocupan de JPG, PNG y WebP.
Todo se ejecuta en tu navegador, así que tus imágenes se procesan en tu propio dispositivo y no se sube nada a un servidor. Eso lo convierte en una forma segura de preparar fotos de producto sin publicar o imágenes de clientes. Puedes repetir los mismos pasos con cada imagen de una página y conservar los originales en una carpeta aparte por si necesitas exportarlos de nuevo en otro tamaño más adelante.