Using an Image CDN to Speed Up Image Delivery from Amazon S3

Cloud storage offers companies many benefits like redundancy and lower costs. All the big cloud providers have their own version of cloud storage. Launched as early as 2006, Amazon S3 is one of the more popular cloud storage services. S3 (Simple Storage Service) is very convenient for storing all sorts of website files. In addition to dumping log data there, site owners frequently store web content like images on S3, and in turn, display the images on a website.

Table of Contents

• Amazon S3 is Slow and Images are Heavy
• Speeding Up Image Delivery on S3
• ImageEngine Makes Amazon S3 Faster
• Reduced Image Payload
• Faster Page Load

In fact, according to the public data set HTTParchive available in Google Bigquery, more than 10% of the websites use S3 as image storage. Most of these have a general-purpose CDN in front. However, almost 20% of the websites that use S3 as image storage serve images straight from S3 without a CDN in front.

Amazon S3 is Slow and Images are Heavy

Amazon S3 is known to be slow when serving web content directly. One reason why it is slow is that a bucket is only located in one geographical location. The location is selected when you create the bucket. For example, if your bucket is created on Amazon servers in California, but your users are in India, then images will still be served from California. This geographical distance causes slow image loading on your website.

Further, it is not uncommon to see very heavy images on S3, with large dimensions and high byte size. One can only speculate on the reasons, but it is probably related to the publication workflow and the convenience of S3 as a storage space.

Let’s see how we can accelerate image delivery while keeping S3’s workflow and convenience level.

Speeding Up Image Delivery on S3

To catch the two flies of global distribution and image optimization at once, let’s see how an image CDN like ImageEngine can leverage S3 as an origin.

Step1: Create the S3 bucket

Once logged in to the Amazon console it is easy to create the bucket and store content in it. By default buckets are private. In order for the Image CDN to reach the origin image, we must create a bucket policy to make the contents of the bucket available on the web.

Once you’ve implemented the policy that fits your needs, the bucket should be available in your browser using this scheme for a hostname:

https://<bucket>.s3.amazonaws.com/<file>

Alternatively:

https://s3-<location>.amazonaws.com/<bucket>/<file>

For example: http://s3.eu-west-3.amazonaws.com/my.image.store/athlete-tying-running-shoes.jpg

Or

http://my.image.store.s3.amazonaws.com/athlete-tying-running-shoes.jpg

Step 2: Sign up for an ImageEngine account.

ImageEngine offers free trial accounts with no strings attached. The signup process will ask for a nickname for the account, a domain name intended for serving images, and an origin location.

Give the account a name you like and provide a domain name you think you’ll be using to serve images on your web site. This can, of course, be changed later. In our case, we choose “s3img.mydomain.com”.

The origin is the S3 bucket we created in step 1. There are two ways to configure the S3 bucket. You can use the S3 protocol or HTTP.

If you want to use the S3 protocol, check the S3 radio button and type the name of the bucket.

If you want to use HTTP, then select the HTTP radio button and type in the fully qualified hostname. Note that if you want HTTPS, you’ll need to use the notation with the bucket name in the path: s3-.amazonaws.com. Submit the hostname for now, and you can edit the origin later and add the bucket name.

On the question “Allow origin prefixing” it is safe to answer “No” for now. Hit submit and the account is created.

Step 3: Configure your DNS

This step is not strictly necessary, but if you want to serve images from the domain name provided in step1 you’ll need to add a CNAME record in the DNS. The DNS info needed is presented to you when submitting the form in step 2.

Record Name: s3img.mydomain.com
Record Type: CNAME
Record Value: s3img.mydomain.com.imgeng.in

Note that the Record Value can also be used to access images on S3:

http://s3img.mydomain.com.imgeng.in/gentlemans-fashion-flatlay.jpg

Step 4: tune settings

In less than 5 minutes, the S3 bucket is configured, the ImageEngine account is created and ImageEngine is serving optimized images from S3. You can also log in to the ImageEngine dashboard to manage multiple domain names and origins. Also in the dashboard you can tune the default behaviour of ImageEngine. For example tune the image quality, size, formats and so on.

ImageEngine Makes Amazon S3 Faster

By these simple steps, images stored on Amazon S3 are now globally distributed and optimized by ImageEngine. If you want more information about the optimization process and the resulting next-gen file formats, then you can read about them here.

To analyse the impact of ImageEngine we took a representative sample of the sites in the HTTParchive data set which store images on S3 and ran them through the ImageEngine demo tool, comparing original and optimized web site performance.

Reduced Image Payload

Looking at the optimization aspect isolated, the savings in bytes are dramatic! The average byte size of an original image stored on Amazon S3 is 2.9MB, while the average optimized by ImageEngine is only 0.6MB. 78% less data! The dramatic savings suggest that a typical workflow involves storing images on Amazon S3 does not include any particular steps to reduce the file size before it is stored on S3.

The primary benefit is faster page loading for better user experience. Fewer data delivered also saves the end-users data plan as well as battery life because lighter images require less processing power to decode and display. Additionally, images will be displayed on the screen sooner freeing processing power to other tasks.

Faster Page Load

Fewer data to transmit over the wire also has a direct impact on the time it takes to display the page in the user’s browser. We’ve looked at the visual complete time; the time it takes for the page to be completely rendered visually in the browser.

On average, the sample using ImageEngine is visually complete 3.4 seconds earlier than then sites with unoptimized images. 3.4 seconds is a huge improvement. Knowing that 53% of users leave the site if it takes more than 3 seconds to load,3.4 seconds improvement just by enabling ImageEngine is a giant leap towards the 3-second goal. Additionally, now that images are served from a CDN, not from a static S3 location, we get the advantage of global distribution and reduced latency.

This is also why addressing images to improve performance, conversion rates and ultimately revenue is considered a low hanging fruit. Relatively little effort, but huge impact. Give ImageEngine a try!

#aws #image #cloud