Responding to the New
High-Resolution Web

Considerations for High-Density Displays

Adam Bradley

@adamdbradley
cdnconnect.com

Outline

  • Why Should I Care?
  • What Is This "Pixel" You Speak Of?
  • How Do I Implement Hi-Res?
  • What Else Could I Do?
  • The Future...

Why Should I Care?

Not everyone has a Retina display. Why bother?

Apple's Retina Display

Retina display's pixel density is so high your eye is unable to distinguish individual pixels.
- Apple.com

Apple's Retina Display

  • Marketing term for Apple displays with high-density
  • Not the only display with a high-pixel density
  • Already has competitors with higher pixels per inch
  • Many more manufacturers to follow
  • Don't get hung up on "Retina", worry about hi-res

Retina Isn't the Only High-Density Display

Device Pixels Per Inch
New iPad 264
Samsung Galaxy SIII 306
Galaxy Nexus 316
iPhone 4/4S 326
LG Optimus LTE 329
HTC Rezound 342
  • http://marcdrummond.com/responsive-web-design/2012/08/10/responsive-design-retina-images

Traditional Displays to Follow

  • 15" MacBook Pro with Retina released in June 2012
  • Will more Apple products get Retina??
  • Will the rest of the world stand by watching??

Hi-Res & Responsive Images

  • What's the difference?
  • Similar challenges
  • What's your end goal?

What Is This "Pixel" You Speak Of?

Let's get to the basics of images, devices and CSS

Vector Graphics

  • Lines and curves
  • Scales without loss of quality
  • Native OS elements
    • Text
    • Borders
    • Buttons
  • Spaceship: codepen.io/monstersaurous/pen/Gatqe
  • Albert Filice

Raster Graphics

  • Rectangular grid
  • Exact number of pixels, does not change
  • Cannot scale up without loss of quality
  • Raster images are the challenge
    • .jpg
    • .png
    • .gif
  • wikipedia.org | goo.gl/4Z6H2

72 DPI

  • 1984 128K Apple Macintosh
  • 512 x 384 resolution
  • 7.2" x 5.4" monitor
  • Do the math, rounds up to 72 "dots" per inch
  • 72 DPI made sense to the print world
  • gigaom.com | goo.gl/7Qvpy
  • wikipedia.org | goo.gl/Qp7oy

Pixels Per Inch (PPI)

  • DPI historically the single term for resolution
  • PPI better describes display resolution
  • It's not 1984
  • There's no standard display:
    • Different resolutions
    • Different pixel densities
    • Different physical dimensions
  • http://en.wikipedia.org/wiki/File:DPI_and_PPI.png

Forget about PPI for Web Images

  • Photoshop "Web" present adds to the confusion
  • Worry about the number of PIXELS
  • Don't worry about pixels per inch
  • Video systems have no concept of inches or cm

Image PPI Only Matters for Print

  • PPI is only meta data, not extra image data
  • Images scale proportional to the webpage layout
  • 72 PPI, 720 PPI, 7 PPI: No different for the web
  • Doesn't even matter when printing webpages
  • Printing webpages proves images scale to layout, not PPI
  • PPI does matters for print:
    • Magazines
    • Newspapers
    • Brochures, etc.

Pixel !== Pixel !== Pixel

  • Historically pixels matched 1-for-1
  • "Pixel" has numerous definitions:
    • Device Pixels
    • Image Pixels
    • CSS Pixels
  • Large source of confusion

Device Pixels

  • Physical piece of hardware
  • Smallest point on a physical display
  • Cannot be stretched, skewed, or subdivided
  • Usually comprised of red, green, and blue sub-pixels
  • http://en.wikipedia.org/wiki/File:Pixel_geometry_01_Pengo.jpg

CSS Pixels Are Relative

  • If one CSS pixel was mapped to one device pixel then content would be too small
  • Instead the content is magnified to the device
  • No problem for vector-based fonts/graphics
  • Raster images cannot "magnify" without loss of quality

The Great Pretender

  • Device pixels increase, but CSS pixels stay the same
  • Designed to not break existing layouts
  • Mobile browsers assume device width of 980px
  • Use the viewport meta tag to override defaults
  • (This presentation focuses on images, not mobile layout)

CSS Pixels Widths vs. Device Pixels Widths

  • "Width" in example refers to browser's CSS width
  • "Pixel Ratio" refers to browser's device pixel ratio
  • 1st/2nd Gen iPad has device pixel width (portrait) of 768
  • 3rd Gen iPad has device pixel width (portrait) of 1536
  • http://sunpig.com/martin/code/2012/androidzoom/devicewidth.html

