Responsive Images for Your Website

Hi, everyone, my name is Sergei Bucharov, and I'm super excited today to talk about responsive dynamic images at the JS Nation conference. I am Fullstack's Sber, and today I'm going to talk about different ways to serve images on your site. I recently read a report on the state of the web and realized how much more needs to be done on this issue.

One-third of pages use the SRC set, but two-thirds don't. First, in 2014, the SRC set attributes, sizes attribute, and the picture element have allowed office to mock up adaptable resources for almost a decade now. The picture element is used far less than the SRC set. By now, you probably know that implementing image upload is not an easy issue. So many questions instantly arise, including some big ones like 1. Where do I keep my images, locally or remotely? 2. What format should images be kept in? 3. How do I handle image transformations, and where do I keep various versions of the same image? 4. How many image sizes to provide to web browsers? 5. How do I plug everything into my existing app? Certainly, there are a plethora of ready-made solutions available, so you can pick one, but more about them later. Let's try to answer these questions.

First question. Where do I keep my images, locally or remotely? It depends on many factors, both technical and business, for example, 1. the number of images 2. ease of support 3. the total number of transformations operations 4. the picture plan, if you are using IMAGE CDM 5. the frequency of design changes 6. and many others What transformation operations can we perform? I usually divide these operations into two groups, main and additional. The main group includes cropping, resizing, filtering, optimization, and transformation. And, of course, you need to remember about protection. The additional group includes blurring, text addition, flipping, outlines, and shadows, and many other special effects. Therefore, you should think about your purposes and choose the type of storage. If you need only cropping and resizing, you can do it on your server. I will show you how to do it later.

The second question is, what format should images be kept in? According to HTTP archive, the leading positions are occupied by JIF, JPG, and PNG, which can help, but upset me. At 0.22% a WWF slice of 3Py is so small, it is not even labeled on the chart.

And while 0.22% may not sound like a lot, compared to last year, it represents quite a bit of progress. Slowly, the old formats are making way for the new ones, as they should. The new formats outperform the old ones by a significant margin. You will get a sense of that shortly.

This chart shows bits per pixel by format. As you can see, a WWF is more compressed than a WP or JPG. A WWF is a very young format, whose encoders have been quickly iterating. Answering the questions, what format should images be kept in, increased the use of modern formats such as WWF and WP, and of course JPG, where without it, reduced the use of formats like JF and PNG.

The third question is, how do I handle image transformations, and where do I keep various versions of the same image? There are a lot of tools for image optimizations and transformations. Here are some of them. This is an example of an image tag with src and sizes attributes, the familiar way to specify the location of your image. Browsers that do not support src set and sizes will fall back to src. With sizes, you specify the size of the image, and in which situation it must be displayed. This is done by a combination of a media query and the width of an image. With src set, you specify a list of images and different sizes. Another perfectly legit goal with responsive images is not just to show different sizes of the same image, but to show different images. The picture tag has the same logic, but it has a source tag.

The fourth question is how many image sizes to provide to web browsers? This is an interesting question and it all depends on your design. For example, so many images are given on the monger site. A lot, isn't it? The last question is how to upload everything into my existing app? Option 1 is to prepare various versions of the same image in advance and keep them on your server. It's a good option if you don't have thousands of images and the design doesn't change very often. Option 2 is the same, but you can keep images on your regular CDN. Option 3 is to use a proxy server for optimization and transformation of your images. If you're comfortable with Nginx and Docker, for example, you can set up a proxy server on a remote server right away. There are a lot of different open-source projects for this purpose. For example, Fumba, ImageProxy, PicFit and others. You can also write your image optimizer, for example, I've wrote on Nginx, you can view it on GitHub. The advantage is that you can create your URL structure and use only the operation you need. And of course, if Option 3 is not your cup of tea, you can use ImageCDN. For example, Codinary, Amazon, Netlify, nginx, ng-optim, Filestack, Cloudflare and many others.

I hope you have a great time at the JS Nation conference. Thanks for your time.