Responsive Images — 6 Simple Ways

Bandwidth is precious on mobile networks, so it helps to serve users on smaller screens a smaller image. Learn how to serve up specific images depending on device with these techniques.

Responsive Images using Bootstrap

If you’re using the Bootstrap framework in your project, you can use the .img-fluid class so that it scales with the parent element.

<img src="..." class="img-fluid" alt="Responsive image">

For more about responsive images in Bootstrap, see https://getbootstrap.com/docs/4.1/content/images/#responsive-images.

Responsive Images using Foundation

Using Foundation? You’re already on your way to success! Unlike Bootstrap, Foundation provides support for truly responsive images. It uses the Interchange library to dynamically load responsive content that’s appropriate for the user’s device.

<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">

In the example above, we have three different sizes of image: one for small screens, one for medium, and one for large. Use the below format to set up a responsive image. The image will change automatically as the browser resizes. Learn more about Interchange here: https://foundation.zurb.com/sites/docs/interchange.html


Continued Reading

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.