--> Use HTML 5 Picture Element To Make Webpages Load Faster | Experience Lab - Online business creation and development guide for bloggers and startups

Use HTML 5 Picture Element To Make Webpages Load Faster

Responsive Web Design  has taken web developers and designers by storm, changing the way they approach the development of a website. Howe...


HTML 5 <Picture> Element


Responsive Web Design has taken web developers and designers by storm, changing the way they approach the development of a website. However, it isn't perfect and has its limitations. According to Archive.org, images constitute about 62% of the total weight of a webpage on average, suggesting that there's a need for a better way than CSS rules to deliver images responsively to a virtually infinite number of screen types and sizes. Meet the new HTML 5 Picture element.



Why need for a new element?


You may have implemented a responsive Web design, thinking that solves all your mobile problems. And it’s true that a responsive Web design solves some problems. It automatically arranges and displays your site elements to be viewed on smaller, narrower mobile screens.





But responsive Web design isn't the answer to everything. It doesn’t necessarily solve the image download issue. Even with responsive design, many times those heavyweight images still are downloaded anyway.


The <Picture> Element 



According to the specification, "the picture element is intended to give authors a way to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format". It, "should be used when an image source exists in multiple densities, or when a responsive design dictates a somewhat different image on some types of screens ("art direction")".





The Picture element is about responsive images, not responsive design. But when it comes to your site’s performance on mobile devices, it could be significant.





The new markup element supposedly addresses the problems caused by images that were meant to be seen on a full-size monitor — images that don’t translate well to mobile devices. The <picture> markup code tells Web browsers such as Firefox to load and display the right (smaller) images as necessary.





Here's what it looks like;



<picture>


  <source srcset="small.jpg 1x, small-hd.jpg 2x">


  <source media="(min-width: 480px)" srcset="medium.jpg 1x, medium-hd.jpg 2x">


  <source media="(min-width: 1024px)" srcset="large.jpg 1x, large-hd.jpg 2x.jpg">


  <img src="fallback.png" alt="Sample ALT description">

</picture>


Compatibility



The <picture> markup element is not final yet, but is coming soon to browsers. Support for the element is expected to be turned on by default in Chrome and Firefox by the end of 2014 turned on by default in the Chrome and Firefox browsers. IE, Opera and Safari are also on their way.





An important thing to know is that <picture> markup could speed up your website, especially on mobile devices.  That would be good for your site visitors.




Feel free to implement <picture> markup in your website code now. Even if a browser program doesn’t understand the new markup, there’s a fallback command to use standard HTML image tags (notice the <img> tag within the picture element). Support for the new element will come very soon. Good luck :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Use HTML 5 Picture Element To Make Webpages Load Faster
Use HTML 5 Picture Element To Make Webpages Load Faster
http://2.bp.blogspot.com/-KV3IyqKuu8o/VBSHRtShMsI/AAAAAAAAGTg/nZdBIwwBjgg/s1600/html%2B5.jpg
http://2.bp.blogspot.com/-KV3IyqKuu8o/VBSHRtShMsI/AAAAAAAAGTg/nZdBIwwBjgg/s72-c/html%2B5.jpg
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2014/09/use-html-5-picture-element-to-make.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2014/09/use-html-5-picture-element-to-make.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy