Let us consider we are building a page banner or slider with image as a background. The page speed issue arises if we use same big background image for both desktop and mobile versions.
So idea is to use css media query to have differently sized images for different resolutions.
Below is example code for background image slider. Can use any number of media queries
<f:for each="{field.bgimage}" as="images" iteration="itemImages">
<div class="item">
<div class="bg-image" id="bg-image-{itemImages.cycle}">
<style>
@media (max-width: 768px) {#bg-image-{itemImages.cycle}{ background-image: url('{f:uri.image(image: images, treatIdAsReference: 1,maxWidth:800)}'); }}
@media (min-width: 769px) {#bg-image-{itemImages.cycle}{ background-image: url('{f:uri.image(image: images, treatIdAsReference: 1,maxWidth:1900)}'); }}
</style>
</div>
</div>
</f:for>
Similarly, we can use this solution for having different images for different resolution devices.
For example, we are uploading 3 FAL images and first one is for desktop, second one is for tablet and third one is for mobile. Below is the example code.
<f:for each="{field.bimages}" as="bimages" iteration="bgiterator">
<f:if condition="{bgiterator.isFirst}">
<div class="bg-image" id="bg-image-itm1"></div>
<style>
@media (min-width: 1025px) {#bg-image-itm1{ background-image: url('{f:uri.image(image: bimages, treatIdAsReference: 1)}');}}
</style>
</f:if>
<f:if condition="{bgiterator.cycle} == 2">
<style>
@media (min-width: 500px) and (max-width: 1024px) {#bg-image-itm1{ background-image: url('{f:uri.image(image: bimages, treatIdAsReference: 1)}');}}
</style>
</f:if>
<f:if condition="{bgiterator.cycle} == 3">
<style>
@media (min-width: 100px) and (max-width: 499px) {#bg-image-itm1{ background-image: url('{f:uri.image(image: bimages, treatIdAsReference: 1)}'); }}
</style>
</f:if>
</f:for>
Similarly for other places like cards, product images etc, we could use <picture> tag.
<f:if condition="{product.image}">
<f:then>
<div class="product-img">
<picture>
<source media="(min-width: 1200px)" srcset="{f:uri.image(image:product.image, height:350)}">
<source media="(min-width: 992px)" srcset="{f:uri.image(image:product.image, maxWidth:500)}">
<source media="(min-width: 768px)" srcset="{f:uri.image(image:product.image, maxWidth:450)}">
<source media="(min-width: 576px)" srcset="{f:uri.image(image:product.image, maxWidth:400)}">
<img loading="lazy" src="{f:uri.image(image: product.image, maxWidth:400)}" class="img-fluid">
</picture>
</div>
</f:then>
</f:if>