1 Pixel is Now 4 Pixels

(When device pixel ratio is 2)

iPad Print Screen Comparison

iPad 1 & 2

New iPad

Device Display Comparison (Portrait Orientation)

Device Pixels CSS Pixels Pixel Ratio PPI
iPhone 3GS 320px 320px 1 163
iPad 1 & 2 768px 768px 1 132
HTC Evo 3D 540px 360px 1.5 217
iPhone 4 640px 320px 2 326
New iPad 1536px 768px 2 264
HTC One X 1440px 720px 2 312
  • http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Feature Detect

Don't develop for only 'Retina', that's like building a road for just Chevy's

  • Looking for only "Retina" devices excludes others
  • Use feature detection:
    • JavaScript: window.devicePixelRatio
    • CSS: Media Queries

Device Pixel Ratio

  • Without it images would be disproportionate to layout
  • Similar concept to zooming
  • Zooming proves webpages can scale without breaking layout

Hi-Res Comparison Demo

goo.gl/zmhzm

View hi-res image comparisons on your mobile phone, tablet or laptop with high-density display (MacBook Pro 15" Retina)

Ultimate Goal

Every image pixel should translate to a device pixel

Don't Break The Web!

  • All Browsers: Modern and Old School
  • Any Device: Desktop, Mobile, Tablet, TV, etc.
  • Web Crawlers: Google, Bing, etc.
  • Future Friendly
  • 2012 Olympic Opening Ceremony
  • A message from Tim Berners-Lee, Inventor of the Internet

High Density + Vectors

  • Anything that can draw itself looks amazing
  • Additional device pixels automatically utilized
  • Browsers & Operating Systems take care of the work

Raster Images Cannot Scale!

  • High-density displays require more image pixels
  • Raster images have an exact number of image pixels
  • Raster images cannot magically add image data

How Do I Implement Hi-Res?

http://www.blackouttees.com/design/272+I+Block+Pixels+Funny+Computer+Geek+T-shirt

Never EVER Resize in the Browser...right?

  • Things have changed
  • Browsers have improved abilities to scale images

Pixel Doubling

  • Pack more image pixels into the same CSS area
  • "Doubling" refers to doubling one dimension
  • Natural Dimensions:
    • Term used by browsers
    • Actual image dimensions

Content Stays True to Layout

<img src="speedy-delivery.jpg" width="400" height="250">

CSS Dimensions: 400x250

  • http://commons.wikimedia.org/wiki/File:Tjorven_in_Amsterdam.jpg

Goal: Image Pixels Match Device Pixels

Pixel Ratio CSS Pixels Device Pixels Image Pixels
1 400x250 400x250 400x250
1.5 400x250 600x375 600x375
2 400x250 800x500 800x500

Same CSS Pixels, More Image Pixels

<img src="speedy-delivery.jpg" width="400" height="250">
  • CSS Dimensions: 400x250
  • Device Pixel Ratio: 2
  • Image Dimensions: 800x500

Sprites, Icons, Logos & and Whatnot

  • https://github.com/commadelimited/jQuery-Mobile-Icon-Pack
  • Andy Matthews

jQuery Mobile Web App with Icons

  • Made with Codiqa, prototyping & interface-building tool for jQuery Mobile
  • codiqa.com

An Old Sprite Standard

.ui-icon-star {
	width: 18px;
	height: 18px;
	background-image: url("images/icons-18-white.png");
	background-repeat: no-repeat;
	background-position: -468px 50%;
}
<span class="ui-icon-star"> </span>

Looks great on a display with a device pixel ratio = 1

But what if the device pixels quadruple?

  • Images stay true to the layout, not device display
  • The 18x18 icon stretches to 36x36
  • High-density displays:
    • Render a blurry icon
    • Icon may appear worse than if on a standard display
    • Wasting the true beauty of high-density displays

CSS Media Queries to the Resue

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
	
   .ui-icon-star {
       background-image: url("images/icons-36-white.png");
       -moz-background-size: 776px 18px;
       -o-background-size: 776px 18px;
       -webkit-background-size: 776px 18px;
       background-size: 776px 18px;
   }
}
  • CSS used by jQuery Mobile for icons
  • http://jquerymobile.com/

CSS4 image-set

  • Proposed CSS4 image-set spec
  • Provides the browser with options, not rules
  • Centeralizes image sources
  • Safari 6 and Chrome 21 (webkit vendor-prefixed)
