Js-core: La imagen ha distorsionado el borde cuando se usa en<meta/> etiqueta

Creado en 21 oct. 2020 · 1Comentario · Fuente: imgix/js-core

Describe el error
Una imagen mezclada y con marca de agua generada con imgix-core-js se ve diferente de la imagen original cuando se envuelve en

etiquetas y se carga como una vista previa.
la imagen envuelta tiene fronteras distorsionadas.

Reproducir
Pasos para reproducir el comportamiento:

esta es la imagen generada por imgix: https://nate.imgix.net/nateLogo.png?q=1&auto=compress%2Cformat&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3. 1 & s = 9d3826f9ca00ae169bebc220d2f4e259
envuelva el enlace de arriba así
<meta property="og:image" content="https://nate.imgix.net/nateLogo.png?q=1&auto=compress,format&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3.1&s=9d3826f9ca00ae169bebc220d2f4e259">

y compartirlo en aplicaciones (por ejemplo, whatsapp, imessage) que tiene la capacidad de obtener una vista previa, la vista previa muestra un borde distorsionado.
Comportamiento esperado
Una descripción clara y concisa de lo que esperaba que sucediera.
la vista previa debe ser la misma que la imagen original
Capturas de pantalla
Si corresponde, agregue capturas de pantalla para ayudar a explicar su problema.
Vista previa con fronteras distorsionadas

Imagen original

Otros ejemplos:
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

Información:

Versión de imgix-core-js: [por ejemplo, 2.3.1]

bug

Fuente

ChelseaRong

👍7

>Todos los comentarios

@ChelseaRong Resulta que el artefacto es causado por el parámetro q establecido en un valor muy bajo ( q=1 ). Desglose completo de lo que está sucediendo:

Se aplica el parámetro q=1&auto=compress , que muestra la versión de menor calidad de la imagen.
- Dado que la calidad es tan baja, la versión comprimida y renderizada de la imagen termina teniendo artefactos (una gran línea borrosa en este caso)
El parámetro auto=format hace que este problema se muestre solo en algunos navegadores / rastreadores
- Dado que los social scrapers no tienen un agente de usuario detectado que admita WebP, ofrecemos la versión .jpg que se comprime con una calidad mucho menor en comparación con WebP.
- Esta es también la razón por la que no vemos el problema en un navegador que admita WebP (como Chrome o Firefox).

Para solucionar este problema, recomiendo configurar el parámetro q en al menos 25 .

Cerraré este problema ya que no es un error de imgix-core-js , pero si necesita más depuración para la API de renderizado de imgix, comuníquese con [email protected].