Transloadit

¿Qué es una relación de aspecto 1:1?

Una relación de aspecto 1:1 define un cuadro cuadrado cuyo ancho y alto son iguales. Cambiar una dimensión sin ajustar la otra produce una relación diferente o distorsiona el contenido.

Cómo funcionan las relaciones de aspecto 1:1

La relación de aspecto es una proporción, no un recuento de píxeles, por lo que tanto los cuadros de 300×300 como los de 2,000×2,000 tienen una relación 1:1. Una imagen de origen con cualquier otra forma alcanza una relación 1:1 de una de tres maneras. El recorte escala la imagen hasta cubrir el cuadrado y elimina lo que sobresale. El relleno escala la imagen para que quepa dentro del cuadrado y completa las barras restantes con un color de fondo, una técnica también llamada letterboxing. El estiramiento escala el ancho y el alto de forma independiente y es el único método que cambia las proporciones de los sujetos. Un recorte centrado de una imagen de origen horizontal conserva una fracción del ancho igual a la altura dividida por el ancho: 56,25 % de un cuadro 16:9 y 75 % de un cuadro 4:3. Al aplicar relleno a la misma imagen de origen, se conserva completa, pero la imagen solo ocupa esa fracción del cuadrado, por lo que el sujeto se ve más pequeño. Los nombres de los métodos varían entre herramientas: CSS y sharp usan cover, contain y fill para recortar, rellenar y estirar, por lo que allí fill significa estirar, mientras que Transloadit denomina esos mismos tres métodos fillcrop, pad y stretch.

Datos clave

  1. ¿Un ancho y un alto iguales en píxeles siempre se muestran como un cuadrado? Solo cuando los propios píxeles son cuadrados. Un video puede incluir una relación de aspecto de muestra (SAR), y FFmpeg define la relación de aspecto de visualización como ancho / alto × SAR, por lo que un flujo 720×720 cuyo SAR no sea 1:1 está pensado para mostrarse con una forma no cuadrada. Revisa el SAR, no solo las dimensiones del cuadro, antes de afirmar que un video tiene una relación 1:1.
  2. ¿Qué hace un navegador con una imagen no cuadrada dentro de una caja cuadrada? Depende de qué caja sea cuadrada. Cuando el propio elemento img tiene dimensiones cuadradas, la imagen se estira: el valor inicial de object-fit es fill, lo que distorsiona el contenido cuya relación de aspecto difiere de la caja; en cambio, object-fit: cover recorta y object-fit: contain añade barras de relleno. Que solo el elemento padre sea cuadrado no estira la imagen: en la disposición normal en línea, un img con ancho y alto automáticos usa las dimensiones intrínsecas de la imagen, por lo que conserva su forma y no se ajusta al elemento padre. aspect-ratio: 1 determina la forma de una caja solo cuando al menos una de sus dimensiones es automática. Estas propiedades controlan la representación visual y no modifican el archivo de imagen.
  3. ¿Qué parte de la imagen se conserva en un recorte cuadrado? De forma predeterminada, el centro: sharp, por ejemplo, sitúa los recortes cover en centre. Sus estrategias basadas en el contenido, attention y entropy, puntúan las regiones de los bordes según la frecuencia de luminancia, la saturación del color y los tonos de piel, o según la entropía de Shannon, y descartan los bordes con menor puntuación. Son métodos heurísticos, no detección de sujetos, así que revisa una muestra de tus propias imágenes antes de aplicar uno a todo un catálogo.
  4. ¿Qué añade el relleno al archivo? Las barras se convierten en píxeles reales de un color que debes elegir, y los valores predeterminados varían entre herramientas: sharp rellena la salida contain con negro opaco, salvo que se establezca background. Las barras transparentes necesitan un formato de salida que admita transparencia. JPEG no la admite, por lo que un JPEG con relleno siempre incluye barras opacas, y las áreas transparentes ya presentes en una imagen de origen, como un logotipo PNG, tampoco pueden conservar su transparencia.

Cuándo son importantes las relaciones de aspecto 1:1

Elige una salida 1:1 para avatares, miniaturas de productos o publicaciones cuadradas en redes sociales. Cuando la imagen de origen no sea cuadrada, decide si recortar contenido significativo o añadir relleno a su alrededor.

Cómo ayuda Transloadit con las relaciones de aspecto 1:1

El Robot /image/resize de Transloadit devuelve un cuadrado cuando width y height son iguales y resize_strategy tiene el valor fillcrop (escalar y después recortar lo que sobresale), pad (escalar y después rellenar el espacio restante con background) o stretch (ignorar la relación de aspecto de origen). En cambio, la estrategia predeterminada, fit, conserva la relación de aspecto de origen, por lo que unas dimensiones iguales no bastan para producir un cuadrado: el ejemplo documentado redimensiona una imagen 400×300 a 100×75. Con fillcrop, gravity selecciona la región que se conserva; su valor predeterminado es center y admite los valores basados en el contenido attention y entropy. Cuando el sujeto es una persona, el Robot /image/facedetect puede recortar alrededor de los rostros detectados.

El fondo es blanco de forma predeterminada. Ocupa el relleno y, de forma predeterminada, el fondo de las imágenes transparentes también cambia a blanco. La documentación indica que se debe establecer background en none para conservar la transparencia, lo que solo funciona cuando el formato de salida admite transparencia, por lo que no funciona en un JPEG. La salida conserva el formato de entrada, salvo que se establezca format. Según la documentación, el uso de gravity basado en el contenido requiere libvips, la estrategia fillcrop y los parámetros width y height. Los efectos como sepia o texto y las entradas como HEIC pueden procesarse con ImageMagick en su lugar, que centra el recorte y añade una advertencia a la Assembly.

Explora las capacidades de Transloadit para imágenes

Fuentes

Convierte tus conocimientos sobre multimedia en un pipeline funcional

Conecta las subidas, el procesamiento, la IA, el almacenamiento y la entrega mediante una sola API declarativa, mientras nos encargamos por ti del stack de encoding, el escalado y los cambios constantes de formatos.

Prueba Transloadit gratis