Bootstrap “img-fluid” class or <picture> and <source> elements

The “img-fluid” class of Bootstrap has the advantage that we can use one picture only, at a high size like 1920 x 1080 and the same picture will shrink adjusting its size to the several screen sizes, right?

However, the weight will still be the same, right? let’s say 600 KB. If the mobile device has a powerful harware, it could show the image very quickly, otherwise, the image will take long time to load.

This feature is wonderful because makes you tag only ONE image and that‘s it, but for the sake of small devices no so powerful, is it not better to still use the picture and source elements and use 4 or 5 images with different sizes, different widths for different screen? I.e. 320px, 480px width, 720px, 1920px, 2880px. What’s your suggesiton?

I would say yes. If you have the time and patience (or it’s important/valuable enough) to set it up so you serve different images for different devices it will benefit the users.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

That is one upside to using a framework like say Gatsby (plugin) which can handle it for you with minimal effort on your part.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.