How to use the picture tag when creating responsive images?

Question

Images

Hello friends!
Comprehension of the zen of adaptive layout, it was necessary to go to the picture element ... After reading the docks about it, I had a question. We have 3 types of devices to adapt the design to them. This is a mobile phone, tablets and PC. But if for a PC I know what image size to display (this is the maximum), then for mobile phones and tablets I have a question.
How do you decide in practice what image size to take to display it for mobile phones and tablets, given the fact that this size will be multiplied later, for example, for retina devices and so on.
Please help, I've broken my head already...

Answer 1

We start the picture tag inside which we specify the default picture:

<picture>
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

In this code, we will simply load everywhere "img/mobile.jpg".
How can this be improved? You can use progressive image files such as webp (read about them separately, in short - they weigh less with the same image quality).
Add a condition for displaying a new image:

<picture>
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

Here, if the browser supports .webp, the image will be loaded: img/mobile.webp.
Let's say we have a breakpoint on the desktop at 768px where we need to show a higher quality image (or a completely different one). The code can be improved like this:

<picture>
    <source media="(min-width:768px)" 
      srcset="img/desktop.webp"
      type="image/webp">
    <source media="(min-width:768px)"
      srcset="img/picture/desktop.jpg">
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

Here we added 2 more conditions: if the window is wider 768pxand the browser supports webp - it loads desktop.webp, if it doesn't support it - desktop.jpg.
This design can be further extended. For example, we want images to be shown in higher quality on retina displays. To do this, we must have copies of all our pictures but with a resolution increased by 2 times. For example, our pictures will be named as [email protected](260x260px). plus the same pictures, but 2 times higher resolution:[email protected] (520x520px). The browser will decide whether to load them or not, based on the data on the pixel density on the screen received from the system (this is also a separate topic for discussion, there are articles titled something like "A pixel is not really a pixel." I don’t remember the exact name, but the meaning is that on the "so-called" Retina displays at the actual resolution, for example, 2500x1600px, the browser will "think" that the window is 1250px wide). In short, for "retinization" the code needs to be changed like this:

<picture>
  <source media="(min-width:768px)" 
    srcset="img/[email protected], img/webp/[email protected] 2x"
    type="image/webp">
  <source media="(min-width:768px)"
    srcset="img/picture/[email protected], img/picture/[email protected] 2x">
  <source srcset="img/webp/[email protected], img/webp/[email protected] 2x" 
    type="image/webp">
  <img class="image" 
    src="img/[email protected]" 
    srcset="img/[email protected] 2x"
    alt="Описание" width="260" height="260">
</picture>

All this hulk is read from above:
- the first one : if the screen width is more than 768px, the browser supports webp and the pixel density is 2x loaded , if the pixel density is 1x - - if webp is not supported, then the second one is the same for .jpg - if the screen is already 768px - the third - in all other cases and if the browser does not support the normal . You need to understand that for this approach you need to have 4 files for one picture, and this is only for one screen width: , , , . And the same number for desktop. Something like this, you can add another breakpoint for tablet - all by example :) <source>[email protected][email protected]

Answer 2

It depends on your network.
Let's say you have 3 breakpoints: 0-767, 768 - 1199, 1200+ You take
3 pictures with a width of 768, 1200 and a maximum, respectively

Answer 3

oh dude... https://html5book.ru/images-in-html have fun