The original size of the image and the size of its display area

The source image file located on the server must match the size of the block in which it is displayed. If the size of the source image is larger than the displayed one, then the size of the source file can be reduced.

Due to the 2-fold increase in clarity, the dish looks more appetizing and more expensive.

4k monitors and mobile devices have several screen pixels corresponding to each pixel on the page. The ratio of page pixels to screen pixels is called device pixel ratio or DRP. For example, the resolution of the Samsung Galaxy S20 phone is 3200×1440, and its page size is 800×360. Its DPR is 4.

Due to the DPR coefficient set by smartphone/tablet manufacturers, a 40-pixel button on all screens will be about the size of a finger pad.

For high-resolution screens, we recommend using images with a DPR equal to 2. Some phones are capable of displaying images with a factor of both 3 and 4 DPR. But if you use images optimized for such a DPR, then the original image files will be too large and this will slow down the page loading. Double—precision images (DPR equal to 2) are the perfect compromise.

Our service generates HTML code to display images of the right size for each screen. By analogy, he prepares CSS code.

We are testing a page on a 414 pixel screen. But smartphones range in size from 360 pixels to 430. Of course, it is impractical to make an image for each screen size, so we selected the optimal size for our verification service at 414 pixels [based on statistics] (https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide ). The number of smartphones with a screen larger than 414 pixels is about 5%.

The appropriate size of the images is important for the following reasons:

Users of 4K monitors see high-quality pictures. And this is the most solvent audience.
Image size reduction speeds up page loading.

Read the same:

Database of all screen resolutions [https://yesviz.com/viewport /](https://yesviz.com/viewport /). Information about your screen [https://www.mydevice.io /](https://www.mydevice.io /).

Demonstration

PHP code

Open a demo Download the example code

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 20px;
            }
            .el {
                width: 200px;
            }
            .normal {
                width: 200px;
                height: 200px;
            }
            .blur {
                width: 200px;
                height: 200px;
                filter: blur(1px);
            }
            .horizontal {
                width: 200px;
                height: 100px;
            }
            .vertical {
                width: 100px;
                height: 200px;
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        <h1>Пример различных деформаций изображений</h1>
        <div class="grid">
            <div class="el">
                <div class="title">Нормальный</div>
                <img src="./banana.jpg" class="normal"/>
            </div>
            <div class="el">
                <div class="title">Низкое качество</div>
                <img src="./banana.jpg" class="blur" />
            </div>
            <div class="el">
                <div class="title">Растянуто в ширину</div>
                <img src="./banana.jpg" class="horizontal" />
            </div>
            <div class="el">
                <div class="title">Растянуто в высоту</div>
                <img src="./banana.jpg" class="vertical" />
            </div>
        </div>
    </body>
</html>

Lessons

The original size of the image and the size of its display area

PRO subscription for working with the service