SlideShare a Scribd company logo
#jQCONF AUSTIN
ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN
CHRISTOPHER SCHMITT @teleject
Wednesday, September 11, 13
CHRISTOPHER SCHMITT
@teleject
Wednesday, September 11, 13
@teleject
Wednesday, September 11, 13
@teleject
Wednesday, September 11, 13
@teleject
http://nonbreakingspace.tv/
Wednesday, September 11, 13
@teleject
http://cssdevconf.com/
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
y
x
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
WHY DON’T WE ASK
THE BROWSER?
(cc) flic.kr/p/vUBHv
Wednesday, September 11, 13
alert("User-agent header sent: " + navigator.userAgent);
Wednesday, September 11, 13
alert("User-agent header sent: " + navigator.userAgent);
Wednesday, September 11, 13
Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/
(cc) flic.kr/p/vUBHv
Wednesday, September 11, 13
Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
Wednesday, September 11, 13
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
(cc) flic.kr/p/vUBHv
http://www.useragentstring.com/
Wednesday, September 11, 13
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
Wednesday, September 11, 13
FEATURE TESTINGvs. BROWSER SNIFFING
1
2
3
Wednesday, September 11, 13
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2
3
Wednesday, September 11, 13
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
Wednesday, September 11, 13
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/
Wednesday, September 11, 13
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) { ... }
Wednesday, September 11, 13
(cc) flic.kr/p/8Lo5Gk
Wednesday, September 11, 13
(cc) flic.kr/p/8Lo5Gk
Wednesday, September 11, 13
BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS
Wednesday, September 11, 13
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3
Wednesday, September 11, 13
72PPIHAS SERVED US WELL
(cc) flic.kr/p/6tjjRP
Wednesday, September 11, 13
72 points-per-inch =
72 pixels-per-inch
Wednesday, September 11, 13
96PPI
IF A WINDOWS USER
Wednesday, September 11, 13
72 points-per-inch
x [1+(1/3)]
= 96 PPI
Wednesday, September 11, 13
78μm
goo.gl/zpkFy
78μm
“RETINA” DISPLAYS300ppi at 12 inches from the eyes
Wednesday, September 11, 13
Wednesday, September 11, 13
[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
Wednesday, September 11, 13
72 PPI
Wednesday, September 11, 13
240
Wednesday, September 11, 13
240 PPI
Wednesday, September 11, 13
240 PPI
Wednesday, September 11, 13
72 PPI
Wednesday, September 11, 13
Wednesday, September 11, 13
RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES
Wednesday, September 11, 13
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
Wednesday, September 11, 13
(cc) flic.kr/p/4DziUN
SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
Wednesday, September 11, 13
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
Wednesday, September 11, 13
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
Wednesday, September 11, 13
Speed test image
https://github.com/adamdbradley/foresight.js
Wednesday, September 11, 13
Speed test image
+50k
https://github.com/adamdbradley/foresight.js
Wednesday, September 11, 13
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
Wednesday, September 11, 13
FEATURE TESTINGvs. BROWSER SNIFFING
1 Browser width
2 Screen resolution
3 Bandwidth
Wednesday, September 11, 13
IMGGIMME THAT OLD SCHOOL
1
2
3
Wednesday, September 11, 13
1 .htaccess
2
3
IMGGIMME THAT OLD SCHOOL
Wednesday, September 11, 13
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
Wednesday, September 11, 13
Filament .htaccess
<script src="responsiveimgs.js"></script>
<img src="sample-content/running-sml.jpg?
full=sample-content/running-lrg.jpg" />
8+4+
Wednesday, September 11, 13
...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/
Wednesday, September 11, 13
http://adaptive-images.com/
Wednesday, September 11, 13
ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
Wednesday, September 11, 13
1 .htaccess
2 <picture> and/or srcset
3
GIMME THAT OLD SCHOOL
IMG
Wednesday, September 11, 13
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/
Wednesday, September 11, 13
<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/
Wednesday, September 11, 13
ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
Wednesday, September 11, 13
@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
Wednesday, September 11, 13
https://www.webkit.org/blog/2910/improved-support-for-
high-resolution-displays-with-the-srcset-image-attribute/
Wednesday, September 11, 13
1 .htaccess
2 <picture> and/or srcset
3 HiSRC
GIMME THAT OLD SCHOOL
IMG
Wednesday, September 11, 13
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>
https://github.com/teleject/hisrc
Wednesday, September 11, 13
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>
Wednesday, September 11, 13
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>
Wednesday, September 11, 13
SERIES OF CHECKS TO
FIND OUT RESPONSIVE
PATH FOR IMAGES...
Wednesday, September 11, 13
DO NATIVE SPEED
TEST FOR MOBILE
DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
Wednesday, September 11, 13
$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !==
undefined) {
$.hisrc.devicePixelRatio =
window.devicePixelRatio
};
Check pixel density...
https://gist.github.com/2428356
Wednesday, September 11, 13
+50k
https://github.com/adamdbradley/foresight.js
Force speed test
Wednesday, September 11, 13
LESS THAN 4G MEANS
MOBILE IMAGES LEFT
IN PLACE
Wednesday, September 11, 13
BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
Wednesday, September 11, 13
FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
Wednesday, September 11, 13
2 TRICK PONY
Wednesday, September 11, 13
CSS IS CORE.
WE USE CSS MEDIA
QUERIES FOR DESIGN
Wednesday, September 11, 13
http://mediaqueri.es/
Wednesday, September 11, 13
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) { ... }
Wednesday, September 11, 13
Single pixel GIF
Wednesday, September 11, 13
Single pixel GIF
Wednesday, September 11, 13
Single pixel GIF
Wednesday, September 11, 13
Single pixel GIF
Wednesday, September 11, 13
$.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
Wednesday, September 11, 13
$.hisrc.defaults = {
useTransparentGif: true,
transparentGifSrc: 'http://
example.com/spg.gif',
6+5+9+ 11.6+17+
Single pixel GIF
Wednesday, September 11, 13
$.hisrc.defaults = {
useTransparentGif: true,
transparentGifSrc: 'data:image/
gif;base64,R0lGODlhAQABAIAAAMz/
AAAAACH5BAEAAAAALAAAAAABAAE
AAAICRAEAOw==',
8+5+9+ 11.6+17+
Single pixel GIF
Wednesday, September 11, 13
http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
Wednesday, September 11, 13
24+http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
Wednesday, September 11, 13
http://css-tricks.com/which-
responsive-images-solution-
should-you-use/
ALL SOLUTIONS HAVE
2x HTTP REQUESTS
+ JAVASCRIPT
Wednesday, September 11, 13
WORKAROUNDSTRICKS in CONTEXT
1
2
3
&
(cc) flic.kr/p/64fGf6
Wednesday, September 11, 13
WORKAROUNDSTRICKS
1 background-size: 100%
2
3
&
(cc) flic.kr/p/64fGf6
Wednesday, September 11, 13
http://fittextjs.com/
Wednesday, September 11, 13
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;
}
9+5+9+ 11.6+17+
Wednesday, September 11, 13
WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG
3
&
(cc) flic.kr/p/64fGf6
Wednesday, September 11, 13
SVG
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Native SVG
http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
Wednesday, September 11, 13
PNG 16kb
SVG 7kb
9+5+9+ 11.6+17+
Wednesday, September 11, 13
http://petercollingridge.appspot.com/svg-optimiser
Wednesday, September 11, 13
https://github.com/svg/svgo-gui
Wednesday, September 11, 13
https://github.com/svg/svgo-gui
Wednesday, September 11, 13
Modernizr check
if(!Modernizr.svg){
var images =
document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++){
var src = images[i].src.split(".");
images[i].src = src[0] + ".png";
}
}
http://stackoverflow.com/questions/12846852/
svg-png-extension-switch
Wednesday, September 11, 13
WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG (Clown Car)
3
&
(cc) flic.kr/p/64fGf6
Wednesday, September 11, 13
WORKAROUNDSTRICKS in CONTEXT
1 background-size: auto
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
Wednesday, September 11, 13
...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.”
“
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
Wednesday, September 11, 13
Font-based RWD
http://ilovetypography.com/2012/04/11/designing-type-systems/
avg file size
40kb/per font
Wednesday, September 11, 13
http://css-tricks.com/examples/IconFont/
Wednesday, September 11, 13
http://fontello.com/
Wednesday, September 11, 13
http://icomoon.io
Wednesday, September 11, 13
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>
Wednesday, September 11, 13
WORKAROUNDSTRICKS in CONTEXT
1 background-size: 100%
2 SVG
3 font-based solutions
&
(cc) flic.kr/p/64fGf6
4 compressed JPEGs
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
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
X Lion
Wednesday, September 11, 13
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
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
X Lion
Wednesday, September 11, 13
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
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
X Lion
!
" ←
↑
Wednesday, September 11, 13
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
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
X Lion
! ↙
" ← ←
↗ ↑ ↖
↑ ↖
Wednesday, September 11, 13
iCloud iOS 5 OSX Lion iPad 2 iPhone
OS
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
X Lion
↑ ↗
← " "
↙ ! ↘
! ↘
Wednesday, September 11, 13
(cc) flic.kr/p/64fGf6
Wednesday, September 11, 13
Wednesday, September 11, 13
446kb < 8,755.2kb
(cc) flic.kr/p/64fGf6
0% vs 100%
Wednesday, September 11, 13
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
Large
512x768 1x 503kb
Large
640x960 2x 746kb
Large
320x480 1x 223kb
Medium
500x750 2x 485kb
Medium
250x375 1x 145kb
Wednesday, September 11, 13
Size Type Dimensions Display Px Density File Size
Extreme 2276x1400 1x & 2x 446kb
Extra
Large
1024x1536 2x 1,745kb
Extra
Large
512x768 1x 503kb
Large
640x960 2x 746kb
Large
320x480 1x 223kb
Medium
500x750 2x 485kb
Medium
250x375 1x 145kb
Wednesday, September 11, 13
<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/
Wednesday, September 11, 13
<img src="rock-climber.jpg" alt="" />
One Image, One IMG
Wednesday, September 11, 13
(cc) flic.kr/p/64fGf6
EXTREMELYCOMPRESSED PROBLEMS
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
Clown Car SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid
meet">
<title>Clown Car Technique</title>
<style>
svg {
background-size: 100% 100%; background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {background-image: url(images/small.png");}
}
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {background-image: url(images/medium.png);}
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
svg {background-image: url(images/big.png);}
}
@media screen and (min-width: 1001px) {
svg {background-image: url(images/huge.png);}
}
</style>
</svg>
https://github.com/estelle/clowncar
Wednesday, September 11, 13
Clown Car SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid
meet">
<title>Clown Car Technique</title>
<style>
svg {
background-size: 100% 100%; background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {background-image: url(images/small.png");}
}
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {background-image: url(images/medium.png);}
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
svg {background-image: url(images/big.png);}
}
@media screen and (min-width: 1001px) {
svg {background-image: url(images/huge.png);}
}
</style>
</svg>
https://github.com/estelle/clowncar
Wednesday, September 11, 13
http://coding.smashingmagazine.com/2013/06/02/clown-
car-technique-solving-for-adaptive-images-in-responsive-
web-design/
Wednesday, September 11, 13
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231"
preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label="the aria label is being read" role="img"
title="the title attribute of the SVG is being read">
<title>Clown Car Technique</title>
<style>
</style>
</svg>
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
Wednesday, September 11, 13
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231"
preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label="the aria label is being read" role="img"
title="the title attribute of the SVG is being read">
<title>Clown Car Technique</title>
<style>
</style>
<foreignObject>
<!--[if lte IE 8]>
<img src="../images/mobile-first.png" width="375" height="231"
alt="put alt attribute text here"/>
<![endif]-->
</foreignObject>
</svg>
http://codepen.io/teleject/pen/KlzBe
Wednesday, September 11, 13
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
Wednesday, September 11, 13
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {
background-image: url("http://s.cdpn.io/168/pic-Medium-375x231-
@1x-72ppi.jpg"); outline: green solid 5px;
}
}
http://codepen.io/teleject/pen/KlzBe
Combo Move: SVG
Wednesday, September 11, 13
@media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio:
1.75) {
svg {
background-image: url("http://s.cdpn.io/168/pic-
Extreme-2276x1400-72ppi.jpg");
outline: red solid 5px;
}
}
http://codepen.io/teleject/pen/KlzBe
Combo Move:
Compressed JPEG
Wednesday, September 11, 13
@media screen and (max-width: 400px) {
svg {
width: 375px;
height: 231px; } }
@media screen and (min-width: 401px) {
svg {
width: 750px;
height: 462px; } }
svg {
outline: 5px solid black; }
http://codepen.io/teleject/pen/KlzBe
Combo Move: CSS
Wednesday, September 11, 13
http://codepen.io/teleject/pen/KlzBe
Wednesday, September 11, 13
http://codepen.io/teleject/pen/KlzBe
Wednesday, September 11, 13
http://codepen.io/teleject/pen/KlzBe
Wednesday, September 11, 13
COMBO MOVEDON’T BLAME THE PLAYER
1
2
3
No additional HTTP request1
Min. # of images = 2
No JavaScript
http://codepen.io/teleject/pen/KlzBe
Wednesday, September 11, 13
Wednesday, September 11, 13
Wednesday, September 11, 13
IMGGIMME THAT NEW SCHOOL
1
2
3
#rwdimg
Wednesday, September 11, 13
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
#rwdimg
1
Wednesday, September 11, 13
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
#rwdimg
2
Wednesday, September 11, 13
IMGGIMME THAT NEW SCHOOL
1
2
3
simple design for users
browser, server handshake
same, several formats
#rwdimg
3
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
http://telejec.tv/12uYOC4
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />
Favicon
Wednesday, September 11, 13
#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" />
Mobile iOS Bookmarks
Wednesday, September 11, 13
#rwdimg
Wednesday, September 11, 13
THANK YOU!CHRISTOPHER SCHMITT @teleject
The Non Breaking Space Podcast - http://nonbreakingspace.tv/
Wednesday, September 11, 13

More Related Content

What's hot

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Development
mennovanslooten
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
dmethvin
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
Steve Souders
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
Monika Piotrowicz
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Steve Souders
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
dmethvin
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
dmethvin
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
Susan Winters
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
Steve Souders
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
Steve Souders
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
David Kaneda
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
Stoyan Stefanov
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
osa_ora
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
Christian Heilmann
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
Stoyan Stefanov
 

What's hot (20)

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Development
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 

Viewers also liked

Producció I Distribució D’Energia ElèCtrica (1)
Producció I Distribució D’Energia ElèCtrica (1)Producció I Distribució D’Energia ElèCtrica (1)
Producció I Distribució D’Energia ElèCtrica (1)
AvantimePress
 
Periodico de Velilla de San Antonio Junio 2009
Periodico de Velilla de San Antonio Junio 2009Periodico de Velilla de San Antonio Junio 2009
Periodico de Velilla de San Antonio Junio 2009
guestf4a7e5e
 
Articles Reading Rules
Articles Reading RulesArticles Reading Rules
Articles Reading Rules
Learngle
 
Jppc2013
Jppc2013Jppc2013
Jppc2013
Jan Piet Jacobi
 
Plano texas
Plano texasPlano texas
Curriculum espanol copy
Curriculum espanol   copyCurriculum espanol   copy
Curriculum espanol copy
Alfredo Chacon
 
Knowledge Innovation Market
Knowledge Innovation MarketKnowledge Innovation Market
Knowledge Innovation Market
MICProductivity
 
UAV Summit 2010
UAV Summit 2010UAV Summit 2010
UAV Summit 2010
cassie123
 
AEI Pastelería de Estepa - Agrupación Empresarial Innovadora
AEI Pastelería de Estepa -  Agrupación Empresarial InnovadoraAEI Pastelería de Estepa -  Agrupación Empresarial Innovadora
AEI Pastelería de Estepa - Agrupación Empresarial Innovadora
Adr Sur
 
Manual Tecnico
Manual TecnicoManual Tecnico
Manual Tecnico
guesta648f1
 
Arte y fotos
Arte y fotosArte y fotos
Arte y fotos
Um_AularioNorte
 
Guia articuladora5
Guia articuladora5Guia articuladora5
Guia articuladora5
Karlita Sil
 
Presentación posgradoAdministración de sistemas, devOps y Cloud Computing 05...
Presentación posgradoAdministración de sistemas, devOps y Cloud Computing  05...Presentación posgradoAdministración de sistemas, devOps y Cloud Computing  05...
Presentación posgradoAdministración de sistemas, devOps y Cloud Computing 05...
Montserrat Junyent Manzanera
 
El lenguaje
El lenguajeEl lenguaje
H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015
H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015
H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015
Cinque International S.r.l.
 
Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014
Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014
Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014
Belmiro Moreira
 
Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013
Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013
Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013
Centro Deportivo Israelita
 
Transferencia del Conocimiento y Propiedad Intelectual - Comisión Uinnova
Transferencia del Conocimiento y Propiedad Intelectual - Comisión UinnovaTransferencia del Conocimiento y Propiedad Intelectual - Comisión Uinnova
Transferencia del Conocimiento y Propiedad Intelectual - Comisión Uinnova
Consejo de Rectores de Panamá
 
Elementos de la Comunicación Visual
Elementos de la Comunicación VisualElementos de la Comunicación Visual
Elementos de la Comunicación Visual
AndreaDeLaCruzM
 
T1 oportunidad
T1 oportunidadT1 oportunidad
T1 oportunidad
informendebaldea
 

Viewers also liked (20)

Producció I Distribució D’Energia ElèCtrica (1)
Producció I Distribució D’Energia ElèCtrica (1)Producció I Distribució D’Energia ElèCtrica (1)
Producció I Distribució D’Energia ElèCtrica (1)
 
Periodico de Velilla de San Antonio Junio 2009
Periodico de Velilla de San Antonio Junio 2009Periodico de Velilla de San Antonio Junio 2009
Periodico de Velilla de San Antonio Junio 2009
 
Articles Reading Rules
Articles Reading RulesArticles Reading Rules
Articles Reading Rules
 
Jppc2013
Jppc2013Jppc2013
Jppc2013
 
Plano texas
Plano texasPlano texas
Plano texas
 
Curriculum espanol copy
Curriculum espanol   copyCurriculum espanol   copy
Curriculum espanol copy
 
Knowledge Innovation Market
Knowledge Innovation MarketKnowledge Innovation Market
Knowledge Innovation Market
 
UAV Summit 2010
UAV Summit 2010UAV Summit 2010
UAV Summit 2010
 
AEI Pastelería de Estepa - Agrupación Empresarial Innovadora
AEI Pastelería de Estepa -  Agrupación Empresarial InnovadoraAEI Pastelería de Estepa -  Agrupación Empresarial Innovadora
AEI Pastelería de Estepa - Agrupación Empresarial Innovadora
 
Manual Tecnico
Manual TecnicoManual Tecnico
Manual Tecnico
 
Arte y fotos
Arte y fotosArte y fotos
Arte y fotos
 
Guia articuladora5
Guia articuladora5Guia articuladora5
Guia articuladora5
 
Presentación posgradoAdministración de sistemas, devOps y Cloud Computing 05...
Presentación posgradoAdministración de sistemas, devOps y Cloud Computing  05...Presentación posgradoAdministración de sistemas, devOps y Cloud Computing  05...
Presentación posgradoAdministración de sistemas, devOps y Cloud Computing 05...
 
El lenguaje
El lenguajeEl lenguaje
El lenguaje
 
H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015
H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015
H2 Mobility Italy - Presentation at Hydrogen Park, Venice, 23 November 2015
 
Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014
Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014
Multi-Cell OpenStack: How to Evolve Your Cloud to Scale - November, 2014
 
Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013
Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013
Núm. 2623, 23 de jeshván de 5774 México D.F. a 27 de octubre de 2013
 
Transferencia del Conocimiento y Propiedad Intelectual - Comisión Uinnova
Transferencia del Conocimiento y Propiedad Intelectual - Comisión UinnovaTransferencia del Conocimiento y Propiedad Intelectual - Comisión Uinnova
Transferencia del Conocimiento y Propiedad Intelectual - Comisión Uinnova
 
Elementos de la Comunicación Visual
Elementos de la Comunicación VisualElementos de la Comunicación Visual
Elementos de la Comunicación Visual
 
T1 oportunidad
T1 oportunidadT1 oportunidad
T1 oportunidad
 

Similar to [jqconatx] Adaptive Images for 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 Design
Christopher Schmitt
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
Christopher 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
 
[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
Christopher Schmitt
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[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
Christopher 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 Design
Christopher Schmitt
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
Christopher Schmitt
 
[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
Christopher Schmitt
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[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
Christopher 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 Design
Christopher 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 Design
Christopher Schmitt
 
DjangoCon 2009 Keynote
DjangoCon 2009 KeynoteDjangoCon 2009 Keynote
DjangoCon 2009 Keynote
Ted Leung
 
[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
Christopher Schmitt
 
Troubleshooting Live Java Web Applications
Troubleshooting Live Java Web ApplicationsTroubleshooting Live Java Web Applications
Troubleshooting Live Java Web Applications
ashleypuls
 
[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
Christopher Schmitt
 

Similar to [jqconatx] Adaptive Images for 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
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] 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"
 
[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
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] 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
[refreshaustin] 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
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
[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
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] 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
[html5tx] 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
 
[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
 
DjangoCon 2009 Keynote
DjangoCon 2009 KeynoteDjangoCon 2009 Keynote
DjangoCon 2009 Keynote
 
[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
 
Troubleshooting Live Java Web Applications
Troubleshooting Live Java Web ApplicationsTroubleshooting Live Java Web Applications
Troubleshooting Live Java Web Applications
 
[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
 

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 Product
Christopher Schmitt
 
[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
Christopher Schmitt
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
Christopher 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 Code
Christopher 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 Code
Christopher Schmitt
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
Christopher Schmitt
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
Christopher 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 Design
Christopher 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
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
Christopher Schmitt
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
Christopher Schmitt
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
Christopher Schmitt
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
Christopher Schmitt
 

More from Christopher Schmitt (13)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[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
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
 
[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
 
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

Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
Zilliz
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
ZachWylie3
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Zilliz
 
Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)
Debmalya Biswas
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
FIDO Alliance
 

Recently uploaded (20)

Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
 
Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
 

[jqconatx] Adaptive Images for Responsive Web Design