Imagyc›Artículos

Resolución de imágenes para ordenador y móvil sin perder rendimiento

Publicado el 9 de octubre de 2026 · 8 min de lectura

La resolución adecuada de una imagen depende del espacio que ocupa en la página y de la nitidez necesaria para ese uso. Una miniatura, una foto con zoom y un banner de ancho completo no necesitan recibir el mismo archivo.

Enviar siempre la versión más grande desperdicia datos. Reducir todas las imágenes en exceso puede eliminar detalles de productos y dificultar la lectura. Una solución práctica consiste en preparar tamaños adaptados al diseño y dejar que el navegador elija una opción adecuada.

En un sitio habitual, esto supone trabajar con varias versiones definidas, revisar el resultado en el móvil y reservar imágenes grandes para los casos en que aportan información útil.

Dimensiones peso y resolución no son lo mismo

Cuando alguien pide una imagen de “alta resolución”, puede referirse a cosas diferentes. En la web, la medida más útil para empezar es la dimensión en píxeles: por ejemplo, 800 × 600.

El peso, expresado en KB o MB, depende también del formato, la compresión y el contenido. Dos imágenes con las mismas dimensiones pueden tener pesos muy distintos. Una fotografía detallada suele ser más difícil de comprimir que una ilustración sencilla.

PPI indica píxeles por pulgada y relaciona los píxeles con el tamaño físico, especialmente en impresión. Cambiar únicamente ese valor, sin remuestrear, no añade píxeles al archivo.¹ Sustituir “72” por “300” en el editor no hace que una imagen sea más nítida en el sitio por sí solo.

Tampoco deben confundirse los píxeles del archivo con los píxeles CSS utilizados para organizar la página. Esa diferencia explica por qué un móvil puede necesitar una fuente con más píxeles que la anchura mostrada en el diseño.

Empieza midiendo el espacio de visualización

Una imagen que ocupa 600 píxeles CSS de ancho no tiene que seguir los 1.920 píxeles de todo un monitor. Si está en una columna, el ancho de esa columna es la primera referencia.

En el móvil, descuenta márgenes. Un viewport de 390 píxeles CSS puede mostrar una imagen de 358 píxeles de ancho si hay 16 píxeles de margen a cada lado.

El viewport es el espacio disponible para la página dentro del navegador. Puede cambiar con la ventana, la orientación del dispositivo y el diseño. “Desktop” y “mobile” ayudan a organizar el trabajo, pero no bastan para determinar las dimensiones del archivo.

Mide los componentes principales: miniaturas, tarjetas, imágenes del artículo, foto principal del producto y banner. Después, utiliza esas medidas para generar versiones.

Cómo cambia la cuenta con la densidad de píxeles

La densidad de pantalla puede hacer que un píxel CSS ocupe más de un píxel físico. Esa relación se llama DPR, o device pixel ratio.²

Una imagen mostrada con 400 píxeles CSS de ancho puede beneficiarse de una fuente de 800 píxeles en una pantalla DPR 2.³ Es una relación entre tamaño de visualización y densidad, no una norma que exija 800 píxeles a toda fotografía móvil.

Como referencia inicial, usa esta cuenta: ancho del archivo ≈ ancho mostrado × densidad deseada.

Si la imagen aparece con 360 píxeles CSS, una versión de 720 píxeles puede servir para evaluar 2x. Si aparece con 700 píxeles CSS, el punto de partida para 2x sube a 1.400 píxeles.

Existen pantallas de DPR superior y monitores de alta densidad. Aun así, entregar siempre la mayor versión posible puede no compensar. Compara 1x, 2x y versiones mayores cuando exista una ventaja perceptible. Las texturas del producto y las letras requieren otra evaluación que una foto decorativa.

Rangos prácticos para empezar

Los rangos siguientes son sugerencias editoriales para diseños comunes, calculadas a partir del espacio mostrado y una evaluación de hasta aproximadamente 2x. No son requisitos de Google ni dimensiones universales. Los números indican ancho; el alto debe mantener la proporción elegida.

Son opciones para crear candidatos, no para obligar a todos los visitantes a descargar el mayor. Una tarjeta estrecha en un ordenador puede necesitar menos píxeles que una imagen a todo el ancho en un móvil de alta densidad.

Los banners que superen estas áreas requieren otra medición. No aumentes el estándar de todas las imágenes porque haya un caso concreto más ancho.

Por qué un exceso de píxeles puede ralentizar la página

Más píxeles pueden exigir más información codificada y más trabajo para mostrar la imagen. El peso final depende de la compresión, pero una descarga pequeña no elimina automáticamente el coste de decodificar una imagen grande.⁴

La cuenta es importante. Una imagen de 800 × 600 contiene 480.000 píxeles. Otra de 1.600 × 1.200 tiene 1,92 millones. Duplicar ancho y alto cuadruplica la cantidad de píxeles.

Eso no significa que el archivo pese exactamente cuatro veces más ni que tarde cuatro veces más en cargar. La comparación muestra por qué conviene justificar un aumento de dimensiones.

En un catálogo con decenas de productos, el exceso se acumula. Si cada miniatura utiliza el original destinado al zoom, los visitantes descargan detalles que no pueden aprovechar en ese espacio.

Reducir con CSS no reduce la descarga

El navegador puede mostrar una fotografía pequeña mediante CSS y seguir recibiendo un archivo grande. Definir una anchura visual de 300 píxeles no crea automáticamente una versión ligera de 300 píxeles.

