Resize Images Online: la trampa de la retina y lo que desecha silenciosamente

Durante unos seis meses, cada miniatura de este blog fue ligeramente suave. no roto. obviamente no está mal. solo… velloso, en la forma en que notas por el rabillo del ojo y luego te diste a notar.

El diseño decía que la ranura en miniatura tenía 600 píxeles de ancho. Así que exporté miniaturas a 600 píxeles de ancho. Eso es exactamente lo que se está haciendo mal, y me tomó un tiempo vergonzoso averiguar por qué, porque en mi monitor se veía bien y en mi teléfono parecía una fotocopia de una fotocopia.

La razón es que un píxel CSS no es un píxel de dispositivo. Un teléfono moderno o una computadora portátil retina empaqueta dos o tres píxeles físicos en cada píxel CSS: eso y #39;s qué window.devicePixelRatio Informes. Así que mi imagen de 600 píxeles se estaba estirando en 1200 píxeles físicos de vidrio, y el navegador estaba inventando la diferencia. No puede inventar detalles que no están en el archivo. La solución fue exportar a 1200 y dejar que CSS lo muestre a 600.

Ese es el error en el que se construye esta guía, junto con los otros tres o cuatro que hacen que las imágenes redimensionadas se vean peores de lo que deberían. los Herramienta de cambio de tamaño de imagen en Toolz.dev hace el trabajo en su navegador (el archivo nunca sale de su máquina), pero la herramienta es la parte fácil. Saber qué números escribir en él es la parte que realmente importa.

TL;Dr: exportar a 2× el tamaño de la pantalla Para pantallas de retina (una ranura de 600 px necesita un archivo de 1200 px) y nunca escala en plena forma- puedes 't agrega detalles que nunca fueron capturados. Bloquee la relación de aspecto a menos que realmente desee distorsionar la imagen. Cambiar tamaño antes de que Comprimes, no después. Usa el Herramienta de cambio de tamaño de imagen Para establecer dimensiones, la Calculadora de relación de aspecto para resolver el lado perdido, y el compresor de imagen para obtener el tamaño del archivo posteriormente. Todo funciona del lado del cliente. Una advertencia que vale la pena conocer desde el frente: cambiar el tamaño vuelve a codificar la imagen, por lo que Todos los metadatos EXIF se eliminan- ideal para la privacidad, a veces sorprendente.

¿Por qué mis imágenes se ven borrosas después de cambiar el tamaño?

Nueve de cada diez veces es una de las tres cosas, y todas son arreglables.

Tú ampliaste. Ampliar una foto de 400×300 a 1600×1200 le pide al software que produzca doce píxeles de información por cada uno que tenga. Lo hace interpolando (promediando vecinos para adivinar lo que pertenece al medio) y el resultado es suave, porque el detalle realmente no existe. Nada menos que un modelo generativo lo inventa. Siempre comience desde el original más grande que tenga y reduzca. Abajo es casi sin pérdida; arriba es una conjetura.

Ignoraste la relación de píxeles. El error que describí anteriormente. Si el cuadro CSS es 600×400 y la pantalla user's es 2×, el navegador necesita 1200×800 píxeles reales para renderizarlo de forma nítida. Exportar a 2× y dejar que el navegador se reduzca: la reducción de escala en el navegador se ve genial; la ampliación parece barro.

Algo más lo comprimió después de ti. Redimensionaste con cuidado, luego subiste a una plataforma que volvió a codificar tu imagen en su propia configuración de calidad. Cada plataforma social hace esto. No puedes detenerlo, pero puedes reducirlo: carga cerca de las dimensiones de destino de la plataforma para que funcione lo menos posible, y entregar un archivo que ya está limpio en lugar de uno que tiene que arreglar.

¿Qué sucede realmente cuando cambias el tamaño de una imagen?

Vale la pena entenderlo, porque explica la mayoría de las sorpresas.

Una imagen ráster es una cuadrícula de píxeles. Hacer esa cuadrícula más pequeña significa decidir qué nuevo El píxel debería ser cuando se encuentra entre varios viejos. Esa decisión se llama remuestreo, y el algoritmo importa:

• Vecino más cercano- toma el píxel original más cercano. Bordes rápidos, en bloques y dentados. Correcto sólo para pixel art, donde el punto es el bloqueo.
• bilineal- promediar los cuatro píxeles más cercanos. Suave, un poco suave.
• binario- pesa dieciséis píxeles circundantes con una curva cúbica. Más nítido que bilineal; el valor predeterminado sensato en la mayoría de los programas de escritorio.
• lanczos- un filtro sinc con ventana sobre un vecindario más grande. La mejor calidad para reducir la escala, la más lenta, puede producir un leve zumbido en bordes de alto contraste.

