El recorte es una técnica clave para mejorar las imágenes . Eliminar información de fondo innecesaria o cambiar la relación de aspecto de una imagen puede mejorar en gran medida el enfoque del espectador en la imagen. imgix ofrece muchos métodos de recorte, incluida la detección de rostros. Este tutorial se centrará en el recorte automático de puntos de interés ( crop=entropy
) y cómo puede usarlo para recortar los aspectos más destacados o significativos de la imagen. En particular, las áreas de alto contraste se consideran las más destacadas.
Supongamos que queremos recortar la siguiente imagen para eliminar una gran cantidad del fondo negro estático de la imagen.
umbrella.jpg?w=640
El primer paso es establecer los parámetros w
y h
, y el modo fit=crop
. Esto cambiará el tamaño de la imagen para llenar los límites de ancho y alto seleccionados, y luego recortará cualquier exceso de datos de la imagen.
fit=crop
ancho: ancho=200
altura: h=200
ajuste: ajuste = recorte
umbrella.jpg?w=200&h=200&fit=crop
El recorte predeterminado de imgix comienza en el centro de la imagen, eliminando los datos que se encuentran fuera de los parámetros dados. Sin embargo, además de recortar la imagen, también queremos que el paraguas esté en el centro. Para hacer esto, agregamos crop=entropy
a la cadena de consulta para que el "medio" se convierta en el aspecto más destacado de la imagen. El paraguas contrasta fuertemente con el resto de la imagen, por lo que se convierte en el foco.
fit=crop&crop=entropy
cultivo: cultivo=entropía
umbrella.jpg?w=200&h=200&fit=crop&crop=entropy
El objetivo era eliminar una gran cantidad de fondo negro estático para centrarlo en el sujeto. En este ejemplo, el sujeto de la imagen era el paraguas rojo, y agregar crop=entropy
permitió que la funcionalidad de recorte se centrara en él. Sin embargo, el sujeto de una imagen no siempre es un objeto inanimado.
Supongamos que queremos cambiar el tamaño y recortar la siguiente imagen para centrarla en el modelo.
womanlandscape.jpg?w=640
La imagen se tomó usando la regla de los tercios, lo que permite una imagen visualmente atractiva mientras se mantiene el modelo descentrado. Sin embargo, también queremos crear fragmentos más pequeños de la imagen para usar en varios lugares de un sitio web.
fit=crop
womanlandscape.jpg?w=200&h=200&fit=crop
Dado que la funcionalidad de recorte se enfoca en el centro de la imagen y la modelo está descentrada, no aparece completamente en el fragmento. Podemos usar la funcionalidad de recorte de detección de rostros para centrar la imagen alrededor de su rostro.
fit=crop&crop=faces
womanlandscape.jpg?w=200&h=200&fit=crop&crop=faces
El modo de recorte de detección de rostros detectó con éxito su rostro y centró la imagen a su alrededor. Sin embargo, también estamos interesados en su atuendo, y no está del todo en el marco. La rodilla de la modelo está parcialmente oculta, por lo que agregamos crop=entropy
para que todo el atuendo se incluya en la escena.
fit=crop&crop=entropy
womanlandscape.jpg?w=200&h=200&fit=crop&crop=entropy
Mientras que el modo de recorte facial busca rostros y se centra en ellos para recortarlos, el modo de recorte de entropía busca áreas de alto contraste y se enfoca en ellas.
fit=crop
fit=crop
En la figura anterior, hemos modificado la imagen para resaltar las áreas de alto contraste en la imagen. La versión modificada demuestra el punto de interés de la imagen, en este caso, la cabeza de la salamandra. El modo de recorte de entropía ignoró el color estático de la imagen y, en cambio, se centró en las áreas donde se encuentran el blanco y el negro: los colores brillantes de la salamandra proporcionan un alto contraste con su fondo.
En los ejemplos a continuación, esta capacidad del modo de recorte de entropía para enfocar áreas de alto contraste mantiene a la salamandra centrada como sujeto de la imagen, independientemente de la orientación vertical u horizontal. Suponiendo que sus imágenes tengan áreas de alto contraste de manera similar, esto le permite dirigir sus imágenes de forma automática usando crop=entropy
para adaptarse a diferentes tamaños y relaciones de aspecto para diferentes diseños.
fit=crop&crop=entropy
También publicado aquí.
Para obtener más información, consulte la página de documentación de imgix .