我有很多 image/webp
图片,希望浏览器为 Safari 提供后备 image/jpg
。
出于某种原因,Chrome(以及所有其他浏览器)仍在使用 jpg 图像而不是 webp。
<picture>
<source class="content_image" height="150" width="150" src="<?php echo get_stylesheet_directory_uri();?>/assets/pictures/section/logo_dsv_150x150.webp" type="image/webp">
<source class="content_image" height="150" width="150" src="<?php echo get_stylesheet_directory_uri();?>/assets/pictures/section/logo_dsv_150x150.png" type="image/png">
<img height="150" width="150" src="<?php echo get_stylesheet_directory_uri();?>/assets/pictures/section/logo_dsv_150x150.png" alt="lorem ipsum">
</picture>
我也将它与 ACF 结合使用:
<?php
$image_02_jpg = get_field('content_picture_02_jpg');
$image_02_webp = get_field('content_picture_02_webp');
?>
<picture>
<source class="content_image" width="679" height="450px" src="<?php echo $image_02_webp['url']; ?>" type="image/webp">
<source class="content_image" width="679" height="450px" src="<?php echo $image_02_jpg['url']; ?>" type="image/jpeg">
<img class="content_image" width="679" height="450px" src="<?php echo $image_02_jpg['url']; ?>" alt="content_image">
</picture>
最佳答案
在 source
元素上使用 srcset
属性代替 src
。
<?php
$image_02_jpg = get_field('content_picture_02_jpg');
$image_02_webp = get_field('content_picture_02_webp');
?>
<picture>
<source srcset="<?php echo $image_02_webp['url']; ?>" type="image/webp">
<source srcset="<?php echo $image_02_jpg['url']; ?>" type="image/jpeg">
<img src="<?php echo $image_02_jpg['url']; ?>" alt="content_image">
</picture>
src:
srcset:一个或多个字符串的列表,用逗号分隔,表示一组可能的图像,这些图像由浏览器使用的源表示。
关于html - Chrome 更喜欢 jpg 而不是 Webp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70108316/