Device Pixel Ratio

Due to great progress of devices in the quality of their displays, it is highly demanded to serve images for different devices based on their pixel densities. Before going into details, it is better to get familiar with some basic definitions.

What are pixels?

Well, there are some meanings for the concept “Pixel”. Let’s see the most important ones which are used in Web:

• Device pixel (Physical pixel): It is the smallest dot of color that can be displayed on a device display.
• CSS pixel: it is a unit of physical measurement. 1 pixel equals to 1/96th of 1 inch.

What is “Pixel Density”?

Pixel density, also known as display density or screen density, calculates the density of pixels per inch on a screen of a device which is measured by ppi (pixel per inch) unit. Pixel density is one of the most important elements of display quality, the higher the screen density is, the better view experience a user can have.

For many years 96 ppi was the most common pixel density in devices and it is still the default dpi of Windows. This screen density started to be increased when Apple released higher display densities for its devices for the first time in 2010. Apple displays pixel density are at least 192 ppi

What is devicePixelRatio?

As the newer devices with different sizes and also shapes came to the market, the device physical pixel is not the same as CSS pixels anymore, so a new context “devicePixelRatio” has been introduced which relates the device physical pixels and CSS pixel. For example a 288ppi device density has the devicePixelRatio of 3 (288ppi/96ppi=3). Here are some popular devices’ pixel-ratios:

Name	Phys. width and height	CSS width and height	Pixel ratio
Apple iPhone 12 Pro Max	1284×2778	428×926	3
Apple iPhone 12, 12 Pro	1170×2532	390×844	3
Apple iPhone 7, iPhone 8	750×1334	375×667	2
Apple iPhone 6+, 6S+, 7+, 8+	1080×1920	414×736	3
Apple iPod Touch	640×1136	320×568	2
Samsung Galaxy S8+	1440×2960	360×740	4
Samsung Galaxy S7, S7 edge	1440×2560	360×640	4
Motorola Nexus 6	1440×2560	412×690	3.5
Sony Xperia Z3	1080×1920	360×598	3
Xiaomi Redmi Note 8T	1080×2340	393×775	2.75
Xiaomi Redmi Note 5, 6	1080×2160	393×739	2.75
Blackberry Leap	720×1280	390×695	2

The device-pixel-ratio is between 1 to 4 and it does not have to be a round number. As an example, Google Pixel 6 device pixel ratio is 2.6.

Your Device Pixel Ratio is:

How to determine the pixel density of your device

To find out the pixel density of you device, open your browser (Google Chrome, Mozilla FireFox or Microsoft Edge), as shown below, in Console tab type ‘window.devicePixelRatio’, then you will see a number between 1 to 4 which shows the pixel density of you device.

Serve images based on device-pixel-ratios

As mentioned earlier, because of newer displays and their higher resolution in showing images, it is necessary to serve suitable images based on device-pixel-ratios. It means that there should be different sizes of an image which can be loaded based on the screen density by the browsers. One point to consider is that it is important to provide larger images for higher densities and do not enlarge the small images for higher screen densities, because by scaling the small images, their qualities will considerably decrease and if you do not provide suitable image sizes for bigger displays, the browsers do the same thing.

How to serve an image based on device-pixel-ratio with <img> tag

To show images based on device-pixel-ratio, the density descriptors such as 1X, 2X and 3X and the attribute “srcset” should be used together.

By using <img> tag and srcset attribute inside, you are able to have different resolutions of an image, so the browser is able to serve the right image based on DPR (device pixel ratio).

How to serve an image based on device pixel-ratio with <picture> tag

To serve modern image formats like AVIF and WebP while considering device-pixel-ratio, the <picture> tag is a good approach. By using <picture> tag, it is possible to have different image fallbacks with regards to different pixel ratios and browser image format support, so the browser will decide to load the most suitable image based on the HTML element, DPR and image format support.

As it is shown in the image above, if the different device pixel ratios (1X, 1.5X, 2X, and 3X) are added, so that the browser can understand which image is suitable for which DPR. In addition, it is recommended to bring the pixel density (1X, 1.5X, 2X, and 3X) in the image file name, so it can be easily trackable and understandable for the SEOs, developers or everyone who wants to debug the page. It is not an obligation.

