Every website will be non-retina.

[hifoo45]

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.

Don't worry General, I posted about this same issue over a year ago and got the same backlash. https://forums.macrumors.com/threads/1093540/ Not sure if people just don't understand or are in denial. Everyone will see it in person come friday, but of course some people just don't have the eye to see the differences.

iOS scales up or down to fit the width of the screen, and now with the massive retina resolution almost all sites will have to scale up, text and css will scale beautifully but images will look muddy and pixelated.

 

[iCarabma]

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.

How exactly did you get promoted to General?

I don't know how many different ways to say this. You cannot gleam any meaningful data from screenshots of a retina display that is viewed on a non retina one. It's like determining that the picture on a HDTV sucks judging from how a commercial for one looks on a regular SD TV.

If you are really concerned with what the internet will look like on an iPad, look at the internet on an iPhone 4 or 4s. (or lay out 4 iphone 4s and tape them together.)

Or you could just wait for the reviews to come out in a few hours.

 

[xraydoc]

2x2 pixels at 132 ppi = 4x4 pixels at 264 ppi. Will look same.
Scaling an image up 200% then viewing it at a pixel density twice as high will make it effectively identical (same surface area on the iPad's screen).
This is a non-issue.

Web pages and non-retina enhanced apps will look on the iPad 3 exactly as they look on the iPad 1/2. You'll believe they look worse because apps enhanced with high-DPI icons, buttons, arrows, UI elements, etc., will look so much nicer that it will be immediately apparent which apps are which.

 

[wodeh]

2x2 pixels at 132 ppi = 4x4 pixels at 264 ppi. Will look same.

That's the problem.

Everything else will be displayed in the native resolution, whereas old non-native images will appear, effectively, exactly as they would appear on a 1024*768 resolution iPad.

Because you'll be viewing "high definition" text alongside "low definition" images the contrast is stark and jarring.

I've developed mobile websites professionally and seen exactly this contrast effect on the iPhone 4 when content images are not in a sufficient resolution to look decent and thus stick out like a sore thumb against higher resolution UI graphics and text.

This is far more a problem for the iPad because, unlike on an iPhone, images and content on normal, non-mobile-optimised websites are not always scaled down. So the crisp, smooth text and CSS3 elements (drop shadows, gradients, rounded corners, etc) contrasted with old, lower resolution images will be noticeable.

 

[Lukeyy19]

this is the exact same image you posted before, Zoom in and tell me again what the problem is?

 

[ezekielrage_99]

Best troll ever

 

[hifoo45]

this is the exact same image you posted before, Zoom in and tell me again what the problem is?

The problem is that you are calling the full-res image and just turning it in to a thumbnail size. 99% of sites want to save bandwidth and don't scale Hi-res images down, they design them to 100% and save them out as that.

 

[xraydoc]

That's the problem.

Everything else will be displayed in the native resolution, whereas old non-native images will appear, effectively, exactly as they would appear on a 1024*768 resolution iPad.

Because you'll be viewing "high definition" text alongside "low definition" images the contrast is stark and jarring.

I've developed mobile websites professionally and seen exactly this contrast effect on the iPhone 4 when content images are not in a sufficient resolution to look decent and thus stick out like a sore thumb against higher resolution UI graphics and text.

Agreed, though I don't think it will be as jarring as you think. I read websites scaled up a notch in Safari on my 27" iMac. The text gets sharper, the graphics get scaled up a notch but even then it doesn't look bad. It'll work even better on the iPad 3 thanks to its high-DPI screen.

You're correct, but I don't think it'll look that bad. Since web graphics looks just fine on the iPad 1/2, I don't think they'll look out of place surrounded by ultra-crisp text.

Of course, this is a "problem" that will require a long-term solution as Macs and other devices continue to move to high-DPI screens but web graphics and web UI elements continue to be designed at 72 and/or 96 DPI.

 

[KeithJenner]

I understand that this stuff may be difficult for smaller minds to understand.

Maybe it's because of my small mind, but I'm never sure whether to be amazed, or actually a bit impressed when someone says something like that.

 

[Lukeyy19]

The problem is that you are calling the full-res image and just turning it in to a thumbnail size. 99% of sites want to save bandwidth and don't scale Hi-res images down, they design them to 100% and save them out as that.

indeed but if they want their images to work on a new iPad, then that's a simple way to do it, they don't have to use a really high res image, just one that is twice the size.

I'm not saying it's the best course of action, but its one way if you want your website's images to look crisp on the new iPad, and any other high resolution screens we see in the future.

It was simply to demonstrate, that it's not impossible.

 

[apeterenko]

I got your back General. SOme people on here are just sad.

 

[Diversion]

Actually you're going to experience the opposite.. Every website will look a lot prettier and cleaner on the iPad3 Retina display.. It will scale much better due to the extra realestate in pixels... Images will be crisper, text will be nearly paper-like... You'll find yourself NOT zooming in.. probably never again.. Not that I ever zoomed in on the iPad1/2, all text was legible without zooming.. I only need to zoom on occasion with the 4/4S depending on how much content is on the website i'm looking at.

Makes sense I hope... Basically, browsing has gotten a lot cleaner and easier on the eyes with the iPad3.

 

[Kendo]

To the OP, I understand what you are saying even though others here don't. But in the end, does it really matter? Don't stress trying to prove everyone wrong here. The reality is that even if what you say is true, it doesn't change anything. We're still stuck with what we have. Proving them wrong or right won't change anything. Come Friday we will all be using our new iPads and not caring.

 

[Yggbert]

Do you really think Apple will release a device that will cause every website to look muddy and pixelated on the images? I get the concern, but come on guys. Not even Apple have enough clout to demand websites cater for Retina.

 

[AlxRymnd914]

Don't worry General, I posted about this same issue over a year ago and got the same backlash. https://forums.macrumors.com/threads/1093540/ Not sure if people just don't understand or are in denial. Everyone will see it in person come friday, but of course some people just don't have the eye to see the differences.

iOS scales up or down to fit the width of the screen, and now with the massive retina resolution almost all sites will have to scale up, text and css will scale beautifully but images will look muddy and pixelated.

Wow, those replies are ridiculous. OP is right. In that screen shot, you can clearly tell that the paragraph of text is clear and the website's main logo in the upper left is blurry. You have to view the image at 100% because it would be 100% on the ipad.

----------

The problem is that you are calling the full-res image and just turning it in to a thumbnail size. 99% of sites want to save bandwidth and don't scale Hi-res images down, they design them to 100% and save them out as that.

And that is what the OP is asking! He wants a way to call @2X images specifically when it is a retina iPad.

 

[lianlua]

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.

Technically true, but typically irrelevant. Web designers don't need to "take advantage" of the retina display, because most artwork is already designed on an assumption of 1280x1024 as a matter of practice. Since the retina iOS devices report their resolution as half their physical resolution (the iPad 2 and the iPad 3 both report their resolution in the browser as 1024x768), you are grossly overstating the issue.

It's not directly comparable to native apps needing to be reworked.

Most website artwork is going to look just fine, because it will actually still be scaled down for presentation. 1024x768 effective resolution is a touch low for most websites. What it most affects is zooming and panning--with crisper text, you'll be able to look at most websites zoomed further out than on existing iPads, which will actually help with low-quality images.

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.

Yes, and the same thing happened where people started saying that all 480i content had to be chucked in the rubbish bin because of the higher resolution HDTVs, without taking into consideration the other factors like size, distance, and encoding. On smaller HDTVs, analog content looks just fine. On the iPad, normal websites are going to be just fine, too.

You want to have a pixel of information in an image for each pixel of your display in order to produce the sharpest result.

Yes, but in that case, you would be producing a level of sharpness that would be of little benefit, because you're still dealing with relatively small physical sizes.

High resolution laptops have been browsing the web at imprecise scaling without major issue for years. The new iPad won't really change that.

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.

That might be for the best, since your grasp on what's going on isn't faultless, and your responses leave a lot to be desired.

Wow, those replies are ridiculous. OP is right. In that screen shot, you can clearly tell that the paragraph of text is clear and the website's main logo in the upper left is blurry. You have to view the image at 100% because it would be 100% on the ipad.

No, you'd need to view these screenshots at approximately 50% to get a life-size effect. What you're missing is that viewing the full-size screenshot is not comparable to how it would display on a monitor with a very different pixel density.

OP even covered this for you:
"Yeah, they're on a non-retina screen. That's why the images are so much larger in physical size than on a iPad."

 

[smileyborg]

I'm amazed at how many people in this thread confidently posted that the OP is dumb and wrong, when they obviously do not understand how the iPhone 4/4S and new iPad deal with pixel ratios.

 

[AlxRymnd914]

No, you'd need to view these screenshots at approximately 50% to get a life-size effect. What you're missing is that viewing the full-size screenshot is not comparable to how it would display on a monitor with a very different pixel density.

OP even covered this for you:
"Yeah, they're on a non-retina screen. That's why the images are so much larger in physical size than on a iPad."

No, that is wrong. If you view it at 100% on a computer, you can see EVERY SINGLE PIXEL. If you viewed it at 50%, you would be cutting out a lot of pixels.

When the image is on the new iPad. You are viewing EVERY SINGLE PIXEL. So, it is a direct comparison. The only difference is that you have to scroll around on a monitor to see all of the pixels.

The whole point is about viewing all the information that is there. If you view it at 50% you are cutting some of that out and that doesn't make sense for a comparison.

I'm very sure that the OP (as well as everyone else stating this) doesn't mean the web browsing experience will be ****. It will still look very good. But! The images on a web page can still use some improvement with the retina display.

 

[Hoggles]

Oh dear lord. Who are these people who start threads like this?

Hey General.... it's time to start commanding the forces of knowledge.

My home theater PC is connected to my 50" plasma.

Everything looks fantastic. Web pages, pics, games you name it.

You posted a pic with a 300X400 res. Ummmm dude... a low res pic like that will look horrible on ANY display if you try to blow it up larger than the paltry 300X400 it started out as.

Common Sense people.

 

[lianlua]

I'm amazed at how many people in this thread confidently posted that the OP is dumb and wrong, when they obviously do not understand how the iPhone 4/4S and new iPad deal with pixel ratios.

He's not technically wrong, but the implied premise of "every website will be non-retina" is that it will somehow impair the experience or make every web developer on earth need to rush out and do major work with the graphics on his or her site to be usable. That's completely untrue.

It's like saying every video is non-retina or every PDF is non-retina or every point and shoot photo is non-retina. Technically, all of those things are at least sometimes true, because all visuals until very recently operated under very different assumptions about pixel density. Even 1080p Blu-rays are technically non-retina, requiring about 5% upscaling to fill the screen width.

The basic problem is that web developers and designers overwhelmingly work in pixel dimensions instead of scaling dimensions, because vector graphics really haven't taken off yet, and that means people with giant monitors suffer with sites crammed into a corner of a large browser window, or small displays have to scroll for ages. On the iPad, it means that some artwork that is sized for a 1280x1024, 100-120ppi display, will be a touch different.

But there are two competing elements here: the softening that comes from most resampling algorithms will face off against the sharpening that comes from tighter pixel pitch. The end result is virtually impossible to demonstrate in photographs.

For the sake of comparison, the screen shot earlier in the thread from the iPad is shown here on the left at 100% physical scale, vs. the same page loaded in Chrome under 10.7.2 on a 15" 1440x900 MBP. They are generally very similar, and the screenshot on the left does not take into account pixel spacing, because both images are displayed on the same display.

 

[lianlua]

No, that is wrong. If you view it at 100% on a computer, you can see EVERY SINGLE PIXEL. If you viewed it at 50%, you would be cutting out a lot of pixels.

100% on a computer is showing every pixel at roughly double its size. It is not at all indicative of the physical display.

Taken another way, if you want to look at the screenshot at 100% to inspect every single pixel, then you need to zoom your browser to about 200% to make the comparison so you're looking at images at the same physical scale.

The only difference is that you have to scroll around on a monitor to see all of the pixels.

That's not the only difference. There are major differences in the physical size of pixels, the spacing between pixels, and even the encoding of the image versus the live rendering.

 

[AlxRymnd914]

100% on a computer is showing every pixel at roughly double its size. It is not at all indicative of the physical display.

Taken another way, if you want to look at the screenshot at 100% to inspect every single pixel, then you need to zoom your browser to about 200% to make the comparison so you're looking at images at the same physical scale.

That's not the only difference. There are major differences in the physical size of pixels, the spacing between pixels, and even the encoding of the image versus the live rendering.

I'm not sure what you are trying to explain. It doesn't matter. The simplest proof of the OP is that in the original screen shot he posted from the new iPad, the images on the website are blurry due to up-scaling and the text is clear due to being natively rendered on the iPad. There is no arguing those facts. I'm not sure what is keeping you from understanding this, but I don't have the time to prove my point over and over.

----------

Oh dear lord. Who are these people who start threads like this?

Hey General.... it's time to start commanding the forces of knowledge.

My home theater PC is connected to my 50" plasma.

Everything looks fantastic. Web pages, pics, games you name it.

You posted a pic with a 300X400 res. Ummmm dude... a low res pic like that will look horrible on ANY display if you try to blow it up larger than the paltry 300X400 it started out as.

Common Sense people.

He posted this picture.

Please look at that on your computer at 100% and tell me that the upper left image is not blurry along with every other image-based thing on that page. That whole image fits on your iPad and the iPad shows every single one of those blurred pixels.

 

[Mortalias]

What the TC is saying is right, and is even apparent on iPhone 4 and 4S models today.

The only question I have is how relevant is this information? I can't imagine this type of issue causing potential buyers to turn away from the new iPad. At the end of the day, it becomes a "who cares?"

 

[AlxRymnd914]

What the TC is saying is right, and is even apparent on iPhone 4 and 4S models today.

The only question I have is how relevant is this information? I can't imagine this type of issue causing potential buyers to turn away from the new iPad. At the end of the day, it becomes a "who cares?"

It's not a deal-breaking issue at all, but it IS something that can be improved upon in websites. That is all the OP was trying to do. He was stating the issue and asking how he could deal with it in his own websites. Then, everyone called him stupid, basically.

 

[lianlua]

I'm not sure what you are trying to explain. It doesn't matter.

It does matter, no matter how hard you try to avoid the truth. A pixel is a mathematical, not a physical unit of measure.

Zoom in on any browser tab to 200% you have open right now. How blurry and blocky do graphics look? Pretty gross. If you browsed at 200% all the time, it would be annoying and problematic.

But in normal use at 100%, it looks fine. It's the same with the iPad screen shot you keep harping on about. Looking at it on a 110ppi monitor at 100% is showing each pixel more than twice the size it really is on the iPad, blowing it totally out of proportion.

The simplest proof of the OP is that in the original screen shot he posted from the new iPad, the images on the website are blurry due to up-scaling and the text is clear due to being natively rendered on the iPad.

Viewing the screenshot at 100% size on your computer is like viewing it at 230% on the iPad.

There is no arguing those facts. I'm not sure what is keeping you from understanding this, but I don't have the time to prove my point over and over.

Instead of trying to prove a point, maybe you should stop to consider what you're missing.

That whole image fits on your iPad and the iPad shows every single one of those blurred pixels.

At less than half the size of what you're looking at. It's not remotely the same thing, not least of which because a pixel is by definition a single point and can't be "blurred".