SlideShare a Scribd company logo
1 of 130
CHRISTOPHER SCHMITT          @teleject




ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN

           REFRESH AUSTIN 2013
@teleject



CHRISTOPHER SCHMITT
@teleject




http://cssdevconf.com/
@teleject




http://rwdsummit.com/
@teleject




http://dwmgbook.com/
[refreshaustin] Adaptive Images in Responsive Web Design
WHY DON’T WE ASK
THE BROWSER?

             (cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)

http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://webaim.org/blog/user-agent-string-history/




                                     (cc) flic.kr/p/vUBHv
FEATURE TESTING
vs. BROWSER SNIFFING

1

2

3
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2

3
A scripting approach
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myWidth = window.innerWidth;
          myHeight = window.innerHeight;
        } else if( document.documentElement &&
          ( document.documentElement.clientWidth ||
          document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        }


http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
The jQuery approach
       // returns width of browser viewport
       $(window).width();
       // returns height of browser viewport
       $(window).height();

       // returns width of HTML document
       $(document).width();
       // returns height of HTML document
       $(document).height();


http://api.jquery.com/width/ & http://api.jquery.com/height/
CSS media queries
// default, mobile-1st CSS rules devices go here

@media screen and (min-width: 480px) { ... }

@media screen and (min-width: 600px) { ... }

@media screen and (min-width: 768px) { ... }

@media screen and (min-width: 910px) { ... }
(cc) flic.kr/p/8Lo5Gk
BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3
72            PPI
HAS SERVED US WELL
                (cc) flic.kr/p/6tjjRP
72 points-per-inch =
72 pixels-per-inch
96            PPI
IF A WINDOWS USER
72 points-per-inch
x [1+(1/3)]
= 96 PPI
“RETINA” DISPLAYS
          300ppi at 12 inches from the eyes
                                              78μm




                                              78μm
goo.gl/zpkFy
[refreshaustin] Adaptive Images in Responsive Web Design
240

    144

72 PPI
“   [In 2013, Intel sees their
    product line] offer a higher
    resolution experience than a
    top-of-the-line 1080p HDTV.”




    http://liliputing.com/2012/04/intel-retina-laptop-
    desktop-displays-coming-in-2013.html
72 PPI
240
240 PPI
240 PPI
72 PPI
RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3    Bandwidth
SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
             (cc) flic.kr/p/4DziUN
“   Testing for speed of an
    internet connection is like
    stepping in front of a car to see
    how fast it is.”




                               (cc) flic.kr/p/4DziUN
“   Testing for speed of an
    internet connection is like
    stepping in front of a car to see
    how fast it is.”




“   But, Christopher, you only
    have to test it once.”

                               (cc) flic.kr/p/4DziUN
Speed test image




https://github.com/adamdbradley/foresight.js
Speed test image



              +50k

https://github.com/adamdbradley/foresight.js
Native speed test
   // @Modernizr's network-connection.js
   connection = navigator.connection || {
               type: 0 }, // polyfill

   isSlowConnection = connection.type == 3
              || connection.type == 4
              | /^[23]g$/.test(connection.type);


http://davidbcalhoun.com/2010/using-navigator-connection-android
IMG
GIMME THAT OLD SCHOOL

1

2

3
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2

3
Filament .htaccess
# Responsive Images
# Mobile-First images that scale responsively and responsibly
# Copyright 2010, Scott Jehl, Filament Group, Inc
# Dual licensed under the MIT or GPL Version 2 licenses.
# //Start Responsive Images
RewriteEngine On
# direct image requests to temp
RewriteCond %{QUERY_STRING} full=(.*)&?
RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
RewriteRule (.*)rwd-router/(.*)$ $1$2
# //End Responsive Images

   https://github.com/filamentgroup/Responsive-Images
Filament .htaccess
<script src="responsiveimgs.js"></script>

<img src="sample-content/running-sml.jpg?
full=sample-content/running-lrg.jpg" />




              4+                        8+
“   ...the server has no way to
    know what resolution the
    client’s device is, so it can’t
    send the appropriately sized
    embeded images.”



    http://mattwilcox.net/archive/entry/id/1053/
http://adaptive-images.com/
ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2    <picture> and/or srcset

3
media queries in HTML
<video controls>
  <source type="video/mp4" src="video/windowsill_small.mp4"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
  <source type="video/webm" src="video/windowsill_small.webm"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
  <source type="video/mp4" src="video/windowsill.mp4">
  <source type="video/webm" src="video/windowsill.webm">
    <!-- proper fallback content goes here -->
</video>

http://www.w3.org/community/respimg/2012/03/15/polyfilling-
                picture-without-the-overhead/
<picture> patch
  <picture alt="A giant stone face at The Bayon temple in Angkor Thom,
 Cambodia">
      <!-- <source src="small.jpg"> -->
      <source src="small.jpg">
      <!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
      <source src="medium.jpg" media="(min-width: 400px)">
      <!-- <source src="large.jpg" media="(min-width: 800px)"> -->
      <source src="large.jpg" media="(min-width: 800px)">
      <!-- Fallback content for non-JS browsers. Same src as the initial
 source element. -->
      <noscript><img src="small.jpg" alt="A giant stone face at The Bayon
 temple in Angkor Thom, Cambodia"></noscript>
 </picture>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
                picture-without-the-overhead/
ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
@srcset standard?

  <h1><img alt="The Breakfast Combo"
      src="banner.jpeg"
      srcset="banner-HD.jpeg 2x,
            banner-phone.jpeg 100w,
            banner-phone-HD.jpeg 100w 2x">
  </h1>


http://www.whatwg.org/specs/web-apps/current-work/multipage/
           embedded-content-1.html#attr-img-srcset
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2    <picture>

3    HiSRC
Set, forget it HiSRC
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js"></script>
<script src="hisrc.js"></script>
<script>
  $(document).ready(function(){
      $(".hisrc img").hisrc();
  });
</script>
Set, forget it HiSRC
<div class="hisrc">
 <img src="halloween-mobile-1st.png"
   data-1x="halloween-x1.png"
   data-2x="halloween-x2.jpg"
   alt="Celebrating Halloween in style" />
</div>
Set, forget it HiSRC
<div class="hisrc">
 <img src="halloween-mobile-1st.png"
   data-1x="halloween-x1.png"
   data-2x="halloween-x2.jpg"
   alt="Celebrating Halloween in style" />
</div>
SERIES OF CHECKS TO
FIND OUT RESPONSIVE
PATH FOR IMAGES...
DO NATIVE SPEED
          TEST FOR MOBILE
          DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
Check pixel density...
$.hisrc.devicePixelRatio = 1;
 if(window.devicePixelRatio !==
 undefined) {
   $.hisrc.devicePixelRatio =
   window.devicePixelRatio
 };

          https://gist.github.com/2428356
Force speed test



              +50k

https://github.com/adamdbradley/foresight.js
LESS THAN 4G MEANS
MOBILE IMAGES LEFT
IN PLACE
BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
2 TRICK PONY
CSS IS CORE.
WE USE CSS MEDIA
QUERIES FOR DESIGN
http://mediaqueri.es/
CSS media queries
// default, mobile-1st CSS rules devices go here

@media screen and (min-width: 480px) { ... }

@media screen and (min-width: 600px) { ... }

@media screen and (min-width: 768px) { ... }

@media screen and (min-width: 910px) { ... }
Single pixel GIF
Single pixel GIF
Single pixel GIF
Single pixel GIF
Single pixel GIF


 $.hisrc.defaults = {
     useTransparentGif: true,




http://www.w3.org/community/respimg/2012/04/06/responsive-
   content-images-using-a-spacer-png-and-background-image/
Single pixel GIF
$.hisrc.defaults = {
    useTransparentGif: true,
    transparentGifSrc: 'data:image/
gif;base64,R0lGODlhAQABAIAAAMz/
AAAAACH5BAEAAAAALAAAAAABAAE
AAAICRAEAOw==',

   17+      9+   11.6+   5+   8+
Single pixel GIF

$.hisrc.defaults = {
    useTransparentGif: true,
    transparentGifSrc: 'http://
example.com/spg.gif',



   17+      9+    11.6+    5+     6+
2 APPROACHES,
1 SIMPLE SOLUTION.

    https://github.com/teleject/hisrc
2 APPROACHES,
1 SIMPLE SOLUTION.
HEART WEB DESIGN
    https://github.com/teleject/hisrc
WORKAROUNDS &
TRICKS

1

2

3


          (cc) flic.kr/p/64fGf6
WORKAROUNDS &
TRICKS

1   background-size: auto

2

3


                    (cc) flic.kr/p/64fGf6
http://fittextjs.com/
[refreshaustin] Adaptive Images in Responsive Web Design
background-size: 100%
<a href="example.com/link">Download on Github</a>

.download a {
   padding: .095em .8em;
  background: url(../img/arrow.png) no-repeat;
  background-size: 100%;
  margin-left: .4em;
  -webkit-transition: margin 0.15s ease-out;
  -moz-transition: margin 0.15s ease-out;
  text-decoration: none;
}



        17+           9+          11.6+          5+   9+
WORKAROUNDS &
TRICKS

1   background-size: auto

2   SVG

3


                    (cc) flic.kr/p/64fGf6
SVG
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Native SVG




http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
PNG 16kb
           SVG 7kb

17+   9+    11.6+   5+   9+
HTML5 Boilerplate
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"
lang="en">
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en">
<![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <!
[endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<!
[endif]-->
<head>
jQuery check
var checkBrowser =
 $('html').hasClass('lt-ie9');



<div class="svgswap">
  <img src="example.svg"
  data-svgswap="example.png">
</div>

       https://github.com/teleject/svg-swap
WORKAROUNDS &
TRICKS

1   background-size: auto

2   SVG

3   font-based solutions


                     (cc) flic.kr/p/64fGf6
“   ...if you use <meta
    charset="utf-8"> (you should
    be for HTML5), you’re adding
    common Unicode characters
    like and ✆, and you don’t
    need a specific font’s version...
    just copy and paste them into
    your HTML.”
Font-based RWD




http://ilovetypography.com/2012/04/11/designing-type-systems/
http://css-tricks.com/examples/IconFont/
Font-based icons
<style>
 [data-icon]:before {
   font-family: 'icon-font';
   content: attr(data-icon);
 }
</style>

<a href="http://example.com/cloud/save/">
  <span data-icon="C" aria-hidden="true"></span>
 Save to Cloud
</a>
WORKAROUNDS &
TRICKS

1   background-size: auto

2   SVG

3   font-based solutions

4   compressed JPEGs
                     (cc) flic.kr/p/64fGf6
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
OS X Lion
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X
 Lion takes the Mac further than ever.


     Learn More




iCloud             iOS 5            OSX Lion   iPad 2   iPhone
!
 OS X Lion
              "                            ←
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X

                           ↑
 Lion takes the Mac further than ever.


     Learn More




iCloud             iOS 5            OSX Lion   iPad 2   iPhone
!              ↙
 OS X Lion
              "                            ← ←
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X

            ↗              ↑
 Lion takes the Mac further than ever.
                                           ↖
     Learn More




                           ↑               ↖
iCloud             iOS 5            OSX Lion   iPad 2   iPhone
↑               ↗
 OS X Lion
            ←                              "   "
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X

            ↙               !
 Lion takes the Mac further than ever.
                                           ↘
     Learn More




                            !              ↘
iCloud             iOS 5            OSX Lion   iPad 2   iPhone
(cc) flic.kr/p/64fGf6
[refreshaustin] Adaptive Images in Responsive Web Design
446kb < 8,755.2kb
   0% vs 100%

            (cc) flic.kr/p/64fGf6
Size Type   Dimensions   Display Px Density   File Size


Extreme     2276x1400         1x & 2x          446kb

            1024x1536           2x            1,745kb
 Extra
 Large
             512x768            1x             503kb

             640x960            2x             746kb
 Large
             320x480            1x             223kb

             500x750            2x             485kb
 Medium
             250x375            1x             145kb
Size Type   Dimensions   Display Px Density   File Size


Extreme     2276x1400         1x & 2x          446kb

            1024x1536           2x            1,745kb
 Extra
 Large
             512x768            1x             503kb

             640x960            2x             746kb
 Large
             320x480            1x             223kb

             500x750            2x             485kb
 Medium
             250x375            1x             145kb
<picture> Patch
  <picture alt="A giant stone face at The Bayon temple in Angkor Thom,
 Cambodia">
      <!-- <source src="small.jpg"> -->
      <source src="small.jpg">
      <!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
      <source src="medium.jpg" media="(min-width: 400px)">
      <!-- <source src="large.jpg" media="(min-width: 800px)"> -->
      <source src="large.jpg" media="(min-width: 800px)">
      <!-- Fallback content for non-JS browsers. Same src as the initial
 source element. -->
      <noscript><img src="small.jpg" alt="A giant stone face at The Bayon
 temple in Angkor Thom, Cambodia"></noscript>
 </picture>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
                picture-without-the-overhead/
One Image, One IMG



<img src="rock-climber.jpg" alt="" />
[refreshaustin] Adaptive Images in Responsive Web Design
EXTREMELY
COMPRESSED PROBLEMS




                      (cc) flic.kr/p/64fGf6
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
IMG
GIMME THAT NEW SCHOOL

1

2

3
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2

3

           #rwdimg
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2   browser, server handshake

3

           #rwdimg
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2   browser, server handshake

3   same, several formats

           #rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />




                        #rwdimg
<link rel="apple-touch-icon-precomposed" sizes="144x144"
   href="apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
   href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
   href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed"
   href="apple-touch-icon-precomposed.png" />
<link rel="shortcut icon" href="/assets/favicon.ico" />



                          #rwdimg
#rwdimg
THANK YOU!
CHRISTOPHER SCHMITT                                    @teleject




The Non Breaking Space Podcast - http://nonbreakingspace.tv/

More Related Content

What's hot

[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowWordPress
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance ImagesWalter Ebert
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerWalter Ebert
 
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, ChileHTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, ChileRobert Nyman
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSSWalter Ebert
 
Rest in a Nutshell 2014_05_27
Rest in a Nutshell 2014_05_27Rest in a Nutshell 2014_05_27
Rest in a Nutshell 2014_05_27Derrick Isaacson
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14Matthias Lau
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...Patrick Lauke
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraWalter Ebert
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaÖnder Ceylan
 
Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Önder Ceylan
 

What's hot (19)

[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, ChileHTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
 
Rest in a Nutshell 2014_05_27
Rest in a Nutshell 2014_05_27Rest in a Nutshell 2014_05_27
Rest in a Nutshell 2014_05_27
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
 
Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020Puppeteer can automate that! - HolyJS Piter 2020
Puppeteer can automate that! - HolyJS Piter 2020
 

Viewers also liked

The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...Alberta Soranzo
 
Running your App as a Business
Running your App as a BusinessRunning your App as a Business
Running your App as a BusinessBill Magnuson
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesBenjamin Faure
 
5 Lessons in Digital Publishing
5 Lessons in Digital Publishing 5 Lessons in Digital Publishing
5 Lessons in Digital Publishing Mag+
 
Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012interlinkONE
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingSIXTY
 
Smart contents in multi screen
Smart contents in multi screenSmart contents in multi screen
Smart contents in multi screenSeungyul Kim
 
Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012servicesmobiles.fr
 
SEO for Mobile Apps
SEO for Mobile AppsSEO for Mobile Apps
SEO for Mobile AppsAbdul Malick
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMichel Lent Schwartzman
 
Form Factor is the Message: How the Devices We Use Shape the Messages and Con...
Form Factor is the Message: How the Devices We Use Shape the Messages and Con...Form Factor is the Message: How the Devices We Use Shape the Messages and Con...
Form Factor is the Message: How the Devices We Use Shape the Messages and Con...Future Insights
 
L’iPad à l’école : usages, avantages et défis
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défisnawras.univers
 
Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010SEO CAMP
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionBelen Barros Pena
 
Mobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDMobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDRomain Fonnier
 
Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Aidan Wu
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Daniel Wood
 
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...Tapit
 

Viewers also liked (20)

The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...
 
Running your App as a Business
Running your App as a BusinessRunning your App as a Business
Running your App as a Business
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 Secondes
 
5 Lessons in Digital Publishing
5 Lessons in Digital Publishing 5 Lessons in Digital Publishing
5 Lessons in Digital Publishing
 
Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile Marketing
 
Smart contents in multi screen
Smart contents in multi screenSmart contents in multi screen
Smart contents in multi screen
 
Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012Spéciale Paiement La French Mobile Juin 2012
Spéciale Paiement La French Mobile Juin 2012
 
iPads in Elementary School
iPads in Elementary SchooliPads in Elementary School
iPads in Elementary School
 
SEO for Mobile Apps
SEO for Mobile AppsSEO for Mobile Apps
SEO for Mobile Apps
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practice
 
Form Factor is the Message: How the Devices We Use Shape the Messages and Con...
Form Factor is the Message: How the Devices We Use Shape the Messages and Con...Form Factor is the Message: How the Devices We Use Shape the Messages and Con...
Form Factor is the Message: How the Devices We Use Shape the Messages and Con...
 
L’iPad à l’école : usages, avantages et défis
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défis
 
Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
 
Mobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDMobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCD
 
Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Getting Web Multi-Touch Working
Getting Web Multi-Touch Working
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012
 
RIP Steve Jobs
RIP Steve JobsRIP Steve Jobs
RIP Steve Jobs
 
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
 

Similar to [refreshaustin] Adaptive Images in Responsive Web Design

[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"WebVisions
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 WorkshopDavid Manock
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesBrad Hill
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) betaKirk Yamamoto
 
Whatever it takes - Fixing SQLIA and XSS in the process
Whatever it takes - Fixing SQLIA and XSS in the processWhatever it takes - Fixing SQLIA and XSS in the process
Whatever it takes - Fixing SQLIA and XSS in the processguest3379bd
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Building Blocks
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experimentsguestd427df
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 

Similar to [refreshaustin] Adaptive Images in Responsive Web Design (20)

[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realities
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Whatever it takes - Fixing SQLIA and XSS in the process
Whatever it takes - Fixing SQLIA and XSS in the processWhatever it takes - Fixing SQLIA and XSS in the process
Whatever it takes - Fixing SQLIA and XSS in the process
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
Responsive design
Responsive designResponsive design
Responsive design
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 

More from Christopher Schmitt

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductChristopher Schmitt
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't CodeChristopher Schmitt
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't CodeChristopher Schmitt
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGsChristopher Schmitt
 
[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)Christopher Schmitt
 

More from Christopher Schmitt (12)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 
[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 

Recently uploaded

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Recently uploaded (20)

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

[refreshaustin] Adaptive Images in Responsive Web Design

  • 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN REFRESH AUSTIN 2013
  • 7. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  • 9. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  • 10. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  • 11. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  • 12. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3
  • 13. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3
  • 14. A scripting approach var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  • 15. The jQuery approach // returns width of browser viewport $(window).width(); // returns height of browser viewport $(window).height(); // returns width of HTML document $(document).width(); // returns height of HTML document $(document).height(); http://api.jquery.com/width/ & http://api.jquery.com/height/
  • 16. CSS media queries // default, mobile-1st CSS rules devices go here @media screen and (min-width: 480px) { ... } @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 910px) { ... }
  • 18. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  • 19. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  • 20. 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  • 21. 72 points-per-inch = 72 pixels-per-inch
  • 22. 96 PPI IF A WINDOWS USER
  • 24. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μm goo.gl/zpkFy
  • 26. 240 144 72 PPI
  • 27. [In 2013, Intel sees their product line] offer a higher resolution experience than a top-of-the-line 1080p HDTV.” http://liliputing.com/2012/04/intel-retina-laptop- desktop-displays-coming-in-2013.html
  • 29. 240
  • 33. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  • 34. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  • 35. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
  • 36. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” (cc) flic.kr/p/4DziUN
  • 37. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” “ But, Christopher, you only have to test it once.” (cc) flic.kr/p/4DziUN
  • 39. Speed test image +50k https://github.com/adamdbradley/foresight.js
  • 40. Native speed test // @Modernizr's network-connection.js connection = navigator.connection || { type: 0 }, // polyfill isSlowConnection = connection.type == 3 || connection.type == 4 | /^[23]g$/.test(connection.type); http://davidbcalhoun.com/2010/using-navigator-connection-android
  • 41. IMG GIMME THAT OLD SCHOOL 1 2 3
  • 42. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 3
  • 43. Filament .htaccess # Responsive Images # Mobile-First images that scale responsively and responsibly # Copyright 2010, Scott Jehl, Filament Group, Inc # Dual licensed under the MIT or GPL Version 2 licenses. # //Start Responsive Images RewriteEngine On # direct image requests to temp RewriteCond %{QUERY_STRING} full=(.*)&? RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L] # ignore trap for non-image requests, rewrite URL without trap segment RewriteRule (.*)rwd-router/(.*)$ $1$2 # //End Responsive Images https://github.com/filamentgroup/Responsive-Images
  • 44. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+
  • 45. ...the server has no way to know what resolution the client’s device is, so it can’t send the appropriately sized embeded images.” http://mattwilcox.net/archive/entry/id/1053/
  • 47. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
  • 48. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3
  • 49. media queries in HTML <video controls> <source type="video/mp4" src="video/windowsill_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/webm" src="video/windowsill_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/mp4" src="video/windowsill.mp4"> <source type="video/webm" src="video/windowsill.webm"> <!-- proper fallback content goes here --> </video> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  • 50. <picture> patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  • 51. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
  • 52. @srcset standard? <h1><img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> </h1> http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset
  • 53. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> 3 HiSRC
  • 54. Set, forget it HiSRC <script src="https://ajax.googleapis.com/ajax/ libs/jquery/1.7.2/jquery.min.js"></script> <script src="hisrc.js"></script> <script> $(document).ready(function(){ $(".hisrc img").hisrc(); }); </script>
  • 55. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div>
  • 56. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div>
  • 57. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  • 58. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  • 59. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  • 60. Force speed test +50k https://github.com/adamdbradley/foresight.js
  • 61. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  • 62. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  • 63. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  • 65. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGN
  • 67. CSS media queries // default, mobile-1st CSS rules devices go here @media screen and (min-width: 480px) { ... } @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 910px) { ... }
  • 72. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, http://www.w3.org/community/respimg/2012/04/06/responsive- content-images-using-a-spacer-png-and-background-image/
  • 73. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 17+ 9+ 11.6+ 5+ 8+
  • 74. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 17+ 9+ 11.6+ 5+ 6+
  • 75. 2 APPROACHES, 1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  • 76. 2 APPROACHES, 1 SIMPLE SOLUTION. HEART WEB DESIGN https://github.com/teleject/hisrc
  • 77. WORKAROUNDS & TRICKS 1 2 3 (cc) flic.kr/p/64fGf6
  • 78. WORKAROUNDS & TRICKS 1 background-size: auto 2 3 (cc) flic.kr/p/64fGf6
  • 81. background-size: 100% <a href="example.com/link">Download on Github</a> .download a { padding: .095em .8em; background: url(../img/arrow.png) no-repeat; background-size: 100%; margin-left: .4em; -webkit-transition: margin 0.15s ease-out; -moz-transition: margin 0.15s ease-out; text-decoration: none; } 17+ 9+ 11.6+ 5+ 9+
  • 82. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6
  • 83. SVG
  • 87. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+
  • 88. HTML5 Boilerplate <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <! [endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<! [endif]--> <head>
  • 89. jQuery check var checkBrowser = $('html').hasClass('lt-ie9'); <div class="svgswap"> <img src="example.svg" data-svgswap="example.png"> </div> https://github.com/teleject/svg-swap
  • 90. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6
  • 91. ...if you use <meta charset="utf-8"> (you should be for HTML5), you’re adding common Unicode characters like and ✆, and you don’t need a specific font’s version... just copy and paste them into your HTML.”
  • 94. Font-based icons <style> [data-icon]:before { font-family: 'icon-font'; content: attr(data-icon); } </style> <a href="http://example.com/cloud/save/"> <span data-icon="C" aria-hidden="true"></span> Save to Cloud </a>
  • 95. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6
  • 100. OS X Lion The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 101. ! OS X Lion " ← The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↑ Lion takes the Mac further than ever. Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 102. ! ↙ OS X Lion " ← ← The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↗ ↑ Lion takes the Mac further than ever. ↖ Learn More ↑ ↖ iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 103. ↗ OS X Lion ← " " The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↙ ! Lion takes the Mac further than ever. ↘ Learn More ! ↘ iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 106. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
  • 107. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
  • 108. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
  • 109. <picture> Patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  • 110. One Image, One IMG <img src="rock-climber.jpg" alt="" />
  • 112. EXTREMELY COMPRESSED PROBLEMS (cc) flic.kr/p/64fGf6
  • 116. IMG GIMME THAT NEW SCHOOL 1 2 3
  • 117. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimg
  • 118. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimg
  • 119. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimg
  • 127. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  • 128. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /> <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  • 130. THANK YOU! CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/