Резервные изображения WebP не загружаются

Я использую тег <picture> для установки адаптивного изображения с поддержкой WebP. Я извлекаю URL-адреса изображений для настольных компьютеров и мобильных изображений, которые содержат файлы .web и .jpg. для каждого носителя я даю версию .webp и версию .jpg.

Я ожидаю, что если версия .webp не существует, веб-сайт возьмет существующий файл .jpg.

Любая идея, что здесь не так?

$image_desktop = get_field( 'desktop_image' ); // can be an .webp image or .jpg image
$image_mob     = get_field( 'mobile_image' ); // can be an .webp image or .jpg image

<picture>
  <source media="(min-width: 480px)"
  srcset="<?php echo esc_url( $image_desktop['url'] . '.webp' ); ?>"
  type="image/webp">

  <source srcset="<?php echo esc_url( $image_mob['url'] . '.webp' ); ?>" 
  type="image/webp">

  <source media="(min-width: 480px)" srcset="<?php echo esc_url( $image_desktop['url'] ); ?>"
  type="image/jpeg">

  <source srcset="<?php echo esc_url( $image_mob['url'] ); ?>" type="image/jpeg">

  <img class="header-image"
  src="<?php echo esc_url( $image_desktop['url'] ); ?>"
  alt="<?php echo esc_attr( $image_desktop['url'] ); ?>">
</picture>

wordpress php html webp responsive-images
person AssafA    schedule 13.01.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Все URL-адреса, которые вы указываете в атрибутах srcset, должны быть действительными и должны существовать.

Браузеры, поддерживающие WebP, попытаются загрузить URL-адрес из <source type="image/webp">, а все остальные браузеры попытаются загрузить URL-адрес из <source type="image/jpeg">. Если URL, выбранный браузером, не существует, он не вернется к одному из других <source>.

Вы должны проверить наличие файлов изображений на стороне сервера.

person ausi    schedule 10.04.2021