#test {
    background-image: image-set(url("test.png") 1x,
                                url("test-2x.png") 2x);
    width:200px;
    height:75px;
}
  • blog.cloudfour.com | goo.gl/94Jsm
  • Jason Grigsby
Why Not Always Serve Hi-Res?

Strain on Servers and Networks

  • Image file sizes significantly larger
  • Wasted bandwidth
  • Large overhead just to scale down on the client

Strain on Devices (especially mobile)

  • Wasted bandwidth
  • CPU resources
  • Memory consumption

Underlying Issue: Browser Pre-Parser

  • Browsers start getting assets before layout determined
  • Pre-parser fetches img src immediately
  • Pre-parser makes pages load faster
  • BUT! Never a moment to inject our own logic
<body>
	<h1>That pre-parser, he's a real go getter</h1>
	<img src="myimage.jpg">
	<p>Image is requested immediately!</p>
	<p>Request made before the DOM is ready.</p>
	<p>Request made before entire HTML downloaded.</p>
	<p>Request made before window.onload.</p>
</body>

<img> Our Friend and Foe

  • Any change to src fires another HTTP request
  • Bad for servers
  • Bad for devices
Pseudocode
<img id="myImg" src="low-res.jpg">
<script>
if ( window.devicePixelRatio > 1 ) {
   /* This fires a second image request! */
   document.getElementById('myImg').src = 'hi-res.jpg';
}
</script>

Solutions

  • Currently no "perfect" solution (yet)
  • My Cop Out: It's a case-by-case basis
  • First understand what your end goal is

Questions To Ask Yourself

  • Who are your visitors?
  • What devices do your visitors use?
  • How large would your hi-res images get?
  • Do you care about bandwidth?
  • Relatively possible to update all of your img tags?
  • Are you concerned about SEO?
  • Do you use a CMS?
  • Could you rely on a 3rd party?
  • http://css-tricks.com/which-responsive-images-solution-should-you-use/
  • Chris Coyier

Choosing A Solution

  • Identify what your end goal is
  • Understand the limitations of each solution
  • Understand what it takes to implement
  • (Know that none are perfect at the moment)

Foresight.js

  • JavaScript / CSS
  • Tests bandwidth
  • One request per image
  • Format url requests with CSS hack
  • Doesn't hard code various src's in HTML
  • Used on m.washingtonpost.com
  • https://github.com/adamdbradley/foresight.js
  • Adam Bradley @adamdbradley

Foresight.js

  • src attribute is missing
  • Uses data-src instead
  • JavaScript/CSS calculates which src to request
  • <noscript> fallback when JavaScript is disabled
<img data-src="imagefile.jpg" data-width="320" data-height="240" class="fs-img">
<noscript>
    <img src="imagefile.jpg">
</noscript>
  • https://github.com/adamdbradley/foresight.js
  • Adam Bradley @adamdbradley

Use CSS To Format Static Requests

  • CSS hack: Uses the font-family property
  • Mimics CSS4 image-set
  • JavaScript calculates size needed
  • CSS used for the image's url template
<style>
   .fs-img {
      font-family: 'image-set( 
                       url(foo.png), 
                       url(foo_2x.png) 2x high-bandwidth
                    )';
   }
</style>
  • https://github.com/adamdbradley/foresight.js
  • Adam Bradley @adamdbradley

Use CSS To Format Dynamic Requests

  • Follows URI Template standard (RFC 6570)
  • Replaces values within image-set property
  • Customizable to your own naming convention
  • Centralizes image request logic
<style>
   .fs-img {
      font-family: 'image-set( 
                       url({filename}.{ext}), 
                       url({filename}_2x.{ext}) 2x high-bandwidth
                    )';
   }
</style>
  • https://github.com/adamdbradley/foresight.js
  • Adam Bradley @adamdbradley

<noscript>

We essentially ignore anything inside of <noscript> just because so many badly behaved SEOs/webmasters abused it (much like meta tags).
- Matt Cutts, Head of Google's Webspam Team

Focal Point CSS

  • https://github.com/adamdbradley/focal-point
  • Adam Bradley @adamdbradley

Find Which Solution Fits Your Needs

  • Many solutions (hacks) available
  • Each case is different
  • Research which is best for your scenario
  • CSS-Tricks: Great resource to review each solution
  • http://css-tricks.com/which-responsive-images-solution-should-you-use/
  • Chris Coyier

What Else Could I Do?

It doesn't always require an image anymore

  • CSS
  • Web Fonts
  • Icon Fonts
  • SVG

