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.
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
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.
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.
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:
![d6t0z.jpg]()
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.
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.
Last edited:
This seems to solve it but it's work:
http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/
http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/
This could be a big boost for web designers. "For just $499 we will make your website 'retina' ready."
No, as you can tell the OP's only computer has ever been an iPad 1.
I'm just going to further rub it in with this post. Screenshots are out. Here's the browser:
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.
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.
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.
I'm just going to further rub it in with this post. Screenshots are out. Here's the browser:
![IMG_0026.PNG]()
View it at 100% to see that text is retina and images are non-retina.
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.
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.