retina webpages

Discussion in 'iPad' started by potatis, Mar 4, 2012.

  1. potatis macrumors 6502a

    potatis

    Joined:
    Dec 9, 2006
    #1
    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.
     
  2. blackNBUK, Mar 4, 2012
    Last edited: Mar 4, 2012

    blackNBUK macrumors 6502a

    Joined:
    Feb 19, 2010
    Location:
    UK
    #2
    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.
     
  3. Lukeyy19 macrumors 6502a

    Lukeyy19

    Joined:
    Feb 16, 2010
    Location:
    England, UK
    #3
    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.

    [​IMG]
     
  4. palpatine macrumors 68040

    Joined:
    May 3, 2011
    #4
    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.
     
  5. blackNBUK macrumors 6502a

    Joined:
    Feb 19, 2010
    Location:
    UK
    #5
    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.
     
  6. djrod macrumors 65816

    djrod

    Joined:
    Sep 16, 2008
    Location:
    Madrid - Spain
    #6
    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.
     
  7. maclook macrumors 65816

    Joined:
    Nov 2, 2008
    #7
    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?
     
  8. djrod macrumors 65816

    djrod

    Joined:
    Sep 16, 2008
    Location:
    Madrid - Spain
    #8
    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.
     
  9. MacAttacka, Mar 4, 2012
    Last edited: Mar 4, 2012

    MacAttacka macrumors 6502

    Joined:
    Feb 23, 2012
    #9
    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.
     
  10. palpatine macrumors 68040

    Joined:
    May 3, 2011
    #10
    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).
     
  11. blackNBUK macrumors 6502a

    Joined:
    Feb 19, 2010
    Location:
    UK
    #11
    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.
     
  12. djrod macrumors 65816

    djrod

    Joined:
    Sep 16, 2008
    Location:
    Madrid - Spain
    #12
    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.
     
  13. potatis thread starter macrumors 6502a

    potatis

    Joined:
    Dec 9, 2006
    #13
    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?
     
  14. djrod macrumors 65816

    djrod

    Joined:
    Sep 16, 2008
    Location:
    Madrid - Spain
    #14
    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) :

    [​IMG]

    http://s2.subirimagenes.com/imagen/7505459retina.png
     
  15. arcite macrumors 6502a

    arcite

    Joined:
    Sep 6, 2009
    Location:
    Cairo, trapped in a pyramid with my iphone
    #15
    It's a non-issue really, most websites will be updated for retina within a few months.
     
  16. blackNBUK macrumors 6502a

    Joined:
    Feb 19, 2010
    Location:
    UK
    #16
    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.
     
  17. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #17
    Uhh... not a web developer, are you? ;)
     
  18. Sean Dempsey macrumors 68000

    Sean Dempsey

    Joined:
    Aug 7, 2006
    #18
    Obvious troll is obvious.
     
  19. Ducky280 macrumors regular

    Joined:
    Sep 25, 2007
    Location:
    Near Lisburn
    #19
    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...

    [​IMG]

    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 :)
     
  20. frypan macrumors newbie

    Joined:
    Mar 31, 2012
    #20
    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!
     

Share This Page