
Retina Revolution - smaller images with better quality - aggarwalachal
http://blog.netvlies.nl/design-interactie/retina-revolution/
======
ck2
This test was done COMPLETELY WRONG.

Look at the details on the jpeg settings from the image itself.

Subsampling is turned off for some and on for others, which gives the target
size far fewer bytes to work with.

This is a common problem with photoshop users, they use the highest settings
which turns off subsampling but then reduce the filesize allotment which gives
it less room to work with. You get better results if you have a target
filesize by turning off subsampling first, which photoshop does not do by
default until you drop the quality target very low.

This entire test has to be redone.

Use SUBSAMPLING OFF and PROGRESSIVE ON for all (jpeg) images for the web.

(and do not use default photoshop settings ever for web images)

ps. every time you save a file or image in adobe products it embeds a hidden
fingerprint (beyond exif) that identifies your specific install - so not only
does it add extra file size, every image you post can be traced on the web -
use jpegtran or jpegoptim to strip it

~~~
ken
Counterpoint on progressive JPEG [1]:

> Some people like interlaced or "progressive" images, which load gradually.
> The theory behind these formats is that the user can at least look at a
> fuzzy full-size proxy for the image while all the bits are loading. In
> practice, the user is forced to look at a fuzzy full-size proxy for the
> image while all the bits are loading. Is it done? Well, it looks kind of
> fuzzy. Oh wait, the top of the image seems to be getting a little more
> detail. Maybe it is done now. It is still kind of fuzzy, though. Maybe the
> photographer wasn't using a tripod. Oh wait, it seems to be clearing up now
> ...

[1]: <http://philip.greenspun.com/panda/images>

~~~
ck2
On web sized progressive, the loading is over quickly and the benefit is an
immediate placeholder on even slower connections instead of whitespace.

But the real reason is it also produces smaller file sizes.

~~~
oofabz
Progressive JPEGs are not smaller. They contain the same data, just
rearranged. You can losslessly transform a progressive JPEG into a baseline
JPEG and vice versa, without recompressing it. The jpegtran tool, included
with the standard JPEG library, can do this.

~~~
revertts
Larger images saved as pjpegs tend to be slightly smaller than a standard
jpeg.

<http://www.yuiblog.com/blog/2008/12/05/imageopt-4/>

------
esolyt
"other companies have already started or will also start implementing this new
Retina technology."

That is simply impossible for two reasons:

1) Retina display is a trademarked Apple phrase and no other company will ever
have retina displays. 2) Retina is not a technology.

I think the word technology is being overused these days.

The author was simply talking about high-PPI displays when he said "this new
Retina technology", which other companies have already "implemented" in their
smartphone displays. Unless one is talking only about Apple products (which is
not the case here) the term retina display should not be used.

~~~
radley
For most people, Retina is synonymous with High-PPI, like Kleenex for tissue
or Coke for cola. Retina is easier to say & understand. High-PPI is lost in a
sea of resolution jargon.

~~~
Groxx
Not that "High-PPI" is all that useful of a term either, any more than "Ultra
High Frequency" or "Very High Frequency" or "Super High Frequency".

~~~
hayksaakian
High PPI is the literal description of the phenomena referred to by the OP.
Its not a buzzword or a trademark, its a technical specification.

~~~
Groxx
326 PPI is a technical specification. "High PPI" is a buzzword used to sell
things - our current use of it will be invalid in a few years.

edit: deleted first sentence, was more off-topic than useful.

~~~
esolyt
I don't think we need terms like "retina" or "high PPI" at all. Consumers can
decide which PPI is good enough for themselves.

Sharp is now producing 5-inch 1920x1080 443 PPI displays. Obviously this is
much higher than anything we have ever seen, so it is not a "retina display".
What should we call it? Instead of "cornea display" or "very high PPI", I
prefer the term "443 PPI".

