Responsive Images : Make your app faster!
An overview for responsive image which is used to improve performance across different devices
In this article, we will learn about the concept of responsive image, it's a way to improve performance of your web/app which I think most newbie or
Responsive images are images that work well on devices with widely differing screen sizes, resolutions, and other features.
Have you ever heard the sentence "Right tool for the right job"? It's true with images. Using the right image for the right devices, the right screens will help boost your web/app speed. Let's take a typical scenario, with 1MB photo, if you load it using a laptop, pc, or other large screen devices, it's not a big deal, right? But what if we use that image for small devices like an iPad, mobile phone, it's when the problem comes, on the small screen, we don't need a very high-resolution image. Loading a 1MB photo is wasting bandwidth by downloading such a large image like that. This problem is very common and responsive images was born to solve it
There are three most common scenario that you should use responsive images to reduce loading time and help your web/app get better performances
The first one: Resolution switching. The problem we want to solve with resolution switching is to display identical image content, different sizes of the image depend on the size of the device. It's not necessary to display a 1200x1200 image on both desktop and mobile, right?
The second one: Density Switching
it's a specific case of Resolution Switching, but what matters here is not the size of the screen but the pixel density of the screen. Pixel density is a calculation that returns the number of physical pixels per inch on a screen or display of a device. It's often referred to as Pixels Per Inch or PPI. Examples of low pixel density are typical PC screens, they are called 1x screen because the ratio between physical pixel and logic pixel on these screens is 1:1 - If the height of the image is 100 pixel, it will use 100 physical pixels on the typical PC screen. High pixel density devices to be counted are screens of modern PC, laptop, smartphone - one of them is Macbook, the screen of Macbook usually has a ratio of physical pixel and the logical pixel is 2:1 - 100-pixel height image will use 200 physical pixels.
The final one: Art direction
Art direction problem involves wanting to change the image displayed to suit different image display sizes For example, a web page includes a picture of a man standing in front of a church. When viewed on a mobile browser, that same image is shrunk down, making the person very small and hard to see. So in this case, we'd better use small version of the same image but zoom in on the person.
Let's consider the following code:
<img
srcset = "img/nat-1-large.jpg 1000w, img/nat-1.jpg 300w"
src="img/nat-1-large.jpg"
sizes="(max-width: 600px) 300px, 1000px"
/><img
srcset = "img/nat-1-large.jpg 1000w, img/nat-1.jpg 300w"
src="img/nat-1-large.jpg"
sizes="(max-width: 600px) 300px, 1000px"
/>You guys might be familiar with img and its attribute src. But there are 2 new attributes I want to show you guys are: srcset and sizes.
Srcset will contains a list images we will allow the browser to choose between, and what size each image is. Each set of image information is separated from the previous one by a comma. For each one, we write:
- An image filename
- A space
- The image's intrinsic width in pixels.
🗒️ The width of image uses w unit, not px as you might expect.
Sizes defines a set of media conditions (e.g screen widths) and indicates that image size would be best to choose, when certain media conditions are true. In this case, before each comma we write:
- A media condition ((max-width: 600px))
- A space
- The width of the slot the image will fill when the media condition is true (300px)
🗒️ You many notice that the last slot widths has not media condition, this is the default value if there is no media conditions returns true.
- Each condition will be evaluated in order and the browser ignores everything after the first matching condition. So be careful how you order the media conditions.
🗒️ Another note is that the unit we use with sizes could be px, em, vw but not %
To recap, this is what browser will do when we define these attributes
- Look at its device width
- Evaluate which condition is true
- Look at the slot size given to that media query
- Load the image referenced in the srcset list that has the same size as the slot, if there isn't one, the first image that is bigger than the chosen slot size will be displayed.
The result for above snippet code is:
When size of screen is larger than 600px - in this case is 1904px src of image will be ../nat-1-large.jpg. Why is that? Because the size of the screen is 1904px > 600px and it doesn't match any condition, so browser will pick the default value which is 1000px . The size of nat-1-large is nearest to 1000px so it's the one to be set as src of image.
Similary, if the screen has width less than 600px, the src of image will be nat-1.jpg
Consider the following code:
<img
srcset = "img/nat-1-large.jpg 2x, img/nat-1.jpg 1x"
src="img/nat-1-large.jpg"
alt="image"
/><img
srcset = "img/nat-1-large.jpg 2x, img/nat-1.jpg 1x"
src="img/nat-1-large.jpg"
alt="image"
/>Basically, it's very similar to Resolution Switching, but in this case, we don't have sizes attribute and in srcset, instead of [condition] [size], we have [path] [ratio], The ratio could be 1x, 2x, ... , nx. Currently, we only have 1x, 2x, 3x.
In order to testing this, I recommend you guys use Firefox
On modern browsers, in the devtool, you can adjust the pixel ratio. It's called DPR (device pixel ratio) and located in the middle of the top bar
This is the image in 2x screen.
In 1x screen, the result will be:
In 1x screen, The src of image is nat-1.jpg , in 2x screen, the src of image is nat-1-large.jpg
Consider the following code:
<picture>
<source
media = "(max-width: 600px)"
srcset="img/nat-1-large.jpg"
/>
<source
media="(min-width: 900px)"
srcset="img/nat-2-large.jpg"
/>
<img src = "img/nat-3-large.jpg" alt = "" />
</picture><picture>
<source
media = "(max-width: 600px)"
srcset="img/nat-1-large.jpg"
/>
<source
media="(min-width: 900px)"
srcset="img/nat-2-large.jpg"
/>
<img src = "img/nat-3-large.jpg" alt = "" />
</picture>To resolve the problem in art direction , it's little bit more complicated, in this case, we will use picture, source and img tags
Source tag will have an media attribute which contains media condition (like in Resolution Switching), this conditions are used to determine which image to be chosen. In above example, if width of screen is less than or equal to 600px, the first source will be used. If the width of screen is greater than 600px and less than or equal to 900px then the second source will be used. The img indicates the default value if there is not any condition which returns true.
🗒️ The browser will stop at any matching condition and ignore all other condition behind it, so be careful when ordering condtion.
srcset contains paths of images, each source has a srcset attribute, each srcset can contain more than 1 path - yes, we can combine resolution switching in this case, it's fine. But in real life project, it's not recommended because it will make our code and logic very complicated
The result of above code is:
In this case, I use 3 images to show you guys the differences, with each media condition we will have a different image.
🗒️ You should only use media when handling art direction and when using media you'd better not use any other sizes attribute
Maybe you guys will have question that why don't we use CSS or JS to handle it?
When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. That mechanism is useful in general for reducing page load times, but it is not helpful for responsive images — hence the need to implement solutions like srcset. For example, you couldn't load the <img> element, then detect the viewport width with JavaScript, and then dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.
That's a wrap for responsive images — we hope you enjoyed playing with these new techniques
See you next time!
Ref: