How to offload WordPress images to Amazon S3

Less server load by serving WordPress media files from Amazon S3

WordPress media items, such as images, videos and audio files, tend to take up a lot of space on your server’s storage drive. This can lead to a decline in your site’s speed over time, especially if you’re someone who publishes a lot of content with high-quality images.

Image Selection
Image Source: rawpixel – Pixabay.com / License: CC0 Public Domain

Fortunately, you can integrate your WordPress site with Amazon S3, Amazon’s cloud storage service that’s a part of the Amazon Web Services ecosystem. In this tutorial you’ll learn how to integrate your site with Amazon S3 with the help of two plugins from Delicious Brains, the developers of the ever popular WP Migrate DB plugin. We’ll be using their other product, WP Offload S3.

The WordPress images on your site as well as any other types of media you upload to WordPress will be stored in and served from Amazon S3 once all is said and done. Let’s get started.

Amazon Web Services & Amazon S3 Overview

Amazon S3
Image Source: Screenshot – aws.amazon.com

We’ll be using the free WP Offload S3 Lite and Amazon Web Services WordPress plugins for this integration. You’ll also need accounts for Amazon Web Services and Amazon S3. All of this is free to start out with, so there’s no need to worry about paying high upfront costs.

You can read more about Amazon Web Service’s free tier as well as what’s included with Amazon S3’s free service here. It more or less says Amazon S3 is free for 12 months, during which time you’ll have access to the following features: 5GB of Standard Storage, 20,000 Get and 2,000 Put Requests.

Amazon S3 pricing scheme works on a pay-per-use model. You can view more pricing details here. It’s region based, but you’ll essentially pay ~$0.025 per GB once your 12-month trial expires or you exceed the limits the free tier allows. Let’s get started with the tutorial:

  1. Install the WordPress plugins
  2. Create an Amazon Web Services account
  3. Create a new IAM User
  4. Add AWS Access Keys to WordPress
  5. Integrate WP Offload S3 with Amazon S3
  6. Configure settings

1. Install the WordPress plugins

Go to the WordPress plugin repository inside the WordPress admin area, and search for “amazon web services”. Install the one by Delicious Brains.

Amazon Web Services WordPress Plugin

Activate it after it installs. Next is the WP Offload S3 Lite plugin. Search “wp offload s3” in the plugin repository, and install and activate it.

WP Offload S3 lite WordPress Plugin

2. Create an Amazon Web Services account

First, you need to create an Amazon Web Services account if you don’t already have one. Go to aws.amazon.com, and click Create an AWS Account or Create a Free Account.

Create AWS Account

Create an AWS account for your business by using the I am a New User selection, or sign into your current one. When you sign up for Amazon Web Services, you’ll be asked to select a support plan. You won’t be charged as long as you select the Basic plan.

AWS Support Plan

You’ll be finished with the sign up process after this page.

3. Create a new IAM User

Once you’re done signing up for AWS, you’ll need to create a new IAM User. Click here to get started. You may be asked to sign in again. Once you do, you should see this screen:

New IAM User

Click Add User.

Add New IAM User

Give your IAM User a user name, such as your website/blog name, tick the Programmatic Access option, and click Next: Permissions.

IAM User Name

Select Attach Existing Policies Directly on the next screen, and click Create Policy. A new window will open, but don’t close this one just yet. We’ll need it in a bit.

Create IAM User Policy

Select Create Your Own Policy on the next screen.

Create AWS Policy

Give your policy a name and description, and copy and paste this code into the Policy Document editor:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:CreateBucket",
        "s3:DeleteObject",
        "s3:Put*",
        "s3:Get*",
        "s3:List*"
      ],
      "Resource": [
        "arn:aws:s3:::*"
      ]
    }
  ]
}

It should look similar to the image below. Click Create Policy once you’re done.

Create AWS S3 Policy

Go back to the window we left open, and click Refresh.

Refresh AWS Policies

You should see your policy at the top. If you don’t, type it into the search field. Once you find it, select it, and click Next: Review.

Select AWS Policy

Click Create User on the next screen.

Create AWS User

The next screen reveals your Access Key ID and Secret Access Key. Copy and paste these in a document.

IAM User Secret Access Keys

4. Add AWS Access Keys to WordPress

Once you have your keys, you need to define them in your wp-config.php file. Use the file manager inside of cPanel or use an FTP client like FileZilla to access your wp-config.php file which is located on your server. Add this to the bottom of that file:

define('DBI_AWS_ACCESS_KEY_ID', '********************');
define('DBI_AWS_SECRET_ACCESS_KEY', '************************************');

Replace the *’s with your keys. Make sure you keep the quotes.

AWS S3 Access Keys WP Config File

Save the file, and re-upload it to your site’s root directory.

5. Integrate WP Offload S3 with Amazon S3

Next, you need to create an Amazon S3 account. Go to the Amazon S3 website, and click Get Started with Amazon S3.

Get Started Amazon S3

Go back into WordPress, hover over AWS, and select S3 and CloudFront.

WordPress AWS S3 Cloudfront

Click Create New Bucket.

WordPress create New Bucket

Name your bucket something descriptive, such as “mhthemesmedia”. You also need to choose a region for your bucket, which will be the region your Amazon S3 data will be stored in. You should choose the region your website’s data is stored in. Consult your hosting company if you’re not sure.