------
Osmium
This is incredible. I can't believe it's taken this long for someone to
realise this (at least, it doesn't seem like common knowledge to me). Just
commenting for the benefit of anyone without a retina display -- the
differences really are stunning. It's like night and day, and to do that while
still reducing file sizes seems crazy.

So, this raises the question: should this become standard practice from now
on. If not, why not?

Poor headline though.

~~~
mddw
It should not.

An outdated computer/browsers sucks at resizing jpegs. A two year old high end
Android smartphone too.

Minimizing HTTP requests, avoiding FOUC, using only one version of JQuery (or,
even better, none), using CSS sprites... there are countless optimisations
which are more important and seldom used.

Retina is a buzzword and a buzzword resolution. If you target the 0.1% rich
hipsters, yeah, it's important. If you've real users browsing in 1024x768 on a
four year old laptop and a 2Mbps broadband, it's not.

When Amazon'll use Retina img, that's when it'll be a standard practice.

~~~
Osmium
Which is a fair point, but it depends who you're targeting: if affluent users
are more likely to have high-DPI devices (iPad 3, most smartphones, high-end
MacBooks), and they are, then you're going to have to make your site 'retina-
ready.' And it's a mistake to thing this is just a young, tech-savvy issue.
How many older people are buying iPads? Do you think they'll notice,
subconsciously or not, if your site looks a bit crappy?

I have a hard time believing it would be a significant issue to do a 2x image
resize, especially if you provide exact image dimensions in your img tag to
start with to avoid the renderer having to wait until the image has downloaded
to layout the page properly. In any case, I think someone should do some
benchmarks to see what kind of an issue it is in practice.

Either way, it's not a bad thing to be forward thinking with design. The
amount of 'retina' devices in the world is growing exponentially. At the
moment, it's largely an Apple problem, but with high DPI panels now on the
market it'll soon be industry-wide.

~~~
mddw
Show me some A/B testing showing a conversion increase when Retina proofing
your website.

Old people with an iPad3 won't see the difference between a non retina and a
retina website. They'll see which is the fastest and the easiest to use
(because usually, pixel perfect guys are not too smart about UI.)

Retina-ready is a scam. We have neither the tools (SVG support too weak, no
<picture> element, no good navigator.connection...) to provide a meaningful
retina experience while respecting other users.

Speed trumps "beauty". Most often.

~~~
lttlrck
You say show me the evidence for A/B testing and then state "Old people with
an iPad3 won't see the difference between a non retina and a retina website."
where is your evidence?

Anyone old or young that cares about speed of browsing will be running the
latest browser, with good upscaling...

Retina isn't a scam, however putting an SEO spin on the need to even consider
preparing for the future _is_

------
notlisted
Suspect that in-browser sharpening of resized images (CSS or HTML) can make up
for some of the detail lost in the lower JPG quality.

In the 60-90 range, differences are always minimal, especially when applied to
images lacking detail 'coverage' to begin with (like the test set on the
site).

Bottom line: I to think that the blogger is onto something.

Even if the "less than original size" thing doesn't always pan out due to
inefficiencies in his compression process, it makes sense that in-browser
sharpening would allow reduced file sizes for images displayed at lower than
native resolution.

PS Significant savings in JPEG size with barely any perceptible loss of detail
can be achieved by anyone with JPEGMini (which, unlike JPEG2000 is 100%
compatible with all browsers these days).

------
andybak
I've always been vaguely aware that JPEG gives better results at a constant
quality setting as increase the size of the image.

Firstly - the 8x8 blocks become smaller relative to the image but in addition
to this I think that the it's just in the nature of compression algorithms in
general and lossy compression in particular to produce better results when
there's more source material to work with.

However I didn't expect it to improve enough to enable one to but the Gordian
knot that Retina displays have forced upon us by using 2x resolution images
across the board.

I would imagine that not all source images respond quite as well as others.

Also - using 2x images for all devices will surely create a quadrupling of RAM
requirements which might cause performance issues.

~~~
Retric
Honestly, I did not notice any JPEG artifacts on any of those images, so I
don't think it's that obvious yet.

------
ErikHuisman
Funny thing is. This company is called _netvlies_ which is literally retina in
dutch. They don't seem to mention it themselves..

~~~
hayksaakian
It seems like the article is a translation, the irony might be something the
original author may not have realized

------
dmmalam
Maybe it's time for wider support for more advanced image compression formats
(JPEG200, WebP, JPEGXR).

------
sambeau
This is fascinating as I discovered exactly the same thing this week (sadly
after applying loads of javascript to swap retina images).

I found that a 30 jpeg at retina size generally looks better than a scaled 80
and is smaller.

Plus you can zoom in on any Mac, not just an iPad (something I do all the
time).

------
dtorres
Why not just figure out the pixelRatio once and then serve images according to
that?

See this gist: <https://gist.github.com/3848834>

~~~
beagle3
This isn't really good practice, unless you revise your cookie on every page
load to make sure it is still correct; e.g. restoring an ipad2 backup to an
ipad3 will leave you with the wrong images for the next 10 years.

And an OLPC-style device might have different ratios if you're browsing using
the e-ink display rather than the lcd.

------
zajac
Smart. It now sems like it should have been obvious all along.

You want to reduce the size of an image file from X kB down to y kB. Which
method will give better-looking results?

1\. Dumb, across-the-board by-two resolution reduction? 2\. Smart,
perceptually-tuned jpeg compression?

We probably should have been using this all along. That we can also benefit
from the extra resolution thanks to touch interfaces and high-dpi displays is
icing.

------
mgcross
While I can appreciate the technique, I haven't adopted the use of @2x images
for photos. Most photos tend to hold up pretty well when scaled (soft edges
and relatively low contrast). If you're serving up a portfolio, sure, but I
find more value in maintaining and serving @2x (based on media queries for
MDPR > 1.3) for UI elements or logos not easily reproduced in CSS/SVG.

------
gintas
FWIW, in case you don't have a retina display, zooming in your browser works
just as well to make the difference in quality visible.

------
7952
Surely this works because the compression algorithm can find more
predictability in an image before its resolution is reduced. You see this
affect a lot when you are trying to get very high compression levels. However,
it is difficult to prove exactly what is the best settings without actively
trying different configurations.

------
Silev
I did my own test: <http://silev.org/test/Retina-resize.html>

------
jamesmoss
Could this technique also work for video?

------
rorrr
This is so wrong.

1) He didn't sharpen the small images.

2) He only displayed one type of image - very bright with no shadow detail.

This theory breaks completely if you actually compare apples to apples. Like
these two, both 80KB generated from a high quality image:

<http://i.imgur.com/E3gaB.jpg>

<http://i.imgur.com/UrDEx.jpg>

~~~
barrkel
Why would he sharpen the small images? The browser won't.

~~~
rorrr
Because then they will look sharper. You have to sharpen when you downsample
images. Web design 101.

~~~
001sky
Yes, every size photo should have size-specific sharpening. Large or Small.
Doesn't matter, if you are expecting people to look at it ~seriously.

------
darkstalker
Good observation, but too bad that no one will ever see your high DPI images
because the "retina revolution" isn't a thing. Most people won't ever notice
the difference.

~~~
Johngibb
Yea that pesky tablet revolution wasn't a thing either, and neither was the
GUI actually. I'm still using lynx.

(No offense to lynx users.)

Snark aside, it seems like high dpi will inevitably become standard in the
next few years.

