Image has distored boarder when used in <meta></meta> tag

[ChelseaRong]

Describe the bug An blended and watermarked image generated using the imgix-core-js looks different from the original image when wrapped in tags and loaded as a preview. the image wrapped has distorted boarders.

To Reproduce Steps to reproduce the behavior:

• this is the image generated by 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

• wrap the above link like so <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">

• and share it in apps(e.g. whatsapp, imessage) that has ability to preview, the preview shows a distorted boarder. Expected behavior A clear and concise description of what you expected to happen. the preview should be the same as the original image Screenshots If applicable, add screenshots to help explain your problem. Preview with distorted boarders Original image

Other examples:

Information:

• imgix-core-js version: [e.g. 2.3.1]

[heyitsbryanm]

@ChelseaRong Turns out, the artifact is caused by the q parameter being set at a very low value (q=1). Full breakdown of what's happening:

• The parameter q=1&auto=compress is applied, which renders the lowest quality version of the image
  • Since the quality is so low, the compressed, rendered version of the image ends up having artifacts (a large blurred line in this case)
• The parameter auto=format causes this issue to show only in some browsers/crawlers
  • Since social scrapers don't have a detected user agent that supports WebP, we serve the .jpg version which compresses at a much lower quality compared to WebP
  • This is also why we don't see the issue in a browser that supports WebP (such as Chrome or Firefox)

To fix this, I'd recommend setting the q parameter to at least 25.

I'll close this issue since it isn't an imgix-core-js bug, but if you need further debugging for the imgix rendering API, contact support@imgix.com.