High-Resolution Graphics on the Web

a presentation by Geoffrey Roberts

g.roberts@blackicemedia.com
geoffrey@crossfunctional.net
@retrovertigo

Hi

My example: SMASH!

Sydney Manga and Anime Show

www.smash.org.au

SMASH! logo

Pixel

In digital imaging, a pixel, or pel, (picture element) is a physical point in a raster image, or the smallest addressable element in a display device; so it is the smallest controllable element of a picture represented on the screen.

Wikipedia

72 ppi

(or 96, or 150)

Old monitor

When is a pixel not a pixel?

A pixel

The Retina Display

A couple of iPhone 4s The HTC One

We need to go deeper

Deeper!

Without it?

What we started with

What we started with

What we started with

What we started with

A bunch of assets

A bunch of assets

Now

Now

Now

Now

Media queries


#myelem {
  background-image: url(ui-elem.png);
}

Media queries


@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  #myelem {
    background-image: url(ui-elem@2x.png);
  }
}

Media queries


@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi) {
  #myelem {
    background-image: url(ui-elem@2x.png);
  }
}

Whenever you like!

Do it with SASS


#myelem {
  background-image: url(ui-elem.png);
    
  @media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
    background-image: url(ui-elem@2x.png);
  }
}

Use a SASS mixin!


// Retina display
@mixin retina {
  @media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
    @content;
  }  
}

logo.png

Use a 2x image for your logo.png
and scale it back down to 1x size


#logo img {
  width: 300px;
}

Drupal 8: Responsive Picture

drupal.org/node/1170478

Adaptive Image

drupal.org/project/adaptive_image

SVG

It's a tiger! Yay!

Scalable Vector Graphics

Questions?

These slides are now up at
blackicemedia.com/r/hires

SMASH! website
www.smash.org.au

Send questions to
g.roberts@blackicemedia.com
geoffrey@crossfunctional.net
@retrovertigo