utils logo UTILS
Free online tools to generate, calculate,
convert, format, encode, and play.
 

Device Pixel Ratios

Detect your device's pixel ratio and calculate CSS-to-physical pixel conversions for responsive images and HiDPI displays.

Live Detection
-
Device Pixel Ratio (window.devicePixelRatio)
-
Screen Resolution (CSS px)
-
Physical Resolution (px)
-
Viewport Size (CSS px)
-
Physical Viewport (px)

DPR Scale

Common device pixel ratios — your device is highlighted.

Pixel Mapping

How 1 CSS pixel maps to physical pixels at different DPR values.

CSS ↔ Physical Pixel Converter

CSS → Physical-
Total physical pixels (W × H)-
Scale factor-

Image srcset Generator

Generate responsive image srcset attributes for different DPR values.

Device Properties

window.devicePixelRatio-
Screen (CSS)-
Screen (Physical)-
Viewport (CSS)-
Viewport (Physical)-
Color Depth-
Orientation-
Touch Support-

How It Works

What Is Device Pixel Ratio?

Device Pixel Ratio (DPR) is the ratio between physical pixels on a screen and CSS (logical) pixels used by the browser. A DPR of 2 means each CSS pixel is rendered using a 2×2 grid of physical pixels, totaling 4 physical pixels per CSS pixel.

Why Does DPR Matter?

High-DPI screens (Retina, HiDPI) use DPR values greater than 1 to render sharper text and images. Without serving appropriately sized assets, images can appear blurry on these displays. Understanding DPR lets you serve the right resolution images and size elements correctly.

Common DPR Values
DPRDevicesPixels per CSS px
1Standard displays, older monitors1
1.5Some Android devices, Windows scaled displays2.25
2Apple Retina (MacBook, iPhone 6-8), many Android4
3iPhone Plus/Pro/Max, high-end Android9
4Some ultra-HD Android devices16
Using srcset for Responsive Images

The HTML srcset attribute lets browsers pick the best image for the current DPR. By providing 1x, 2x, and 3x versions, you ensure crisp images on all devices while not wasting bandwidth on standard displays.

Embed This Util

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML: 


    

       Copy snippet
      Adjust the height to taste.
    

  









  
 Related Utils

  

    

       Viewport Size
       Device Screen Sizes
       Responsive Tester
       Image Resize
    

  




          

          

          

              Feedback
          

          

            

              Help us improve this page by providing feedback,
              and include your name/email if you want us to reach back. Thank you in advance.
            

            

              
              

              
            

          

          
          
          
          

          

            Share with