When we were working on an image heavy web application like Thismake.com, we were faced with multitudes of challenges during development, especially around performance. We needed to handle a large number of user uploaded photos and had to make sure our application stays performant. We’ve adopted some best practices from other image heavy apps like Instagram, and curated others that would fit with our unique situation. Here are some of the quick methods that helped.
Before I dive into the how, here is some background. Each user-uploaded photo ranges between 3MB to 7MB. Depending on location, the initial page load could have about 80 of those images that need to be served. This could drastically slow down user experience. We’ve adopted the following quick and easy (relatively speaking) methodologies to meet user expectations.
Lazyload — “Don’t load what’s not to be seen” and “Load a little bit when no one is watching” are two philosophies that we combined for our image loading strategy. Lazyloading is requesting image resources only for the ones that are to be displayed in the viewport (on screen). Most JS lazyload modules have offset load option too, which can be utilized to load a little more than what the viewport can fit in anticipation for scrolling.
Image compression and processing — Most of our user-uploaded images are in the MegaBytes. This is costly both in terms of time requesting these images to display and storage cost. We’ve implemented pre-storage image processing for all user-uploaded images. Before storage, each image is compressed and resized. This can cut down megabyte-sized images to just a few kilobytes! The downside of this, however, is that most phones store images as jpeg, and jpeg compression is lossy (read up on lossy compression vs lossless compression), so we lose resolution. This isn’t a problem for us because no one is going to look at these images poster-sized.
CDN — Content Delivery Network can have a big impact as it can physically bring the image resources closer to the user, thus cut down on request time. We use Google Cloud Storage. Even though the cost is slightly higher than AWS’s S3, it provides out of the box CDN.
There are, of course, more ways to boost performance on image heavy apps, but the above methods will be sufficient for most and will yield noticeable performance gains. Any other suggestions? Let me know.