New HTML Picture Element To Make Future Web Faster

nerdyalien writes: At some point, haven't all web developers spent an unjustifiable number of hours trying to optimize a desktop site for mobile devices? Responsive web design provides a solution: "develop once, works in every device." However, still it downloads multi-MB images and re-sizes them based on device screen resolution. Retrieving optimized images from the server, based on device (desktop, tablet, phone) and the device's internet connection (fiber, broadband, mobile), has always been an open problem. Recently, a number of freelance developers are tackling this with a new HTML element, <picture>, which informs the web browser to download optimized images from the server. The tag will be featured in Chrome and Firefox later this year. Will this finally deliver us faster web browsing on mobile devices and an easier web development experience?

Comments

It's the 1990s all over again.

[oneiros27]

Back in the days of HTML, they decided that it was awful that the people using dial-up had to wait so long for images to load ... so they came up with the 'lowsrc' attribute to the IMG element:

<img lowsrc='...' src='...' ...>

Or, you could could go with the 2000s route, and use CSS's media queries so that you don't try to push large images down to small-screen devices.

Wouldn't it make more sense to just use a known attribute or method rather than trying to come up with yet another solution every few years?

Let's see

[armahillo]

Let's see how Internet Explorer can manage to munge THIS tag up.

Re:Progressive JPEG

[AuMatar]

What you'd need there is not file support, but server side support. If you're downloading a single file with all those formats, you're going to have to download everything at once. That's inefficient (important on mobile devices) and slow. Stuffing all the sizes into one container isn't the answer.

Instead, what you'd like is one URL to automatically send you the correct file(s) for your size(s). For example, you could put headers in the http request giving the desired resolutions and the response could have each of those sizes, in preference order. Basically have each image request turn into a CGI request for multiple files. More or less what this new tag is trying to do client side. Of course doing it client side, while less convenient all around, does have privacy advantages- you can't guess the device type from the sizes requested.