El cambio de tamaño del lienzo del navegador se encuentra en el rango bilineal a bicúbico y no lo hace 't le permite elegir con precisión; solo puede solicitar una calidad de suavizado, y la especificación HTML 's predeterminada para esa pista es "low". Eso está bien para la gran mayoría del trabajo web y es por eso que la herramienta Toolz.dev se siente instantánea.

Hay un truco de usuario de energía que vale la pena conocer. Cuando se reduce en gran medida en un solo paso (por ejemplo, 4000px a 400px, una reducción de 10 ×), algunas implementaciones de navegador toman muestras demasiado escasas y se obtienen alias: bordes brillantes, patrones muaré en tela o ladrillos y detalles finos perdidos. La solución es Escalado de reducción: Reduzca a la mitad repetidamente (4000 → 2000 → 1000 → 500 → 400) por lo que cada paso solo tira la mitad de los píxeles. Si una gran reducción sale más crujiente de lo que esperabas, esa es la razón, y hacerlo en dos pases lo arreglará.

¿Qué hace realmente la herramienta de cambio de tamaño de Toolz.dev?

Prefiero decirte exactamente que que lo descubras más tarde. Es un resilitador basado en lienzo:

1. Su archivo se lee en el navegador a través de una URL de objeto. es nunca subido- ahí ' No hay ningún servidor al que subirlo.
2. Se dibuja en un lienzo HTML en las dimensiones de destino.
3. El lienzo se vuelve a codificar para PNG, JPEG o webp (La calidad por defecto es 0.9 para los formatos con pérdida).
4. descargas el resultado.

De eso se desprenden tres consecuencias, y solo una de ellas está en la mayoría de las herramientas de marketing:

Se eliminan los metadatos de EXIF. Una recodificación de lienzo produce un archivo completamente nuevo. Modelo de cámara, lente, tiempo de captura y, lo que es más importante, Coordenadas GPS No sobrevivas. Para cualquier cosa que estés publicando, esa es una característica de privacidad, y una real: las fotos directamente desde un teléfono llevan las coordenadas exactas de donde se tomaron. si tu cosa necesaria El EXIF (para un portafolio de fotografía, digamos), redimensiona con una herramienta que lo preserve explícitamente. Si la fuente salió directamente de la cámara, mire la orientación de salida antes de publicar.

