or Connect
AppleInsider › Forums › Mobile › iPhone › Apple's iPhone 4 simulator shows off Retina resolution
New Posts  All Forums:Forum Nav:

Apple's iPhone 4 simulator shows off Retina resolution

post #1 of 36
Thread Starter 
The iPhone 4 simulator included in Apple's iOS 4 development tools provides an early look at how much clarity the increased resolution of the new Retina Display delivers.

The iOS SDK simulator can render an app's images, user interface controls and text at the resolution of both the existing iPhone/iPod touch (320x480) and the new iPhone 4 (640x960).

The detail photo shown below, provided by an iOS developer, presents both images at the same scale, illustrating the difference the higher resolution density makes in text clarity and graphics.

Note that bitmapped images created at the iPhone's exiting resolution, including the "ai" logo and the "search AI" field in the AppleInsider mobile web page (shown below), are not affected by the increased resolution and will need to be updated to appear as sharp as the native controls used in the Safari app.

Text and vector images are rendered at the full resolution, however, without any work by the mobile app or web sites.



This capture of Safari operating in landscape orientation with its keyboard visible shows off the additional clarity and sharpness delivered by the iPhone 4's new display.





The iPhone 4's 326ppi TFT Retina Display leapfrogs existing high end Android phones with resolutions of 480x854 TFT (Verizon Droid, 265ppi) or 800x480 OLED (Nexus One / HTC Incredible, 254ppi, but drops pixels to deliver an effective subpixel resolution of 392x653) or 480x800 TFT (HTC Evo, 217ppi due to being a larger screen).

While a large number of the more than 50 million existing iPhone users worldwide are likely to upgrade to the new iPhone 4, Verizon and Sprint users who just signed two year contracts on Android phones in the last six months are unlikely to race out to buy the next higher resolution devices that become available, particularly given that US service providers are now forcing users to pay as much as $350 in early termination fees.
post #2 of 36
Man, we STILL can't escape the mobile-formatted version of AI...
post #3 of 36
Quote:
Originally Posted by AppleInsider View Post

While a large number of the more than 50 million existing iPhone users worldwide are likely to upgrade to the new iPhone 4, Verizon and Sprint users who just signed two year contracts on Android phones in the last six months are unlikely to race out to buy the next higher resolution devices that become available, particularly given that US service providers are now forcing users to pay as much as $350 in early termination fees.

Well...seems like you can either pay the 599 contract-free price, or get the 299 early-term price, in which case if you leave, it costs you about 599...give or take.
post #4 of 36
Quote:
Originally Posted by Mazda 3s View Post

Man, we STILL can't escape the mobile-formatted version of AI...

Actually, we just worked on overhauling it. It looks almost the same but functions differently, hopefully more towards everyone's liking. I'll make it live shortly.

K
EIC- AppleInsider.com
Questions and comments to : kasper@appleinsider.com
Reply
EIC- AppleInsider.com
Questions and comments to : kasper@appleinsider.com
Reply
post #5 of 36
All that sharpness and useable in daylight too. I’ll take one!

By the way, some of the article images are actually shown smaller (with the softening that scaling causes) than the pixel size of the actual iPhone 4. So the real thing would be even higher-res and sharper. The big keyboard images are 600 tall instead of 640. (I’m not looking at the cropping, but actual scaling.)
post #6 of 36
Quote:
Originally Posted by AppleInsider View Post

Note that bitmapped images created at the iPhone's exiting resolution, including the "ai" logo and the "search AI" field in the AppleInsider mobile web page (shown below), are not affected by the increased resolution and will need to be updated to appear as sharp as the native controls used in the Safari app.

What are the implications of this? And I am quite shocked no one is talking about it!

Are we now going to see web pages grow larger in terms of filesize, chewing up bandwidth, only because web designers are now going to start saving bitmap graphics at higher resolutions than 72dpi, so they display more sharply on the iPhone 4?
post #7 of 36
Me Want.
post #8 of 36
Quote:
Originally Posted by Kasper View Post

Actually, we just worked on overhauling it. It looks almost the same but functions differently, hopefully more towards everyone's liking. I'll make it live shortly.

K

Excellent!


edit: Scratch that logo comment. I got fixated on the blown up size of the logo for a second.
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
post #9 of 36
Quote:
Originally Posted by JDW View Post

What are the implications of this? And I am quite shocked no one is talking about it!

