Redimensionador de imágenes

Redimensionar una imagen es la forma más eficaz de reducir su peso y la única de cumplir un requisito exacto en píxeles: una vista previa de 1200 × 630 para redes sociales, un icono de 512 × 512, un banner de 1920 píxeles. Esta herramienta redimensiona hasta 20 imágenes a la vez, en tu navegador, a un tamaño concreto o a un porcentaje del original.

Cómo funciona

Arrastra archivos JPG, PNG o WebP. Cada uno se decodifica con createImageBitmap aplicando el indicador de orientación EXIF, así que una foto en vertical hecha con el móvil se redimensiona tal como se ve, no tal como se guardó. Hay dos modos:

• Tamaño exacto acepta un ancho, un alto o ambos, en píxeles. Con la relación de aspecto bloqueada, basta con escribir una dimensión para que la otra se calcule a partir de las proporciones de cada imagen; si escribes las dos, manda el ancho. Al desbloquearla puedes fijar ambas por separado, lo que estira o aplasta la imagen: a veces es lo que quieres, pero normalmente no.
• Porcentaje escala todas las imágenes por el mismo factor, del 1 % al 400 %.

Cuando la reducción es de más de la mitad, la imagen se reduce a la mitad en varios pasos antes del remuestreo final; una única reducción grande se salta demasiados píxeles de origen y deja bordes dentados. Por defecto, el resultado se codifica en el formato de origen, o en JPEG, PNG o WebP si lo eliges. La salida JPEG usa una calidad fija del 92 % y aplana la transparencia sobre fondo blanco. Los archivos se descargan como name-resized.jpg, .png o .webp.

Las imágenes se procesan una tras otra en lugar de en paralelo, porque decodificar varias fotos grandes a la vez puede agotar la memoria de un móvil. Los metadatos no se conservan: la salida son píxeles nuevos, sin EXIF, datos GPS ni perfil de color. No se admite SVG, ya que una imagen vectorial no tiene un tamaño fijo en píxeles que cambiar.

Ampliar

Escalar por encima del 100 % no añade detalle. El navegador interpola entre los píxeles existentes, así que una foto de 400 × 300 ampliada a 1600 × 1200 es una versión menos nítida y algo borrosa de la pequeña. Ampliar sirve para cumplir una dimensión mínima obligatoria o para pixel art (que necesita un filtro de vecino más cercano que esta herramienta no ofrece), pero una imagen para imprimir o para una cabecera principal debe salir de un original más grande. Si no lo tienes, que la ampliación sea moderada: un 150 % suele ser aceptable; un 400 %, rara vez.

Elegir las dimensiones

Ajústate al tamaño más grande al que se vaya a mostrar la imagen, teniendo en cuenta las pantallas de alta densidad. Una columna de 600 píxeles de ancho en una pantalla 2× necesita una imagen de 1200 píxeles para verse nítida, y no más. Algunos tamaños habituales:

Para un hueco de proporción fija como 1200 × 630, redimensionar no basta para encajar una imagen con otra proporción: desbloquea la relación de aspecto solo si una ligera deformación es aceptable y, si no, recórtala antes en un editor.

Equivalente en línea de comandos

La opción -resize de ImageMagick acepta el mismo tipo de especificaciones, y el sufijo > solo reduce las imágenes que superan el tamaño objetivo:

convert photo.jpg -auto-orient -resize 1600x photo-resized.jpg     # width, keep ratio
convert photo.jpg -auto-orient -resize '1200x630!' preview.jpg     # exact, ignore ratio
mogrify -auto-orient -resize '50%' *.png                           # in place, by percent

Para saber más

Cómo servir distintos tamaños a distintas pantallas con srcset y <picture>, y cómo dibujar imágenes escaladas en un canvas, se explica en fundamentos de HTML5. Una vez ajustadas las dimensiones, el compresor de imágenes controla el tamaño del archivo con un control deslizante de calidad o un objetivo en KB, y el conversor de imagen a PDF convierte un conjunto de páginas redimensionadas en un único documento.