GUÍA PRÁCTICA
Cómo optimizar imágenes para una página web
Las imágenes atractivas ayudan a comunicar, pero los archivos demasiado pesados pueden ralentizar una página y consumir datos innecesarios. Optimizar no significa reducir todo al mínimo: se trata de encontrar el equilibrio entre calidad, dimensiones, formato y velocidad.
1. Usá dimensiones acordes al espacio donde aparecerá la imagen
Antes de comprimir, revisá el tamaño en píxeles que necesita tu diseño. Una foto enorme que se muestra como una miniatura puede desperdiciar ancho de banda. Prepará una versión con dimensiones apropiadas para el espacio de visualización y evitá ampliar imágenes pequeñas más de lo necesario, porque pueden perder nitidez.
Si necesitás ajustar las dimensiones, usá la herramienta para redimensionar imágenes online. Mantené la proporción cuando no quieras deformar personas u objetos.
2. Elegí el formato según el contenido
JPG suele funcionar bien con fotografías, PNG con gráficos que necesitan transparencia o bordes definidos y WebP con muchos tipos de imágenes web. No conviertas automáticamente todo al mismo formato: compará la calidad y el peso del resultado. La compatibilidad de tu plataforma también importa.
En nuestra guía sobre JPG, PNG y WebP explicamos cuándo conviene usar cada uno.
3. Comprimí sin destruir los detalles
La compresión reduce el tamaño del archivo. En formatos con pérdida, una calidad demasiado baja puede generar bloques, halos y detalles borrosos. Empezá con una calidad alta y bajala gradualmente hasta conseguir una reducción que no perjudique el uso previsto. Revisá el resultado a tamaño real, especialmente si contiene caras, texto o líneas finas.
Podés comprimir imágenes desde el navegador y descargar una copia para compararla con el original.
4. Cuidá la experiencia móvil
Una imagen debe verse bien tanto en una pantalla grande como en un teléfono. Prestá atención al recorte, al peso de las imágenes que aparecen al comienzo de la página y a que las fotos no desborden el contenido. Si tu sitio permite imágenes adaptables, usá sus opciones para entregar dimensiones apropiadas según el dispositivo.
5. Escribí textos alternativos útiles
El atributo alt de una imagen debe describir su contenido o función cuando aporta información. No lo llenes con listas de palabras clave. En una imagen decorativa, el texto alternativo puede ser vacío para que las tecnologías de asistencia la omitan. Los nombres de archivo descriptivos también ayudan a organizar el contenido, pero no sustituyen una buena página.
6. No olvides la accesibilidad ni el contexto
Las imágenes con texto integrado pueden ser difíciles de leer en pantallas pequeñas y no sustituyen todo el contenido escrito. Si una imagen transmite información importante, ofrecé esa información también como texto HTML. Comprobá contraste, tamaño de letra y legibilidad antes de publicar.
7. Evitá que las imágenes frenen la carga de la página
El peso del archivo importa, pero también cuándo y cómo se solicita. La imagen principal visible al abrir una página puede influir mucho en la percepción de velocidad. No la marques automáticamente para carga diferida: reservá loading="lazy" para imágenes que aparecen más abajo, fuera del primer pantallazo. En imágenes secundarias, la carga diferida puede evitar descargar archivos que todavía no se ven.
Declarar width y height ayuda al navegador a reservar espacio antes de que llegue el archivo y reduce saltos del diseño. Si tu sitio genera varias versiones de una imagen, las opciones srcset y sizes permiten ofrecer tamaños distintos según la pantalla, en lugar de enviar siempre el archivo más grande.
Ejemplo práctico: preparar una foto de producto
Imaginá una foto original de 4000 píxeles de ancho que va a mostrarse en una ficha de producto de unos 800 píxeles. Un flujo razonable sería:
- Crear una copia con dimensiones adecuadas para el diseño, manteniendo la proporción.
- Probar WebP o JPG y comparar el peso, porque el resultado depende de los detalles y los colores de esa foto.
- Revisar el producto al tamaño real y ampliar solo para detectar defectos de compresión en bordes, etiquetas y texturas.
- Conservar el original y publicar la versión optimizada, con texto alternativo descriptivo si la imagen aporta información.
- Comprobar la página en un teléfono y verificar que la imagen principal no aparezca recortada ni desplace el contenido al cargar.
La meta no es conseguir el archivo más pequeño a cualquier precio. Si la compresión destruye detalles que ayudan a reconocer el producto, bajaste demasiado la calidad. Si el archivo pesa mucho pese a verse pequeño en pantalla, revisá las dimensiones antes de seguir comprimiendo.
Lista rápida antes de publicar
- Las dimensiones coinciden con el uso previsto.
- El formato es compatible con la plataforma.
- El peso se redujo sin perder detalles importantes.
- La imagen se ve bien en móvil y escritorio.
- El texto alternativo describe la imagen cuando corresponde.
- Conservaste el original para futuras modificaciones.
Si además querés convertir una foto en un diseño para compartir, probá el creador de postales, frases y collages.