Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

retina webpages

P

potatis

macrumors 6502a
Original poster
Dec 9, 2006
840
291
I can understand the iPod touch/iPhone 4 doesn't do this due to the 960 pixel width, but are webpages supposed to be 2x magnified on the iPad 3?
If so, is there any W3C implementation for this in HTML, to have an alternate hiDPI image on the webpage alongside the regular image? Otherwise it will just be a 2x magnification of text.
 
From a quick search around it appears that the suggested way of serving high resolution content to the iPhone 4/4s is to use the "device pixel ratio". This defines the ratio between logical pixel sizes and physical pixel sizes. Normally this is 1 but on an iPhone 4 and (presumably a Retina iPad) it is 2. This value can be used in either CSS media queries or JavaScript to alter which images get loaded.

This page provides a pretty good introduction but there is a lot more out there:

http://aralbalkan.com/3331

For some images this might not even be necessary. If we look at the images that make up the menu bar at the top of this page we can see that there is very little detail. Because there isn't a lot of detail pixel doubled versions should compress very well. It might be possible to just serve the pixel doubled versions to everyone and let the browser downsize them if necessary.

The final option would be to serve SVG images when possible. Being vector based these would scale to whatever size is needed. The problem with this is that SVG support in older browsers isn't great so you would probably still need an image fallback.

Edit: I just looked more closely at the Mac Rumors menu bar and it actually doesn't seem to be using images. I'd guess that it's using rounded CSS corners instead. However I'm sure there are other places where highly compressible images are used on web pages.
 
Last edited:
if you have a mac, set safari to full screen and zoom in (I double tapped on the touch surface of my magic mouse to double size it) and i imagine that's all the iPad 3 will do.

Here's a screenshot if you aren't able to do this yourself.

fullscreeny.jpg
 
i bet there is going to be a lot of blurriness out there. the mac rumors apple, for instance, isn't terribly crisp (lol, great pun eh?). i guess we'll have to see what happens. i'm just looking forward to crisp text.
 
palpatine said:
i bet there is going to be a lot of blurriness out there. the mac rumors apple, for instance, isn't terribly crisp (lol, great pun eh?). i guess we'll have to see what happens. i'm just looking forward to crisp text.
Click to expand...

I don't think bluriness will be a major problem. The only time that Mobile Safari displays normal web pages at native resolution is when the iPad's in landscape and fully zoomed out. All the rest of the time some scaling up or down is going on. When you start having to scale images then having more pixels is almost always going to be better.

Browsing the web in portrait while fully zoomed out is a good example to think about. In this situation Mobile Safari still acts like the web page is 1024 logical pixels wide and downsizes images to fit in the 768 physical pixels available. This means that some information in the original images has to be lost. With a Retina iPad this will no longer be the case so all images should look sharper straight away.
 
Web developer here, you can make special images to show only in hi dpi devices such as iPhones 4 and Galaxy nexus for instance. It's no big deal.
 
djrod said:
Web developer here, you can make special images to show only in hi dpi devices such as iPhones 4 and Galaxy nexus for instance. It's no big deal.
Click to expand...

But do you have images ready for the iPad 3?
I imagine most people need to make new high res images for the iPad Retina Display. Probably not too much work but websites do need to be updated and aren't currently optimized for the iPad 3's super high res display, right?
 
maclook said:
But do you have images ready for the iPad 3?
I imagine most people need to make new high res images for the iPad Retina Display. Probably not too much work but websites do need to be updated and aren't currently optimized for the iPad 3's super high res display, right?
Click to expand...

It depends of the web designer, if the web is made with CSS3 in mind and only uses images for things like actual pictures the website would look very sharp and crisp, but if the designer is a lazy one and uses images for things like custom title fonts, buttons, etc then the website would look blurry.

I'm designing my personal website with a retina iPad in mind, when the iPad 3 goes on sale I will post it so people can see how nice an optimized website can look.
 
I don't understand the problem. Most websites are native rendered at xGA. On the iPad 3 the rendering should be exactly the same for images being 1:4 pixel mapped but safari will render the text using the full retina so that will be super sharp.

There might be some 'retina' websites but I dont see the point at this stage.
 
Last edited:
blackNBUK said:
I don't think bluriness will be a major problem. The only time that Mobile Safari displays normal web pages at native resolution is when the iPad's in landscape and fully zoomed out. All the rest of the time some scaling up or down is going on. When you start having to scale images then having more pixels is almost always going to be better.

Browsing the web in portrait while fully zoomed out is a good example to think about. In this situation Mobile Safari still acts like the web page is 1024 logical pixels wide and downsizes images to fit in the 768 physical pixels available. This means that some information in the original images has to be lost. With a Retina iPad this will no longer be the case so all images should look sharper straight away.
Click to expand...

in my recollection, images do appear blurry even in the ipad now. but, i sold mine, so i can't confirm it! But, on my iphone, whenever i zoom in on pages i find the images to be blurry. heck, even this discussion forum even looks blurry on it (full page mode).
 
I decided to do a little comparison between Retina and non-Retina images. If you want to have a look at it you can find the web page here:

http://dl.dropbox.com/u/506327/retina_test/retina_test.html

The test consists of 3 images based by the SVG tiger vector; a 300 logical pixel wide rendering of it, a 600px wide rendering that is set to appear in 300 logical pixels and the original SVG also set to render 300 logical pixels wide. I used Inkscape to render the SVG into PNG images.

On my iPad 1 and my iMac all 3 images look very similar and any small differences are probably down to differences between Safari and Inkscape in image rendering and resizing. On my iPhone 4S the pixel doubled PNG and SVG look very obviously better than the normal PNG. So far so obvious!

