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:

  • 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
    capture__2020-10-21-13-48-02
    file
    Original image
    Screen Capture_select-area_20201021180948

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

>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]

Was this page helpful?
0 / 5 - 0 ratings

Related issues

savalin picture savalin  ·  5Comments

bagg picture bagg  ·  6Comments

zenna picture zenna  ·  11Comments

theyak picture theyak  ·  54Comments

Omiod picture Omiod  ·  13Comments