Slide 40
Slide 40 text
One SRC to rule all images
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
Slide 43
Slide 43 text
Option 1: Use JavaScript to set
screen width in a cookie
Information on location of
large file in query string
Instead of using query string,
some use data attributes
Information on location of
large file in query string
Instead of using query string,
some use data attributes
Slide 48
Slide 48 text
Option 2: Use noscript to prevent
image from loading
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
$(‘noscript[data-large][data-small]’).each(function(){
var src = screen.width >= 500 ? $(this).data(‘large’) : $(this).data(‘small’);
$(‘
’).
insertAfter($(this));
});
Script assumes jQuery is loaded.
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
$(‘noscript[data-large][data-small]’).each(function(){
var src = screen.width >= 500 ? $(this).data(‘large’) : $(this).data(‘small’);
$(‘Slide 49
Slide 49 text
Option 2: Use noscript to prevent
image from loading
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
Slide 50
Slide 50 text
Option 2: Use noscript to prevent
image from loading
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
Ugh, markup is no longer semantic. We’ve changed
HTML to t one and only one solution.
File doesn’t download because anything inside noscript
tags is not is the DOM if the JavaScript is enabled.
Ugh, markup is no longer semantic. We’ve changed
HTML to t one and only one solution.
Slide 51
Slide 51 text
Option 3: Use Sencha.io SRC or
similar solution to resize images
Set the first part of the src to
http://src.sencha.io/
After the slash add the full URL of
the image you want to have resized.
Sencha.io SRC will resize the image to fit the size
of the device screen. For example, if an iPhone
visits the site, the image will be constrained to its
screen size of 320 by 480 pixels.
Replace with your domain and
path to the images.
Replace with your domain and
path to the images.
Slide 52
Slide 52 text
Option 3: Use Sencha.io SRC or
similar solution to resize images
Set the first part of the src to
http://src.sencha.io/
After the slash add the full URL of
the image you want to have resized.
Sencha.io SRC will resize the image to fit the size
of the device screen. For example, if an iPhone
visits the site, the image will be constrained to its
screen size of 320 by 480 pixels.
Replace with your domain and
path to the images.
Replace with your domain and
path to the images.
Slide 53
Slide 53 text
Option 3: Use Sencha.io SRC or
similar solution to resize images
Set the first part of the src to
http://src.sencha.io/
After the slash add the full URL of
the image you want to have resized.
Sencha.io SRC will resize the image to fit the size
of the device screen. For example, if an iPhone
visits the site, the image will be constrained to its
screen size of 320 by 480 pixels.
Replace with your domain and
path to the images.
Ugh, we’re routing everything through a third party.
And how does Sencha.io know what size image to send anyways?
Replace with your domain and
path to the images.
Ugh, we’re routing everything through a third party.
And how does Sencha.io know what size image to send anyways?
Slide 54
Slide 54 text
Only real solution is a new element
Long description
W3C Responsive Images Community Group http://www.w3.org/community/respimg/