Blurry images

Blurred, pixelated and simply poor-quality images will greatly damage the impression of the site. Use large enough image files to make them look high-quality.

Good photos in clothing stores are the key to successful sales.

The appropriate image resolution depends on the size of the displayed area and the DPR of the screen. For example, if on a Full-HD monitor the picture is displayed in the area of 300×400 pixels, then for an Ultra-HD monitor you need to use a picture 2 times larger. Despite the fact that the site is displayed the same on both screens, Ultra-HD has a DPR of 2. That is, for each nominal pixel there are 2 real pixels of the monitor.

On mobile devices, the nominal page size can be 360 pixels, and the real screen resolution is 1080 pixels. Which corresponds to DPR equal to 3.

Mobile device screens can have a resolution of 360 to 424 pixels and a DPR of 2 to 4.5. That is, some mobile devices can display a picture of 424×4.5=1908 pixels. But such a picture will be very heavy and will greatly slow down the loading of the page.

We recommend focusing on the screen size of 414 pixels and DPR 2. This screen size is more than 95% of the screens of phone devices, and DPR is the optimal compromise between picture quality and site loading speed. 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.

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