Picture image tag

Need Help
#1

Hey there,

i cant find a way to setup a proper picture image tag. I want to use webp in a picture tag. And if the browser don’t support webp I wanna output the jpg or png file.

Does anyone have a working example for me?

Thank you in advance

#2

Sure, here’s a concise example of how you can use the <picture> tag to display a WebP image and fall back to JPG or PNG if the browser doesn’t support WebP:

<picture>
  <!-- WebP image source -->
  <source srcset="your-image.webp" type="image/webp">
  
  <!-- JPG or PNG image source (fallback) -->
  <img src="your-image.jpg" alt="Your Image Description">
</picture>

Replace "your-image.webp" and "your-image.jpg" with the actual file paths for your WebP and fallback images. This code will ensure that modern browsers display the WebP image, while older browsers will return to the JPG or PNG version.

Let me know if you need any further assistance or have additional questions!

#3

Thank you.

Thanks for your help.

is there any way to set srcset’s in the php code of a cms page? I cant get it work and dont know how to start.

Thank you

#4

I am with this solution:

<picture>
    <!-- Default image for smaller screens or browsers that don't support srcset -->
    <source srcset="{{ yourDefaultImageUrl }}" media="(max-width: 767px)">
    
    <!-- Example: Generate srcset for different image sizes -->
    <source srcset="{{ yourImageUrl | media('width:320') }} 320w,
                     {{ yourImageUrl | media('width:480') }} 480w,
                     {{ yourImageUrl | media('width:800') }} 800w,
                     {{ yourImageUrl | media('width:1200') }} 1200w"
            sizes="(max-width: 320px) 280px,
                   (max-width: 480px) 440px,
                   (max-width: 800px) 720px,
                   1200px">
    
    <!-- Fallback for browsers that don't support the picture element -->
    <img src="{{ yourDefaultImageUrl }}" alt="Your image description">
</picture>
#5

For search in the forum. I work with this code now and it works fine for me:

<picture>
    <!-- Default image for smaller screens or browsers that don't support srcset -->
    <source srcset="{{ 'assets/images/default.jpg' | theme }}" media="(max-width: 767px)">
    
    <!-- Example: Generate srcset for different image sizes in WebP format -->
    <source srcset="{{ 'assets/images/your-image-320.jpg' | theme | resize(320, null, { mode: 'crop' }) | media('format:webp') }} 320w,
                     {{ 'assets/images/your-image-480.jpg' | theme | resize(480, null, { mode: 'crop' }) | media('format:webp') }} 480w,
                     {{ 'assets/images/your-image-800.jpg' | theme | resize(800, null, { mode: 'crop' }) | media('format:webp') }} 800w,
                     {{ 'assets/images/your-image-1200.jpg' | theme | resize(1200, null, { mode: 'crop' }) | media('format:webp') }} 1200w"
            sizes="(max-width: 320px) 280px,
                   (max-width: 480px) 440px,
                   (max-width: 800px) 720px,
                   1200px">
    
    <!-- Fallback for browsers that don't support the picture element -->
    <img src="{{ 'assets/images/default.jpg' | theme | resize(1200, null, { mode: 'crop' }) }}" alt="Your image description">
</picture>