Answer this. If the same page is pulled up on an iPad 1 and an iPad 3. In the default view, these two websites will appear the same size on both iPads, right? Both fullscreen? Say there is an image on the website. (ex. Its the logo) Here's the kicker. Is the top left pixel in that image going to be represented by four pixels on the iPad 3? The answer is yes. And to make it grow to the size of the four pixels, the image is up-scaled and therefore, blurred.
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Every website will be non-retina.
- Thread starter The General
- Start date
- Sort by reaction score
Answer this. If the same page is pulled up on an iPad 1 and an iPad 3. In the default view, these two websites will appear the same size on both iPads, right? Both fullscreen? Say there is an image on the website. (ex. Its the logo) Here's the kicker. Is the top left pixel in that image going to be represented by four pixels on the iPad 3? The answer is yes. And to make it grow to the size of the four pixels, the image is up-scaled and therefore, blurred.
I've been updating all the sites I work with for Retina displays since January. I've chosen a mixture of media queries, JavaScript and SVG resources.
My personal site is http://www.andrewkendall.com/ and that is ready, I also run http://www.digitalphotogallery.com/ and I'm making sure that everyone's site is updated for Friday. All of the templates on the system are already working great like http://fullscreen03.templates.digitalphotogallery.com, if anyone gets their iPad early let me know how it looks.
I'm especially excited about galleries on the system like http://photos.secretgardenparty.com/, they are going to look amazing once updated. So far I've only seen things in the emulator so I can't wait for my new iPad to arrive on Friday!
Check out the web interface in the emulator, the resolution is incredible http://media.digitalphotogallery.com/cswfymthaxhy/downloads/dpg_retina_1.png and http://media.digitalphotogallery.com/cswfymthaxhy/downloads/dpg_retina_2.png.
My personal site is http://www.andrewkendall.com/ and that is ready, I also run http://www.digitalphotogallery.com/ and I'm making sure that everyone's site is updated for Friday. All of the templates on the system are already working great like http://fullscreen03.templates.digitalphotogallery.com, if anyone gets their iPad early let me know how it looks.
I'm especially excited about galleries on the system like http://photos.secretgardenparty.com/, they are going to look amazing once updated. So far I've only seen things in the emulator so I can't wait for my new iPad to arrive on Friday!
Check out the web interface in the emulator, the resolution is incredible http://media.digitalphotogallery.com/cswfymthaxhy/downloads/dpg_retina_1.png and http://media.digitalphotogallery.com/cswfymthaxhy/downloads/dpg_retina_2.png.
You've almost got it. Scaling in perfect intervals doesn't blur anything (actually, the exact opposite on retina displays, because the pixels are so much closer together).
Blur is the result of resampling occurring from pixels not mapping to even boundaries. For example, consider an image that is 6 pixels by 10 pixels, with a 2px horizontal line in the center. Scale that to 12x20, and you get a perfect 4 pixel horizontal line. No blur, no loss of alignment.
Now take that same 6x10 image and resize to a 140% scale factor. That's 8.4x14 with a 2.8px line, but that doesn't work. It would end up being 8x14 with a 3px line, which would be thicker and couldn't be precisely aligned to the center of the image.
That's where blur comes from.
What you're talking with the screenshot is pixelation resulted from zooming raster graphics beyond 100% scale, exaggerating the pixel structure of the image. The screenshot looks bad because pixels are showing at more than twice their normal size, requiring resampling on your monitor, because your monitor isn't an even multiple of the iPad's pixel density. Studying a screen shot at 100% on your computer requires your reference image to be similarly scaled (about 230%). It would show many undesirable qualities, too, none of which affect normal use at 100% on the appropriate device.
I understand what you are trying to say. BUT. The sentence I bolded isn't exactly true in this case. If your sentence was true, then there would be no need for app developers to add new graphics to their apps. As you say, the images would just look normal. But they DON'T. The whole point of using quadruple the resolution of the original iPad wasn't so that the old apps would look just as sharp. It was so they could maintain the same aspect ratio making the old apps usable. On the iphone 4, any graphic with an old pre-retina app, that wasn't being rendered in real time (ex. text, vector graphics), was blurry.
I'd like to hear your thought process on this part.
Also, Please explain why they need to update their graphics for apps, but images on a web page don't have to be updated. Have you seen a retina display in person?
P.S. Did you not see the post right below mine? You really think that person has been wasting their time? He even tested his websites in the emulator and had a clear grasp of what needed to be done.
Last edited:
Exactly.
Let sanity reign.
People are so funny. Ya, things will look worse with a 2048 X 1536 res. How can it possibly look better?
Some of these people probably are still not convinced HDTV's look any better than analog.
Last edited:
Thanks. This is great. Not only are you updating your websites to look as sharp as possible on the new iPad, you're also making zooming in and out in Safari on my Mac look a lot better.
----------
I read a couple reviews today. Both mentioned the website issue.
The Verge's review
Daring Fireball's review
This obviously is unavoidable, and it's something Apple can do nothing about. It's definitely not a deal-breaker, that's why I was so mellow in my original post. I was hoping other web designers or developers would post helpful info about how they're dealing with it.
I won't make the mistake of posting technical questions that require any sort of critical thinking on this forum again.
Last edited:
Sigh. No. App developers and web developers are not working with the same constraints. For starters, app developers don't "need" to add new graphics. Using the same old artwork does not make anything worse. Everything looks effectively the same. All lines are exactly the same size, in exactly the same locations. The only visual difference is a result of the tighter pixel pitch, which sharpens, not blurs, the edges of upscaled content on a retina display.
App developers generally chose to upgrade artwork because there are fixed parameters to work with, and they can greatly enhance the experience by perfectly tailoring everything to the display.
That isn't feasible on the web. You have no control over the pixel density of the displays your users use, the resolution, the color profiles, or anything else. Using the de facto web standard of 1280x1024 at 96ppi is the typical reference point. But common computers in use have displays ranging from 90 to 130 ppi, so you have to factor that in. If your site is fixed in pixels rather than a relative measure (e.g., ems), that means the physical size of your site is going to change from device to device. Any user of any browser on any display who changes the physical size is going to require resampling. This isn't new and has nothing to do with retina displays.
With the physical scale of the iPad running an effective 1024x768 at 132ppi in the browser for both retina and non-retina images, all elements are going to be displayed at the exact same physical size. Since there are no lines or pixels that need to be divided fractionally, the images will present in the exact same form and the same level of detail on both devices. You can engineer elements to take advantage of the native resolution to allow deeper zooming of raster images, but you don't lose anything by skipping that work.
Mobile Safari allows for arbitrary scaling of web pages, which is where the issues start to appear, because the resampling has to make best approximations based on the zoom level chosen. This again has nothing to do with retina displays (the same process occurs on an iPad 2), and in fact is improved on the iPad 3 because there are twice as many pixels in the same space, allowing for resampling to do even closer rounding with the math.
Again, you're almost there, but you're missing a key element. Maintaining a 3:2 aspect ratio was possible with any number of other resolutions already available on the market without massive R&D requirements (e.g., any of the several 720x480 displays out there). They spent a ton of money on the retina display specifically to maintain the same level of detail on the screens using the same apps, because perfect 2:1 scaling introduces zero blurring, pixelation, or other distortions.
No, it is not blurrier than it was on the 3GS or earlier, and "being rendered in real time" has nothing to do with it. The non-retina display is the blurrier image because of optical effects. The retina display with pixel-doubling will always be sharper, because the gaps between pixels are smaller.
"Waste" is a relative term, but most importantly, that website has virtually no raster artwork in its layout. What he did mainly was allow the photo galleries on the site to serve up higher-resolution images, a fine advantage on a photography site but not fundamentally different from just displaying the high-res image to start with and letting the browser rescale.
Those aren't the parameters of most web developers, and the marginal gains are generally not worth the extra work and data transfer volume.
If you read the quotes, they're talking about it standing out in contrast to other elements and not standing up to zooming, not on its own merits. That's reflective of the web reference standards being out of date. It doesn't really have anything to do with "retina" or not, and it's something people have been dealing with on all kinds of devices for several years. You can see the same thing by zooming in on your browser today, as many people do.
The only solutions are vector graphics, giant images, or tedious JavaScript and CSS detection hacks. None of this is caused by or unique to the iPad's display.
Last edited by a moderator:
You are wrong, I can't wait until you look at the retina display for yourself in person and see how completely foolish your convoluted explanations really are. You look over blatant comparisons showing proof and provide ridiculous "critical thinking" in return. I don't care what technological terms you recall here. In real world use, you will be able to see the slight blur to all the images.
Also, how can you completely disregard what daring fireball said in their review.
He points out exactly what we have been saying and there is no mention of zooming anywhere so you can't put those words in his mouth.
Like he said, PASSABLE but annoying. You describe these up-scaled graphics as being even sharper?
Ridiculous.
Last edited:
Erm, no. That single pixel you refer to will simply occupy the same screen space but using four pixels. No scaling. No blur. The same coloured pixel copied into four pixels. It will look exactly the same. That's the whole point of exactly doubling the resolution horizontally and vertically; perfect backwards compatibility; images will look identical unless higher DPI versions are provided.
Text however is rendered dynamically and so pages will look great, and be much nicer to read.
About?
Holding one in my hand.
Proof of what? There hasn't been any offered. Your shifting arguments notwithstanding, the scaling of web pages on the new iPad is the same as on the old iPad. Raster images at web-standard dpi just won't hold up to as much zooming.
You can see it anyway on any device. It will stand out more in contrast on the iPad, but so what? If you're browsing the web zoomed way in on the iPad and not on other devices, you're getting exactly what you would expect.
Taking the blur out of the other elements is not the same as adding it to images. Simple truth.
You'd have to zoom in for it to have any effect. At 100%, it can't be any more blurry than it is on any other device at 100%.
Yes, in fact they are. An exact copy of the same image, at 2x scale, with each pixel closer together, produces greater sharpness than the same image at 1x with pixels further apart.
Here's an image from another thread illustrating this. On the left, an iPhone 4 showing a non-retina icon. On the right, an original iPhone. The one on the left is sharper.
Last edited:
The explanation is in the quote.
For starters, the "passable, but annoying" is in reference to non-retina apps, not to websites:
"All of Apple’s software has been updated to retina-caliber graphics. (If they missed anything, I didn’t spot it.) Most third-party apps, of course, have not yet been updated. Just like with the iPhone 4, these up-scaled graphics are passable, but annoying. They stick out like sore thumbs after using true retina-display-optimized apps."
Just like it's not saying that the iPad 2 is now useless and ugly, it's not saying that upscaled apps are worse than before. They just don't have the improvements that retina apps offer.
As for the websites, we're back again at web images being sized for 1280x1024 at 96ppi (and one should generally assume a 384kbps internet connection). The key is in the last sentence. This is not a new problem, and it's not just the iPad affected. It's just now the most prominent because of a perfect storm of a decent screen size (compared to a phone), the razor-sharp text and line elements showing a mix (versus the whole page being slightly blurry), and the fluid pinch-zooming.
"Websites, too — most graphics and images on the web are behind the curve, as of today. Text looks great in Safari, but non-retina images look slightly blurry. The iPad display is so good that it shows, like no device before it, just how crummy most images on the web are."
The point is that the solution is not to serve up special oversized images just for the iPad. The solution is updating the standards for the web to reflect the fact that a 17" monitor at 100ppi is probably not even in the top 10 configurations for web browsing anymore.
Sticking out like sore thumbs is a different statement than "passable, but annoying."
Where have you been for this whole thread?
Huh? Are you serious?
Requote whatever you like. Images are going to be just as blurry on the iPad 2. You're still missing that the complaint isn't about the iPad's treatment of images at all.
I don't care how the iPad handles images. I also have never said there was a problem with the way it handles images. All that matters is how it looks to my eye. That is what we have been saying this whole thread. You didn't answer my questions, also.
I'm going to be updating this post with relevant links.
Say hi, to apple.
Conclusive evidence.
More
This has been discussed before....
Last edited:
Your questions have been answered no fewer than four times.
And not one of your links is saying anything I haven't already. There's obviously some disconnect in your understanding here.
Last edited:
Most people aren't going to notice or care about this "problem." Nothing is going to look worse than it already does, it's just not going to take full advantage of the retina display. If designers/developers REALLY want to take full advantage they shouldn't bother adjusting the size of their images (was it the OP who suggested that? Shows how little he knows...), but rather the dpi count. As someone else mentioned earlier most images online are produced at 96 dpi. What's the display count on the iPad retina display? 260 or 270 something dpi? So create your images at that resolution. Just be prepared for the fact that you'll be sacrificing browsing speed for display quality for a relatively small percentage of your visitors, since file size of all the images will skyrocket. It doesn't seem like a smart trade off to me, so for now I will continue to keep all my images at 96.
Last edited:
It's quite obvious he doesn't understand and doesn't seem to want to. Just tell him that he's right (as that is all he wants to hear) and move along. How he can't see the issue on an iPhone4 is amazing to me. Poor eyesight perhaps... That's probably been the only thing I don't like about mine.
Solid post by the op. I had a good laugh at all the detractors. Great way to start the day.
It seems the iPad3 won't support a 1:1 ratio for browsing the web.. this is disappointing and won't offer any advantage over the iPad1/2.. What's the point in zooming web pages to match the iPad1/2 and not even try to take advantage of the realestate. Ugh.
So yes, this is not an issue with websites, it's an issue with Apple forcing you to see blown up, scaled images in the browser at this point.
Apple, I want to see 1:1 ratio, make the screen useful please.
So yes, this is not an issue with websites, it's an issue with Apple forcing you to see blown up, scaled images in the browser at this point.
Apple, I want to see 1:1 ratio, make the screen useful please.
Images would be awfully small on the iPad 3's screen if the web browser reported its native resolution. Besides, I have no doubt that 3rd party browsers like iCab will implement that feature.
Yes I undestand it would be small, but forcing ALL users to use their iPad3 as if it had a low-resolution screen is a pretty bad move without having an option for better ratios.. I was excited to be able to see more web content without tons of scrolling up and down, but this isn't changing one bit.
In regards to another app, I still don't think Apple is allowing for their Nitro javascript engine to work in 3rd party browser apps, so they will be considerably slower than Safari.