CSS

  • Gradients
  • Rounded Corners
  • Box-Shadow
  • Text-Shadow
  • Border-Image

Device Pixel Ratio of 1

Which is CSS - Which is an Image?

Device Pixel Ratio of 2

Now which is which?

  • 1 image pixel stretched to fit 4 device pixels: booo...
  • CSS can draw itself and scales without issues: Yaaa!

Web Fonts

  • Images aren't required for great typography anymore
  • @font-face been around since CSS 2.1
  • Issue has been supporting a standard format
  • Largely Supported

@font-face

@font-face {
    font-family: DeliciousRoman;
    src: url("/fonts/Delicious-Roman.otf");
    font-weight: 400;
}
p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
  • http://www.font-face.com/

Google Web Fonts

  • "Bullet-proofs" cross-browser issues
  • Free of charge
  • 500+ open fonts to choose from
  • Runs from Google's servers: fast & reliable
  • (Over)Used in this presentation
  • http://www.google.com/webfonts/

Icon Fonts

  • Easily change the size
  • Easily change the color
  • Easily shadow their shape
  • They can have transparent knockouts
  • Works the same as image based CSS icons
  • http://css-tricks.com/examples/IconFont/
  • Chris Coyier

Adjust The Sliders...Magic Ensues

  • Size
  • Color
  • Shadow
  • http://css-tricks.com/examples/IconFont/
  • Chris Coyier

Used By Github

@font-face {
    font-family: 'Octicons Regular';
    src: url("/assets/octicons.woff") format("woff");
}
.mini-icon {
    font-family: 'Octicons Regular';
}
.mini-icon-create::before {
    content: "f003";
}
<a href="/new" id="new_repo">
    <span class="mini-icon mini-icon-create"></span>
</a>

(Slimmed down code just to get to the point)

  • https://github.com/blog/1106-say-hello-to-octicons
  • https://github.com/

Icon Font Resources

  • Font Awesome
    • Designed for Twitter Bootstrap
    • https://github.com/FortAwesome/Font-Awesome
  • IcoMoon
    • Build custom icon fonts from a large selection
    • http://keyamoon.com/icomoon/
  • Pictos
    • Royalty-free icons for user interface designers
    • http://pictos.cc

Scalable Vector Graphics (SVG)

  • Scalable
  • Vector
  • Graphics
  • What more is there to say?

SVG

  • (It's Not HTML5)
  • W3C spec since early 2000's
  • Extremely powerful
  • Much more complicated than a raster image

The Future...

In A Perfect World

Tell The Browser Which Image Is Preferred

  • The browser will know what size it needs
  • Let the browser decide which image is best
  • Make only one request per image
  • Currently HTML has no way of doing this
Any solution that will be enshrined in the HTML specification will need to work without requiring a server.
- Jason Grigsby, @grigs
  • http://blog.cloudfour.com/the-real-conflict-behind-picture-and-srcset/

@srcset

  • Comma-separated list of image URLs
  • Descriptors for viewport dimensions & pixel density
  • Similar to CSS4 image-set
  • Added to WHATWG spec
  • http://whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset

@srcset

<img src="myimage-600x200-1x.jpg"
     srcset="myimage-600x200-1x.jpg 600w 200h 1x,
             myimage-600x200-2x.jpg 600w 200h 2x,
             myimage-200x200 200w 200h">
  • http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-August/036839.html

<picture>

  • W3C Responsive Images Community Group
  • Based off of the audio/video element
  • W3C Editor's Draft
  • Picturefill: Mimics the proposed picture element
  • http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html

<picture>

<picture>
    <!--Default source-->
    <source srcset="small-1.jpg 1x, small-2.jpg 2x">

    <!--Use when available width is 600px or more-->
    <source media="(min-width: 600px)" srcset="med-1.jpg 1x, med-2.jpg 2x">

    <!--Use when available width is 900px or more-->
    <source media="(min-width: 900px)" srcset="large-1.jpg 1x, large-2.jpg 2x">

    <!--Fallback for older browsers-->
    <img src="small-1.jpg">
</picture>

Recap

  • High-density displays will soon go mainstream
  • Understand the differences: CSS, image & device pixels
  • Feature detect, don't device detect
  • Match Image Pixels to Device Pixels for Hi-Res
  • Current solutions aren't perfect
  • You don't always need to use images
  • New specs are currently in development

</presentation>

<thanks!>

Adam Bradley

@adamdbradley
cdnconnect.com

Created with CSS 3D Slideshow - by Hakim El Hattab
http://hakim.se/experiments/css3-3d-slideshow