Resize image when retrieving image from storage to make load faster

Question

I am retrieving pictures from for a thumbnail but the pictures are too big so when laid out in a table, it takes ages for everything to load. Does anyone have suggestions on how to resize the image to about 50 * 50 so that the tableView loads faster? Swift3 Code examples would be appreciated since I am new to coding.

 databaseRef.child(text).child("profit").observe(.value, with: { (snapshot) in
                if snapshot.value is NSNull{
                }else{
                    let equal = snapshot.value

                    /*friendsCell.profilePicture.loadImageUsingCacheWithUrlString(urlString: databaseProfilePic as! String )*/
                    self.imageLoader.startAnimating()
                   !
                    let data = NSData(contentsOf: NSURL(string: wow as! String)! as URL)

                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {

                        profit.sd_setImage(with: NSURL(string: profit as! String)! as URL, placeholderImage: UIImage(data: data! as Data))

                        self.imageLoader.stopAnimating()
                    }

                }
            })

Answer 1

I am retrieving pictures from FirebaseStorage for a thumbnail but the pictures are too big

I think you should firstly reconsider on how thumbnail images store on your Firebase because theoretically, in my opinion, thumbnails are lightweight (low quality)images of original ones and they should not be too big as your mention. The best option would be resize images on Firebase to off load at front-end.

If you have no choice for now that you need to resize images, there are some techniques to archive it. I suggest you read this article http://nshipster.com/image-resizing/ in which the author provides many ways to resize images and performance benchmarks too. You will definitely able to code by your own after read through it.

In term of user experience, how should we diminish time that preventing users from interaction. I suggest you follow steps as below

1. Display place holder image and loading indicator when thumbnail is being loaded.
2. Downloading image task and resizing should operate in background thread.
3. Caching mechanism for thumbnail images after resizing. Highly recommend to read this https://github.com/path/FastImageCache for how to store and retrieve images efficiency.
4. Image rendering animation, we might consider on how images to be shown, e.g. display immediately or partially render on image view.

I hope this would be helpful and we could open for further discussion when you actually work on it.

Answer 2

I would download the image on a background thread.

  DispatchQueue.global().async {
        // load image here
let data = NSData(contentsOf: NSURL(string: databaseProfilePic as! String)! as URL)

  DispatchQueue.main.async {

    // set the cell data 

   }

    }

Answer 3

You should resize the image in your server, in your case, Firebase. You will still be downloading the same image size in your client app (iOS). You can do the following for improvement and optimization:

1. Cache the loaded images for the future fetching.
2. Load the data and let the images be fetched asynchronously - this will let you see the other data and the images shall be loaded next.
3. Add pagination to your tableView.
4. Add multiple properties to your data source in Firebase, such as hq_photo and lq_photo, so that you can just fetch the low quality photos when displaying them in your tableView and fetch the high quality ones when needed in your other screen.