You don't know the implications, yet you're shocked no one is talking about it?

Quote:
Originally Posted by JDW View Post

Are we now going to see web pages grow larger in terms of filesize, chewing up bandwidth, only because web designers are now going to start saving bitmap graphics at higher resolutions than 72dpi, so they display more sharply on the iPhone 4?

No. You may see sites however create 2x images specifically for iPhone 4 versions of sites, but that's about it. Sites like NYT that do not have an iPhone "optimized" version will display beautifully on this new display, as all of those images were designed with a desktop display in mind.
post #10 of 36
Quote:
Originally Posted by solipsism View Post

Excellent!


Fingers crossed! Yippee!!
post #11 of 36
Quote:
Originally Posted by Matthew Yohe View Post

You don't know the implications, yet you're shocked no one is talking about it?

I think his statement is reasonable. Sometimes we notice things in retrospect. For example, the iPad rendering the iPhone 4 at 1:1 without the ugly 2x option. I hadn't thought of that, but then wondered why it hadn't been mentioned earlier by someone more clever than me.

Quote:
[No. You may see sites however create 2x images specifically for iPhone 4 versions of sites, but that's about it. Sites like NYT that do not have an iPhone "optimized" version will display beautifully on this new display, as all of those images were designed with a desktop display in mind.

Yeah, all we're really talking for websites are mostly elements, not full on images which are likely still optimized for fullsized monitors when clicked. The AI logo in the example is 4Kb go to 4x the resolution won't make that GIF even close to 4x as large, but even if it did, I'd wager it's still small compared to other data we access in browsers and won't affect DL speeds by noticable amount on a site like iphone.appleinisder.com. For those near 200MB/month they may want to get the 2GB option, but I don't think it'll be a real issue for anybody.
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
post #12 of 36
Quote:
Originally Posted by JDW View Post

What are the implications of this? And I am quite shocked no one is talking about it!

Are we now going to see web pages grow larger in terms of filesize, chewing up bandwidth, only because web designers are now going to start saving bitmap graphics at higher resolutions than 72dpi, so they display more sharply on the iPhone 4?

No, if anything, they should be more streamlined. Bitmapped images are usually larger in size and do not scale, while a vector graphic is the same size or smaller if made correctly and will scale with the resolution of the screen.
post #13 of 36
Quote:
Originally Posted by Matthew Yohe View Post

No. You may see sites however create 2x images specifically for iPhone 4 versions of sites, but that's about it. Sites like NYT that do not have an iPhone "optimized" version will display beautifully on this new display, as all of those images were designed with a desktop display in mind.


I don't know. Maybe there is a way programatically to take advantage of higher resolution but when you scale images in the browser bad things happen to the quality.

I made a sample test. There are four images, the top two are jpg and the bottom two are png. Actually the results are the same so it is irrelevant which file format you use. The point is, the top image of each pair is a high res image scaled and the bottom one is regular 72 dpi not scaled. You can see for yourself that the high res image is inferior due to scaling.

Test Page

Life is too short to drink bad coffee.

Reply

Life is too short to drink bad coffee.

Reply
post #14 of 36
Quote:
Originally Posted by JDW View Post

What are the implications of this? And I am quite shocked no one is talking about it!

Are we now going to see web pages grow larger in terms of filesize, chewing up bandwidth, only because web designers are now going to start saving bitmap graphics at higher resolutions than 72dpi, so they display more sharply on the iPhone 4?

Shouldn't be too tough the server can just check the request and serve up higher resolution graphics based on the PPI of the device. Or the website could just switch to vectors for graphics which would like the even smaller than the original image.
post #15 of 36
I bought a verizon droid six months ago and since i bought it when it first came out my etf will only be about $140. So in other words i will be rushing out to buy an iphone.
post #16 of 36
Quote:
Originally Posted by number9 View Post

No, if anything, they should be more streamlined. Bitmapped images are usually larger in size and do not scale, while a vector graphic is the same size or smaller if made correctly and will scale with the resolution of the screen.

I'm by no means an expert on graphics so please correct me if I'm wrong, but I am under the impression that vectored images are best when try don't contain a lot of detail and at small sizes can be significantly larger than bitmaps.

Not the size of the AI logo In the arrticle. What would be the file size for that same image, since it is simple? Is their proxessing overhead for vector over bitmap that can slow down the page render? If vector images are generally ideal why does Apple offer Icon Composer and create all it's apps as 16^2, 32^2, 128^2, 256^2, and 512^2 as bitmaps?
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
post #17 of 36
anyone else notice why the address overlaps the address bar in the second landscape view screenshot? strange
post #18 of 36
Looks fantastic...Thanks AI for posting it. Now I want a 4G even more!
post #19 of 36
Quote:
Originally Posted by solipsism View Post

I'm by no means an expert on graphics so please correct me if I'm wrong, but I am under the impression that vectored images are best when try don't contain a lot of detail and at small sizes can be significantly larger than bitmaps.

Not the size of the AI logo In the arrticle. What would be the file size for that same image, since it is simple? Is their proxessing overhead for vector over bitmap that can slow down the page render? If vector images are generally ideal why does Apple offer Icon Composer and create all it's apps as 16^2, 32^2, 128^2, 256^2, and 512^2 as bitmaps?

As you indicated, It all depends on the complexity of the image and the supported features of the vector format. Also, is the vector format binary, text, or compressed text. Any comparison would have to be done with JPG or PNG vs SVG. Then again, this presumes that the resolution of the image is suitable for all display devices and scales. Bitmaps would have to be available in multiple sizes, whereas a vector can be scaled to almost any resolution.
post #20 of 36
I want one for sure. Hope it will help my iSight, because I started wearing reading glasses few months after I got my first iPhone in June 2007. But then most people my age use glasses for reading.
post #21 of 36
I don't get the crazy talk about web site graphics on the new iPhone. Safari scales down the images for viewing. If you zoom in all the way it will display the image at full resolution. Same will be the case with the iPhone 4, but the threshold for Full resolution will be half that on the previous models. In other words you will see an image displayed at it's full resolution at half the screen size of the old iPhones and thus will see more. No one will make sites with higher resolution graphics as web browsers are pixel to pixel not DPI.

So at full resolution you will get twice (or 4 times by area) the view on an iPhone 4. Fonts are rendered sharper, but same size. Vector art will be sharper, but same size. Web sites stay the same.
post #22 of 36
Quote:
Originally Posted by solipsism View Post

I think his statement is reasonable. Sometimes we notice things in retrospect. For example, the iPad rendering the iPhone 4 at 1:1 without the ugly 2x option. I had thought of that, but then wondered why it hadn't been mentioned earlier by someone more clever than me.

Totally valid. I hope this means the up-scaling of iPhone apps on an iPad running iOS4 will get the same enhancement too. Hopefully along with some general bit-image resolution enhancement too.

McD
Why does somebody ask me a question, I can never understand, I can never provide the answer, but believe I can.
Reply
Why does somebody ask me a question, I can never understand, I can never provide the answer, but believe I can.
Reply
post #23 of 36
Quote:
Originally Posted by number9 View Post

No, if anything, they should be more streamlined. Bitmapped images are usually larger in size and do not scale, while a vector graphic is the same size or smaller if made correctly and will scale with the resolution of the screen.

That's great, but who uses vector graphics for web sites layouts? It's not widely practiced. I don't think iOS 4 will change that. I don't think larger raster images would be difficult or prohibitive. I think web sites will probably stay the same except for some proof of concepts and a few enthusiastic fans.

Quote:
Originally Posted by McDave View Post

Totally valid. I hope this means the up-scaling of iPhone apps on an iPad running iOS4 will get the same enhancement too. Hopefully along with some general bit-image resolution enhancement too.

There was a small amount of speculation about whether the iPad upscaling would render text natively to the screen or just be a fuzzy or blocky upscale. Now that the iPhone gets this capability, I think it's far more likely than not the iPad will do this too unless there is some hang-up they can't solve, even then, I think it will happen eventually. The devices are so similar that it's almost not funny, the differences are almost totally irrelevant to the question of resolution independence.
post #24 of 36
Quote:
Originally Posted by JeffDM View Post

That's great, but who uses vector graphics for web sites layouts? It's not widely practiced. I don't think iOS 4 will change that. I don't think larger raster images would be difficult or prohibitive. I think web sites will probably stay the same except for some proof of concepts and a few enthusiastic fans.

I believe HTML5 includes native support for SVG which is also XML based. This could mean big changes in many images and graphics which can now be dynamically data driven.

Daniel Swanson

Reply

Daniel Swanson

Reply
post #25 of 36
Quote:
Originally Posted by OC4Theo View Post

I want one for sure. Hope it will help my iSight, because I started wearing reading glasses few months after I got my first iPhone in June 2007. But then most people my age use glasses for reading.

Well sights like ai are tough on the eyes for us more experinced folks.
Hokey religions and ancient weapons are no match for a good blaster by your side, kid.
Reply
Hokey religions and ancient weapons are no match for a good blaster by your side, kid.
Reply
post #26 of 36
Quote:
Originally Posted by mstone View Post

I don't know. Maybe there is a way programatically to take advantage of higher resolution but when you scale images in the browser bad things happen to the quality.

I made a sample test. There are four images, the top two are jpg and the bottom two are png. Actually the results are the same so it is irrelevant which file format you use. The point is, the top image of each pair is a high res image scaled and the bottom one is regular 72 dpi not scaled. You can see for yourself that the high res image is inferior due to scaling.

Test Page

Interesting test. Now however it depends on the scaling methodology when scaling down images. Your test probably used the default of "bilinear sampling" which always smooths out images when scaling down. There are other rendering methods which preserve resolution better and preserve sharpness so that the high res image ends up very close to the unscaled image.

That said, it depends on the scaling engine used by the iPhone 4.

At the end of the day, there are two points I think most relevant:

1. When it comes to website, the higher ppi of the iPhone 4 will mean that people can view websites without having to zoom-in as much. If they are viewing at the same zoom levels, then for image-heavy websites there may not be as much benefit than viewing text-heavy websites.

2. A lot of the goals of the iPhone 4's Retina display is oriented towards applications, rather than websites. As some mentioned, right now there is no conventional way of "encoding" a bitmap in a web page to display according to the ppi of the display device. So, it's about the apps, which *will* have the ability to display the right bitmaps according to the ppi of the display device. In other words apps will be the primary area where we will move towards (not quite there yet) resolution-independent user interfaces.
post #27 of 36
Quote:
Originally Posted by solipsism View Post

I'm by no means an expert on graphics so please correct me if I'm wrong, but I am under the impression that vectored images are best when try don't contain a lot of detail and at small sizes can be significantly larger than bitmaps.

Not the size of the AI logo In the arrticle. What would be the file size for that same image, since it is simple? Is their proxessing overhead for vector over bitmap that can slow down the page render? If vector images are generally ideal why does Apple offer Icon Composer and create all it's apps as 16^2, 32^2, 128^2, 256^2, and 512^2 as bitmaps?

Quote:
Originally Posted by ajmas View Post

As you indicated, It all depends on the complexity of the image and the supported features of the vector format. Also, is the vector format binary, text, or compressed text. Any comparison would have to be done with JPG or PNG vs SVG. Then again, this presumes that the resolution of the image is suitable for all display devices and scales. Bitmaps would have to be available in multiple sizes, whereas a vector can be scaled to almost any resolution.

You see, raster vs vector was one of the big battlegrounds in web design before the whole Flash debate came to the forefront.

Currently almost all sites do not incorporate vector graphics in web pages, except for Flash elements. The only thing that could be considered "vector-based" would be background colors, and "div tag and table layouts". Yes, there is SVG, and CSS provides some vector tools. But by convention, for the most part, SVG and CSS shapes are not used (although CSS may be gradually used for eg. drop shadows and rounded corners). If you think Flash is a big deal, the SVG/CSS vector issue has been smoldering for much longer. SVG was supposed to be a saviour in all kinds of ways but it just didn't pan out. In fact PNG support became more important because it offered non-lossy compression as well as alpha channel (transparency).

In an ideal situation everything would be vector based so that it can be rendered at an extremely wide range of sizes and still look fine. Two challenges exist, mainly because the industry did not go this way.

One is the file size, as pointed out in previous posts. Bitmaps provide mostly predictable file sizes and thus can be planned for accordingly. Could intelligent compression be applied to complex vector files in the future? No doubt, and even now sometimes really complex vector files can be surprisingly small.

Two, and more significant, I think, is the rendering of vector files. Let's say for the icons on a Mac desktop. Let's say you open your Applications folder, and have 20 to 40 icons displayed, and you scaled them up and down. At this stage, on Mac or PC, rendering using bitmaps is a heck of a lot faster. Again, I don't think this is a hardware limitation. In the bitmap-based solution, the icons are usually encoded as PNG so they have to be decoded anyway, and the Finder has to resample icons on the fly and display them antialiased with transparency. So the Finder is doing some non-trivial work there already. Another example is we have fast decoding and displaying of demanding video compression eg. H.264, even before GPU acceleration came into the picture.

So if the effort was put into storing, compressing and rendering vector graphics, we could really have had everything really vector based.

I am no expert on early computing and machine/assembly code but I think all this stems from when graphics was first used in personal computers. In those situations, literally bit-mapping each pixel to one bit of data was the most efficient way of displaying complex images. Later, with 256 colours, then 64k(?) then millions of colours, it was just an extension of bit-mapping, only this time applying more bits for each pixel to store colour information. You wanted larger, clearer pictures? Just display more pixels, and give each pixel more bits of colour information. You wanted transparency for blending images over each other? Just give each pixel an additional set of bits on it's level of opacity. But it was still pixel-oriented.

So at the end of the day, only with HTML 5, newer CSS, PDF, Core Image, 3D gaming, 3D interfaces and so on, are we starting to move away from a bitmap-oriented world. But as you see with web pages, existing OS interfaces and disasters like the Wired application, we are still stuck with mapping bits.

While I'm at it, this situation is actually what led to the tremendous rise of Flash circa 2000-2008. Because you could display a lot of vectorised graphics, effects, eg. text layers, transparency, drop shadows, curves, rounded corners and it would scale well (later on bitmaps in Flash would also scale well) to a really wide range of resolutions and look good (and interaction etc would work predictably across browsers!) on almost any computer, albeit it had to have the appropriate Flash version (but each new version of Flash was suitably backwards compatible with older Flash files). Rendering of complex vector art (eg. illustrations) was pretty fast too, so that led to the rise of Flash gaming and Flash advertising... Though said rendering would be crazy sluggish on Macs, and now a big burden on mobile devices.
post #28 of 36
For the rest of us, would I be right to say that what this really means is we'll get sharper images on the iphone 4 when we pinch and zoom in, i.e., there wouldn't be much of a difference if we stuck to viewing the default screen in either the 4 or the 3GS?
post #29 of 36
Quote:
Originally Posted by 1stmac View Post

For the rest of us, would I be right to say that what this really means is we'll get sharper images on the iphone 4 when we pinch and zoom in, i.e., there wouldn't be much of a difference if we stuck to viewing the default screen in either the 4 or the 3GS?

Actually, when viewing the default zoomed-out screen of a web page, it will look very sharp on the iPhone 4 compared to the 3GS. Because there is a lot more resolution there to make everything look like a "fine printed book". Depending on your eyesight you may be able to read a lot more of a web page without having to zoom in.

When you pinch and zoom in, there will be an irregularity more noticeable in the 4 than the 3GS. On the 4, when zoomed-in, images may look either alright or slightly blocky, while text will look very, very crisp.

The iPhone 4 web page viewing, I predict, will be best, when somewhere *between* fully zoomed out and very zoomed in. In this regard it will look much better overall compared to the 3G/3GS.
post #30 of 36
This is a bit of a segue from the topic at hand, but I found the info interesting. Especially the initial use of -webkit-gradient which was slowing down this iPad web app by creating bitmap images.

http://mir.aculo.us/2010/06/04/makin...t-really-fast/
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
Dick Applebaum on whether the iPad is a personal computer: "BTW, I am posting this from my iPad pc while sitting on the throne... personal enough for you?"
Reply
post #31 of 36
They both look the same to me from 9'.
:-D * * * * * * * * * * * * * * * *
Reply
:-D * * * * * * * * * * * * * * * *
Reply
post #32 of 36
Fake.
post #33 of 36
For anyone interested, I'll post some side-by-side comparisons of our app in 1x and 2x, in a moment.
post #34 of 36
Here you go. 1x on the left. 2x on the right. Click to see full size:



icons look great too!

post #35 of 36
Quote:
Originally Posted by the madcapper View Post

for anyone interested, i'll post some side-by-side comparisons of our app in 1x and 2x, in a moment.

WiCKED!
post #36 of 36
This one is pretty cool simulator too... http://iphone4simulator.com . It's a web iphone 4 simulator where devs can test web apps
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: iPhone
AppleInsider › Forums › Mobile › iPhone › Apple's iPhone 4 simulator shows off Retina resolution