iPad3’s Retina Display Will Wreak Havoc on the Web
Does this guy want an immersive experience, or does he just want to complete a task quickly? Forcing him to download hi-res images could create a bad user experience for him.
The iPad3’s Retina display is causing problems for apps who have to deal with Apple’s 20MB limit on app size. You know the web is in trouble when even the native apps are struggling with the gigantic Retina screen.
The difference of course between a native app and a website is that the bulk of the file size for native apps can be handled in one fell swoop upon download, while assets are requested on demand for the web.
This is seriously troubling for the web, who’s already dealing with increasingly-bloated page sizes. Users are going to get used to seeing beautiful crisp experiences on native apps, then turn to the web and get pixelated disgustingness. It happened before with the launch of the iPhone4, but the size of the iPad’s screen compounds the problem.
Of course not every iPad is on 3G service, but not all are blazingly-fast Wi-fi either. We need to be able to deliver great web experience that cater to context, and that means serving a good experience to a user on shitty Wi-fi on a Bolt Bus and also to the user comfortably browsing the web from their home.
The user on the bus can be on slow Wi-fi or 3G and might just need to get the damn assets downloaded. They shouldn’t be punished with downloading a massive Retina-ready image. That’s where navigator.connection comes into play, but even the basic connection types don’t give the whole picture of the user’s context.
Just because the iPad3 CAN serve up high quality, crisp images and video doesn’t mean it SHOULD for every use case. This is important. We need a way to properly address this.
Note: This was originally posted on my G+ page, but I’m trying to move these thoughts in house.
27 Comments
Joshua Sortino
All the more reason we should be supporting SVGs, and icon servers when possible. Hopefully more options become available for scaling rasterized images, but until then let’s scale what we can.
Andy Walpole
I agree with Josh. Without doubt SVG will be the web format of choice within a few years replacing the the PNGs and GIFs of today. Come on Adobe get with it and include SVG as an option in Photoshop like you do in Illustrator
Nathan Uphoff
For Icons there is the rise of specific fonts which exist of icons only, this way you can put all of them in a single file with unlimited upscaling properties. Besides this I usually use low-bandtwith graphics on the initial load, which I replace once all of the main content is downloaded. This way the user has an option to stop loading the page when all is set and done, be as it may with pixelated images.
Another thought, when I created my first mobile web application retina images was an option so I used them. When I browse the web however I rarely see retina-optimized pages, if optimized for mobile use at all. Of course the app creators will upgrade as fast as possible, usually giving them free publicity and comforting their paying customers. Websites on the other hand won’t get much credits or (extra) income due retina graphics, when at the same time it costs them extra bandwidth. Therefore I suspect it will take a decent amount of time before the yet to be announced iPad 3 becomes an issue.
Sidenote, I live (and browse) in the Netherlands, this could be why there aren’t that much retina-optimized websites in my experience.
Adrian Simmons
Vector graphics spring to mind yes, SVG…but what about photos?
Stephen Dixon
This article is way to premature. Try rewriting and then republishing when we all officially know what to expect in the iPad 3.
Daniel Eden
I think it’s fair to question the relevance of pixels in web design any more. With CSS3, SVG and Canvas, it’s easier than ever for web designers to move away from the restrictions of the pixel and think in more content-everywhere, infinitely-scalable ways.
There are ways to serve up high-resolution images to more capable devices (wether based on pixel density or bandwidth), we can replace our glossy web 2.0 buttons with glossy CSS3 buttons with ease, our videos are becoming increasingly available in HD with the rapid increase in broadband speeds and services such as Youtube. I don’t really see the big fuss. We’ve seen this with the iPhone with little concern from iOS designers & developers.
scott sawyer
Good post. I agree with Joshua, vectors will make a big difference, better CSS3. I don’t really see a solution to rasterized images coming down the pipe, though, many have tried. I think over the next 2 years some of the technology issues will go away. By then most people on mobiles (in the USA) will be on some flavor of 4g, and Windows XP will be discontinued.
Could you imagine if the home page to your blog or shopping cart were 20mb?
Kaiesh Vohra
Where CSS and vector images do not apply, what about the lowsrc property to enable quick page rendering and then gradual enhancement as the bandwidth permits? It takes us back to the days of having to deal with the mix of dial up and “university” connections 🙂
http://www.w3schools.com/jsref/prop_img_lowsrc.asp
markval
vector image is more processing. LessFramework handles any screensize like a charm
iestyn
I agree with Daniel.
So much of the graphical interface can be drawn with CSS, SVG and Canvas these days.
The only problem is image-quality, but there are solutions (and will be better solutions soon) to deliver specifically-optimised images (low or high quality) depending on bandwidth. I’m sure YouTube does this already with video?
The only problem will be getting image-based websites converted to CSS/SVG etc…
Josh Littlejohn
The only problem with SVG is it is not supported on Android mobile devices. This might not concern some but there are more mobile devices out there other than the iPhone and iPad.
Josh Littlejohn
@Kaiesh Vohra That would be a good option except modern browsers no longer support lowsrc. High-res web display was an inevitable progression, you’d think we would have thought ahead for a solution.
Antoine RJ Wright
Forgetting the “go vector” argument for a minute, but why should hte integrity of the web be kept if developers/designers didn’t build a malleable web in the first place? If there’s to be blame put on anyone for this, it would be for developers/designers, and those nasty folks who build content creation/management systems who publish to the web (slight sarcaism). There’s no excuse, at least since CSS 2.1 became “the way to go” to have a web that didn’t scale properly. Given the push for responsive web in recent and new site projects, this again shouldn’t be a issue. More work? Yes. But, the onus shouldn’t be on a manufacturer for folks not doing things in a way that made sense for accessibility a long time ago but wasn’t done.
Nomnom
New technology should encourage older tech to upgrade. I know that is a shortsighted statement, but we need to push things like this to force lazy buggers to upgrade and challenge the smarter folk to come up with new ways if skinning the cat.
Jpegmini.com is a great example of finding new ways to help compliment advancing technologies.
We need to look for the solutions and not focus on the problems, the die hard fans will focus on the longevity of their products, the innovators will innovate.
If we didn’t push for webkit we would all still be stuck with flash.
eric
Josh, Android 3.0+ do support SVG.
SVG is great for icons, logos, and vector artwork, but photos are inherently based on raster information. In realtime graphics, images are stored at multiple resolutions in an image pyramid or mipmap. This approach is useful for selecting the appropriate resolution given the image’s size in device pixels, but it can also be used to page in low resolution representations, and then gradually load higher and higher levels of the image pyramid at a lower priority. Maybe this is the direction that image file formats for the web should be moving.
Sean Tubridy
I just hope that this forces us to come up with better solutions for serving different image and video sizes and compression levels to different bandwidths (rather than specific devices).
That being said, I’d hate to see the choice taken away from the user in regard to the quality they get just because they are on a slower bandwidth device. If they want to wait longer to download a piece of media at a higher quality – they should be able to have that choice if it’s available.
All of this reminds me of the dial-up days when AOL re-compressed images to serve them faster to their users – resulting in horrible looking photos and graphics. And they couldn’t get better graphics even if they wanted to. Let’s not go there again.
brad
Totally agree. These solutions can’t be device-specific as we all know where that ends up, and users *should* have the option of getting higher-res images. It comes down to what the default experience is, and I feel that we need to be cautious about serving up heavy media as the default.
Rick Curran
Hi, now that the new iPad is out Apple have just bumped up the cellular download threshold to 50MB, so that at least alleviates things for App developers.
But yep, it’s definitely a challenge for ‘regular’ webpage development, but not one that is going to go away as I’d expect other tablet makers to follow suit before long, let’s hope they at least provide a way to target graphic like Apple does for iOS, I’m not holding my breath about that one…
Ash Connell
In all honesty what’s a couple retina enabled images on a page going to do? The speed of 3G and LTE are growing at the same rate.
mattoc4
Got this in an email today.
It generates fonts based on the Icons you want, then you convert it to a @fontface!!!!!
http://nodeca.github.com/fontomas/
Seriously going to help with the constant increase in screen sizes.
Tyus
I think this would be a great time for something like treesaver to make a comeback. its all html and javascript plus you can put in images of different sizes based on display size. I’m sure some one can write some script that picks up network speed and serves the images based upon it.
Jouni Helminen
SVG isn’t supported in Android 2.x stock browser so those will need bitmap fallbacks for SVG.
Anyway the main issue in terms of file size is with photos which you can’t replace with SVG even if you wanted to. High PPI screens will roughly double the resolution and weight of any given image content. 4G/LTE is 10x the speed of 3G so should be alright for images.
It’s people streaming HD video over 3G/4G that’s going to kill the network
ilpiac
Responsive web design or Adaptive web design has to be the way to go. But real Adaptive, with mobile first. iPad3 didn’t create any new problem: it simply supports bigger (in pixel) images. And if you create a real Responsive/Adaptive website you have to serve designs for smaller devices first and then go up with designs for bigger devices. iPad3 included.
There is of course a connectivity problem, it’s not so obvious that if you have a big screen you have a real fast connectivity. This is true more than ever before with iPad3. But the problem is not – again – iPad3 per se, but the fact that today is really difficult to know if the user is using a fast network or not.
When we will have the opportunity to check for this in our code and we will have a HTML tag that support multiple and different sources we can serve according to these data (an image for slow connectivity and smaller displays, an image for fast connectivity and bigger display, an image for fast connectivity and bigger display etc) we will have the right solution.
Till then we can try alternative ways, first of all to avoid serving really not so useful websites that declare themselves Resposive just because every image has a CSS style set with a max-witdh: 100%. And today most “responsive” websites are like this…
Nomnom
See. So many people are thinking of different ways to combat this issue.
Soon as W3C pulls is head out… we’ll be sitting pretty.
Doesn’t solve the fact that we will probably have to still make 2 images, but hey that’s why we have batch action in PS and Automator. I give it 3weeks.
Steve
All sounds very technical. As a user and not a programmer, I appreciate there may be difficulties now. There always seems to be growing pains as Apple pushes the boundaries. I presume these issues will get addressed and 2 years from now it would be unheard of to use a low res display like the original iPad and site that looks terrible on a “new” iPad will get less traffic. A scary thought for developers given the rate iPads are taking over the web.
Robert
Lower quality versions of graphics and video are already served when you are on a 3G connection (as opposed to LTE, 4G, or wifi). So the device can just present itself as 3G when it is using subpar connectivity that is non-3G. How to make it look good on a hi-res display is a different story, but truthfully if I know I am on a bad connection I expect poor web quality, so really this isn’t a problem.
Tom
I’m wondering how we can translate the plus in time and effort needed to cover the retina-displays into billable hours for our average client who simply and rightly expects his not-so-old website to work and look good. to me, apple is shifting a hefty burden on the developers, and to me the benefit for the use, regarding the web, and espacially the mobile web user, does in no way relate to the effort needed to provide a retina-optimised experience. it’s kind of wantng to print daily newspapers in pantone colors.
Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.