Por User Media el
Cómo optimizar imágenes para web: 1 de cada 10 sitios envía más de 5 megas
Reduce el peso de tus fotos sin sacrificar nitidez: define píxeles, formato, compresión y carga según cada pantalla.
Las imágenes suelen ser el recurso más solicitado de un sitio, y uno de cada diez sitios envía más de 5 MB de imágenes en escritorio y celular. Es el percentil 90 de HTTP Archive, citado por web.dev. Optimizar imágenes para web consiste en servir la versión que realmente necesita cada pantalla, con el formato, la compresión y el orden de carga adecuados.
¿Qué debo revisar primero: las dimensiones o los kilobytes?
Primero importa el tamaño en píxeles que la imagen ocupará en la página; después, el peso del archivo que esa versión genera. Una foto puede tener pocos kilobytes y aun así verse mal si le faltan píxeles, o verse nítida mientras descarga más datos de los que la pantalla requiere. MDN Web Docs explica que srcset ofrece versiones con anchos intrínsecos distintos y sizes comunica el espacio que ocuparán.
Los píxeles describen el detalle disponible; los kilobytes describen cuánto debe transferirse antes de mostrarlo. El orden evita una falsa solución: reducir peso a ciegas puede borrar detalles relevantes, y exportar la foto original para una miniatura hace descargar datos que el visitante nunca verá.
¿Qué tamaño debo exportar para cada espacio de la página?
La exportación parte del ancho máximo real de cada espacio y de la proporción que conserva el contenido importante. Una tarjeta, una ficha de producto y una portada no necesitan necesariamente el mismo archivo, aunque muestren la misma foto. La medida cambia según el diseño, el dispositivo y si el encuadre debe destacar un producto o un detalle.
En una ficha de producto, la galería conserva el detalle que explica la compra y la miniatura recibe una versión mucho más pequeña. En la portada de una empresa de servicios, la foto se prepara para el ancho máximo del hero; debajo del primer pantallazo, las fotos pueden esperar. Así se definen las imágenes desde el espacio de las tiendas en línea que diseñamos, no desde el archivo más grande disponible.
| Espacio | Versión necesaria | Prioridad |
|---|---|---|
| Portada | Ancho real máximo | Primera |
| Tarjeta | Ancho de la tarjeta | Según posición |
| Miniatura | Encuadre reducido | Posterior |
¿Qué formato conviene para una foto, logo o transparencia?
Para imágenes ráster, compuestas por píxeles, WebP o AVIF suelen comprimir mejor que PNG, JPEG y GIF. La elección final depende del contenido y de la compatibilidad que necesita tu sitio; cuando hace falta una alternativa, picture puede entregar un PNG o JPEG de respaldo. Esa es la recomendación de MDN Web Docs, y nuestra guía del formato WebP compara los cuatro con más detalle.
Una foto, un logo y un icono no se evalúan por el mismo detalle visual. Una foto necesita conservar textura y color; un logo o icono puede requerir transparencia y bordes limpios. Conviene comparar los archivos exportados a su tamaño mostrado, porque el mejor formato es el que mantiene la información visible con menos transferencia en ese caso.
¿Cómo comprimo una imagen sin que se vea borrosa?
La compresión funciona cuando se compara la versión exportada a su tamaño final, no cuando se persigue un porcentaje fijo. El resultado depende de la foto, el formato, las dimensiones mostradas y el dispositivo. Una textura fina, un borde de producto o texto integrado revelan antes una pérdida de detalle que un fondo liso.
La prueba útil alterna peso y nitidez hasta que el archivo menor conserva lo que ayuda a decidir. Para una landing, el archivo de pauta y el de la página pueden ser distintos: la web necesita una versión que proteja el mensaje principal y el botón, como ocurre en las landing pages que diseñamos.
¿Cómo preparo imágenes responsive para el celular?
Las imágenes responsive entregan una versión con los píxeles o el recorte apropiados para el espacio disponible. Con srcset y sizes, el navegador puede elegir una versión adecuada; con picture, también puede variar el recorte cuando el celular necesita priorizar otra parte de la escena.
El celular no debería descargar la foto original de estudio solo para llenar una tarjeta pequeña. Preparar varias versiones del mismo encuadre reduce esa carga y mantiene el producto reconocible. En un sitio hecho en WordPress, la misma lógica aplica: las variantes deben corresponder al espacio donde se muestran.
¿Cuál imagen carga primero y cuáles pueden esperar?
La imagen principal visible al abrir la página debe cargarse de inmediato; las que están más abajo pueden diferirse. Aplicar loading="lazy" a la imagen LCP, la más grande que aparece al inicio, retrasa su descarga y perjudica esa métrica. web.dev usa como referencia un LCP de 2,5 segundos o menos en al menos el 75 % de las visitas.
Reservar la proporción antes de descargar la imagen evita que el contenido salte cuando aparece. Declarar width y height permite al navegador hacerlo; para CLS, la referencia de buena experiencia es 0,1 o menos en al menos el 75 % de las visitas, según web.dev.
¿Cómo compruebo que las imágenes ya no frenan la página?
La comprobación final consiste en analizar la URL publicada y confirmar qué archivo descarga cada dispositivo. PageSpeed Insights permite revisar una página en distintos dispositivos después de sustituir o ajustar imágenes. La revisión conecta el peso de cada recurso con la experiencia real, no solo con la exportación en el computador.
Una imagen útil para búsqueda debe estar en el atributo src de un elemento img, incluso dentro de picture. Google puede descubrir esas imágenes, pero no las imágenes CSS; también recomienda conservar una URL de respaldo en src para imágenes responsive, como indica Google Search Central.
Preguntas frecuentes sobre imágenes web
¿Puedo subir una imagen grande y reducirla solo con CSS?
CSS puede reducir el espacio visible, pero no evita que el navegador descargue el archivo grande indicado. Para que la transferencia coincida con el espacio real, la página necesita ofrecer variantes de la misma imagen y describir el espacio con las herramientas responsive. Reducirla visualmente no sustituye esa preparación.
¿Debo activar carga diferida en todas las imágenes del sitio?
La carga diferida sirve para imágenes fuera de la vista inicial, no para la imagen principal de apertura. La primera pieza visual relevante debe poder descargarse pronto. Las fotos de secciones inferiores, galerías extensas o recomendaciones posteriores son candidatas naturales para esperar hasta que se acerquen a la pantalla.
¿Cómo optimizo imágenes para WordPress sin cambiar su proporción?
La proporción se conserva cuando cada variante mantiene la misma relación entre ancho y alto del encuadre original. La optimización puede reducir dimensiones y peso sin recortar si todas las versiones respetan esa relación. Si el celular necesita otro encuadre, es una decisión editorial separada que conviene preparar con picture.
¿Qué texto alternativo necesita una foto de producto?
El texto alternativo describe la información o función que la imagen aporta, no una lista genérica de rasgos visuales. Una imagen decorativa lleva alt=""; si funciona como enlace o botón, el texto describe la acción. La guía de W3C Web Accessibility Initiative distingue esos casos.
¿Necesitas que tus imágenes carguen y se entiendan mejor?
En User Media revisamos el papel de cada imagen dentro de tu página, desde el tamaño y la carga hasta la experiencia que sostiene tu mensaje. Hablemos de tu sitio web.
