Speed up your Ghost Website Official Ghost + Cloudimage Integration

Mantas Matuzas -

Are you running your Blog on Ghost but are having trouble with increasing loading speed?
We did! So we decided to fix it.

By integrating Ghost and Cloudimage we managed to increase our page speed score and drastically accelerate the page loading time across the globe!

How to increase your speed score on Ghost?!

Connect your Ghost publication with Cloudimage and boost website loading speed with automatically optimized images delivered through global CDN network. This is especially useful for global websites so that you can cache your assets nearer to your visitors.

Cloudimage is an Image Optimization CDN which allows to optimize and accelerate website images by adding a layer of global Image CDN and allowing to compress, resize and add filters to the images - great for Google's Algorithms!

It works in tandem with built-in Ghost image optimization features by boosting an image delivery speed.

The integration with Ghost can be done in a few minutes.

0. Generate an Image Optimization report for comparing before and after results

Generate a detailed image performance report analyzing your publication performance to see if Cloudimage can improve the loading speed and image optimization.

1. Get a Cloudimage token

Create a new token by registering on Cloudimage. The token is used for updating the existing image URLs on your publication.

Once applied, the next time a visitor will load the page the original image is loaded through Cloudimage CDN with all the optimization features automatically applied.

The basic URL format of a Cloudimage URL:

https://{token}.cloudimg.io/v7/{original_image_url}?{operations&filters}

  1. token - a unique identifier for image optimization which is protected to beused only on your websites
  2. original_image_url - a link to an original image which in Ghost themes is usually referred by 'feature_image' or 'img_url'
  3. operations&filters - optional, can be used for additional image filter, watermarking and resizing features

2. Edit your theme

Once you generated a new Cloudimage token, you will need to update all image URLs in your Ghost theme template.

If you are using the default Casper theme, the images are placed under the {{img_url} helper and the code looks like this:

<img
     
    srcset="{{img_url feature_image size="s"}} 300w,
            {{img_url feature_image size="m"}} 600w,
            {{img_url feature_image size="l"}} 1000w,
            {{img_url feature_image size="xl"}} 2000w"    
    
    sizes="(max-width: 800px) 400px, (max-width: 1170px) 1170px, 2000px"
    src="{{img_url feature_image size="xl"}}"
    alt="{{title}}"
/>

Cloudimage is implemented by appending the token to the helpers for the publication pages:

This:

{{img_url feature_image size="s"}} 300w

To this:

https://token.cloudimg.io/v7/{{img_url feature_image size="s"}} 300w

It works the same way for background images:

background-image: url({{img_url background size='l'}}); has to be updated to background-image: url(https://token.cloudimg.io/v7/{{img_url background size='l'}});

In the default Casper theme, the images are used in these pages: page.hbs, post.hbs, /partials/header-background.hbs, /partials/post-card.hbs,  /partials/header.hbs

This is it! Once these actions are applied, all your publication images will be fully optimized and loaded through a global CDN network.

Advanced use cases

For more advanced use cases, operations and filters can be applied at the end of image URL.

Watermarking: https://token.cloudimg.io/v7/{{img_url feature_image size="s"}}&wat=1 300w

Greyscaling: https://token.cloudimg.io/v7/{{img_url feature_image size="s"}}&grey=1 300w

Got any questions or want to give it a try? Contact Us!