Skip to main content

By David Lindahl

Using AWS S3 and Imgix in Statamic for Performance

03.25.21

4 minutes to read

code projects statamic

Performance is key. But in some cases performance can be expensive to self-manage.

Image optimization formats and algorithms are changing all the time, and they don't come baked in on every server.

To get modern image compression, you need to use things like ImageOptimum, mozjpeg, optipng, svgo, gifsicle and webp (and probably others). These are all separate tools, which need to be installed and maintained on each server where images are optimized.

This increases your hosting environment's complexity, adds potential security issues (just google cvedetails.com and any of the above packages), and extra maintenance. Sounds like fun right? Nah. Imgix maintains all of the latest and greatest optimization techniques for you, creating lower risk, better compressed images, and happier sites.

And performance isn't just about making your website users happy. It's also about making search engines, like Google, happy. And thus, it’s vital for strong SEO. We recently launched the new Laravel News website, which contains thousands of articles and assets. The homepage alone has over 30 images! This is how we increased performance for the Laravel News site using AWS S3 and Imgix.

AWS S3

We integrated AWS S3 into Statamic for all of the assets that would be used on the new Laravel News website. With over 2,000 articles, there are a lot of images on this site. It would be costly in terms of price and performance to store them on the same server as the webpage. So instead, we turned to cloud storage providers to host these assets and the client chose AWS S3.

Integrating AWS S3 to Statamic

Add the packages via yarn or npm

Add the following to your .env with the respective values from your AWS account:

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=
AWS_BUCKET=
AWS_URL=
AWS_ENDPOINT=

Add the following to your config/filesystems.php (it will need to published if you haven't already done so) inside the disks array:

's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'visibility' => 'public',
            'cache' => true,
        ],

Imgix

To further optimize performance, we added an image-processing API on top of the assets that are stored on AWS S3. Imgix offers powerful rendering capabilities, like optimizing the images, and delivery services, like a global CDN. There are several other providers in this realm but Imgix was the preferred choice by the client for this instance. Because the Laravel News images were already optimized size-wise, we used Imgix to deliver assets. Delivering images from their API and global CDN means we can take advantage of their 50+ global CDN sites and caching with Advanced purging to minimize asset load times and latency. And integration into the statamic website was pretty straightforward!

Some of my other favorite Imgix features:

Integrating Imgix to Statamic

At the time of this project, the official Statamic plugin made by Imgix wasn't yet updated for Statamic version 3, so we developed our own solution in-house. (Shout out to Logan, one of our fine PHP developers!)

Here's how it works

We set up our Imgix config in our environment variables, which makes it easy to change in the future. Here’s an example of ours:

IMGIX_SOURCE_URL=
IMGIX_SECURE_URL_TOKEN=
IMGIX_USE_HTTPS=

Install the imgix PHP package composer require imgix/imgix-php

And in our config/statamic/imgix.php file we are using these env variables: 

<?php

return [
    'source' => env('IMGIX_SOURCE_URL'),
    'secure_url_token' => env('IMGIX_SECURE_URL_TOKEN'),
    'use_https' => env('IMGIX_USE_HTTPS'),
];

Then we used our custom Statamic Tag to act as a wrapper around the Imgix API, we named it Imgix. Here’s a gist link for the PHP code that powers the Statamic Tag! This file is located app / Tags / Imgix.php and then on the frontend (in the antlers file) we use it like this:

{{ featured_image }}
    {{ imgix:image_tag 
      path="{{ path }}"
      class="w-full col-span-12 mb-8 rounded-lg"
      :alt="alt"
    }}
{{ /featured_image }}

In this code, featured_image is the field for the image attached to each entry in the article collection and antlers is passing the alt text off the asset into Imgix.

Here's how the asset looks in the article.md file:

featured_image: images/example-image.jpg

Conclusion

Using both AWS S3 for image storage and Imgix for image delivery helped boost the performance of Laravel News significantly. For future projects I definitely want to take advantage of the image optimization features you can do with image sizes/quality and responsive images. There’s so much potential with image processing services like Imgix and I’m excited to keep using them more on future projects!

Want to read more tips and insights on working with a Statamic development team that wants to help your organization grow for good? Sign up for our bimonthly newsletter.

By David Lindahl

David enjoys watching footy, jamming on e-commerce, being a girl dad, playing tug with his dog, and taking photographs of Pacific Northwest-y things like trees — often all at the same time.

Keep on reading