The Web Needs to Get Ready for the High-Resolution Future

Compare Cost: Get 8 Free E-Commerce Design Bids
Service:
Location:
Budget:
Deadline:
Compare: Web Design Calculator | Web Design Cost Guidelines

The high-resolution retina display iPad has one downside — normal resolution images look worse than on lower resolution displays. On the web that means that text looks just fine, as does any CSS-based art, but photographs look worse, sometimes even when they’re actually high-resolution images.

Pro photographer Duncan Davidson was experimenting with serving high-resolution images to the iPad 3 when he ran up against what seemed to be a limit to the resolution of JPG images in WebKit. Serving small high-resolution images — in the sub-2000px range — works great, but replacing 1000px wide photographs with 2000px wide photos actually looks worse due to downsampling.

The solution (turns out) is to go back to something you probably haven’t used in quite a while — progressive JPGs. It’s a clever solution to a little quirk in Mobile Safari’s resource limitations. Read Davidson’s follow-up post for more details, and be sure to look at the example image if you’ve got a new iPad because more than just a clever solution, this is what the future of images on web will look like.

As Davidson says:

For the first time, I’m looking at a photograph I’ve made on a screen that has the same sort of visceral appeal as a print. Or maybe a transparency laying on a lightbox. Ok, maybe not quite that good, but it’s pretty incredible. In fact, I really shouldn’t be comparing it to a print or a transparency at all. Really, it’s its own very unique experience.

To show off the sample on his site Davidson uses a bit of JavaScript to toggle the high- and low-res images, highlighting the difference.

But how could you go about serving the higher res image to just those screens with high enough resolution and fast enough connections to warrant it?

You can’t.

So what’s a web developer with high-res images to show off supposed to do? Well, right now you’re going to have to decide between all or nothing. Or you can use a hack like one of the less-than-ideal responsive image solutions we’ve covered before.

Right now visitors with the new iPad are probably a minority for most websites, so not that many people will be affected by low-res or poorly rendered high-res images. But Microsoft is already prepping Windows 8 for high-res retina-style screens and Apple is getting ready to bring the same concept to laptops.

The high-res future is coming fast and the web needs to evolve just as fast.

In the long run that means the web is going to need a real responsive image solution; something that’s part of HTML itself. An new HTML element like the proposed <picture> tag is one possible solution. The picture element would work much like the video tag, with code that looks something like this:


 
 
 

The browser uses this code to choose which image to load based on the current screen width.

The picture element would solve one part of the larger problem, namely serving the appropriate image to the appropriate screen resolution. But screen size isn’t the only consideration; we also need a way to measure the bandwidth available.

At home on my Wi-Fi connection I’d love to get Davidson’s high-res images on my iPad. When I’m out and about using a 3G connection it would be better to skip that extra overhead in favor of faster page load times.

Ideally browsers would send more information about the user’s environment along with each HTTP request. Think screen size, pixel density and network connection speed. Developers could then use that information to make a better-informed guess about which images it to serve. Unfortunately, it seems unlikely we’ll get such tools standardized and widely supported before the high-res world overtakes the web. With any server-side solution to the bandwidth problem still far off on the horizon, navigator.connection will become even more valuable in the mean time.

Further complicating the problem are two additional factors, data caps on mobile connections and technologies like Apple’s AirPlay. The former means that even if I have a fast LTE connection and a high-resolution screen I still might not want to use my limited data allotment to download high-res images.

AirPlay means I can browse to a site with my phone — which would likely trigger smaller images and videos since it’s a smaller screen — but then project the result on a huge HD TV screen. This is not even a hypothetical problem, you can experience it today with PBS’s iPhone app and AirPlay.

Want to help figure out how the web needs to evolve and what new tools we’re going to need? Keep an eye on the W3C’s Responsive Images community group, join the mailing list and don’t be shy about contributing. Post your experiments on the web and document your findings like Davidson and countless others are already doing.

It’s not going to happen overnight, but eventually the standards bodies and the browser makers are going to start implementing solutions and the more test cases that are out there, the more experimenting web developers have done, the better those solutions will be. It’s your web after all, so make it better.

Photo: Ariel Zambelich/Wired

Source http://www.webmonkey.com/?p=55152
Fri, 23 Mar 2012 18:46:29 GMT
Tags: Browsers, Browsers, high-res, high-res, Mobile, Mobile, responsive design, responsive design, responsive images, responsive images, Web Basics, Web Basics, Web Standards, Web Standards,

Browsers


Internet Explorer Market Share Surges, as IE 9 Wins Hearts and Minds

The browser wars are back and Internet Explorer 9 is gaining converts. For the second time this year IE made large gains, picking up almost one point of market share while Chrome, Firefox, and Safari all lost out.

Firefox for Windows 8 Beginning to Take Shape

Mozilla is making progress on a version of Firefox for the Windows 8 Metro interface, but bigger problems lie ahead. Microsoft's rules for the Metro environment allow for only one browser in Metro mode. By default that's Internet Explorer 10, which leav

Browsers


high-res


Cure the High-Res Blurs With SVG and Icon Fonts

High-resolution screens like that of the new iPad make ordinary web graphics look blurry and jagged. Creative web developers have turned to icon fonts and SVG images to create beautiful graphics that scale to any screen.

Speed Kills Conversion Rates [Infographic]

Why Branding Commodities Matters to Your Ecommerce Website

6 Things Wix Can Do For You

5 More Personal Finance Budget Apps for Your iPhone [Digital Dollar]

Jux: A Free, Feature-Rich Blogging Platform That Gives Tumblr A Run For Its Money

Article Tags
Freelance Designer News Articles
Web Apps & Internet

News
cool web apps
Inspiration
CFC
All Posts
iPhone / iPad / iPod
Freelancing
Browsers
Freebies
Google Android
Games & Gaming Tips
Web Design
Freelance Graphic & Web
social media
Music
Cool Windows Apps & Tric
Featured
Tips