Los GIF animados se presentan como un solo cuadro. Canvas dibuja un fotograma. No hay forma honesta de describir esto como otra cosa que una limitación: si necesitas cambiar el tamaño de una animación y mantenerla en movimiento, esta no es la herramienta. (I' prefiero decirlo claramente que dejarte descubrirlo después de descargarlo)

Bloquear la relación de aspecto significa "ajustar en el interior", no "estirar para llenar". Si ingresa tanto un ancho como una altura con la relación bloqueada, la imagen se escala para ajustarse dentro esa caja manteniendo sus proporciones. Entonces sale una foto de 16:9 con un objetivo de 1000×1000 1000×563, no 1000×1000. Nunca distorsionará tu imagen, pero también ganó 't recorte para llenar el cuadrado. Si necesitas un cuadrado exacto de un rectángulo, necesitas un recorte, no un cambio de tamaño. Esa distinción confunde a la gente constantemente y vale la pena ser preciso.

¿Cómo funcionan realmente las relaciones de aspecto?

Una relación de aspecto es solo ancho ÷ altura, expresada como un par. Las matemáticas son simples y deberías poder hacerlo en tu cabeza, ya que evita el error de cambio de tamaño más común: achaparrado.

Para encontrar el lado que falta, mantenga la relación constante:

new_height = new_width × (original_height ÷ original_width)

Una foto de 4000×3000 (4:3) redimensionada a 1200 de ancho se convierte en 1200 × (3000/4000) = 900 alto. En su lugar, escriba 1200 y 800, y usted & #39; He aplastado una imagen de 4:3 en 3:2: las caras se vuelven más estrechas, los círculos se convierten en óvalos y todos pueden decir algo & # 39; se apaga incluso si pueden & # 39;t decir qué. El Calculadora de relación de aspecto Hace esto por usted y reduce la relación para usted también.

Aquí están las proporciones que siguen apareciendo, con las matemáticas marcadas en lugar de copiadas:

Una nota honesta sobre eso "1.91:1" fila, ya que siempre me molesta: 1200×628 no es en realidad 1,91:1. Reducido correctamente y #39;s 300:157, o 1.911. La industria lo redondea y todos se encogen de hombros. No es & #39; No importa en la práctica, pero si usted & # 39; alguna vez me he preguntado por qué 1200× 628 no lo hace & # 39; No lo dividí en nada limpio, eso & # 39; es por qué.

Las especificaciones de píxeles de la plataforma cambian; las relaciones casi nunca lo hacen. En lugar de confiar en una tabla de dimensiones en una publicación de blog (incluida esta) para una campaña que importa, verifique la propia especificación actual de la plataforma y luego use la proporción anterior para alcanzarla. La forma es estable incluso cuando los números se desvían.

¿Qué tamaño de imágenes deberían tener realmente las imágenes web?

Para un sitio web que usted controla, donde usted & 39; está optimizando para la pintura con contenido más grande en lugar de otra persona & # 39;s uploader - el razonamiento es diferente y mejor.

Comience desde el cuadro CSS, no desde la imagen. Encuentre qué ancho representa realmente la imagen en su diseño. No el contenedor 's ancho máximo - el imagen'S ancho, en el punto de interrupción que te importa. Luego duplique para retina. Ese es su tamaño de exportación. Todo lo que está más allá de eso es bytes que está pagando para enviar y el usuario está pagando para descargar, por el beneficio cero visible.

Servir más de una talla. Un solo archivo de 2400 px es un desperdicio para un teléfono que lo renderizará en 380 píxeles css. srcset existe precisamente para esto:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

El navegador elige el archivo más pequeño que aún se verá nítido en ese dispositivo. y siempre configurado width y height atributos: permiten que el navegador reserve el espacio antes de que se cargue la imagen, que es lo que impide que la página salte y arruine su puntuación de cambio de diseño acumulativo.

Redimensionar primero, comprimir el segundo. Esta es la orden que la gente recibe al revés. comprimir una imagen de 4000 px y de entonces cambiar su tamaño a 800 px significa que gastó esfuerzo en optimizar los píxeles que estaba a punto de desechar, y probablemente horneó artefactos de compresión en los píxeles que conservó. Primero corte las dimensiones y luego comprima lo que queda con el compresor de imagen. Las dimensiones son casi siempre la mayor ganancia de todos modos: reducir a la mitad ambos lados de una imagen elimina 75% de sus píxeles antes de que un compresor lo toque. Profundizo más en eso en el Guía de compresión de imágenes.

Luego elige el formato correcto. Aproximadamente: JPEG para fotografías, PNG cuando necesita transparencia o texto y líneas nítidos, webp para básicamente todo en la web porque supera a ambos con una calidad equivalente. los Conversor de formato de imagen maneja ese paso, y el Descripción general de las herramientas de imagen Cubre cómo encajan las piezas.

¿Cómo cambio el tamaño de una imagen en Toolz.dev?

1. Abre el Herramienta de cambio de tamaño de imagen. Sin cuenta, nada que instalar.
2. Deja tu imagen. Se carga directamente en el navegador. Mire la pestaña Red si desea que no se envíe ninguna prueba 's a ninguna parte - eso 's una verificación que vale la pena ejecutar en cualquier herramienta de imagen en la que pegue fotos privadas.
3. Ingrese sus dimensiones objetivo. Escriba el ancho; con la relación bloqueada, la altura sigue. Recuerde duplicar para Retina si esto es para una pantalla.
4. Elija su formato de salida- PNG, JPEG o WebP.
5. Descargar. generado en su navegador, directamente a su disco.

Si usted & #39; están produciendo la misma imagen en varios tamaños, trabaje desde el original más grande cada vez. Don' Cambia el tamaño de la exportación de 1200px a 600px; vuelve al original y exporta 600 desde allí. Cada recodificación de un archivo que ya tiene pérdidas agrava el daño, de la misma manera que se degrada una fotocopia de una fotocopia. Es ' es una pequeña disciplina que aparece en el resultado final.

Preguntas frecuentes

¿Puedo cambiar el tamaño de una imagen sin perder calidad?

La reducción de escala no pierde casi nada perceptible - usted're descartando datos de píxeles que ya no necesita y el resultado en la pantalla parece nítido. La ampliación siempre pierde calidad, porque el software tiene que interpolar píxeles que nunca fueron capturados, produciendo suavidad o artefactos visibles. Cambie siempre el tamaño desde el original más grande que tenga en lugar de hacerlo desde uno pequeño.

¿Qué tamaño debo exportar imágenes para pantallas de retina?

Exporta a 2× el tamaño en el que se muestra la imagen. Si su diseño renderiza una imagen en una caja de 600×400, expórtela a 1200×800 para que permanezca nítida en dispositivos con un devicePixelRatio de 2. Rara vez vale la pena ir más allá de 2 ×, ya que el beneficio visible es mínimo incluso en pantallas de 3 ×.

¿Cambiar el tamaño de una imagen elimina los datos EXIF?

Sí, cuando el cambio de tamaño se realiza a través de un lienzo HTML, como ocurre en Toolz.dev, la herramienta vuelve a codificar la imagen en un nuevo archivo y los metadatos EXIF no se transfieren. Eso significa que se eliminan los detalles de la cámara, el tiempo de captura y las coordenadas GPS. Para publicar, esto es un beneficio de privacidad; Si necesita conservar EXIF, utilice una herramienta que lo admita explícitamente.

¿Puedo cambiar el tamaño de un GIF animado y mantener la animación?

No con un resilitador basado en lienzo. Canvas captura un solo cuadro, por lo que la salida es una imagen fija en formato PNG, JPEG o WebP. Cambiar el tamaño de una animación mientras se conserva todos sus fotogramas requiere una herramienta de procesamiento GIF dedicada.

¿Cómo cambio el tamaño de una imagen a un tamaño de archivo específico en KB?

El tamaño del archivo no es algo que usted establezca directamente: se sale de las dimensiones, el formato y la calidad de compresión. Trabajar hacia atrás: reducir las dimensiones a lo que realmente se muestra la imagen, exportar como WebP o JPEG en lugar de PNG para fotografías, luego bajar la calidad y volver a verificar el tamaño de salida. Alcanzar un objetivo difícil como "menos de 100 KB" Por lo general, son dos o tres pasadas de ese bucle, no una.

¿Cómo cambio el tamaño de una imagen sin recortarla?

Mantenga bloqueada la relación de aspecto. Cuando el ancho y el alto permanecen en su proporción original, cada píxel del marco se conserva y solo cambia la escala. Recortar sólo se vuelve inevitable cuando la forma objetivo difiere de la forma fuente: colocar una foto 3:2 en una ranura de avatar 1:1 significa colocar un buzón en el espacio vacío o cortar parte de la imagen.

¿Debo cambiar el tamaño o comprimir mis imágenes primero?

Primero cambie el tamaño y luego comprima. Reducir las dimensiones elimina los píxeles por completo (reducir a la mitad tanto el ancho como el alto elimina el 75% de ellos), lo que casi siempre es una ganancia de tamaño de archivo mayor que la compresión sola. Comprimir antes de cambiar el tamaño desperdicia el esfuerzo en los píxeles que está a punto de descartar y puede hornear artefactos en los que conserva.

¿Cuál es la diferencia entre redimensionar y recortar?

Cambiar el tamaño cambia las dimensiones de toda la imagen, manteniendo todo su contenido. Cropping corta parte de la imagen para cambiar su encuadre o relación de aspecto. Si necesita un cuadrado de una foto rectangular, cambiar el tamaño con la relación de aspecto bloqueada encajará en la imagen dentro del cuadrado en lugar de llenarla; necesita un recorte para llenar el marco.

¿Existe un límite de tamaño de archivo para cambiar el tamaño de las imágenes en el navegador?

No hay límite impuesto por el servidor, porque no se carga nada: el techo práctico es su dispositivo y la memoria disponible. Las fotografías típicas, incluidos archivos de cámara grandes, cambian de tamaño instantáneamente. Las imágenes extremadamente grandes (escaneos de muy alta resolución, por ejemplo) pueden tardar un momento o, en un teléfono con memoria restringida, no se cargan.

¿Por qué mi imagen todavía se ve borrosa después de cambiar el tamaño a las dimensiones correctas?

Verifique tres cosas en orden: si amplió desde un original más pequeño (no reparable, busque una fuente más grande), si tuvo en cuenta la proporción de píxeles del dispositivo (un archivo de 600 px en una pantalla 2× debe ser de 1200 px) y si la plataforma que subiste para volver a comprimir la imagen después. El tercero es común en las redes sociales y se mitiga mejor subiéndolo en la plataforma 's dimensiones recomendadas.