This topic has 8 replies, 2 voices, and was last updated 1 weeks ago ago by
Hello, Mauro,
You’re welcome!
This question does not directly pertain to the scope of our theme. However, you can find the relevant basic information online:
Yes, it’s absolutely possible to use the elements.
The
Here’s a basic example of how to use the
html
<picture>
<!-- For screens wider than 1200px, use the large image version -->
<source srcset="images/large.jpg" media="(min-width: 1200px)">
<!-- For screens between 768px and 1199px, use the medium image version -->
<source srcset="images/medium.jpg" media="(min-width: 768px)">
<!-- For smaller screens, use the small image version -->
<source srcset="images/small.jpg" media="(max-width: 767px)">
<!-- Default image (if no conditions match) -->
<img src="images/default.jpg" alt="Responsive Image Example">
</picture>How it works:
The browser will check the
If no tag.
This ensures you only have one element in the DOM, but still serve the appropriate image for different scenarios.
Benefits:
Reduced HTTP requests: Instead of loading all image versions and choosing them dynamically with JavaScript, the browser decides which one to fetch.
Efficient loading: The browser selects the right image based on device capabilities and screen size, ensuring faster load times and a better user experience.
Fallback support: You can define a default image in the tag in case the browser doesn’t support
Using srcset in the
You can also use srcset for different image resolutions (e.g., 1x, 2x for retina displays) if you want to optimize for pixel density, like this:
html
<picture>
<source srcset="images/large.jpg 1x, images/large@2x.jpg 2x" media="(min-width: 1200px)">
<source srcset="images/medium.jpg 1x, images/medium@2x.jpg 2x" media="(min-width: 768px)">
<source srcset="images/small.jpg 1x, images/small@2x.jpg 2x" media="(max-width: 767px)">
<img src="images/default.jpg" alt="Responsive Image Example">
</picture>In this case:
The browser will select the appropriate image based not only on the screen width but also the device’s pixel density (1x, 2x, etc.).
This is a very efficient and flexible way to serve responsive images without cluttering the DOM with multiple tags.
Best Regards,
8Theme’s Team
You must be logged in to reply to this topic.Log in/Sign up
