Every website will be non-retina.

Discussion in 'iPad' started by The General, Mar 7, 2012.

  1. The General macrumors 601

    Joined:
    Jul 7, 2006
    #1
    Any news on how web designers can incorporate retina graphics in their websites? As is, every image on every website ever will be non-retina and appear pixelated just like iPhone apps did when iPhone 4 first came out.
     
  2. rocknblogger macrumors 68020

    rocknblogger

    Joined:
    Apr 2, 2011
    Location:
    New Jersey
  3. Stetrain macrumors 68040

    Joined:
    Feb 6, 2009
    #3
    Anything that's pure HTML and CSS will not be pixelated, only image files.

    There is a CSS property that allows you to use high dpi images, exactly the same as with the retina display iPhone 4 and 4S.
     
  4. Jare macrumors 65816

    Jare

    Joined:
    Jun 17, 2010
    Location:
    Canada
  5. ZBoater macrumors G3

    ZBoater

    Joined:
    Jul 2, 2007
    Location:
    Sunny Florida
    #6
    Huh? Have you ever browsed the web on a big monitor?
     
  6. JohnnyQuest macrumors 65816

    JohnnyQuest

    Joined:
    May 25, 2006
  7. Jare macrumors 65816

    Jare

    Joined:
    Jun 17, 2010
    Location:
    Canada
    #8
    No, as you can tell the OP's only computer has ever been an iPad 1. :D
     
  8. bjett92 macrumors 6502a

    Joined:
    Oct 22, 2007
    Location:
    Indy, IN
  9. mcdj macrumors 604

    mcdj

    Joined:
    Jul 10, 2007
    Location:
    NYC
    #10
    animated gifs of dancing hamsters will still look blocky.
     
  10. Nikos macrumors 68000

    Nikos

    Joined:
    Nov 20, 2008
    Location:
    New York
    #11
    Canceling my preorder.
     
  11. Peace macrumors Core

    Peace

    Joined:
    Apr 1, 2005
    Location:
    Space--The ONLY Frontier
    #12
    Like this :

    Low-Res and Hi-Res
     

    Attached Files:

  12. hobbbz macrumors 6502a

    hobbbz

    Joined:
    Mar 8, 2005
    #13
    He's actually correct, to a point.

    A site with graphics designed for non-retina screens can appear somewhat blurred. An 4x4 px image on non retina gets rendered at 4x4 then blown up to 8x8 at the same size as the original 4x4. This can cause some blurriness. The solution (that is a PITA) is to export your web images at 2x size and scale them to the size they should be. So now an 8x8 image gets rendered at 8x8 and scaled to retina sized 4x4.

    Look at a site I did before Retina existed: http://asgrowmobile.com if you can, compare it on a 3GS (or desktop) and a 4. The 4 looks "blurry" even thought the images are exported 1-1 at viewable size. Because they're shrunk then expanded.
     
  13. The General, Mar 7, 2012
    Last edited: Mar 7, 2012

    The General thread starter macrumors 601

    Joined:
    Jul 7, 2006
    #14
    The new iPad is still going to render websites at the same physical size as the non-retina iPads. Take for instance, this 400x300 pixel image:

    [​IMG]

    It will be rendered pixel for pixel at 100% zoom. On an iPad 1 or 2. On the new iPad, though it will be rendered at the same physical size on the surface of the display, it will cover an area with 4 times as many pixels. 800x600 pixels will be rendering this 400x300 image. That will cause pixelation to be apparent to the user.

    I know this can be hard for some of you to visualize and really understand what I am saying and what the reality of web browsing on a new iPad will be like. I get that stuff like this can be hard to understand and people are quick on the gun to defend Apple. I'm just making a serious inquiry. Yes, I am aware that when you go higher resolution such as a move from 11" MBA to 27" iMac, pixelation doesn't occur and you gain screen real estate. Increases in resolution for devices like the iPad or iPhone, where UI elements must stay the same physical size when measured with a ruler, then media needs to be recreated at higher resolution to work with it.

    We saw this with iPhone apps when the retina display first came out. We will see it with web sites undoubtedly. See all the smilies on the right of the post compose view here on MacRumors? Or the justification settings? That 1 2 3 right there on the numbers button? Those will not look sharper on a retina display. They will look exactly the same. And when you see it looking pixelly right next to some ultra-sharp retina text rendering, it's going to be bothersome.

    Perhaps there's hope. Perhaps there's some documentation about how I could implement retina graphics into my website? That's all I really wanted here. Not to be mocked and called misinformed several times, then being told that web design isn't my thing even though it kind of is, and I definitely didn't come here to have eyes rolled at me. I know Apple has plenty of documentation for making Mobile Safari interfaces and stuff.

    Surely there is a way to call out @2x images for websites when being rendering on a new iPad. Because I certainly know for a fact that every website I've made with the exception of some CSS-only ones will not look good on a new iPad. The text and vector images will be rendered at retina ppi, but every raster graphic and photo will be pixelated.
     
  14. The General thread starter macrumors 601

    Joined:
    Jul 7, 2006
  15. azccw999 macrumors newbie

    Joined:
    Jan 8, 2011
    Location:
    Arizona
    #17
    nice job dealing with the forum dorks General....I was curious about this too.
     
  16. Gregintosh macrumors 68000

    Joined:
    Jan 29, 2008
    Location:
    Chicago
    #18
    This could be a big boost for web designers. "For just $499 we will make your website 'retina' ready."
     
  17. The General thread starter macrumors 601

    Joined:
    Jul 7, 2006
    #19
    I'm just going to further rub it in with this post. Screenshots are out. Here's the browser:

    [​IMG]

    View it at 100% to see that text is retina and images are non-retina. This is portrait orientation, too. That means the browser is rendering a 1024px wide viewport and scaling it down. The pixelation will be even more apparent when viewing websites in landscape orientation.
     
  18. whateverandever macrumors 6502a

    Joined:
    Nov 8, 2006
    Location:
    Baltimore
    #20
    Not at all a good solution, though. It has you loading the original images and then reloading the 2x images. You end up eating more bandwidth on a mobile device.

    Really if you want "retina" support you have to use CSS for all your images, which is a huge pain and sometimes not even practical (for dynamic sites that include an image in a blog for instance). You could also do user agent sniffing to serve up 2x images, but that has its downsides as well.
     
  19. Stetrain macrumors 68040

    Joined:
    Feb 6, 2009
    #21

    I think you went wrong with your title. The issue isn't with entire websites, it's with image files specifically. The method for including double-dpi images has been in place since the iPhone 4 was released as far as I know.

    Also I think this was probably at least the 10th "Hey wait websites won't be retina ready!!!1!" post.

    It's definitely something for web developers to look into, and more probably will now.
     
  20. tekchic macrumors 65816

    tekchic

    Joined:
    Apr 19, 2010
    Location:
    Phoenix, AZ
    #23
    Don't tempt me to go make a "retina-capable" hamster dance website. :D
     
  21. iCarabma macrumors 6502

    Joined:
    Feb 22, 2012
    #24
    Your example is of a screen shot viewed on a non-retina screen. Any screenshot of any retina display is just going to look like a screenshot.

    The easy answer is don't worry about the internet. It will scale nicely. Gonna look swell.
     
  22. The General thread starter macrumors 601

    Joined:
    Jul 7, 2006
    #25
    Yeah, they're on a non-retina screen. That's why the images are so much larger in physical size than on a iPad. I can still tell when images are non-retina, and so can everybody else. That's why developers had to replace the images in their apps when iPhone 4 came out. They looked pixelated. The same thing applies to websites. Web developers and designers will need to replace the images on their websites with double resolution ones in order to take advantage of the new iPad's retina display.

    Like I said in one of my previous posts, I understand that this stuff may be difficult for smaller minds to understand. Marketing terms like "retina" confuse people and inflate their idea of what is going on. The same thing happened when HDTVs started rolling out. People thought "HD" was something special other than just higher resolution video. It's just more pixels. The way raster images work at a fundamental level remains the same.

    You want to have a pixel of information in an image for each pixel of your display in order to produce the sharpest result. The iPad 1 and 2 had this. Now, the new iPad has FOUR pixels on its display, making most things look WAY sharper, so if it wants to display images from websites as sharply as it can, it either would have to display images at a FOURTH of the size (half the height and half the width). If it did that, then websites would be too small.

    The screenshot shows that it's resampling the images to reduce the amount of apparent pixelation, but it still looks crappy. Regardless, most of the people in this thread don't have a shred of an idea of what's going on. I'll take this conversation to another forum. Thanks.
     

Share This Page