Retina 2x Content. When would you use this?

Asking a stripped-down, basic question:
What Is a 2x Retina-ready content & how is it best used?

  • Are people using it & what is a good time to use it?
  • Is there a downside?

Also… note the info on Vectors… Graphic download sites generally have separate sections for Vectors. It is always a “tug-of-war” between “best quality” and “fast load times.” Large high quality images are great, but not if people are un-willing to wait on slow load times and leave your site.

Yes. The best time to start using Retina is when the majority of users on the net are browsing with a retina device. So the best time to start is shortly after July, 2014. (that’s when the iPhone 4 came out and shortly thereafter became the dominant device) :stuck_out_tongue_closed_eyes:

most mobile users are browsing with retina devices. a few desktop users too.

Yes. There are a few tradeoffs:

  • much larger images – often > 2x the size compressed (exactly 4x the size number of pixels)
  • much larger memory footprint – on small devices where memory in constrained displaying lots of huge images can be costly
  • sending retina images to non-retina devices leads to downsampling (slow) and (sometimes) blurry images

If you use some of the more recent HTML standards you can avoid a lot of the tradeoffs. The browser can detect and choose the correct image for the correct device. You should still test that you’re not slowing down the page too much – but at least you know that only the devices that like retina images will download them.

You can look in the the srcset attribute of the img tag for details.

Related: Stacks can do a lot of that automatically. If you drop in an image into stack and scale it down 50% using the image editing controls – then Stacks will automatically export the scaled version as the @1x image and the full resolution version as the @2x version. It will do all the naming and add the correct srcset attributes as well.


Information like this is invaluable. Thanks Isaiah!

1 Like

Thanks, Isaiah.

I’m kind of in such position with a couple of products - Stacks is a giant killer in that regard. I was ecstatic when I found this out. Though I’m not sure if I’m doing it right from the description above.

Actually I’m a little upset that other software doesn’t grasp your Stacks lead, or blend as well as it might. Specifically in photogalleries.

Flow isn’t playing nice at all & COLLAGE 2 had been giving me conniptions.
I can’t seem to make them behave. (in my best Austin Powers).

Hnce the simplistic question - to ascertain what I could be misuderstanding
& also maybe help someone else on a similar quest.

@Runamok - i’d be happy to help, but maybe best to post questions about Flow and Collage to their own threads. :slight_smile:


I’m working hard not to be overtly critical by mistake.

You are quite right. Those do not reflect on other products exactly. Sorry for that.
It does fold in peripherally, because I am trying to get Stacks-type of results in them.

This was my intent to approach this incrementally - asking about the great Retina support.

Er, Actually, I have had a call in for 3 weeks about Flow & Collage
& followup emails to see if its something I am doing wrong, can be adjusted, or what exactly.

I will re-read your link.

Are we saying that VECTOR-based images will download far faster?
Depends on the point of a website, doesn’t it? Vectors don’t work well with photographs.

Case in point is the very Apple-MS commerical image used in the article. The image of the Apple guy “I’m a Vector” is only useful as a tiny image where your eye fills in/resolves missing data.

Shown at the size it is shown in the article underscores that there is a resolution difference, fine as an example with pixel sizes large enough to understand – but you wouldn’t WANT it to be viewed that large.

Is Retina-ready content ONLY pertinent to Apple devices,
or do they work in some way differently on Samsung tablets & the cheaper critters like Amazon Fire?

Added as a WeaverTip for next week! :wink:


Is Retina-ready content ONLY pertinent to Apple devices,
or do they work in some way differently on Samsung tablets & the cheaper critters like Amazon Fire?

Nearly every mobile device is slightly different.

For example:

Google’s Pixel using native 2.6x graphics.
The Pixel XL 3.5x – but it scales from a 4x image if provided.
iPhone Plus version (the big ones) are 3x devices.

In short: there is no way to cover every combination. This is why we leave the detail of how to render the web page to the web browser on that platform. Instead of thinking of ever device, we provide rules about how to render the page/image in general.

Media queries let us change the CSS for a page. srcset lets us change images. and we can specify these things using general rules: @2x and @3x, page-width, page-heigh, etc. This lets us cover all the possibilities and keeps things future-proof so when Samsung inevitably invents a new 3.14159x resolution our pages and images will still render pretty well.


Thanks for a long response, Isaiah.

Its such a great feature on the Apple devices, anyway.
I was beside myself seeing it built into Stacks & am disappointed that some of the other tools don’t utilize it.

If we ignore ppi s of 149, 171, 189, 264 & 326, the other part of this, from what I see –
Are the varying form factor ratios of the myriad mobile devices.
From ~1.3, 1.5, 1.6 to 1.78:1 & what comprises a "screen fit.”