BestHub
Sign in
ELab Team
ELab Team
Mar 24, 2021 · Frontend Development

Why Your Images Eat Memory: Understanding Pixels, DPR, and Performance

This article explores image‑related concepts such as CSS pixels, device pixels, device‑independent pixels, DPR and PPI, explains how to calculate image memory usage, compares img tag, background‑image and canvas rendering performance, and offers practical optimization directions for web developers.

CanvasMemory UsagedevicePixelRatio
0 likes · 17 min read
Why Your Images Eat Memory: Understanding Pixels, DPR, and Performance
MaoDou Frontend Team
MaoDou Frontend Team
Jul 3, 2019 · Frontend Development

How to Achieve True 1px Borders on High‑DPI Mobile Screens

This article explains why 1 px borders appear thick on high‑resolution mobile devices, explores the role of devicePixelRatio, and presents five practical solutions—including iOS 0.5 px borders, border‑image, box‑shadow, pseudo‑elements, and viewport scaling—along with their pros, cons, and common pitfalls.

1px borderFrontend DevelopmentdevicePixelRatio
0 likes · 11 min read
How to Achieve True 1px Borders on High‑DPI Mobile Screens