How to get Apple's @2x naming convention for retina images to work for an app with a rails backend?

Question

I'm working on the rails backend of a native app.

In a native app, retina (high resolution) images are automatically loaded using the @2x naming convention.

For example, you can have two images called image.png and [email protected] (the higher resolution version of the same image). If the app is running on an iPhone 3gs, image.png is automatically loaded. If the app is used on an iPhone 4, [email protected] will be loaded automatically.

This @2x convention doesn't work for non-native web apps according to what I've read and seen in action.

It seems that Apple's @2x convention doesn't work for images supplied by a Rails backend. I know that media queries can help with this, but I'm wondering if there is some sort of work around for having an iPhone 4 automatically load @2x images from a web app instead of the non-highres counterpart.

Solution 1

I suggest the following:

In your rails app, create different versions of the images when uploaded.

Then in the iOS app, you could have a look at the scale property of UIScreen and determine which image to load:

if ([[UIScreen mainScreen] scale] == 2.0f){
  //load retina image
} else {
  //load non-retina image
}

Solution 2

The HiSRC gem works nicely: https://github.com/haihappen/hisrc-rails

It uses the same naming convention as Apple (@2x for retina images) and automatically serves the correct one.

I used this in conjunction with CarrierWave, creating two thumbnail versions upon upload:

version :retina_thumb do
  process :resize_to_fill => [200, 200]
  def full_filename (for_file = model.photo.file)
    "[email protected]"
  end
end

version :thumb, :from_version => :retina_thumb do
  process :resize_to_fill => [100, 100]
  def full_filename (for_file = model.photo.file)
    "thumb.jpg"
  end
end

And in your view:

<%= responsive_image_tag user.photo_url(:thumb).to_s %>

Another gem I tried was Clear Eyes, but I couldn't get it to work...

Solution 3

Is this not the simplest solution - or do I miss something?

<%= image_tag("image.png", srcset: { "[email protected]" => "2x"}) %>