SlideShare une entreprise Scribd logo
1  sur  59
Picture Perfect
       Kevin W. Gisi
  Twin Cities Code Camp
     October 6, 2012
Kevin W. Gisi
 Mashable
    Ruby on Rails
HTML/CSS3/JavaScript
     Rails Rumble
       ECRuby
 kevin@kevingisi.com
       @gisikw
QUICK DISCLAIMER
What you are...
         1337 haxor
      Red Bull enthusiast
          Text-based
Self-taught and self-motivated
           Tinkerer
          Automator
What you are
   not...
    Crazy hipster
   Classy designer
   Starbucks lover
     Indie artist
  Liberal arts major
   Photoshop guru
THIS TALK IN A
 NUTSHELL
Images

•   Why do we need ‘em?

•   How do we make ‘em?

•   How do we manage ‘em?

•   How do we display ‘em?
A BRIEF HISTORY...
The Universe (Ancient Times)
The Universe (1982)
The Universe (the 90’s)
The Universe (the 90’s)
The Universe (2004)
THE UNIVERSE NOW
The Internet ♂
The Internet ♀
What do I care?
What Women Want...
•   Enough white space
•   Quality imagery
•   Easy intuitive navigation
•   Clean and clear design
    elements
•   Reserved palette
•   Harmonious element
    placement


http://blog.templatemonster.com/2012/07/26/web-design-by-gender-women/
MAKING IMAGES
GRAPHICSMAGICK
(OR IMAGEMAGICK)


    http://www.graphicsmagick.org/
• Convert an image from one format to another (e.g. TIFF to
  JPEG)
• Resize, rotate, sharpen, color reduce, or add special
  effects to an image
• Create a montage of image thumbnails
• Create a transparent image suitable for use on the Web
• Compare two images
• Turn a group of images into a GIF animation sequence
• Create a composite image by combining several separate
  images
• Draw shapes or text on an image
• Decorate an image with a border or frame
• Describe the format and characteristics of an image
gm convert source.png 
  -pointsize 144 
  -stroke black 
  -strokewidth 4 
  -font Bookman-Demi 
  -fill white 
 -draw "gravity North text 0,150 'GOES TO
TCCC'; gravity South text 0,40 'MAKES A
MEME" 
meme.png
MANAGING IMAGES
TWO PROBLEMS:
LAYOUT
RESOLUTION
Important Resolutions
• 320 wide (iPhone portrait)
• 480 wide (iPhone landscape)
• 640 (some tablets, netbooks)
• 768 (iPad portrait)
• 1024 (iPad landscape)
• 970, 1280, 1600, stop already!
“on a device with 512mb of
 RAM, serving a 1200x1200
image consumes a full 1% of
    that total available.”
              -A smarter coworker
DISPLAY
RESOLUTION
The Evil Retina
Rules of Retina

• Pixels aren’t pixels anymore
• “Real” pixels are 2:1
• “Web” pixels stay the same
• Image pixels double
“Pixels” versus Pixels
# Non-Retina
<img src=”300x300.png” style=”width:300px;
height: 300px” />

# Retina
<img src=”600x600.png” style=”width:300px;
height: 300px” />
gm convert -resize 300x300 
 600x600.png 300x300.png
RENDERING IMAGES
3 THINGS:
SPRITES
gm convert montage -background
transparent -geometry +4+4 *.png
            sprite.png
STEALING
Twitter Bootstrap
Font Awesome
RESPONSIVE IMAGES
<div class=”responsive_img”>

  <span data-src=”l.png”
        data-media=”(min-width: 768px)”>
  </span>

  <span data-src=”m.png”
        data-media=”(min-width: 480px)”>
  </span>

  <span data-src=”s.png”></span>

  <noscript><img src=”s.png”/></noscript>

</div>
$(‘.responsive_image’).each(function(){
! var p = $(this)
   $(this).find(‘span’).each(function(){
      var s = $(this)
      var m = s.data(‘media’)
      if(m){
        if(window.matchMedia(m).matches){
          p.append(
            ‘<img src=”’+s.data(‘src’)+’”/>’
          )
          return false
        }
      } else {
        p.append(
          ‘<img src=”’+s.data(‘src’)+’”/>’
        )
      }
   })
})
https://github.com/
scottjehl/picturefill
WARNING!
We only handled
 layout pixels
