The Web will get much faster very soon.
A current problem is images. – the size of the average page in the top 1,000 sites on the Web is 1.7MB. and Images account for almost 1MB of that 1.7MB.
With a fast fiber connection, that no problem but on a mobile network, that huge image uses up limited bandwidth. When you’re using a mobile device is you still get images intended for pc monitors loaded . It’s a waste of bandwidth delivering pixels you don’t need.
Modern Web browsers speed up page load times by downloading images before parsing the page’s body. The browser starts to download the image before it knows where that image will be in the page layout or how big it will need to be.
As of today, the Picture element will be available in Chrome and Firefox by the end of the year. It’s available now in Chrome’s dev channel and Firefox 34+ (in Firefox you’ll need to enable it in about:config). Here’s a test page showing the new Picture element in action.
Lawson of Opera first suggested that a new html
After evaluating the various rules, the browser picks the best image based on its own criteria. This is anice feature because the browser’s criteria can include your settings. Future browsers might offer an option to stop high-res images from loading over 3G, regardless of any Picture element on the page . Once the browser knows which image is the best choice, it loads and displays that image in a n img element. Prefetching still works and there’s no performance penalty. When the browser doesn’t understand picture, it falls back to whatever is in the img tag.
So Picture wraps an img tag. If the browser is too old to know what to make of a
Opera, also based on Blink, will support Picture in the near future. Apple appears to be adding support to Safari through the backport to WebKit, though it wasn’t finished in time for the upcoming Safari 8. Microsoft has likewise been supportive and is considering Picture for the next release of IE.
