I’ve seen quite a few questions about building image-heavy web and mobile applications. Although there doesn’t seem to be much familiarity with Image CDNs, they’re a great option to explore if your goal is to build fast, reliable image hosting in your application!
What is an Image CDN, and why might you want to use one?
I’ll assume if you’re reading this article, you have a background in engineering and are already somewhat familiar with at least the concept of CDNs. Image CDNs are exactly what they sound like: CDNs specially designed for hosting images.
Unlike many file types, delivering images to end-users in browser and app contexts can be highly optimized. An image CDN automates that optimization. Like most CDNs, you’ll upload your images to an origin (AWS S3 is a common choice, but most support any S3-compatible origin). The CDN sits on top of that origin, automatically serving image files in compressed, optimized formats.
A Short Trip With a Browser Loading a Webpage
When users visit a page in your web application that includes an image, their browser must make an HTTP request for the actual image file. Meaning that in order for the user’s browser to display the image, it first must download that image. The larger the image file size and the further away (geographically) that image is hosted from your user, the slower the download occurs, which in turn directly affects the user’s experience loading your webpage.
If we can host the image geographically very close to the user and compress the image to a small file size, the user will experience a really fast page load time!
What Optimizations Image CDNs Make
Like typical CDNs, a good Image CDN will have many global edge locations, so files are close to your users. On top of that, we get into the really good stuff:
- Compression of your original image file
- Conversion of your original image file type into highly compressed formats
- WebP and AVIF are two highly compressed file formats. Head to Google Images, click on a thumbnail to open a somewhat larger preview and right-click to download. As of this writing, Google will serve this image file to you as WebP, with a typical file size of around 25 KB!
- Automatic detection of user’s browser and automatic detection of the actual display size of the image, allowing the CDN to intelligently determine which file format and quality/file size to serve the user!
The end result is pretty magical. Let’s say your users upload original images in the 5 MB range. These original, very large, high-quality images get stored in your S3-compatible origin. When they or other users view this image in your app, say as a thumbnail in an image gallery, your Image CDN serves each image as a tiny 10 KB thumbnail version! When a user clicks to view a larger version of that image in a lightbox, your Image CDN servers a larger, higher quality 30 KB version. All automatically, without you doing anything other than the initial CDN setup. You can use the CDN’s API to manually override optimizations, allowing users to download the original high-quality image version or to force the CDN to always serve a specific file type, size, or quality.
If you plan to include more than a few images in your application, consider using an Image CDN to speed up your users’ browsing experience!
Top comments (0)