Optimize 'Source' Ghost Theme with Dynamic Cover Images

Hey there, fellow Ghost enthusiasts! If you're using the "Source" theme (or really, any Ghost theme) and looking to give your site a speed boost, I've got a quick tip for you: start serving your images in WebP format. Why? Because WebP images are like the superheroes of the internet world – smaller in size, but without compromising on quality. This means faster loading times for your pages and a smoother experience for your visitors. 🚀

Here's a super simple guide to get you started:

Step 1: Crack Open Your Theme Files

The first step is to locate the header-content.hbs file within your Ghost theme's directory. This file is typically found in the partials folder, but its location might vary depending on the theme's structure. This file is key because it's where the cover image is usually defined and handled within your theme.

Step 2: Talk the WebP Talk

Once you've opened header-content.hbs, look for the {{img_url}} helper function calls related to the cover image. This is where you'll make the magic happen by specifying that you want to use the WebP format for these images. Here's how you can adjust it:

Before:

{{img_url @site.cover_image}}

After:

{{img_url @site.cover_image format='webp'}}

By adding format='webp' to your {{img_url}} function call, you're instructing Ghost to serve the cover image in the WebP format.

Step 3: Implement Responsive Images with srcset

While you're optimizing, it's a great opportunity to ensure your cover images are responsive. This involves using the srcset attribute to specify different image sizes for different screen widths, and the sizes attribute to tell the browser how much space the image will occupy at various viewport widths.

For example, the image sizes section in a package.json file might look something like this:

{
  "image_sizes": {
    "xs": {"width": 160},
    "s": {"width": 320},
    "m": {"width": 600},
    "l": {"width": 960},
    "xl": {"width": 1200},
    "xxl": {"width": 2000}
  }
}

Here’s an enhanced version incorporating WebP and responsive images:

{{!-- Background image --}}
{{#if @custom.background_image}}
    {{#match headerStyle "!=" "Magazine"}}
    {{#match headerStyle "!=" "Highlight"}}
        {{#if @site.cover_image}}
            <img class="gh-header-image"
                srcset="{{img_url @site.cover_image size='xs' format='webp'}} 160w,
                        {{img_url @site.cover_image size='s' format='webp'}} 320w,
                        {{img_url @site.cover_image size='m' format='webp'}} 600w,
                        {{img_url @site.cover_image size='l' format='webp'}} 960w,
                        {{img_url @site.cover_image size='xl' format='webp'}} 1200w,
                        {{img_url @site.cover_image size='xxl' format='webp'}} 2000w"
                sizes="(max-width: 320px) 160px,
                       (max-width: 600px) 320px,
                       (max-width: 960px) 600px,
                       (max-width: 1200px) 960px,
                       (max-width: 2000px) 1200px,
                       2000px"
                src="{{img_url @site.cover_image size='l' format='webp'}}"
                alt="{{@site.title}}">
        {{/if}}
    {{/match}}
    {{/match}}
{{/if}}

ghost-source-theme/partials/components/header-content.hbs at main · GraydonGit/ghost-source-theme

The default theme for Ghost. Contribute to GraydonGit/ghost-source-theme development by creating an account on GitHub.

GitHubGraydonGit

Step 4: Test Your Changes

After making these changes, it's crucial to test your website across different devices and browsers to ensure the WebP images load correctly and the responsive behavior works as expected. Keep an eye out for browsers that might not support WebP, and consider implementing a fallback solution if necessary.

And just like that, you're on your way to serving up sleek, efficient responsive WebP cover images on your site.

Keep in mind, while the majority of browsers today are WebP-friendly, there are still a few stragglers. Having a fallback strategy for those older browsers is a smart move.

That's all there is to it! A straightforward tweak that can lead to noticeable improvements in your site's performance. Give it a whirl and bask in the glory of faster loading times and a smoother user experience.

Happy optimizing, and may your cover images be as speedy as they are beautiful! 🌟