Js-core: A imagem distorceu a borda quando usada em<meta/> marcação

Criado em 21 out. 2020 · 1Comentário · Fonte: imgix/js-core

Descreva o bug
Uma imagem mesclada e com marca d'água gerada usando o imgix-core-js parece diferente da imagem original quando embrulhada em

tags e carregados como uma visualização.
a imagem embrulhada tem bordas distorcidas.

Reproduzir
Passos para reproduzir o comportamento:

esta é a imagem gerada 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
envolva o link acima assim
<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">

e compartilhá-lo em aplicativos (por exemplo, whatsapp, imessage) que tem capacidade de visualização, a visualização mostra uma borda distorcida.
Comportamento esperado
Uma descrição clara e concisa do que você esperava que acontecesse.
a visualização deve ser a mesma da imagem original
Capturas de tela
Se aplicável, adicione capturas de tela para ajudar a explicar seu problema.
Visualização com bordas distorcidas

Imagem original

Outros exemplos:
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

Em formação:

versão imgix-core-js: [por exemplo, 2.3.1]

bug

Fonte

ChelseaRong

👍7

>Todos os comentários

@ChelseaRong Acontece que o artefato é causado pelo parâmetro q sendo definido com um valor muito baixo ( q=1 ). Análise completa do que está acontecendo:

O parâmetro q=1&auto=compress é aplicado, o que renderiza a versão de qualidade mais baixa da imagem
- Como a qualidade é tão baixa, a versão compactada e renderizada da imagem acaba tendo artefatos (uma grande linha borrada neste caso)
O parâmetro auto=format faz com que este problema apareça apenas em alguns navegadores / rastreadores
- Como os scrapers sociais não detectam um agente de usuário compatível com WebP, oferecemos a versão .jpg que é compactada com uma qualidade muito inferior em comparação com WebP
- É também por isso que não vemos o problema em um navegador compatível com WebP (como Chrome ou Firefox)

Para corrigir isso, eu recomendo definir o parâmetro q para pelo menos 25 .

Vou encerrar este problema, pois não é um bug de imgix-core-js , mas se você precisar de mais depuração para a API de renderização imgix, entre em contato com [email protected].