La solución es generar archivos menores y configurar su entrega. srcset presenta candidatos disponibles; sizes describe el espacio ocupado en el diseño cuando se utilizan descriptores de ancho.^{3, 5}

El navegador considera esa información y el contexto de visualización para elegir una opción. La selección puede variar según la implementación y las circunstancias; no debe interpretarse srcset como una orden rígida de descargar un archivo concreto.

La configuración debe ser precisa. Si el sitio indica que la imagen ocupa toda la pantalla cuando está en una columna estrecha, puede favorecer la elección de un candidato innecesariamente grande.

Un ejemplo de imágenes adaptables

Considera una imagen de proporción 8:5, limitada a 640 píxeles CSS en ordenador y con márgenes laterales de 16 píxeles en móvil. Puede tener archivos de 320, 640, 960 y 1.280 píxeles de ancho, todos con el mismo contenido y proporción.

Este ejemplo sirve para quien configure el sitio:⁵

<img
src="producto-640.webp"
srcset="producto-320.webp 320w,
producto-640.webp 640w,
producto-960.webp 960w,
producto-1280.webp 1280w"
sizes="(max-width: 672px) calc(100vw - 32px), 640px"
width="1280" height="800"
alt="Bolso azul visto de frente">

El código supone que el CSS respeta el diseño descrito. Los archivos deben existir con los anchos indicados. sizes no genera ni redimensiona archivos.

En una imagen principal de la primera pantalla, revisa la prioridad de carga. Para una situada más abajo, la carga diferida puede ser apropiada. La posición, además de la resolución, determina esa elección.

Proporción recorte y calidad percibida

La proporción relaciona ancho y alto. Un archivo de 1.200 × 800 tiene proporción 3:2. Si el espacio exige un cuadrado, hay que recortar o aceptar zonas vacías; estirar puede deformar el producto.

CSS object-fit: cover rellena un área manteniendo la proporción y cortando parte del contenido.⁶ No reduce por sí solo el archivo descargado. Un recorte realizado al exportar puede ofrecer una imagen más apropiada para el espacio.

En banners, conviene evaluar un recorte específico para móvil. Una composición horizontal puede dejar rostro, producto o texto demasiado pequeños en una pantalla estrecha. El elemento picture permite elegir fuentes distintas para esa adaptación.⁷

Siempre que sea posible, conserva las palabras importantes como texto de la página. Las letras dentro de una fotografía necesitan suficientes píxeles para seguir siendo legibles y pueden limitar la adaptación del diseño.

Cuándo tiene sentido una versión más grande

Una imagen mayor puede hacer falta para ampliar detalles, ocupar un área extensa en una pantalla de alta densidad o cumplir requisitos de otro destino.

En productos con zoom, mantén ligera la versión de navegación y evalúa cargar la fuente ampliada cuando se utilice ese recurso. La ampliación debe mostrar detalle real; agrandar una imagen pequeña no reconstruye la textura ausente.

También hay recomendaciones específicas de presentación. Para imágenes grandes en Discover, Google recomienda al menos 1.200 píxeles de ancho, más de 300.000 píxeles totales, composición adecuada a 16:9 y habilitación de vistas previas grandes.⁸ Esto no exige que todas las miniaturas del sitio tengan ese ancho.

Conserva una fuente adecuada para ese propósito y entrega candidatos menores cuando el diseño lo permita. Disponer de una imagen grande y obligar a todo el público a descargarla son decisiones diferentes.

La resolución trabaja junto con compresión y carga

Después de definir dimensiones, compara formatos y calidad. Un archivo con ancho correcto puede seguir siendo pesado por su exportación. Una versión excesivamente comprimida puede quedar borrosa aunque tenga muchos píxeles.

Elige primero el recorte y las dimensiones, luego ajusta la compresión y revisa al tamaño de uso. Conserva el original para no generar nuevas opciones desde una miniatura degradada.

Reserva espacio con width y height proporcionales, evitando movimientos de contenido durante la carga.⁹ La imagen responsable de LCP no debe tener lazy loading.¹⁰ Estas medidas complementan el control de resolución.

No existe una meta única de KB que resuelva todos los casos. Un avatar y una fotografía técnica ampliable tienen funciones distintas. Define el presupuesto de imágenes para la página completa, especialmente en galerías y listados.

Cómo comprobar que redujiste sin perjudicar

Compara la misma página antes y después en móvil y ordenador. Observa detalles, letras y colores al tamaño normal de navegación. Después revisa el zoom, si existe.

En el panel de red del navegador, comprueba qué archivo se solicitó y cuántos bytes llegaron. Cambiar el tamaño visual sin modificar la fuente puede dar la impresión de optimización aunque la descarga sea idéntica.

Utiliza PageSpeed Insights para evaluar la carga y consulta datos reales cuando estén disponibles.¹¹ Busca cambios de LCP y estabilidad visual, además del ahorro en bytes. Una mejora de velocidad no compensa una foto que impide evaluar el producto.

Si no hay diferencia visible entre dos versiones y la menor reduce la transferencia manteniendo un buen rendimiento, puede ser suficiente para ese espacio. Si desaparece una textura importante, ajusta calidad o dimensiones para ese uso concreto.

Organiza las versiones según el diseño, conserva el original y revisa tamaños cuando cambie la página. Así mantienes rapidez sin tener que elegir entre imágenes pesadas e imágenes sin detalles.