Image resizing

Most of today's websites have to be responsive, meaning they have to look good and work on any device the users might be using.

The CSS solution

One way to make images responsible is to resize them by CSS classes, usually with something like this: .img-fluid {max-width: 100%; height: auto;}. While this makes the image display at a low width on narrow devices, users still have to load the image in its full resolution, which is also intended for desktop use and therefore might be several times as large as it had to be. This, of course, has a negative impact on page load speed, user experience, and conversion rate.

scrcset and sizes attributes

The best way to solve this problem is to use different image files for different screen sizes, so narrow devices only need to load the amount of data they really need. Fortunately, the HTML5 specification enables us to do just that with the srcset and sizes attributes.

<img src="https://tiny.pictures/example2_800.jpg"
     srcset="https://tiny.pictures/example2_240.jpg 240w, https://tiny.pictures/example2_480.jpg480w, https://tiny.pictures/example2_800.jpg 800w"
     sizes="100vw">

We don't want to go into too much detail here, but this is what basically happens: The src attribute is used by legacy browsers that don't know about srcset yet. The srcset attribute holds a list of image source candidates that might be used by the browser. Each entry in the list consists of a URL and the width in pixels. Finally, the sizes attribute tells the browser which part of the browser's viewport will be filled by the image (in this case 100 %). This information, together with the viewport size, display pixel ratio, network bandwith, and others, is used by the browser to select the optimal image source for the user.

A responsive image service to the rescue

That's where tiny.pictures drops in. We resize any image to any size in real-time. So basically, there are thousands of different image source candidates for the browser to choose from. All you have to do is to change the original image's URL a bit. With tiny pictures, you're now able to do this.

<img src="https://tiny.pictures/example2.jpg"
     srcset="https://demo.tiny.pictures/main/example2.jpg?width=240 240w, https://demo.tiny.pictures/main/example2.jpg?width=480 480w, https://demo.tiny.pictures/main/example2.jpg?width=800 800w"
     sizes="100vw">

You might also want to use our JavaScript library to make life even easier. It's able to build the above img elements automatically!

Try it

Use our demo to see how much data transfer can be avoided by delivering optimal images.

Width

300

Height

200

URL

example2.jpg?width=300&height=200&resizeType=cover