Я использую тег <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>