Excessively large images

The area in which the image is displayed on the page has a different size on different screens. For example, if a picture takes up the entire width of the page, then its size will be from 360 pixels on a mobile device to 3840 pixels for an Ultra-HD monitor.

Site designers like Tilda do not optimize the size of images. The displayed area of these 4 images is 275×275 pixels, and the original file is 960×1280 pixels.

We optimize the image for the following screens:

Ultra-HD - 3840×2160 pixels.
Full-HD - 1920×1080 pixels.
HD - 1376×768 pixels.
The phone is vertical - 414×896 pixels.
The phone is horizontal - 896×414 pixels.
The tablet is vertical - 768×1024 pixels.
The tablet is horizontal - 1024×768 pixels.

Mobile devices range in width from 360 to 424 pixels. We chose the 414 width as the standard because it is larger than 95% of devices. That is, by optimizing the pictures for it, they will have the maximum quality on 95% of screens, and on all other screens the quality reduction will be no more than 2.5%.

Also, mobile devices and 2K and Ultra-HD screens have a Device Pixel Ratio or DPR parameter. This means that 1 nominal pixel of the site corresponds to from 2 to 4.5 real screen pixels. For example, on a Full-HD monitor and Ultra-HD, all site blocks have the same proportions. But the Ultra-HD screen has 2 screen pixels corresponding to each pixel of the site. Therefore, for Ultra-HD screens, it is better to use 2 times higher-quality images so that they look more representative and more expensive.

Mobile devices can have a DPR of up to 4.5. Such devices can display large images with high accuracy. But then you will have to upload very heavy images that will slow down the loading of the site, and the increased quality will not greatly affect the user’s perception of the site. Therefore, for mobile devices, we recommend focusing on DPR equal to 2.

Here is the code that uses the image of the desired size depending on the screen size: “language-html “`

PRO subscription for working with the service

Learn more about pricing plans