How To Make An Image Responsive

Users are now accessing our websites from tons of different devices.  The idea of using a PC as the only source for surfing the net sounds like the Stone Age, doesn’t it?  Obviously, different devices mean different screens, different screens mean different sizes and so forth. To put it simply, one of our challenges as developers is definitely the rendering of a web page in many different devices without sacrificing user experience and a catchy user interface.  So, we use responsive web design (RWD) and responsive images.

What is a responsive image? Well, on a large screen, we want to deliver a high quality image that will look good to our user. However, as our user’s viewing device shrinks, it no longer makes sense to render a large image size. The large image ends up in slowing down the website, with no actual benefit for the user. Responsive images adjust with the viewing screen, so we are always optimizing for image quality and load speed on all different screen sizes.

Filestack’s image processing API allows us to make all of our images responsive with no effort.

The Image Gallery App

First, let’s start with an image gallery. If you don’t have one already, check out our Image Gallery Tutorial, in which we go through the creation of an app where users can upload pictures with captions to share on the web.

Here’s a screenshot of our homepage:

This image gallery app demonstrates how we can upload and process images with the Filestack API. For an image gallery, we want to display our images, and have them look good on any screen resolution.

We are using Boostrap for the responsive web design, and in the next step, we will implement Filestack to make our image responsive programmatically.

NB: You can find the updated code in the same repository of the image gallery app.

How to Make Responsive Images

To make our images responsive, we simply implement Filestack’s responsive image conversion task into our code.

The fastest way to make an image responsive is to add a data attribute to our img tag:

<img data-fp-src="IMG_URL"/>

However, if we are not satisfied of with this trivial solution, Filestack allows other attributes to control the responsive behavior of our images.

Let’s see this example:

<img alt="" data-fp-src="IMG_URL" data-fp-on-resize="all" data-fp-pixel-round="20" />

1. data-fp-on-resize is by default set to all and through it we can control the resize behavior: For instance, setting it to down, allows for resizing only when the device screen size is decreasing.
2. data-fp-pixel-round instead resize the image to the nearest number of pixels.

There are other attributes you can add to customize your solution, so don’t hesitate to check out the documentation.

And by the way, make sure to set the width of the images to 100% to enabling resizing!

Updating the Code

Well, that’s pretty much all we need so it is time to update our code:

If you remember we created a component to handle the single item made by the picture and the caption, so in the img tag we add attributes for Filestack this way:

class Image extends React.Component {
 render() {
   return (
   <div className="col-md-4">
     <div className="thumbnail">
       <img data-fp-src={this.props.url} className="img-rounded"></img>
     </div>
     <p>{this.props.caption}</p>
     <div className="btn-group btn-group-sm pull-right" role="group" aria-label="media-stats">
       <button type="button" className="btn btn-default"><i className="glyphicon glyphicon-heart"></i> {this.props.like}</button>
       <button type="button" className="btn btn-default"><i className="glyphicon glyphicon-share"></i> Share</button>
     </div>
   </div>
   );
 }
}

This actually works smoothly but don’t you feel is getting more and more verbose? For every picture we gotta repeat these two data attributes… I really think we may end up with hard-to-read code, especially if the component has other attributes too.

The developers at Filestack must have felt the same because they came up with a better solution: Why cannot define these attributes globally instead? With Javascript is a piece of cake! Take a look at this code:

filepicker.setResponsiveOptions(
  {
    onResize: 'all',
    pixelRound: 20
  });

The library provides the method setResponsiveOptions which accepts an object of options as parameter. These options define the responsive behavior throughout our app without need to keep repeating ourselves inside the component. Thus, we can get rid of the data-fp-on-resize and data-fp-pixel-round in order to have a cleaner and more elegant code.

The API in Action

 

There is actually a single break point, while at the beginning the app shows 3 pictures in a row, once the screen get small enough, it shows a single one. So we should while we should expect our picture to get resized along with the page, let’s test when the size fit my pc screen and right after the break point:

<img class="img-rounded" src="https://process.filestack.com/AfcnFThTU4ebKMjxRMngSz/resize=width:360/https://blog.esl.it/wp-content/uploads/2015/03/malta-sun-800x800.jpg" alt="" />

Filestack API attached to the img tag the real src attribute needed for the browser to show the picture, the source is nothing more than the processed picture result and the current size is 360px.

This is after the break point instead:

<img class="img-rounded" src="https://process.filestack.com/AfcnFThTU4ebKMjxRMngSz/resize=width:720/https://blog.esl.it/wp-content/uploads/2015/03/malta-sun-800x800.jpg" alt="" />

The picture was resized to 720px And we did not have to take care of it!

Conclusion

Using responsive images is very important for modern web development. With web users continuing to turn to mobile devices, it is crucial to provide good user experience no matter the screen size.

Filestack comes with an out-of-the-box solution to handle responsive images: It provides several ways to do resize images on fly without struggling with css and javascript.

Congratulations for finishing the post!