Why Scaling Matters in 2026
"Retina" and high-DPI displays have a higher Device Pixel Ratio (DPR) than standard monitors. While a logical pixel (PX) represents one unit of layout space in your CSS, the physical screen might use 4 or even 9 physical pixels to draw that single unit. Without scaling your assets to @2x or @3x, browsers must stretch your images, resulting in visible blurriness and soft edges.
Target Platform Density
| Device Category | DPR Factor | Pixel Density | Target Asset |
|---|---|---|---|
| MacBook / iPad | 2.0x | ~220 PPI | @2x |
| Surface / PC 4K | 1.5x - 2x | ~180+ PPI | @2x |
| iPhone Pro Series | 3.0x | ~460 PPI | @3x |
HTML Implementation
Use the srcset attribute to allow the browser to automatically choose the best image based on the user's display density.
srcset="[email protected] 2x, [email protected] 3x"
width="100" height="100"
alt="Crisp Logo">
API Integration
When using the html2png.com API, you don't need to manually calculate these. Just pass the scale parameter.
-d "html=..." \
-G --data-urlencode "scale=3"
High-DPI FAQ
Should I just use @3x everywhere?
No. While it looks the sharpest, @3x images are significantly larger in file size (9x the area of @1x), which can hurt page load speeds and data usage.
How do I check my own DPR?
Open your browser console (F12) and type window.devicePixelRatio. Modern screens will typically return 2 or 3.