Transcript Responsive Images(slide show)

Responsive Image
Smita Roy
CONTENT
•
•
•
•
•
•
•
•
What is responsive image?
Importance of responsive image
History of responsive image
Early techniques of responsive image
Challenges & possible solution
Third party services
Best practices / consideration
Conclusion
What is responsive image?
Responsive image is designed to be flexible across multiple screen platforms .
Importance of responsive image
•
•
•
•
Response image plays very important role the accessibility of web design
According to HTTPS ARCHIVE (http://httparchive.org/interesting.php#bytesperpage),
Sixty-two percent of the weight of the web is images
We’re serving more image bytes every day.
web design.
Background and history
Source: http://www.slideshare.net/Maruti_Techlabs/responsive-web-design-48757385
Early techniques of responsive image
img {
width: 100%;
height: auto;
}
Img {
max-width: 100%;
height: auto;
}
but never scale up to be larger than its original size.
In this case sources images fit into the container but performance, quality and legacy
issues along with max-width not understand IE 6 or 7
Challenges and possible solutions
Symantec problem
About the problem
Because when the src of an image points to a real image, with an alt text to
describe it, even if the src is the smallest image possible, it means
downloading of unnecessary data.
Possible solution
•
•
Adaptive Image
HiSRC jQuery plug-in
Adaptive Image
Where applicable?
Adaptive image is the best solution where the site has got a large number of
legacy image .
Requirements for adaptive image:
•
•
It require the Apache 2 Web server and PHP 5.x
Images need to be hosted same web server where the site is
Advantages:
Semantic, No extra mark-up, Good for legacy issues
Disadvantages :
No art direction support, nor Bandwidth
HiSRC jQuery plug-in
HiSRC is a jQuery plugin that enables to create low-, medium- and high-resolution versions
of an image and deliver according to network speed.
Requirement
•
•
Custom markup in the HTML.
jQuery and the HiSRC script is need to included.
<img src="http://placekitten.com/200/100" data-1x="http://placekitten.com/400/200" data2x="http://placekitten.com/800/400" class="hisrc" />
Then call the function on the image class like :
$(document).ready(function(){ $(".hisrc").hisrc(); });
Advantage:
Art direction support(custom cropping or zooming of images for smaller platforms)
, Semantic, Solve the bandwidth problem(enabling the script to pick different image
resolutions according to network speed),
Disadvantage:
Extra mark-up, Depend on jQuery library,
Problem: Art Direction
About the problem
•
•
•
Many responsive image techniques
enable us to use several resolution
versions of an image, accordingly for suit
a given platform.
The most stunning images can lose their
power when scaled down to fit the
confines of smaller devices such as
mobiles.
Images can lose their power .
Possible solution
•
Enabling custom cropping and zooming
specifications.
•
Apply HiSRC and Picture fill techniques
If the site has a high number of legacy images, then custom mark-up is not the right solution.
Picturefill technique
Picturefill script is a polyfill for the proposed <picture> element — JavaScript code that mimics
the picture API, enabling us to use it on our websites.
Requirement
The picturefill.js script
Data-media attributes that act just like media queries in CSS
https://scottjehl.github.io/picturefill/
Advantage:
Art direction support, Good for those cannot alter their website’s source co
de for any reason.
Disadvantage:
Extra mark-up, doesn’t do any bandwidth detection, not supported all browser
Validation problem
About the problem
•
•
Uses JavaScript for the <picture> to display responsive images, it also works
fine but technically invalid syntax.
Web pages that aren't strictly ‘valid' without any problems, these results can
sometimes vary between one browser and another if validity is a must
Possible solution
•
•
Adaptive Images
HiSRC may be a better fit.
Problem: Bandwidth capabilities
About the problem
•
•
Responsive images should consider the bandwidth available on any given
device
Adjust the image size accordingly to cut out excess downloads.
Possible solution
•
•
Foresight.js
HiSRC
Problem: Bandwidth capabilities
Foresight.js:
•
•
•
A solution that works as a kind of connection speed checker.
First downloading a 50K test file and then determining which size image suits best
Technique that is also available with HiSRC.
•
•
Advantages:
Solution for Bandwidth capabilities
•
Disadvantage:
•
•
•
Additional 50k download.
It can block download of other images
For large images ,it is not the proper solution.
New HTML5 elements
New HTML5 elements:
• <picture> element, used with <source> tag and media attribute
• srcset attribute for the <img> element, allows for higher resolution device to have larger
images, using device pixels:
Disadvantage: Not yet fully supported on all browsers(IE and Safari)
CSS Media Queries
CSS Media Queries:
Assign classes, create breakpoints, etc
Addresses ‘fit any screen’ challenge
Disadvantage:
Browser pre-loads all images, causing
bandwidth challenges
Third-party solutions
Sencha.io Src
Sencha.io Src :
Third-party dependent, cloud-based
For big images:
<img src="http://www.your-domain.com/path/to/image.jpg"
alt="My large image" />
just prefix the src attribute with http://src.sencha.io/, like
<img src="http://src.sencha.io/http://www.yourdomain.com/path/to/image.jpg" alt="My large image" />
Advantage :No mark-up
Disadvantage : No art direction, bandwidth
Other Third-party solutions
Capturing/Mobify.js 2.0
Advantage : No mark-up
Disadvantage : Not work in any version of IE lower 10
ReSRC.it:
•
•
Similar to Sencha.io Src,
adds image filters and bandwidth detection and doesn’t rely on user-agent detection or
cookies.
Disadvantage: ReSRC.it is recently out of beta
Best practices
Before designing responsive image
•
•
•
•
•
Consider whether the site validation is required
Do you need to solve art direction problem
Is there any Semantics / accessibility issue
Limits using JavaScript, 3rd party source, PHP, etc
After designing responsive image
Test the site / image in different devices
YSlow: Created by Yahoo, YSlow is a client-side tool
Webpage Test: online tool WebPageTest is an open-source maintained by
Google
References
https://davidwalsh.name/responsive-images
https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/
http://www.w3schools.com/css/css_rwd_intro.asp
https://scottjehl.github.io/picturefill/