“Why You Should Use Responsive Images” is a guest post by Limor Wainstein
Before we talk about Responsive Images let’s first talk about what Responsive design is, or more specifically, Responsive Web Design.
“Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes” – Wikipedia
So, as far as definitions go, Wikipedia puts it in a simple and clear statement.
In this post, we are going to cover:
- Responsive web design is important in modern day as this allows our websites to adapt to several screen sizes.
- Images do not gracefully adapt to different screen sizes without some effort to get them to.
- Having responsive images is important because it helps us deliver optimal file size, the right image for the right screen size, improves user experience and improves loading time.
- Having various versions of your image is important for creating a responsive image.
Designing your website to fit multiple screens could be a bit challenging, but these days, thanks to the advent of CSS media queries and well-crafted grid-based frameworks: Bootstrap or Foundation.
Grid layouts play a vital role in making our websites become responsive. Let me put it this way, what happens when we switch from one device to another is that a different grid layout -most likely one best suited for that device- is used all together. Why? Grids are made up of rows and columns and the most common configuration is made up of 12-column long, meaning you can have up to 12 cells on each row if each of them is 1-column wide. So while having 12-cells on a row might make sense on a really wide monitor and this depends on the content on each of them, it would make more sense to have wider cells on each column for a smaller screen. So each cell could occupy more columns, making the content appear cleaner and more suitable for that device.
Learn more about Responsive Web Design on how to choose & use a grid.
Well, that was a breakdown of Responsive Web Design. But what about images? No, applying web design techniques listed above would not make your images respond to the various screen sizes.
The layout of our website is simply just what it is; Layout. Hence after making our websites, there are few things that still happen to our images when viewed on several other devices, they get squished, stretched or out of place.
So with that in mind, let us talk about responsive images and why they are important.
WHAT ARE RESPONSIVE IMAGES
“Images that work well on devices with widely differing screen sizes, resolutions, and other such features.” – MDN
Images on websites do not automatically scale and when they do, it usually is havoc. Okay, there are cases when special design techniques through CSS or JavaScript could work but there are other issues with that too, like file size.
To explain where the problem lies, let’s look at it this way. Having a high-resolution image on your 4K display looks really awesome with all the details but what happens when you view it on your mobile device? It is possible that your mobile device has a 4K display but you would miss a lot of the details. As the image is shrunk down to fit the mobile device, you miss the vital information that is being communicated. But what if, instead there is a scaled down or cropped version with the message just for your mobile device. Awesome right? Yeah.
You may read more on responsive images here.
HOW TO ACHIEVE THIS
Having several versions of your images to suit the difference device categories is important. Typically you would have an extra large version, a large version, a version for a medium-sized screen and another for mobile devices. You then have to tell the browser how to respond in case of changes i.e. telling the browser; use the medium-sized version for a tablet screen or an extra-large for a 4K monitor.
This can be handled by using the <picture> element, where you can specify the different images to be served in different screen sizes.
For background images which are set using the stylesheets, you would have to employ the aid of media queries to achieve the same effect.
If it seems like a lot of work, you could also use cloud services like Cloudinary to handle the changes to the different screen sizes. Services like these handle both image transformations and even optimizations so you always have an optimal image being delivered to the user at all times.
WHY IS IT IMPORTANT?
Let us take a look at the advantages of Responsive images.
AN IMAGE FOR THE RIGHT DEVICE
Well, I am sure you could have guessed this already. Applying responsive image techniques ensure there’s always a suitable image for every device. But of course, it’s not expected of you to create an image for every screen size out there but the optimal ones.
Certain images can fit several screen sizes. You just have to find the most optimal sizes or common sizes and target them. This way you have ensured good coverage.
FILE SIZE
Since your website will only request the image size it requires, this means that a mobile device downloads your scaled-down version. So think about developing countries where mobile device use is very high, network coverage is poor and data is low. This becomes the most sensible approach because it consumes lesser data than it would have taken on a larger device.
IMPROVES LOAD TIME
Similar to the last advantage, having the right image load up also improves load time. You do not want to load an unnecessary High-resolution image even if optimized on a mobile device. You first resize or crop depending on how much information might be lost before even displaying it on the device. So yes, this is important.
IMPROVES USER EXPERIENCE
“User experience is the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.” – Google
The keyword for us here is Pleasing. Having your un-responsive images have the effect of stretching, being out place or the images are not even able to communicate to the user their importance.
About the author:
Limor is a technical writer and editor with over 10 years’ experience writing technical articles and documentation for various audiences, including technical on-site content, software documentation, and dev guides. She is passionate about UX and web design, and also writes about computer/network security, middleware, software development and APIs.