Js-core: Изображение изменило границы при использовании в<meta/> ярлык

Созданный на 21 окт. 2020 · 1Комментарий · Источник: imgix/js-core

Опишите ошибку
Смешанное изображение с водяными знаками, созданное с использованием imgix-core-js, выглядит иначе, чем исходное изображение, когда оно завернуто в

теги и загружены как превью.
изображение обернуто искажает границы.

Воспроизводить
Шаги по воспроизведению поведения:

это изображение , сформированное 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
оберните приведенную выше ссылку так
<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">

и делитесь им в приложениях (например, WhatsApp, imessage), которые имеют возможность предварительного просмотра, предварительный просмотр показывает искаженную границу.
Ожидаемое поведение
Четкое и краткое описание того, что вы ожидали.
предварительный просмотр должен быть таким же, как и исходное изображение
Скриншоты
Если возможно, добавьте снимки экрана, чтобы объяснить вашу проблему.
Превью с искаженными границами

Исходное изображение

Другие примеры:
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

Информация:

версия imgix-core-js: [например, 2.3.1]

bug

Источник

ChelseaRong

👍7

>Все замечания

@ChelseaRong Оказывается, артефакт вызван очень низким значением параметра q ( q=1 ). Полная разбивка того, что происходит:

Применяется параметр q=1&auto=compress , который отображает версию изображения самого низкого качества.
- Поскольку качество настолько низкое, в сжатой отрендеренной версии изображения появляются артефакты (в данном случае большая размытая линия).
Параметр auto=format приводит к тому, что эта проблема отображается только в некоторых браузерах / сканерах.
- Поскольку у социальных парсеров нет обнаруженного пользовательского агента, поддерживающего WebP, мы обслуживаем версию .jpg которая сжимается с гораздо более низким качеством по сравнению с WebP.
- По этой же причине мы не видим проблемы в браузере, поддерживающем WebP (например, Chrome или Firefox).

Чтобы исправить это, я бы рекомендовал установить для параметра q как минимум значение 25 .

Я закрою эту проблему, поскольку это не ошибка imgix-core-js , но если вам нужна дополнительная отладка API рендеринга imgix, свяжитесь с [email protected].