WordPress Region Bucket

Click Create New Bucket once you select a region. You should land on the Settings screen for the WP Offload S3 Lite plugin.

6. Configure settings

WP Offload S3 lite Settings

Let’s go over these settings, starting with the Enable/Disable the Plugin section. The first setting is Copy Files to S3, and it’s toggled in the ON position by default. This means all media items will be copied over to your Amazon S3 bucket when you upload them to the WordPress Media Library.

WP Offload S3 lite Enable/Disable Plugin

The second setting, Rewrite File URLs, controls whether or not media files are served from your web server or Amazon S3. This setting is toggled ON by default, and you can preview the new URL your media items will have in the next section. Instead of:

yourdomain.com/directory/wp-content/uploads/

your media items’ URLs will now be:

s3.amazonaws.com/bucket-name/directory/wp-content/uploads/

WP Offload S3 lite URL

If you use a CDN, you can integrate it with your Amazon S3 bucket with the CloudFront or Custom Domain setting. This is toggled OFF by default. If you choose to enable a CDN, your URLs will reflect that instead of Amazon S3’s. Be sure to read our pros & cons of using CDNs on WordPress sites post if you’re on the fence about using a CDN on your site. You can also find additional resources and information about CDN integration in the docs on the WP Offload S3 website.

You can use the same bucket to store files from different sites, which is why the next setting, Path, is toggled ON and already filled in for you. The Year/Month setting is also toggled ON by default in the WP Offload S3 options panel. This means the year and month an individual media item was uploaded in will have the year and month in the URL.

WP Offload S3 lite Year/Month

You can toggle this OFF safely if you don’t wish to organize your S3 media items by year and month or don’t wish for the year and month to appear in the URLs.

The next setting, Force HTTPS, is toggled OFF by default. This is because WP Offload S3 Lite uses HTTPS when the request is HTTPS and vice versa for HTTP by default.

WP Offload S3 lite Force HTTPS

You can toggle this setting to ON if you want to force S3 media items to use HTTPS no matter what format the request is using. The next setting is an important one, and it’s toggled OFF by default.

WP Offload S3 lite Remove Files from Server

It’s the Remove Files from Server setting. It determines whether or not a file gets removed from your site’s web server once it’s been copied over to Amazon S3. Toggling this setting ON is highly beneficial as it’ll reduce the amount of space media items take up on your server’s storage drive, but this setting may have compatibility issues with other plugins you use on your site. In the docs on the WP Offload S3 website there is an overview of possible compatibility issues with other plugins.

The final setting is toggled ON by default, and you should leave it on to ensure S3 media items have unique file paths, especially if you use a CDN. It’s essentially a cache-busting technique that ensures S3 serves the latest version of the file. Click Save Changes to save the changes you made to the settings page.

WP Offload S3 lite Save Settings

That’s it! You’ve integrated your WordPress site with Amazon S3. Your images as well as anything else you upload to the media library will now be offloaded to and served from your S3 bucket. Let’s wrap this post up and talk about the premium version of the WP Offload S3 plugin.

Final thoughts: Serving WordPress images from Amazon S3

A couple things to note before we head off. This integration does not copy existing items in your WordPress media library over to Amazon S3. You’ll need to upgrade to WP Offload S3 Pro to do that. The premium version also allows you to integrate as many as 100,000 media items across an unlimited number of WordPress sites. You can learn more about premium features on the plugin’s pricing and add-on pages. What are your thoughts on serving media files from Amazon S3?

Disclosure: This page contains affiliate links to 3rd party products or services. If you choose to purchase these products or services, we may receive a commission from the product or service provider. There is no additional cost on your end.

Share this with your friends

8 Comments

  1. Awesome tutorial. I recently started hosting my client sites on Amazon Lightsail, domains on Route 53 and this seems like the perfect complement. The Delicious Brains devs are absolutely brilliant which will make this a no brainer for the AWS-obsessive like myself. Would love a guide on the CloudFront integration part as well!

  2. Hello, I have been using the plugin for a while now and it works perfectly. I only see one problem that I could not solve. If I insert a post through the administrative panel the images loaded have the address served by the S3. Most of the images are entered by users through login in my theme, in which case the images are loaded with the normal WordPress path.

    Do you have any idea how I can configure my theme to automatically use the S3 address? I’m always changing the images that users insert in my administrative panel and this is a lot of work.

    • Hi Carlos, uploading images is handled by WordPress itself, usually not by WordPress themes. When you say that users upload images via your WordPress theme, that doesn’t seem right. We don’t know what WordPress theme you’re using but if your theme has been coded in a way that it handles images differently than what is default in WordPress, then probably the best you could do is contact the theme developers for assistance.

  3. “The premium version also allows you to integrate as many as 100,000 media items across an unlimited number of WordPress sites.” How about Lite – free version? Are there any limits?

    • Hi Mateusz, it seems there is no mention about any limits. But if you need details regarding the limitations of WP Offload S3 Lite, you could contact the developers.

  4. I am using the same kind of situation. We have one website where users upload any docs in the S3, but it’s not getting the data on S3 bucket. Can you help me out?

    • Hi Nikhil, if you’re using the WP Offload S3 plugin, you could reach out to the developers for support. However, before doing that, we recommend that you check if it’s configured correctly.

Leave a Comment

Your email address will not be published.


*