![]() How to serve an image based on device-pixel-ratio with tag 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. It means that there should be different sizes of an image which can be loaded based on the screen density by the browsers. Google Chrome DevTools showing device pixel ratio in the console tab Serve images based on device-pixel-ratiosĪs 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. 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 ‘vicePixelRatio’, then you will see a number between 1 to 4 which shows the pixel density of you device. How to determine the pixel density of your device As an example, Google Pixel 6 device pixel ratio is 2.6. The device-pixel-ratio is between 1 to 4 and it does not have to be a round number. Here are some popular devices’ pixel-ratios: Name ![]() For example a 288ppi device density has the devicePixelRatio of 3 (288ppi/96ppi=3). Apple displays pixel density are at least 192 ppi What is devicePixelRatio?Īs 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. This screen density started to be increased when Apple released higher display densities for its devices for the first time in 2010. 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.įor many years 96 ppi was the most common pixel density in devices and it is still the default dpi of Windows. 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. CSS pixel: it is a unit of physical measurement.Device pixel (Physical pixel): It is the smallest dot of color that can be displayed on a device display. ![]() Let’s see the most important ones which are used in Web: ![]() Well, there are some meanings for the concept “Pixel”. How to enable device pixel ratio in DevTools mobile simulator.Adding a custom mobile device to DevTools with special DPR.Adding predefined mobile device to DevTools.How to add a mobile device to Chrome DevTools.How to simulate different DPRs in Google Chrome DevTools for testing purposes.Serving images based on device-pixel-ratio in different libraries.devicePixelRatios browsers compatibility.How to serve an image based on device pixel-ratio with tag.How to serve an image based on device-pixel-ratio with tag.Serve images based on device-pixel-ratios.How to determine the pixel density of your device.Before going into details, it is better to get familiar with some basic definitions. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |