Lately, I've been facing an issue with image resizing on different devices. Despite using the "img-fluid" class to control image size based on container width, mobile devices with a CSS resolution of 360px were displaying larger images than expected.
Therefore, I decided to create images of various sizes tailored for different screen resolutions to ensure consistency in display across all devices.
As an example, I have listed below the image widths corresponding to specific screen resolutions:
-------------------------------
| Screen | Rendered |
| Resolution | Image Width |
-------------------------------
| Above 1500px | 680px |
| 1500px | 672px |
| 1200px | 535px |
| 992px | 440px |
| 991px | 796px |
| 768px | 610px |
| 576px | 544px |
| 414px | 382px |
| below 414px | < 382px |
-------------------------------
<div class="container">
<div class="row mb-4 pb-2 pb-md-4 pb-lg-2">
<div class="col-12 col-md-10 col-lg-11 mx-auto">
<div class="row no-gutters">
<div class="col-12 col-lg-6">
<img src="example-image-1-800px.jpg" class="img-fluid" alt="">
</div>
<div class="col-6 d-none d-lg-block">
<img src="example-image-2-800px.jpg" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</div>
// Bootstrap Breakpoints: 576px, 768px, 992px, 1200px and 1500px
Based on my findings, I realized that the maximum width my images should reach is 796px. So, I generated images at varying widths:
example-image-800px.jpg
example-image-800px-2x.jpg (1600px width)
example-image-650px.jpg
example-image-650px-2x.jpg (1300px width)
example-image-500px.jpg
example-image-500px-2x.jpg (1000px width)
example-image-350px.jpg
example-image-350px-2x.jpg (700px width)
Now, the challenge lies in setting up the srcset and sizes attributes in the image tag. Despite reading tutorials and official documentation, I'm struggling to grasp the concept. I kindly seek your assistance in constructing the image tag according to the specifications provided so I can apply it to all images on my website effectively.
Your help would be greatly appreciated! Thank you!