Redimensionar imagen

Cómo usar Redimensionar imagen

1. 1

   Añade la imagen o imágenes que quieres redimensionar.

2. 2

   Escribe el ancho y/o alto de destino en píxeles. Deja activado "Mantener proporción" para evitar deformaciones.

3. 3

   Haz clic en Redimensionar.

4. 4

   Descarga las imágenes redimensionadas.

Resolución, dimensiones y peso son tres cosas distintas

Las dimensiones son el número de píxeles: 1920 × 1080. El peso son los bytes en disco, que dependen de las dimensiones *y* de la compresión. Los ppp son una instrucción de impresión y no tienen absolutamente ningún efecto sobre cómo se ve una imagen en pantalla, pese a ser lo que más a menudo le dicen a la gente que cambie.

Esto importa porque el consejo de «ponlo a 300 ppp» no significa nada en una imagen web. Una imagen de 1200 × 800 son 1200 × 800 píxeles tanto si va etiquetada a 72 como a 300 ppp; la etiqueta solo le dice a una impresora de qué tamaño imprimirla. En pantalla solo existen los píxeles.

Reducir y ampliar no son simétricos

Reducir es seguro. El algoritmo promedia grupos de píxeles en uno solo, y el resultado suele verse más nítido que el original porque promediar atenúa el ruido. No hay penalización de calidad de la que preocuparse.

Ampliar es inventar. Los píxeles extra no existen y hay que deducirlos de sus vecinos, así que la imagen queda más grande y más blanda, siempre. A partir de un 200% la blandura es evidente para cualquiera. Si necesitas una imagen grande, vuelve al origen: el archivo original de la cámara, o el vector si lo hay.

Mantener las proporciones

Cambiar ancho y alto de forma independiente estira la imagen, y las caras hacen que estirar se note al instante. Bloquea la proporción y fija una dimensión; la otra sale sola.

Cuando necesites dimensiones exactas que no coincidan con la proporción original — una foto de perfil cuadrada a partir de una apaisada, por ejemplo — recorta en lugar de estirar. Recortar pierde parte de la imagen, lo cual es honesto. Estirar lo conserva todo y lo deja mal.

• Instagram cuadrado 1080 × 1080, vertical 1080 × 1350, historia 1080 × 1920.
• Vista previa Open Graph (tarjetas de enlace en Facebook, LinkedIn, X): 1200 × 630.
• Miniatura de YouTube: 1280 × 720.
• Cabecera web a ancho completo: 1920-2400 px de ancho; más solo por un motivo concreto.
• Imágenes dentro del artículo: 800-1200 px de ancho sobra en cualquier pantalla.

Ajusta al tamaño de visualización y después dóblalo

Las pantallas Retina y de alta densidad meten dos o tres píxeles físicos en cada píxel CSS, así que una imagen que se muestra a 800 px de ancho se dibuja sobre unos 1600 píxeles físicos en la mayoría de móviles y portátiles actuales. Entregar exactamente 800 px se ve blando precisamente en los dispositivos en los que casi todo el mundo lee.

Exporta al doble del ancho de visualización y comprime un poco más para compensar: una imagen de 1600 px a calidad 80 es a la vez más nítida y más ligera que una de 800 px a calidad 95. Es la mejora más fácil que existe en entrega de imágenes.

Todo el proceso ocurre dentro de tu navegador, con las APIs de WebAssembly y Canvas que tu dispositivo ya incluye. No se sube ningún archivo, no queda ninguna copia y nada espera en la cola de un servidor a ser borrado — por eso mismo la herramienta sigue funcionando con la conexión desactivada.

Preguntas frecuentes

Herramientas relacionadas

Seguir leyendo

• Las imágenes son la razón de que tu web vaya lenta

  En una página de contenido, las imágenes son casi todos los bytes y el Largest Contentful Paint. Arreglarlas es el trabajo de velocidad más rentable.