Two options:
(min-width: 768px) and (min-device-pixel-ratio: 2.0)
(min-width: 768px)

(min-width: 480px) and (min-device-pixel-ratio: 2.0)
(min-width: 480px)

(min-device-pixel-ratio: 2.0)
Or
if(window.matchMedia(m).matches){
  var src = s.data(‘src’)
  # if pixel-ratio >= 2.0
  # double dimensions
  p.append(
    ‘<img src=”’+src+’”/>’
  )
  return false
}
Images (recap)

•   We need ‘em!

•   We make ‘em!

•   We manage ‘em!

•   We display ‘em!
Kevin W. Gisi

  Picture Perfect

kevin@kevingisi.com
     @gisikw

Contenu connexe

En vedette (6)

Engaging Communities in Partnership
Engaging Communities in PartnershipEngaging Communities in Partnership
Engaging Communities in Partnership
 
Vulnerability Adaptation Dr Reddy 31_aug06
Vulnerability Adaptation Dr Reddy 31_aug06Vulnerability Adaptation Dr Reddy 31_aug06
Vulnerability Adaptation Dr Reddy 31_aug06
 
Anthony M. Crasto Glenmark Scientist, million hits on google
Anthony M. Crasto Glenmark Scientist, million hits on googleAnthony M. Crasto Glenmark Scientist, million hits on google
Anthony M. Crasto Glenmark Scientist, million hits on google
 
Dmpp Evaluation Report
Dmpp Evaluation ReportDmpp Evaluation Report
Dmpp Evaluation Report
 
Illinois resourcenetapril15thkordeshppt
Illinois resourcenetapril15thkordeshpptIllinois resourcenetapril15thkordeshppt
Illinois resourcenetapril15thkordeshppt
 
Climate change or variability adaptation options
Climate change or variability adaptation optionsClimate change or variability adaptation options
Climate change or variability adaptation options
 

Similaire à Picture Perfect: Images for Coders

Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschiIasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Codecamp Romania
 
Taking Your Website Mobile with TYPO3 (again)
Taking Your Website Mobile with TYPO3 (again)Taking Your Website Mobile with TYPO3 (again)
Taking Your Website Mobile with TYPO3 (again)
Jeremy Greenawalt
 

Similaire à Picture Perfect: Images for Coders (20)

Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschiIasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Taking Your Website Mobile with TYPO3 (again)
Taking Your Website Mobile with TYPO3 (again)Taking Your Website Mobile with TYPO3 (again)
Taking Your Website Mobile with TYPO3 (again)
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector
 
Responsive Design: Out of the Box and Down the Rabbit Hole
Responsive Design: Out of the Box and Down the Rabbit HoleResponsive Design: Out of the Box and Down the Rabbit Hole
Responsive Design: Out of the Box and Down the Rabbit Hole
 
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent WebMo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
Images meet Web
Images meet WebImages meet Web
Images meet Web
 

Plus de Kevin Gisi

Plus de Kevin Gisi (6)

Dart: A Replacement for JavaScript and Why You Should Care
Dart: A Replacement for JavaScript and Why You Should CareDart: A Replacement for JavaScript and Why You Should Care
Dart: A Replacement for JavaScript and Why You Should Care
 
Dynamic Ruby for Nubies
Dynamic Ruby for NubiesDynamic Ruby for Nubies
Dynamic Ruby for Nubies
 
No More Excuses: Test Your JavaScript
No More Excuses: Test Your JavaScriptNo More Excuses: Test Your JavaScript
No More Excuses: Test Your JavaScript
 
Ruby on Rails: The Third Age
Ruby on Rails: The Third AgeRuby on Rails: The Third Age
Ruby on Rails: The Third Age
 
Addicted To Open Source - Ruby: The Gateway Drug
Addicted To Open Source - Ruby: The Gateway DrugAddicted To Open Source - Ruby: The Gateway Drug
Addicted To Open Source - Ruby: The Gateway Drug
 
Rubyon Rails
Rubyon RailsRubyon Rails
Rubyon Rails
 

Picture Perfect: Images for Coders

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n