How to Load Images from S3 Faster

You can load images from Amazon S3 faster by making a very simple configuration change. By default, Amazon S3 acts as a file server, just like serving files from your normal Web server. S3 has the benefit of taking some of those additional HTTP requests from your Web server, which may cause a slight speed increase, but just using S3 to serve images isn't where the real benefit comes into play. If you are currently using an S3 bucket to serve the images, you're only part of the way to fast loading images.

The real trick to getting your images to load fast from S3 is to enable Amazon CloudFront on the S3 bucket. CloudFront is the Amazon AWS content delivery network, which distributes your images out to multiple servers getting your images served to website users from the location closest to them. CloudFront basically takes the one image in your Amazon S3 bucket and replicates it to all the servers, which dramatically speeds up image loading. CDN service like this used to be expensive, which meant small businesses couldn't afford to get this kind of speed. Amazon and Rackspace have changed that.

Setting up CloudFront is easier than it sounds, but you will need to make a few configuration changes to your Amazon Web Services account in order for it to work. After you sign in to your AWS account, you need to activate CloudFront for your account, which simply involves clicking a button and agreeing to add CloudFront to your AWS account. I'm going to assume you have previously created an S3 bucket, if not do that first then follow the steps here. After activating CloudFront, you need to go to the AWS Management Console and click on the Amazon CloudFront tab.

Click the Create Distribution button to CloudFront-enable your Amazon S3 bucket. Here you will see a number of options. For image delivery, you want to choose Download. Next choose the S3 bucket with your images from the dropdown menu. Logging is optional, but if you want to run statistics against your CloudFront served images, you will need to turn logging on. CNAME is important because you want to use a domain you control for the image URLs for ease of moving to a new service in the future and also so they get indexed in places like Google image search. Comments are optional, but for CloudFront to work the Enabled button is required. The whole thing should look something like the screenshot below.

CloudFront Create Distribution

A note on CNAMEs: When you choose a CNAME, it could be a subdomain of your website, like media.jakeludington.com in the example or it could be a completely different domain name, like jake-images.com. I used the subdomain route when I set up my CloudFront enable bucket because I had already configured all my images to use that domain and didn't want to change image URLs in thousands of pages. The reason you might want to consider an alternate domain is that if your domain serves any cookies, there might be a slight increase in the time it takes to serve an image if the image is also served from the domain that serves cookies. I'm still willing to live with that potential delay as I haven't noticed any impact, but your mileage may vary.

After CloudFront processes your S3 bucket and makes it active (deployed), you need to change the DNS for the CNAME at your registrar or DNS service. This varies by DNS provider, but in my example you would create a CNAME called media.jakeludington.com and point that CNAME to the cloudfront.net domain name listed for your bucket.