Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building websites for HiDPI devices
Search
Vinay M
March 23, 2013
Technology
5
5.2k
Building websites for HiDPI devices
Presented at front end meetup Singapore
Vinay M
March 23, 2013
Tweet
Share
More Decks by Vinay M
See All by Vinay M
DRY css with Sass
artminister
1
130
CSS Best Practices
artminister
6
270
Other Decks in Technology
See All in Technology
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
130
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
590
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
430
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
「Linux」という言葉が指すもの
sat
PRO
4
140
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
150
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Unsuck your backbone
ammeep
671
58k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Gamification - CAS2011
davidbonilla
81
5.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
BBQ
matthewcrist
89
9.8k
The Language of Interfaces
destraynor
161
25k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Transcript
BUILDING WEBSITES FOR RETINA (HiDPI) DEVICES Vinay M www.artminister.com
The web’s primary design principle is universality... it should be
accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. — Tim Berners-Lee
Pixel Density (PPI) of Devices Windows: ~96 DPI Mac: ~72
- 120 DPI Retina MBP: 220 DPI
Pixel Density (PPI) of Devices Chromebook Pixel : 239 PPI
HTC Jbutterfly Pixel Ratio: 3 PPI: 440 Samsung SIV Pixel
Ratio: 2 PPI: 441 iPhone 5 Pixel Ratio: 2 PPI: 326 Mobile Devices
PPI (Pixels per inch) 320+ PPI 240 PPI 160 PPI
120 PPI Extra HiDPI Baseline for mobile devices
CSS Pixels 568 x 320 Device Pixels @2X iPhone5: 1136
x 640
Non-Retina HiDPI
High DPI • Greater pixel density • Physical Resolution is
higher (2x) • Content Resolution is constant • Content Scale is higher (2x)
Device Independent Pixels • = CSS Pixels • CSS Pixels
= Device Pixels/device-pixel-ratio
What’s the problem IMAGES Images are not sharp on HiDPI
devices
How do we target devices • CSS • Javascript •
Built-in browser features • Server side delivery of images
CSS: device-pixel-ratio USE IT NOW
CSS: device-pixel-ratio • Pros – Downloads the right image based
on pixel-ratio • Cons – No support for <img > – High DPI device will download large image on Low Bandwidth connection – Multiple Image versions
CSS: IMAGE-SET • Only Supports Background Images • Chrome and
Safari support ONLY CHROME & SAFARI, POLYFILL
Browser features • Srcset • Polyfill: https://github.com/borismus/srcset-polyfill/ No browser support
yet. But its in the specs. http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ POLYFILL
<picture> • Still in the W3C first working draft •
Polyfill: https://github.com/scottjehl/picturefill Source: http://responsiveimages.org POLYFILL
Other Image Tweeks • Background-size: • Compress 2x images –
Webp: https://developers.google.com/speed/webp/
Javacript • Window.devicePixelRatio
window.matchMedia • Media Queries in JS https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media- queries-in-javascript/ SAFARI, CHROME,
FIREFOX MOBILE
Server Side • CMS (Wordpress) • http://www.resrc.it : – Delivers
the right image based on the screen size – Bandwidth Detection
What if everyone has a HiDPI screen • Ultra High
Definition (UHD) – 4k TVs – 8K - 7680×4320 Resolution • vw & vh units – 1 vw = 1/100 of viewport width • 2X the images everywhere ?
Physical Units ? • Very hard to distinguish between devices
– iPad 2 and iPad Mini – Phone to 7’’ tablets – 7’’ tablet to 10’’ tablet • Elements across devices are not of the same physical size – Use <button style=“width: 2inch;”> ? • Safari/Chrome does not support @media screen and (min-resolution :320dpi)
To Consider for HiDPI • Eliminate Images + Use CSS3
• Web fonts for icons • SVG • Use image-set and srcset • Use Viewport units – vw, vh
Thank You • Slides: https://speakerdeck.com/artminister • Many thanks to –
Micheal Cheng (@coderkungfu) – Hackerspace SG • Calling for speakers
Other User groups and Resources • Talk.js http://www.meetup.com/Singapore-JS/events/99986652/ • Singapore
JS https://www.facebook.com/groups/488579174512027/ • HTML5 Rocks SG http://www.meetup.com/HTML5Rocks-SG/ • Webuild – http://webuild.sg