How To Make Images Responsive with JavaScript & Filestack

- August 5, 2016


By now we have seen Filestack in action in many different situations, including enhancing images and transforming documents and audio files.  Here at Filestack my job is in fact to show you guys how easily we can integrate and power up web apps thanks to Filestack API.  Uploading and manipulating images is a big topic to cover here.  This is not the first post about it… And will not be the last!

The Internet is nowadays accessed by loads 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 means different screens, different screens means 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 it came the responsive design (RWD) and responsive images.

What is that? As the device screens may shrink, rendering a big size image ends up in slowing down a website with no actual benefits for the users:

When choosing the image size, one could just think about the biggest screen and all the others can easily adapt! Unfortunately, pictures are more and more frequent in websites while smaller devices such as cellphones perform worse than a notebook, so the community ended up with a few techniques to make pictures responsive.

Don’t worry, we are not going to cover them because Filestack can take care of responsive images with no efforts.

The 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:

Optimized-Imagestack

This app is a good opportunity to see how Filestack uploads pictures and controls all the process, starting from the allowed source storages till the result in a JSON format.

However, although the responsive design is handled by Boostrap we did not make any sort of speculation on performances:

After all that’s a gallery to share pictures, performances matter!

So why don’t we improve it by integrating the responsive images handler provided by Filestack?

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

Filestack Responsive Images

To let Filestack take care of our images is very easy:

If you take a look at the documentation, you’ll notice that the fastest way is to do some manipulation on the img tag, precisely adding some attributes:

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

Instead of typing the canonical src attribute, replace it with data-fp-src and that’s it! We have our image now responsive which will be resized following the device screen.

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.

Obviously, there are other attributes you can add 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 the 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

To see the API in action we need to use the browser and try to resize it. Let’s take a look at the app first, how does it react to the screen resizing?

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.filepicker.io/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.filepicker.io/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!

Conclusions

Among all the image manipulations, handling responsive images is a very important and useful topic in nowadays web development. With more and more devices able to surf the web, there is actual need to provide good user experience no matter the screen size.

Filestack comes with a rapid solution to handle responsive images: It provides several ways to do resize on fly without the need of developers to struggle with css and javascript.

Congratulations for finishing the post!