However if I compare the normal PNG on the iPad 1 and iPhone 4S I can't notice a dramatic difference. The normal image certainly doesn't appear much worse on the iPhone 4S. So I think suggestions that an retina iPad will make the web look "blurry" are not right. To take advantage of a retina display web sites will have to make modifications but existing sites shouldn't look any worse than they do on non-retina displays and in some situations (i.e. zoomed out in portrait) will look better.
 
blackNBUK said:
I don't think bluriness will be a major problem. The only time that Mobile Safari displays normal web pages at native resolution is when the iPad's in landscape and fully zoomed out. All the rest of the time some scaling up or down is going on. When you start having to scale images then having more pixels is almost always going to be better.

Browsing the web in portrait while fully zoomed out is a good example to think about. In this situation Mobile Safari still acts like the web page is 1024 logical pixels wide and downsizes images to fit in the 768 physical pixels available. This means that some information in the original images has to be lost. With a Retina iPad this will no longer be the case so all images should look sharper straight away.
Click to expand...

That is starting to change, making websites that are optimized for almost any display:

http://www.brasseriecayman.com/

http://www.bluegg.co.uk/

http://www.performancemarketingawards.co.uk/


This a major web design trend now.
 
I see, would the trick be to specify WIDTH and HEIGHT in HTML for normal 1x resolutions, and have the image be twice that size for the iPad 3 too zoom to its native size?
 
potatis said:
I see, would the trick be to specify WIDTH and HEIGHT in HTML for normal 1x resolutions, and have the image be twice that size for the iPad 3 too zoom to its native size?
Click to expand...

Nop.

Imagine a image that is 300x200 px, ok?

In the current iPad it shows at 300x200, in a Retina iPad it would be upscaled by the iPad to 600x400 with no intervention from the web developer. This is totally automatic, but that image would not look super crisp, so the web developer has to tell the website to load 2 different images, for instance:

Displays with pixel density = 1 : image.jpg (320x200px) 10kb
Displays with pixel density = 2 : imageRetina.jpg (640x400px) 20kb

So if an iPad 1 or 2 visits the website, the website sends to the browser the image.jpg, but if is an iPad 3, it sends the imageRetina.jpg NOT BOTH

Keep in mind that the retina image is going to be bigger in size, we don't want to load the extra image weight if is not necessary.

Here is an example of using retina vs non retina img in an iPhone (click to enlarge) :



http://s2.subirimagenes.com/imagen/7505459retina.png
 
potatis said:
I see, would the trick be to specify WIDTH and HEIGHT in HTML for normal 1x resolutions, and have the image be twice that size for the iPad 3 too zoom to its native size?
Click to expand...

That would work and is exactly what I did in my little test a few posts up. However as djrod says it's not a particularly elegant solution. You would be sending more data than is necessary to the vast majority of browsers out there that don't output to high DPI displays. You would also be relying on non-retina browsers to downsize your images nicely. On modern browsers this is a non-issue but some older browsers were pretty primitive in how they scaled images.

A more elegant solution would be to detect whether the browser is outputting to a retina display and only send your high resolution images if it is. This is where the "device-pixel-ratio" and CSS media queries that I mentioned at the start of this thread come in.
 
Ya I noticed my sites logo was fuzzy on the iPad 3.... Luckily my site is undergoing a huge update atm, so before the new site goes live I can get it all looking hot for the iPad 3 on Safari...

332cyea.png


Top = Old Logo (Fuzzy)
Bottom = Retina Logo

Screen shot doesn't really show the change that well, but when viewed on the iPad 3 it pops :)
 
A few things are being overlooked in this whole "retina webpage" discussion.

Not that I want to spoil the party, but we need to get real about a couple of things.

Large images such as hi-res photos will NEVER look pin sharp on any display unless rendered as 1:1 pixel mapped. Meaning a 1500px wide image will NOT look pin sharp unless it's displayed using 1500 hardware pixels on whatever screen you are viewing on, including the new iPad. When scaling occurs, it will actually look SOFTER than a regular cheap LCD desktop monitor.

Let's prove this right now before going any further.

Here is a link to a PNG image I made just now. It's a crop of a screen grab from Photoshop where I zoomed in 200% so you can easily see what's happening. It's a 1500px image grab from the iPad3 Safari, and a desktop browser...
http://tinyurl.com/7w6exsj

Here is the original image I found on the web:
http://tinyurl.com/73pdk5y

The enforced scaling that happens on the iPad causes images to look soft. Look at the tattoo on his head in particular.

Even when the scaling only involves a mere 36 pixels as in above example, it softens the image. Unwanted scaling cancels out the benefits of the retina display.

Photographers now have amazing cameras capable of incredible detail... only to be softened by iPad Safari. It's quite disappointing.

When it comes to HTML text, the retina display wins. When it comes to vector graphics, the retina wins. Up-sized icons and furniture graphics, the retina wins. This is great, and makes the iPad amazing. But when it comes to JPEG images such as photo galleries, it's time to put the champagne glasses down because the iPad doesn't achieve greatness there.

I'm well aware I could set the meta tag viewport to "width=1536" but then as soon as the iPad is rotated horizontally, the image and web page will have scaled once again.

Many people won't give a damn, but photographers need 1:1 pixel mapping for when quality is desired in presentation. But the iPad does not step up to that challenge in Safari as far as I've explored.

So what options does a web publisher have for making a simple webpage of photos, 1500 pixels wide that don't get scaled up to 1536 or 2048, and works fine on other platforms? If anyone knows, please shed some light. Btw, I'm not talking here about pocket-size displays like iPhone. Serious digital photography appreciation does not happen on pocket size displays - they are no more than thumbnail previews, and scaling and softness does not matter on those devices.

Cheers, and apologies for long first post!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back