devicePixelRatios browsers compatibility

The main browsers which are used by all users including Google Chrome, Firefox, Opera, Edge and Safari, almost both on desktop and mobile versions, support devicePixelRatios. It means you can generate images based on their pixel densities, and then provide a better view experience for the users.

Serving images based on device-pixel-ratio in different libraries

If you work on JavaScript libraries and want to serve images based on device-pixel-ratio, here are some popular frameworks solutions:

1. React Native

For serving correctly sized images based on device pixel ratio in React Native library, you can use ‘PixelRatio’.

var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100)
});
<Image source={image} style={{ width: 200, height: 100 }} />;

React Native PixelRatio Documentation

2. Next.js

To serve images based on the device pixel ratio, you can generate different sizes of images and put them into a special folder, e.g. different-resolution which should be located in the /pages folder. In the Netx.js library, the ‘intrinsic’ layout property scales down the container width to the image size.  the images will be provided for the browser with the right dimension based on the viewport and device pixel ratio.

import Image from "next/image";
export default function DifferentRes() {
return (
<Image
src={
"https://res.cloudinary.com/ifeomaimoh/image/upload/v1651694150/sea_huykbx.jpg"
}
height={500}
width={800}
alt={"some sample file"}
layout="intrinsic"
sizes="(max-width:3000px) 10vw"
/>
);
}

Head over this folder in your browser and see the console in DevTools (Google Chrome browser), you will see the <img> tag and srcset attribute which contains images with different DPRs as shown in the image below.

Next.js image documentation

You can find more information in Next.js Image optimization

How to simulate different DPRs in Google Chrome DevTools for testing purposes

Simulating mobile devices is one of the most important steps for testing purposes. Almost all the popular browsers including Google Chrome, Safari, Mozilla FireFox, Opera, and Microsoft Edge provide mobile device simulators for developers. Here, you will learn how to add a special device in Google Chrome with demanded DPR, enable device pixel ratio and test whether the browser loads the right image based on your DPR or not.

1- How to add a mobile device to Chrome DevTools

By following the steps below, you can learn how to add a predefined or a custom mobile device to the Google Chrome DevTools

Adding predefined mobile device to DevTools

For adding a device which has been already defined in your Chrome browser, you need to follow the steps here:

1. For opening DevTools in Chrome, press F12 or Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).
2. Press gear icon ⚙️ on the top right corner of DevTools  to enter the setting section.
3. In the settings section, from the left vertical menu, choose “Devices”.
4. Choose the considered devices from the list by marking the checkboxes.

Adding a custom mobile device to DevTools with special DPR

For adding a custom device with the custom device pixel ratio that you prefer, first you need to follow the steps 1 to 3 from above (adding predefined mobile devices section), then continue the next steps here:

1. Press on the “Add custom device” button.
2. In the opened section, choose a name for your custom device.
3. Specify a width and height for your device.
4. Specify a DPR (Device Pixel Ratio) for your device.
5. Select the device type from the dropdown which is optional.

*NB: User agent string and user agent client hints which have fields including Brand, Browser version, Platform, Architecture, and Device model are optional and DO NOT have any impact on DPR testing.

2- How to enable device pixel ratio in DevTools mobile simulator

Device Pixel Ratio (DPR) is a great option to understand a device’s pixel ratio and to test if the correct image size is loading for that DPR or not. For enabling device pixel ratio, first you need to open DevTools as previously mentioned by perssingF12 or Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).

1. Click on the Toggle Device Toolbar on the left top corner in DevTools.
2. Click on the ⋮  icon on the top right corner.
3. Select “Add device pixel ratio”.

Conclusion

As the new devices come to markets, we all expect better resolution and device density, so it is important to respect these display improvements by serving images based on device pixel ratio (DPR). To serve images based on DPRs, using <img> or <picture> tag is the solution. In different website platforms and libraries, there are some solutions to be performed for serving right images for different display densities. In WordPress, the Oxy Image plugin is a good solution which provides the opportunity to serve suitable image resolution and format using <picture> tag.