0

I have a tableview that is populated from images on my server that I download. My question is How would I go about getting different images for the different resolutions for the devices? 6 vs 6plus etc?

Do I write code that is device specific? e.g

if device is equal to 6 load @2x images 'from @2x url'
else if
device is equal to 6 plus load @3x images 'from @3x url'

and so on.

Or is there a more efficient way of going about this?

Mike Owens
  • 936
  • 3
  • 8
  • 20

2 Answers2

2

You've got several options, depending on the back-end technology stack you're connecting to.

Options if you're using a custom server that you've built yourself, or have control over the code:

  1. Add device scale detection into your image service that checks the inbound user-agent for device scale, and serves the appropriate image for that device. This is hands down probably the simplest solution to implement if you manage your own back-end.

  2. Write into your API a url path param that serves the appropriate image scale; you can then use the UIScreen class (UIScreen.mainScreen().scale) to adjust your target URL accordingly, e.g.:

     https://api.yourbackend.service/images/{imageid}/@2x.jpg

    This is arguably more difficult to implement, but it's also a lot more robust (doesn't rely on potentially changing user-agent strings), and it's a lot cleaner when logging or querying analytics.

  3. You could probably also use something like retina.js to handle this on your back-end, though I can't tell you whether or not it will work heedlessly (haven't tried it).

Options if you're using a CDN image host:

  1. Use their built in HiDPI support (Cloudinary, for example, provides this -- read about it here).

  2. If your CDN doesn't support this, switch to one that does ;)

Community
  • 1
  • 1
brandonscript
  • 68,675
  • 32
  • 163
  • 220
1

You are coming at this exactly backwards.

A table view cell's image view is tiny. You are not going to be showing these images at full size anyway. So there is no point whatever downloading larger and larger images only to be displayed at tiny sizes. That's a massive waste of time, bandwidth, and ultimately memory (if you really try to display large images in every cell, you will run out of memory and crash).

If you have a choice of image size to be retrieved from the server, you should be doing just the opposite of what you are suggesting: download a thumbnail of your image suitable for display in the table view. If the thumbnail is twice the size of the image view, it will look good at all resolutions with minimal waste of memory.

If this app is about also fetching the real full-sized image, outside your table view, you can do that later when requested by the user.

matt
  • 515,959
  • 87
  • 875
  • 1,141