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

The original image file located on the server? It has its own size, and the block on the page in which it is displayed has its own size. In order for the images to look clear on the screen, these sizes must match. If the size of the original image is larger than the displayed one, which means it should be reduced to save time downloading the file.

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.

4k monitors and mobile devices have several screen pixels corresponding to each pixel on the page. The ratio of country pixels to screen pixels is called device pixel ratio or DRP.

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

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 then the images will be too heavy and will greatly delay 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 the 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 most optimal size for our verification service at 414 pixels [based on statistics] (https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide ). The use of screens 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.
Reducing the size of images, therefore, speeding 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 /).

◀ Using the modern HTTP2 protocol to speed up the site Using sprite technology ▶

Any comments or additions? Send us an email admin@site-alarm.com .

Check your website