If you’ve ever built a website, you know that images can make or break the user experience. They bring your content to life, but they can also slow it down if not handled properly. Large, unoptimized images can lead to sluggish load times, frustrated visitors, and even lower search engine rankings. But here’s the good news: you don’t have to manually resize, compress, or convert every image to keep your site running smoothly.
In this guide, we’ll show you how to automate image optimization using Jekyll, Cloudflare Pages, and Cloudflare Workers. Together, these tools create a seamless workflow where your static site stays lightweight and fast, while images are dynamically optimized on the fly. Here’s what we’re aiming for:
- Modern Image Formats: Automatically convert images to WebP (or other modern formats) without touching your HTML.
- Responsive Images: Resize images dynamically based on the user’s device, so everyone gets the perfect fit—whether they’re on a phone, tablet, or desktop.
- Smart Caching: Cache optimized images at Cloudflare’s edge and in the browser, so repeat visitors get lightning-fast load times.
- Backward Compatibility: If someone’s using an older browser that doesn’t support WebP, no worries—they’ll still see the original image format.
The best part? You won’t need to change a single line of your HTML. Everything happens behind the scenes, thanks to Cloudflare Workers intercepting and transforming image requests in real time. By the end of this guide, you’ll have a Jekyll-powered site that’s not only beautiful but also blazing fast—and you’ll have learned how to leverage the power of serverless computing to handle heavy lifting like image optimization. Let’s dive in!
1. Setting Up the Jekyll Site: A Step-by-Step Guide
Before we dive into building and optimizing your Jekyll site, let’s make sure you have all the tools you need to get started. Don’t worry, we’ll walk you through everything from installing Git and Ruby to setting up Jekyll itself. By the end of this section, you’ll have a fully functional Jekyll environment ready to roll.
1.1 Installing Git for Version Control
Git is essential for managing your project’s source code, especially since we’ll be deploying our Jekyll site to GitHub later. If you don’t already have Git installed, here’s how to get it up and running:
-
Windows:
Download the latest version of Git from the official website and follow the installer instructions. Once installed, open a terminal and run:
git --version
This should display the installed version of Git, confirming that it’s ready to go.
-
macOS:
Git usually comes pre-installed on macOS, but you can update to the latest version using Homebrew:
brew install git
Verify the installation with:
git --version
-
Linux:
Use your package manager to install Git. For example:
sudo apt update && sudo apt install git # For Ubuntu/Debian
sudo yum install git # For CentOS/Fedora
Check the installation with:
git --version
Once Git is installed, you’re ready to clone the Jekyll theme we’ll be using.
1.2 Installing Ruby: The Backbone of Jekyll
Jekyll is built on Ruby, so you’ll need to install it before proceeding. We recommend using a version manager like rbenv or RVM to handle Ruby installations, as they make it easier to switch between versions if needed.
-
Windows:
Use the RubyInstaller for Windows. During installation, make sure to check the box that adds Ruby to your system PATH. After installation, verify it by running:
ruby -v
-
macOS:
Ruby is pre-installed on macOS, but it’s often an older version. Use Homebrew to install the latest version:
brew install ruby
Add Ruby to your PATH by adding the following line to your .zshrc or .bashrc file:
export PATH="/usr/local/opt/ruby/bin:$PATH"
Verify the installation:
ruby -v
-
Linux:
Install Ruby using your package manager or a version manager likerbenv. For example:
sudo apt update && sudo apt install ruby-full # For Ubuntu/Debian
Or use rbenv:
sudo apt install rbenv
rbenv install 3.2.2 # Replace with the latest stable version
rbenv global 3.2.2
Check the installation:
ruby -v
1.3 Setting Up a Virtual Environment (Optional but Recommended)
If you want to keep your Ruby environment isolated from your system, consider using a virtual environment. Tools like rbenv or RVM are great for this. Alternatively, you can use Docker to containerize your environment, which ensures consistency across different machines.
For simplicity, we’ll stick with rbenv for this guide. If you’ve already installed it, create a new directory for your project and set the Ruby version, if you haven’t already installed rbenv run the following commands :
– Git Clone (Linux/macOS):
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
# Add rbenv to your shell's startup file (e.g., ~/.bashrc, ~/.zshrc)
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init - bash)"' >> ~/.bashrc # Use `- zsh` for Zsh
exec $SHELL
# OR
source ~/.bashrc
– Homebrew (macOS):
brew install rbenv
# Follow post-install instructions to set up your shell.
Once rbenv is successfully installed, it’s time to verify that everything is working as expected. Run the following commands in your terminal to ensure there are no errors and to confirm that the setup is functioning correctly.
mkdir my-jekyll-site
cd my-jekyll-site
rbenv local 3.2.2 # Replace with your installed version
1.4 Installing Jekyll
With Ruby installed, you can now install Jekyll and Bundler (a dependency manager for Ruby). Run the following command:
gem install jekyll bundler
Verify the installation:
jekyll -v
If you see the Jekyll version number, you’re good to go!
1.5 Cloning the Affiliates Jekyll Theme
Now that your environment is set up, let’s grab the Jekyll theme we’ll be working with. Clone the Affiliates Jekyll Theme from GitHub:
git clone https://github.com/wowthemesnet/affiliates-jekyll-theme.git
cd affiliates-jekyll-theme
This theme is packed with <img> tags, making it perfect for testing our image optimization setup.
1.6 Building the Jekyll Site
To ensure everything is working correctly, build the Jekyll site locally:
bundle install # Installs dependencies
bundle exec jekyll build
After the build process completes, check the _site directory. It should contain the static HTML, CSS, and image files generated by Jekyll.
Serve the site locally to preview it:
bundle exec jekyll serve
If you encountered no errors, fire up your browser and navigate to http://127.0.0.1:4000/affiliates-jekyll-theme/ to see the site in action. And you don’t have to worry much about the local clone version of your Jekyll theme just yet, since we’re only deploying them to make sure that your system is good to go for the rest of the tutorial.
Aight, by now you’ve got Git, Ruby, and Jekyll installed, and you’ve cloned the Affiliates Jekyll Theme. You’ve also verified that your setup is working by building and serving the site locally. With these tools in place, you’re ready to move on to deploying your site to Cloudflare Pages and setting up the magic of Cloudflare Workers for image optimization.