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.

Sounds perfect, doesn't it? But the problem is: There's no _800.jpg on the server! Nor is any of the other image source candidates. You would have to to prerender and upload all image candidates to make it work!

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!

Problem solved.

Try it

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

Move the sliders to resize the image. Keep an eye on the image's file size.

Wanna try with your own images?

Register
Width
300
Height
200
URL
example2.jpg?width=300&height=200&resizeType=cover
10.1 kB
Demo image: Click the sliders to resize!