Redimensionar imágenes, cambia el tamaño de fotos en línea
Redimensiona imágenes por ancho, alto o porcentaje, bloquea la relación de aspecto y elige un modo de ajuste. 100 % en tu navegador, sin subidas.
Cargando Redimensionar imágenes, cambia el tamaño de fotos en línea… Si no ocurre nada, activa JavaScript.
Redimensionar una imagen significa cambiar el número de píxeles que componen su ancho y su alto, lo que a su vez afecta tanto al tamaño del archivo como a cómo se muestra la imagen en pantalla. La resolución de una imagen digital se mide en megapíxeles: una imagen de 4000 × 3000 contiene 12 millones de píxeles. Reducir a la mitad ambas dimensiones, hasta 2000 × 1500, baja el número de píxeles a 3 millones, recortando los datos brutos en un 75 %. Entender la diferencia entre las dimensiones intrínsecas en píxeles de una imagen y el tamaño en CSS con el que un navegador la representa es esencial para el rendimiento web: una imagen de 4000 px de ancho mostrada en un contenedor de 400 px obliga al navegador a descargar diez veces más datos de los necesarios.
Preguntas frecuentes
¿Se suben mis imágenes a algún servidor?
¿Qué es la relación de aspecto y por qué debería bloquearla?
¿Cuál es la diferencia entre los modos de ajuste Contener, Cubrir y Estirar?
¿Puedo redimensionar una imagen por porcentaje en lugar de por píxeles fijos?
¿Qué formatos se admiten como entrada y como salida?
¿Hay una resolución o un tamaño de archivo máximos?
¿Por qué debería servir varios tamaños de imagen en un sitio web?
¿Afecta el redimensionado a la calidad de la imagen?
¿Qué significa megapíxel y por qué importa?
¿Cómo se compara el redimensionado en el navegador con Photoshop u otras herramientas de escritorio?
Acerca de Redimensionar imágenes, cambia el tamaño de fotos en línea
Los desarrolladores web, los diseñadores gráficos, los gestores de redes sociales y los blogueros redimensionan imágenes a diario. Un diseño web adaptable suele requerir la misma fotografía en tres o cuatro anchos distintos: un original a resolución completa para monitores grandes, una variante media para tabletas y una miniatura compacta para el móvil, servidos mediante el atributo HTML srcset para que los navegadores descarguen solo el tamaño que necesitan. Las plataformas de comercio electrónico necesitan dimensiones de miniatura uniformes para las cuadrículas de productos. Quienes hacen marketing por correo deben mantener las imágenes por debajo de límites de tamaño estrictos. Los flujos de trabajo de impresión requieren objetivos específicos de DPI y milímetros. El simple acto de redimensionar a las dimensiones adecuadas antes de subir puede ahorrar gigabytes de almacenamiento y acelerar enormemente la carga de las páginas.
Esta herramienta realiza cada operación de redimensionado localmente en tu navegador mediante la HTML Canvas API, así que tus imágenes nunca salen de tu dispositivo. Puedes indicar un ancho exacto, un alto exacto o un porcentaje de las dimensiones originales. Activar el bloqueo de la relación de aspecto garantiza que la imagen no se estire ni se aplaste nunca. Tres modos de ajuste te dan un control preciso: Contener escala la imagen para que quepa entera dentro del cuadro objetivo (el lienzo se rellena si es necesario), Cubrir llena el cuadro y recorta lo que sobra por los bordes, y Estirar fuerza la imagen a las dimensiones exactas sin tener en cuenta la proporción. El resultado está disponible como descarga en PNG, JPEG o WebP con la calidad que elijas.
Algunos consejos para obtener los mejores resultados: bloquea siempre la relación de aspecto, salvo que necesites específicamente una salida distorsionada. Al generar miniaturas para un sitio web, busca el tamaño de visualización exacto en lugar de confiar en que el CSS reduzca la imagen, porque servir imágenes del tamaño correcto es una de las mejoras más rápidas en una auditoría de rendimiento de Lighthouse. Si necesitas producir varios tamaños de la misma imagen, redimensiona primero al más grande y luego reduce esa salida hacia los tamaños más pequeños, ya que así se conserva más detalle que reduciendo repetidamente a partir del original. Para pantallas Retina y de alta densidad, produce imágenes al doble (2×) del tamaño de visualización en CSS para asegurar una representación nítida.
Píxeles, megapíxeles y el largo camino hacia las imágenes adaptables
La palabra "píxel" es una contracción de "picture element" (elemento de imagen) y fue acuñada a finales de la década de 1960 por ingenieros del Jet Propulsion Laboratory de la NASA, que necesitaban un término para describir las celdas individuales de las imágenes digitalizadas que devolvían las sondas espaciales. La primera cámara digital de consumo capaz de capturar un megapíxel completo fue la Kodak DCS 100, lanzada en 1991 a un precio de unos 13 000 dólares; guardaba las imágenes en una unidad de disco duro independiente que se llevaba colgada del hombro con una correa. Hacia 2010, los teléfonos inteligentes económicos ya venían con cámaras de 5 megapíxeles, y hacia 2023 los modelos de gama alta superaban habitualmente los 200 megapíxeles, creando una paradoja en la que las cámaras de nuestros bolsillos producen imágenes mucho más grandes de lo que cualquier pantalla puede mostrar.
El concepto de imágenes adaptables, servir distintos tamaños de imagen a distintos dispositivos, es décadas anterior a la web moderna. Los primeros ingenieros de emisión televisiva se enfrentaron a un problema análogo al diseñar sistemas que debían funcionar en pantallas que iban desde diminutos televisores portátiles hasta grandes consolas de salón. En la web, el problema se agudizó hacia 2010, cuando Apple presentó la pantalla Retina, que duplicó la densidad de píxeles de la pantalla del iPhone 4. De repente, los desarrolladores tenían que servir imágenes al doble de resolución para esos dispositivos o aceptar fotos borrosas, sin penalizar a la vez a los usuarios de pantallas normales con descargas innecesariamente grandes. Esa tensión impulsó la creación del atributo HTML srcset, estandarizado en 2014, y del elemento picture, ambos para que los navegadores seleccionen automáticamente el tamaño de imagen más adecuado.
Antes de que existiera el zoom digital, el zoom óptico en las cámaras se lograba moviendo físicamente los elementos de la lente, el mismo principio que los fabricantes de telescopios venían usando desde el siglo XVII. Los algoritmos de redimensionado digital, en cambio, son producto de la matemática del procesamiento de señales desarrollada en el siglo XX. El método de interpolación bilineal que usan hoy la mayoría de los navegadores se describió en un artículo de 1975, mientras que la interpolación bicúbica, preferida por los editores de imagen profesionales, fue introducida por Robert Keys en 1981. Las modernas herramientas de ampliación basadas en IA usan redes neuronales convolucionales entrenadas con millones de pares de imágenes para "inventar" detalle plausible al agrandar imágenes, produciendo resultados que los métodos matemáticos más antiguos sencillamente no pueden igualar.