15 replies to this topic

[Ocean West]

would like to toss in a request to incorporate a way to swap logos/graphic for retina displays.

I came across this...

http://retinajs.com/

[Cyrem]

I don't understand the point in this.

Give lower quality pictures to people browsing via their PC or other devices and higher if they are on an iPad?

Why does Apple get special treatment? why not offer high quality to all devices?

[Mikey B]

Why does Apple get special treatment? why not offer high quality to all devices?

Because at the moment, only Apple offers "retina", IE, show higher quality images on a smaller resolution, as I understand it.

[Marcher Technologies]

Because at the moment, only Apple offers "retina", IE, show higher quality images on a smaller resolution, as I understand it.

Umm... but the Laptop with a decent resolution or a home box with an OS and HD Displays deserves lo-res?
Agreeing with Cyrem... it makes no sense to serve only for retina display.... I'm not a fan of excessive high-res images, which slows loading a bit regardless, but have Clients who would be livid at the mere suggestion made here.... serving retina displays solely the high-res images.

[Lewis P]

The resolution of the devices are irrelevant. Although the iPad 3 (2048x1536) and Macbook Pro with Retina (2880x1800) are higher resolution, they're pixel doubled, so 1 normal pixel = 4 pixels on those screens. You cam use the hi-res images on a 1080p 13" laptop screen and you won't see any difference.

You *need* the higher resolution images to make it look really good. I'll get you some screenshots of my forum later. It's all CSS changes and more images. They only load for iPad 3 (and Retina Macbook) users, and if you use sprites (and losslessly compress your images), the bandwidth/filesize isn't really a problem - you're talking 100kb compared to about 70kb.

[Rikki]

Cyrem & Marcher: If you served all devices the retina images, they would be twice as big as they are now. I assume that is not what is being suggested.

HD refers to your resolution, which makes no difference. Retina refers to pixel density and allows for higher quality images in the same amount of space. The OP is asking us to provide retina versions of images so they look right on retina displays. While Apple are the only manufacturer using them right now, that will change.

[Ocean West]

I was only suggesting higher resolutions for only key elements such as branding logos, and provide them so they load dynamically for device so to be courteous of bandwidth constraints.

[Lewis P]

As promised, have some full-res screenshots. Took long enough... damn Photo Stream! (Clicky: Standard - Retina)

I've cropped it to the corner of the page where the differences are, you'll probably need to open them in Photoshop or something to view them at 100%. Not a major difference in quality on standard screens, but when you're viewing it on the iPad, there is a large difference. (Oh, and ignore the extra border on the content area, I strip that out on all touch devices because it fixes a few alignment issues,

Anyway, that's all CSS and images. No HTML changes (except changing from using inline images to using spans with background images) to make the retina work itself. It's not pretty, but it works.

-----

Still... think of it this way - having a non-optimised website isn't exactly unusual right now, and it doesn't make anything look bad. Having an optimised website is great, and really makes the screen stand out (the text is automatically upscaled, it's only images).

I only did our site because I use my iPad quite a lot for general browsing and small details annoy me, but I've not had one single comment regarding the retina images from any of our user base, and quite a lot of people use the new iPad for browsing. I don't think most people care.

Does it drastically affect the usability of the site? No. Worth IPS putting development time into? Maybe.


-----

On a similar topic, correct me if I'm wrong, but I don't believe the mobile skin supports the iPhone 4 (and 4s) yet properly... some of the images (in the menu) aren't exactly HQ when browsing (it has been a while since I've used an iPhone though)

[8central]

The bottom line:

(a) Retina-level High resolution graphics make no difference whatsoever on all devices except when it comes to photographs, which do not apply here.

(b) File bloat is clearly not worth the tradeoff as the images will take much longer to download.

© Sprites only work well with images that can be optimized into the same PNG.

My site looks sparkling on a high res display like the Nexus 7 and the 720p 4G phones as well as my HD monitor.

[Lewis P]

But they are high-resolution displays, not high-DPI displays. Major difference.

[Wolfie]

If they're roughly the same size (slightly larger), then why not just offer the 'retina' version to everyone and be done with it?

[Martin A.]

Because retina images are twice as big as 'normal' images.

EDIT:
vs

[Lewis P]

Yup. And if you scale down an image with HTML/CSS, it's probably going to look different in every browser because of the way it resamples images. The method I've chosen isn't pretty, but as I said, it works for me, but might not for someone else.

If you really want to play cool, you can use SVG graphics, but I dunno how that works with IE etc....

[Mark]

The bottom line:

(a) Retina-level High resolution graphics make no difference whatsoever on all devices except when it comes to photographs, which do not apply here.

(b) File bloat is clearly not worth the tradeoff as the images will take much longer to download.

© Sprites only work well with images that can be optimized into the same PNG.

My site looks sparkling on a high res display like the Nexus 7 and the 720p 4G phones as well as my HD monitor.

Not really. On devices which support them (which is currently only a small handful of Apple products), there is a notable improvement to serve the appropriately sized images. And on normal connection speeds there's very little difference in the actual download speed (to use the images Martin just posted and my current connection speed as an example - the difference in time it would take to download (theoretically) is 0.009 seconds).

[8central]

Not really. On devices which support them (which is currently only a small handful of Apple products), there is a notable improvement to serve the appropriately sized images. And on normal connection speeds there's very little difference in the actual download speed (to use the images Martin just posted and my current connection speed as an example - the difference in time it would take to download (theoretically) is 0.009 seconds).

I'm not sure I comprehend. Retina optimized jpgs will be larger because they contain information. The badges you see above have much less differential data and can be optimized. The color palette, for example, will be the difference of 256 colors or 2048 and a much higher color setting. If that's why there is such a minute difference in download time then I saw (a) fine, go ahead IF the file size is similar, and (b) if this prevents other important things to be done then forget it since there is a marginal return on time investment.

[Jimi Wikman]

...or you can simply go with SVG images for mobile devices