How to convert images to webp in the Ghost core?

Developer help
1

Hello Ghost team! Thank you for adding ​format attribute to the img url helper, I used it in post.hbs and post-card.hbs and it works like magic!

I would also like to have all of my images inside the post article to be responsive (resized automatically based on the device) and converted to WebP.

In the post.hbs I see this {{content}} helper. As I understand it pulls out article content that I created in the editor.

Whether it’s a post or a page, I want all images on my website to be webp and responsive. How do I find that specific upload image function make all images on my website to be webp and responsive?

2

In checking the source code of my own Ghost blog, I found the images were already responsive-- a srcset tag was there specificying different image sizes based on CSS media queries.

Forcing images into the webp option does not appear to be configurable now, and how you might alter the code to do it would depend on whether you work with the old/current editor the new Lexical editor.

Some related things to look for in the code are were Lexical processes images:

You can also see there a references to the internal image-transform library, which is involved.

You might also look into Ghost’s support for storage adapters. I’m not sure if storage adapters are allowed to change the image format or not.

1 Like
3

Does it mean there is no way to do it right now?
Article page becomes very heavy on images and hits low PageSpeed scores. Those pages are the main driver of organic traffic. Did anyone try to optimise them somehow?

4

If you’re looking for speed try Bunny Optimizer for $10/month, basically set your regular site URL as Origin and edit the Ghost-theme to fetch images over Bunny’s CDN - images will be pulled from your site, converted and delivered as WebP-format, so…

https://www.yoursite.com/content/images/2023/05/ghost-bunny.png
Delivers a PNG

https://cdn.yoursite.com/content/images/2023/05/ghost-bunny.png
Delivers a WEBP

Filetype / extension will not change, the MIME-type will. And the file size ;)

I’m using Bunny CDN and get PageSpeed 98, wrote a post about it…

5

I experimented with a few test pages that I loaded with large, uncompressed images as a “start point”.

I tried using a few image optimisation tools to:
A) resize images (dimensions)
B) compress the images

Final step was to convert from png or jpeg to webp.

Result;
Able to reduce most images from 1.5mb - 2mb down to around 50-100kb.

I then just replaced original images with the new webp images on the posts (you can just drag and drop the webp images onto your page in editor)

Final step - republished pages and ran through gtmetrix, lighthouse and pingdom

Great scores, lightweight pages.