I implemented a typical bootstrap grid to display a row of images, with 4 images in desktop view and 1 image in mobile view. Here is what it looked like:
<div class="row">
<div class="col-md-3 col-sm-12">
<img src="image1_src">
</div>
<div class="col-md-3 col-sm-12">
<img src="image2_src">
</div>
<div class="col-md-3 col-sm-12">
<img src="image3_src">
</div>
<div class="col-md-3 col-sm-12">
<img src="image4_src">
</div>
</div>
The rendered size of the images in browsers was approximately 250px*250px. However, this resolution proved to be insufficient for mobile devices as the images appeared almost fullscreen on smaller screens. To address this issue, I opted to use images with resolutions around 500px*500px, which resulted in improved image quality on both mobile and desktop views. Nevertheless, this decision led to a Google PageSpeed warning stating:
Image elements do not have explicit width and height
To tackle this problem, I decided to utilize the <picture> tag to implement two different versions of each image - a smaller one for desktop and a larger one for mobile:
<div class="row">
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image1_src">
<source media="(max-width:700px)" srcset="500px_image1_src">
<img src="500px_image1_src">
</picture>
</div>
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image2_src">
<source media="(max-width:700px)" srcset="500px_image2_src">
<img src="500px_image2_src">
</picture>
</div>
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image3_src">
<source media="(max-width:700px)" srcset="500px_image3_src">
<img src="500px_image3_src">
</picture>
</div>
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image4_src">
<source media="(max-width:700px)" srcset="500px_image4_src">
<img src="500px_image4_src">
</picture>
</div>
</div>
However, a new challenge arose where the browser automatically selected the higher-resolution image in desktop mode, ignoring the lower-resolution option.