Elegir la «resolución correcta» de una imagen para la Web parece sencillo hasta que aparecen términos como píxeles, PPI, DPI, Retina, 2x, dimensiones intrínsecas, píxeles CSS o densidad de pantalla. Mezclar estos conceptos conduce a dos errores opuestos: publicar archivos mucho mayores de lo necesario o servir imágenes demasiado pequeñas que terminan viéndose borrosas.
Para la Web, la pregunta fundamental es mucho más concreta:
¿Cuántos píxeles necesita realmente la imagen para verse nítida al tamaño al que se mostrará?
La respuesta depende sobre todo del ancho de visualización, de la densidad de la pantalla y del papel de la imagen. Depende mucho menos de los famosos «72 DPI» o «300 DPI» que todavía aparecen en algunos programas.
Una fotografía de un teléfono puede superar los 4.000 píxeles de ancho aunque la zona de la página donde se mostrará mida solo 800 o 1.200. Conservar siempre la definición original puede significar descargar y decodificar varias veces más píxeles de los necesarios.
Resolución, definición y densidad: conceptos distintos
En el lenguaje cotidiano, «resolución» suele utilizarse para hablar de dimensiones en píxeles. Técnicamente, detrás de esa palabra se mezclan varias ideas.
Definición
La definición describe el número de píxeles que forman la imagen: 1.920 × 1.080, por ejemplo.
Para preparar una imagen Web, suele ser el dato más importante.
Densidad
La densidad expresa cuántos píxeles hay por unidad física. Encontramos, entre otras:
PPI: pixels per inch;
DPI: dots per inch, asociado principalmente a impresión.
Una pantalla de alta densidad concentra más píxeles físicos en una misma superficie.
Tamaño físico
Una impresión puede describirse en centímetros o pulgadas. En la Web, una imagen forma parte de una maquetación cuyas dimensiones se expresan principalmente mediante CSS.
Las tres magnitudes pueden estar relacionadas, pero no son intercambiables.
Por qué 72 DPI no es una regla para la Web
Imaginemos dos archivos con exactamente la misma cuadrícula de 1.200 × 800 píxeles.
Uno contiene una metainformación de 72 DPI y el otro de 300 DPI.
Si el navegador muestra ambos con width: 600px, disponen del mismo número de píxeles de origen y ocupan el mismo ancho CSS. Cambiar solo el DPI no ha creado ni eliminado píxeles.
El valor puede ser útil cuando un programa debe relacionar dimensiones digitales y físicas para imprimir, pero no sustituye las dimensiones reales en píxeles en la Web.
Cambiar una fotografía de 72 a 300 DPI sin remuestreo no la hace cuatro veces más detallada.
Un píxel de imagen y un píxel CSS no siempre equivalen
Supongamos:
img { width: 600px;}
Esos 600px son 600 píxeles CSS. No garantizan que la pantalla utilice exactamente 600 píxeles físicos.
En una pantalla de densidad estándar, la correspondencia puede aproximarse a 1:1. En una pantalla de alta densidad, el navegador puede utilizar más píxeles físicos para representar el mismo ancho CSS.
Aquí entra en juego el device pixel ratio, o DPR.
Comprender devicePixelRatio
El devicePixelRatio expresa aproximadamente la relación entre píxeles físicos y píxeles CSS en el contexto de visualización.
Un DPR de:
1 corresponde aproximadamente a un píxel físico por píxel CSS;
2 puede utilizar unos dos píxeles físicos por dimensión;
3, todavía más.
Un DPR 2 no significa el doble de píxeles totales, sino aproximadamente el doble de ancho y de alto.
Una zona de 600 × 400 píxeles CSS puede corresponder teóricamente a:
DPR 1 → 600 × 400 = 240.000 píxeles;
DPR 2 → 1.200 × 800 = 960.000;
DPR 3 → 1.800 × 1.200 = 2.160.000.
De ahí las denominaciones 1x, 2x y 3x.
Una regla sencilla para estimar las dimensiones necesarias
Como primera aproximación:
ancho útil de la fuente ≈ ancho CSS máximo × densidad objetivo
Para una imagen mostrada como máximo a 700 píxeles CSS:
1x → unos 700 px;
2x → unos 1.400 px;
3x → unos 2.100 px.
En muchos proyectos, una variante alrededor de 2x ofrece un excelente compromiso para pantallas de alta densidad.
No es una ley universal. Una fotografía, una miniatura, una ilustración técnica y un fondo decorativo tienen necesidades distintas.
Por qué servir siempre 3x puede ser contraproducente
Una imagen con el doble de ancho y el doble de alto contiene cuatro veces más píxeles.
Pasar de 1.000 × 600 a 2.000 × 1.200 significa pasar de 600.000 a 2.400.000 píxeles.
A 3x serían 3.000 × 1.800, es decir, 5,4 millones.
El peso comprimido no crece necesariamente en la misma proporción, pero más píxeles suelen implicar más datos que descargar, decodificar y redimensionar.
Servir 3x a todos los visitantes puede ralentizar una página sin producir una mejora perceptible. La resolución debe considerarse junto con la compresión y el formato.
Partir del tamaño de visualización, no del original
No preguntes:
«Mi cámara genera 4.032 píxeles de ancho, ¿cómo los conservo?»
Pregunta:
«¿Cuál es el ancho máximo al que esta imagen será realmente visible?»
Si una fotografía se mostrará en una columna de 800 píxeles CSS, una fuente de 4.032 suele ser excesiva si no existe otro uso que necesite esa definición.
Una variante de alrededor de 1.600 píxeles puede ofrecer una excelente nitidez en una pantalla 2x.
Modifica el número de píxeles conservando normalmente todo el encuadre.
2.000 × 1.000 puede convertirse en 1.000 × 500.
Recortar
Elimina una parte del encuadre para cambiar la composición o la relación de aspecto.
Una imagen 4:3 puede recortarse a 16:9 sin deformarla, pero se perderá contenido en los bordes.
Esta diferencia es importante para las imágenes responsivas: a veces necesitamos menos píxeles; otras veces necesitamos una composición distinta.
Reducir una imagen suele ser seguro; ampliarla no crea detalle
Al reducir una imagen, el algoritmo dispone de varias muestras de origen para producir menos píxeles. Puede conservar muy bien la apariencia si el método es adecuado.
Al ampliar, debe inventar valores intermedios. Puede suavizar la imagen, pero no recuperar detalles reales ausentes.
Por eso conviene conservar un original suficientemente grande y generar las variantes menores a partir de él.
¿Qué método de remuestreo elegir?
Los programas pueden ofrecer vecino más cercano, bilineal, bicúbico, Lanczos u otros métodos.
Para fotografías, los filtros de alta calidad suelen producir buenos resultados. Para pixel art, vecino más cercano puede ser preferible porque conserva bloques y bordes duros.
No existe un algoritmo universalmente mejor para todos los contenidos. Lo importante es comprobar el resultado al tamaño final.
¿Qué significa «Retina»?
«Retina» es una denominación comercial popularizada por Apple para pantallas cuya densidad hace menos perceptibles los píxeles individuales a una distancia normal de uso.
En desarrollo Web, resulta más útil razonar en términos de densidad y DPR que utilizar «Retina» como una categoría técnica absoluta.
¿Hace falta siempre una imagen 2x?
No.
Una miniatura de baja importancia puede verse perfectamente con una densidad inferior. Una ilustración con texto fino puede beneficiarse más de una fuente de alta definición. Un SVG vectorial puede escalar sin una cuadrícula raster fija.
La elección depende del contenido, el peso y la importancia visual.
Las imágenes responsivas resuelven el problema mejor que un único archivo gigante
En lugar de elegir una sola imagen capaz de cubrir todos los casos, HTML permite proporcionar varias variantes mediante srcset y sizes.
El navegador puede seleccionar un archivo en función del tamaño de visualización y de la densidad.
Una imagen correctamente dimensionada puede seguir siendo pesada si utiliza un formato inadecuado o una compresión poco eficiente.
A la inversa, una imagen AVIF muy comprimida puede seguir desperdiciando recursos si mide 5.000 píxeles y se muestra a 300.
La optimización combina:
dimensiones;
formato;
compresión;
variantes responsivas;
estrategia de carga.
Resolución y memoria
Una vez decodificada, una imagen ocupa memoria en función de sus dimensiones y canales, no de su peso comprimido.
Una imagen RGBA de 4.000 × 3.000 puede requerir aproximadamente 48 MB para una representación simple de 4 bytes por píxel.
Reducir dimensiones puede mejorar descarga, decodificación y memoria.
Resolución e impresión
En impresión, la densidad adquiere un significado más directo porque existe un tamaño físico.
Si una imagen tiene 3.000 píxeles de ancho y se imprime a 300 PPI:
3.000 / 300 = 10 pulgadas
A 150 PPI:
3.000 / 150 = 20 pulgadas
La misma cuadrícula puede, por tanto, imprimirse a tamaños distintos con densidades distintas.
DPI y PPI no son exactamente lo mismo
PPI describe píxeles por pulgada en una imagen o pantalla. DPI describe puntos por pulgada y está históricamente relacionado con dispositivos de impresión.
En el uso cotidiano se mezclan con frecuencia, pero conceptualmente no son idénticos.
Para preparar imágenes Web, esta distinción suele ser menos importante que conocer las dimensiones reales en píxeles.
¿Qué ocurre con SVG?
SVG describe formas vectoriales y no depende de una cuadrícula fija del mismo modo que JPEG o PNG.
Un logotipo SVG puede mostrarse a 100 o 1.000 píxeles CSS manteniendo bordes nítidos, siempre que el dibujo sea vectorial.
Por eso conviene elegir el tipo de recurso antes de intentar resolver todo aumentando la resolución.
Cómo preparar una imagen para una página Web
Determina el ancho máximo real de visualización.
Decide qué densidades merece la pena cubrir.
Conserva la relación de aspecto.
Genera variantes desde el original.
Elige un formato adecuado.
Comprime con control visual.
Declara variantes responsivas cuando sea útil.
Comprueba el archivo descargado en el navegador.
Por qué ampliar una imagen pequeña no recrea los detalles
Si una imagen de 400 píxeles se muestra a 1200, el software puede calcular nuevos píxeles, pero no puede saber qué detalle real existía entre los originales. Los algoritmos modernos producen ampliaciones más agradables que una simple duplicación, pero siguen estimando información.
Por eso el mejor momento para resolver un problema de resolución es antes de publicar, partiendo de una fuente suficientemente grande.
Por qué reducir una imagen grande suele ser más seguro
Reducir implica resumir información existente. Se pierde detalle, pero el algoritmo dispone de datos reales para calcular cada píxel de destino. Esto permite generar miniaturas y variantes Web nítidas a partir de un buen original.
Conserva siempre ese original: una variante reducida debe considerarse un archivo de entrega, no una nueva fuente maestra.
Resolución y peso del archivo: relacionados, pero no equivalentes
Duplicar ancho y alto multiplica aproximadamente por cuatro el número de píxeles. Sin embargo, el tamaño comprimido no se multiplica necesariamente por cuatro: depende del formato, la escena, el nivel de calidad y el codificador.
Una imagen puede tener dimensiones razonables y seguir siendo demasiado pesada por una compresión poco eficiente. También puede estar muy comprimida y seguir transfiriendo demasiados píxeles. Por eso resolución y compresión deben analizarse por separado.
¿Qué anchura elegir para una imagen a ancho completo?
Empieza por el ancho máximo que el diseño puede mostrar, no por las dimensiones de la cámara. Si el contenedor llega a 1200 píxeles CSS, una variante cercana a 1200 puede cubrir pantallas 1x y otra cercana a 2400 puede servir para densidades altas cuando sea realmente útil.
No significa que todos los visitantes deban descargar 2400 píxeles. srcset permite ofrecer varias fuentes y dejar que el navegador elija.
¿Qué resolución para una miniatura o una tarjeta?
Una tarjeta de 320 píxeles de ancho no necesita recibir sistemáticamente una fotografía de 3000 píxeles. Prepara una o varias variantes cercanas a los tamaños que realmente puede ocupar el componente.
Esto es especialmente importante en rejillas: diez miniaturas sobredimensionadas pueden desperdiciar mucho más ancho de banda que una única imagen hero.
¿Qué resolución para una imagen hero?
Una hero merece más margen porque suele ocupar gran parte de la ventana y puede convertirse en LCP. Pero «más grande» no significa «sin límite». Mide el contenedor, identifica los breakpoints y genera fuentes suficientes para los casos reales.
Una sola imagen o varias variantes
Para un contenido de ancho fijo, una sola fuente bien dimensionada puede bastar. Para un diseño responsive, varias variantes son normalmente más eficientes.
El atributo srcset describe las fuentes disponibles y sizes ayuda al navegador a estimar cuánto espacio ocupará la imagen. Así un móvil puede evitar descargar la variante pensada para un escritorio grande.
width y height en HTML no sirven solo para redimensionar
Declarar las dimensiones intrínsecas permite al navegador conocer la relación de aspecto antes de que termine la descarga. Puede reservar el espacio correspondiente y reducir los desplazamientos de diseño.
Después, CSS puede mantener la imagen flexible, por ejemplo con max-width: 100% y height: auto. Las dimensiones HTML y el comportamiento responsive no son incompatibles.
Atención a width: 100%
width: 100% hace que la imagen ocupe el ancho de su contenedor, pero no reduce el archivo descargado. Si el src apunta a una imagen de 4000 píxeles, el navegador puede seguir descargando esos 4000 aunque el elemento se muestre a 500 CSS px.
¿Las pantallas 4K exigen imágenes 4K?
No. La resolución total de la pantalla no determina por sí sola la fuente necesaria. Lo importante es el tamaño que ocupa esa imagen dentro de la interfaz y la densidad efectiva del dispositivo. Una imagen que ocupa un cuarto de la pantalla no necesita automáticamente la resolución completa del monitor.
Casos particulares
Capturas de pantalla
Las capturas contienen texto y líneas finas que revelan rápidamente un redimensionado inadecuado. Evita ampliarlas y comprueba su legibilidad en el tamaño final.
Logotipos e iconos
Cuando sea posible, utiliza SVG. Un vector describe formas y no depende de una cuadrícula fija, por lo que evita gestionar variantes 1x y 2x para muchos gráficos de interfaz.
Imágenes con texto integrado
El texto rasterizado pierde nitidez al redimensionarse y no es accesible como texto HTML. Si el contenido puede escribirse en la página, suele ser preferible separar texto e imagen.
Resolución y accesibilidad
Una resolución adecuada ayuda a que diagramas, capturas y textos incrustados sigan siendo legibles, pero no sustituye el texto alternativo ni una estructura accesible. Evita depender de detalles minúsculos que desaparecen en pantallas pequeñas.
¿Redimensionar antes o después de elegir el formato?
En un flujo de optimización, normalmente conviene partir del original, fijar primero las dimensiones necesarias y después codificar la variante en el formato y calidad elegidos. Comprimir un archivo enorme para redimensionarlo después suele realizar trabajo innecesario y puede encadenar pérdidas.
Cómo comprobar que una imagen no es demasiado pequeña
Compárala con el mayor tamaño de visualización previsto y con la densidad que deseas cubrir. Si una fuente debe ampliarse de forma importante para alcanzar ese tamaño, busca un original mayor o acepta conscientemente una menor nitidez.
Cómo comprobar que una imagen no es demasiado grande
Observa la variante realmente descargada en las herramientas del navegador y compárala con el tamaño renderizado. Si una tarjeta de 400 CSS px recibe sistemáticamente 2400 píxeles, existe margen claro de optimización.
¿Qué margen conservar?
No hace falta ajustar cada variante al píxel exacto. Un pequeño margen facilita reutilizarla en varios contextos. El objetivo es evitar órdenes de magnitud innecesarios, no perseguir una precisión falsa.
¿Cambian las dimensiones ideales con el formato?
Las necesidades visuales de dimensiones son esencialmente las mismas. WebP o AVIF pueden reducir el peso frente a JPEG o PNG, pero un formato eficiente no convierte una fuente sobredimensionada en una buena decisión.
Resolución y rendimiento Web
Más píxeles significan potencialmente más bytes que transferir y más memoria después de la decodificación. En imágenes importantes, una mala elección puede afectar al LCP; en galerías o listados, el coste se acumula. Dimensionar correctamente es por tanto una optimización de rendimiento, no solo estética.
Una metodología práctica en siete pasos
Inspecciona el archivo: dimensiones, formato, peso y orientación.
Identifica el contexto: hero, tarjeta, artículo, galería o icono.
Mide el ancho máximo de visualización.
Elige la densidad objetivo: 1x, 2x o variantes intermedias según el caso.
Conserva la relación de aspecto salvo que el diseño exija un recorte.
Redimensiona desde el original.
Codifica y verifica: formato, compresión, peso y aspecto en el navegador.
Tabla de decisión rápida
Situación
Estrategia recomendada
Foto de artículo
Ajustar al ancho del contenido y ofrecer variantes si es responsive
Miniatura
Generar una fuente cercana al tamaño real de la tarjeta
Hero
Varias anchuras, compresión cuidada y atención al LCP
Logotipo
Preferir SVG cuando exista una fuente vectorial
Captura de pantalla
Evitar ampliarla y preservar la legibilidad del texto
Imagen para impresión
Relacionar píxeles, tamaño físico y PPI/DPI
Ejemplo: imagen de artículo
Una columna de artículo mide como máximo 720 px.
Puedes generar, por ejemplo:
480 px para pantallas pequeñas;
720 px para casos 1x;
1.200 o 1.440 px para densidades altas.
No hace falta servir una fotografía de 4.000 px a todo el mundo.
Ejemplo: miniatura de tarjeta
Si una tarjeta muestra una imagen a 280 px, una fuente de 2.400 px suele ser un desperdicio.
Una o dos variantes alrededor del tamaño real y de una densidad razonable serán mucho más eficientes.
Ejemplo: imagen hero
Una imagen hero puede ocupar un ancho considerable y ser candidata al Largest Contentful Paint.
Aquí importan simultáneamente resolución, formato, compresión, srcset, sizes y prioridad de carga. La guía Optimizar imágenes para el rendimiento Web reúne estas decisiones.
Ejemplo: logotipo
Si el logotipo es vectorial, SVG suele evitar la necesidad de múltiples resoluciones raster.
Si solo existe una fuente raster, conserva una versión suficientemente grande y genera las dimensiones necesarias sin ampliaciones sucesivas.
Errores frecuentes
«Una imagen Web debe estar a 72 DPI»
No. Lo fundamental son sus dimensiones reales y el tamaño de visualización.
«300 DPI siempre significa más calidad»
No si solo se cambia la metainformación sin añadir píxeles.
«2x significa el doble de píxeles totales»
No. Aproximadamente duplica cada dimensión, lo que puede cuadruplicar el número total.
«Una imagen más grande siempre se verá mejor»
No necesariamente. Puede ser visualmente indistinguible y mucho más pesada.
«Puedo ampliar una imagen pequeña sin límite»
No. La interpolación no recupera detalle real.
«CSS reduce el peso de una imagen grande»
No. width cambia la visualización, no necesariamente el archivo descargado.
Lista de comprobación
Antes de publicar:
conoce las dimensiones intrínsecas;
conoce el ancho máximo CSS;
conserva el ratio;
evita ampliar una fuente insuficiente;
genera variantes útiles;
comprueba srcset y sizes;
controla el formato y la compresión;
declara width y height cuando corresponda;
prueba en pantallas y densidades representativas.
Lo que hay que recordar
En la Web, la «resolución» útil comienza por las dimensiones en píxeles y el tamaño real de visualización.
El DPI por sí solo no añade detalle. Una pantalla de alta densidad puede justificar una fuente más grande, pero enviar sistemáticamente la variante máxima desperdicia recursos.
La estrategia correcta consiste en partir del contexto, conservar un buen original, generar tamaños adaptados y permitir al navegador elegir cuando el diseño es responsive.
Preguntas frecuentes
¿72 DPI o 300 DPI para la Web?
Ninguno es una regla universal. Mira las dimensiones en píxeles y el tamaño de visualización.
¿Una imagen 2x pesa cuatro veces más?
Contiene aproximadamente cuatro veces más píxeles si duplica ancho y alto, aunque el peso comprimido no aumenta necesariamente exactamente por cuatro.
¿Qué tamaño necesito para mostrar 600 px CSS?
Alrededor de 600 px para 1x y 1.200 px para una cobertura 2x son referencias útiles, no obligaciones absolutas.
¿Cambiar los DPI aumenta la nitidez?
No si no se añaden píxeles mediante remuestreo.
¿Debo conservar siempre el original?
Sí, es una buena práctica: genera las variantes de entrega a partir de una fuente de calidad.
¿Debo redimensionar antes de comprimir?
En general sí: genera primero las dimensiones necesarias a partir del original y codifica después cada variante con la compresión adecuada.
¿Una imagen WebP puede seguir siendo demasiado grande?
Sí. Un formato moderno no corrige unas dimensiones excesivas ni una calidad mal ajustada.
¿Qué resolución elegir para un logotipo?
Si existe una versión vectorial, SVG suele ser preferible. Para un logotipo rasterizado, prepara dimensiones suficientes para el tamaño máximo real sin ampliarlo.
¿Por qué mi imagen solo parece borrosa en algunas pantallas?
Puede deberse a una densidad de píxeles mayor: la misma anchura CSS necesita más píxeles físicos para alcanzar una nitidez comparable.
¿width y height impiden que una imagen sea responsive?
No. Pueden declarar la relación intrínseca mientras CSS adapta el tamaño visible al contenedor.
¿Una imagen de 4000 píxeles es necesariamente demasiado grande?
No. Puede ser adecuada como original o para un uso de gran formato. Lo importante es no servirla innecesariamente a un contexto mucho más pequeño.
¿Cómo elegir entre resolución, formato y compresión?
Empieza por las dimensiones necesarias para el contexto, elige después el formato según el tipo de contenido y la compatibilidad, y termina ajustando la compresión al nivel de calidad deseado.
Entiende srcset, sizes, los descriptores de anchura y densidad, picture, la dirección artística y cómo el navegador elige la imagen responsive adecuada.
