Js-core: Image has distored boarder when used in <meta></meta> tag

Created on 21 Oct 2020 · 1Comment · Source: imgix/js-core

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:
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

Information:

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

bug

Source

ChelseaRong

👍7

>All comments

@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 [email protected].