Chrome prefers jpg instead of Webp

user_15310498 0
Viewed 129

I have a lot of image/webp images and want the browser to have a fallback image/jpg for Safari.

For some reason Chrome (and every other browser) is still using the jpg image instead of the 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>

I also have it in combination with 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>
webp fallback jpeg image html
1 Answers

Use the srcset attribute instead of src on the source element.

<?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>

<source> Element

  • src: Required for <audio> and <video>, address of the media resource. The value of this attribute is ignored when the <source> element is placed inside a <picture> element.

  • srcset: A list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use.

user_66534260
Related