Почему браузер не загружает изображения в формате webp? (сайт gatsby, страница сгенерирована из mdx)

Мне интересно, может ли кто-нибудь помочь мне определить, почему изображения webp не отображаются при просмотре моего сайта gatsby в браузере?

я использую gatsby-plugin-mdx и gatsby-remark-images с опцией withWebp: true

При такой настройке результирующий источник вывода, который отправляется в браузер, выглядит (примерно) следующим образом ...

<picture>
  <source srcset-"/static/11aaa2b.../a12bc/example-image-1.webp ... etc... snipped
  <source srcset-"/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
  <img src="/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
</picture>

Однако браузер отображает только версию <img>, то есть jpg.

Я вижу, что там есть файл webp.

Я также подтвердил, что версия webp доступна (т.е. я могу перейти конкретно к файлу webp ...

Почему браузер не отображает версию webp?

Заранее спасибо за ваше время / мысли по этому поводу, чтобы помочь мне понять это.

Я искал, но еще не нашел ответа, используя следующее:


gatsby webp
person Danoz    schedule 31.03.2020    source источник
comment
Вы уверены, что это не рендеринг? stackoverflow.com/a/30900438/5385381   -  person ksav    schedule 01.04.2020
comment
Я не могу ответить на ваш вопрос, но вот подсказка, как сузить проблему: попробуйте использовать gatsby-image в статическом запросе без MDX, как в этом руководстве: gatsbyjs.org/tutorial/gatsby-image-tutorial/. Таким образом вы сможете определить, что ошибка вызывает gatsby-image или MDX.   -  person EliteRaceElephant    schedule 01.04.2020
comment
@ksav, ваше предложение - правильный ответ.   -  person Danoz    schedule 01.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Ответил @ksav в комментариях выше.

Оказывается, браузер на самом деле обслуживает веб-версию изображения.

Используя этот метод для проверки свойств элемента и просматривая свойство currentSrc, я могу подтвердить, что webp активно используется.

Проблема заключалась в том, как я раньше проверял.

Я полагался на то, что инструменты разработчика Chrome выделяли в окне «Элементы». В этой выделенной области казалось, что визуализируется тег <img>.

Но теперь, при более внимательном рассмотрении свойств (теперь, когда я знаю, как его правильно использовать), я вижу, что все в порядке.

Спасибо, @ksav за предложение. Это отвечает на вопрос.

person Danoz    schedule 01.04.2020
comment
Инструменты разработчика для тегов picture и srcSet по-прежнему разочаровывают. Для меня никогда не было очень очевидно, какая именно версия выполняет рендеринг. Рад, что вы это решили! - person ksav; 01.04.2020