Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Posted by Maximilian Klinke
Maximilian Klinke
8,142 Points

Swift, load downscaled image from web, save memory

Hello everybody

I try to display a image I saved at parse.com in my UICollectionView. To cache this images and display them memory-efficient in my cells, I tried third-party libraries like SDWebImage. The main problem is: The images are in a higher resolution than i need them in my ImageView. So I need a tool that downloads (decode) only a downscaled version of the image.

I've already solved the problem for my android application: Here I use the third-party library bumptech/glide (https://github.com/bumptech/glide).

Am I able to do so with SDWebImage and how, or do you know other tools to accomplish so?

1 Answer

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

The problem

This is only me thinking, but my impression is that Glide downloads the hires image, scales and saves hi- and lores versions to the device, that is, caches it. This will most likely result in even more memory and bandwidth usage for images seen for the first time. Think of it like this:

  • Download hires image via API call: File size is way bigger than it needs to be for a thumbnail. This results in long download times, even more so in bad network conditions. Not to mention the impact on users bandwidth.
  • Now the device temporarely stores the image, plugin processes and downscales it: Image manipulations are quite demanding for CPU/GPU and memory. This may result in bad performance with collection views, not to mention the noticeable delay before the processed image is displayed, even when processed in background threads.

So what's the solution?

Ideally, whenever a hires image is saved, a lores version is automatically created and sent to your device when you request a thumbnail.

Have a look at Parse Cloud Code, it enables you to define custom API calls with Javascript. Also, I found this googling your problem: Crop and resize multiple images in Parse cloud code

Btw., no need to use SDWebImage or other 3rd party plugins, Parse provides a handy ImageView for you.

I hope that helps :)

Edit: Here's a post from the Parse blog, might be more helpful than the first link.

Maximilian Klinke
Maximilian Klinke
8,142 Points

Danke dir für den super Tipp mit Cloud Code. Bis jetzt habe ich damit noch nicht gearbeitet, werde es aber definitiv in der Zukunft nutzen.

LG Maximilian

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

Kein Ding! Man muss sich da ein bisschen einarbeiten, aber das isses sicher wert :)

Maximilian Klinke
Maximilian Klinke
8,142 Points

Eine Frage noch zu den PFImageView und PFCollectionViewCells:

Ich benutze Glide unter anderem auch, da, falls ich sehr lange listViews/CollectionViews mit vielen Bildern habe, die Bilder beim Runterscrollen sobald Speicherplatz-Probleme auftreten (auf der disk) cached werden, d.h. sofern ich das bei Glide verstanden habe, diese nicht mehr meinen Speicher verstopfen. (https://futurestud.io/blog/glide-listadapter-listview-gridview)

Jetzt meine Frage: Ist diese Cache-Funktion auch bei den PFCollectionViewCells vorhanden?

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

PFCollectionViewCell contains an image view, a PFImageView, the element I mentioned in my answer. Have a look at the linked docs on how to use it. Other than that, collection views are already very clever on how to handle cells efficiently, reusing cells is the key to that.

Hope that helps :)