Retina Quality Images...

[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)

[esquire]

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).

[esquire]

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 :)

[sobrenome]

Is IPS 4 going to produce images for retina display under profile pictures and attachments?

As it goes for responsive design, the media queries should serve high resolution images for high resolution displays only.

And the high and low resolution assets should be produced as the images are downloaded.

[opentype]

I am currently playing with 4.0 on a Retina Mac. Here in the topic view the profile images are scaled down to ~50 %, so it’s already Retina-ready. No problem there. 

But an area that is really problematic is emoticons! They look really poor and there is nothing I can do about it. Since the images are served as regular post content, I have no control whatsoever. No backend control to add different images (or SVG), nor can I use CSS to serve higher resolutions and control the size. 

So a short-term improvement would be to serve emoticons in CSS classes so they can be styled. 

<img class="post-emoticon smiling" src="smiling.gif">

That would give at least some control. 

But since high-resolution screens will only become more common, the suite will someday need a full retina support, so scalable image or bitmap images with different resolutions can be added in the backend. 

[opentype]

My current work-around is now:

I upload double-size emoticons (in my case 48px) and then in the CSS file I force each one individually to the half size through their title attribute.

img[title=":smileyname:"] {
 width: 24px;
 height: 24px;
}

Not perfect but the output in the topic looks fine on every screen. 

[Mark]

IPS4 uses "retina" images in almost all cases (a number of us have retina macbook pros so we notice ). Obviously for things like profile photos we can only show what the user uploads, but icons, the buttons on the toolbars, etc. are all "retina ready".

Emoticons is indeed missing at the moment and this won't change for 4.0 because they're a little more complicated (partly because of their customisable nature and partly because we'll actually have to remake all our default emoticons). It's high on our list for a future version though. In the meantime, the CSS opentype posted is a perfect solution if you have double-sized emoticons.

[kysil]

Mark, The alternative can (and should) be Emoji Pack!

[Mark]

That is also a consideration, though since all the good emoji sets except PhantomEmoji are proprietary it makes it a bit complicated. It is something I've thought about though.

[opentype]

Twitter has open-sourced their Emoji set. https://blog.twitter.com/2014/open-sourcing-twitter-emoji-for-everyone

I will use a subset of it with custom colors on my new 4.0 site. 

[sobrenome]

What about the attachment images and gallery? Are retina ready?

[Cyrem]

No Emoji's please, I hate those stupid things and I'll have to manually remove it as my community probably wouldn't take to kindly to them. I wouldn't be against IPS making their own font based emote pack.

 

What about the attachment images and gallery? Are retina ready?

​I have a feeling you don't know what retina is, it's a Apple buzz word to make people think they are cooler than they really are (and it's going out of date anyway). Secondly you don't make user uploaded images "retina ready". It's similar to asking "are user uploaded videos HD ready?". Which as you've probably figured, sounds ridiculous.