I decided to use Ghost to have a super fast website. One of the selling point was that images you add via Ghost were already optimised. But this doesn’t seem to be the case. For example, on this page, the cover image is 10mb.
https://soundsirius.digitalpress.blog/products/
Hi Nicolas,
You seem to be using an externally hosted image - Ghost cannot optimise images that are hosted outside of Ghost :)
It’s quite easy to implement responsive images for Ghost, this is down to the theme. Here’s an example:
{{#if feature_image}}
<img class="gh-card-image"
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: 1000px) 400px, 700px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
{{/if}}
and here are the docs:
2 Likes
So all I have to do is inject that code in the header?
Ghost doesn’t really optimize images - at least not in the compression aspect of it. You are better off compressing any images you use manually when writing posts.
What Ghost is able to do is resize images and serve a smaller sized image when possible. It does this through HTML srcsets. Basically, if your theme supports it, Ghost will generate multiple folders containing differently sized images, e.g. 400px width, 1000px width, 2000px width and so on.
Within the theme, it will then load the image closest to the size requested. As John has shown above, you don’t put that code in the header code injection in Ghost Admin. Instead, that code goes into your theme file’s .hbs, which you can see if you download your theme through Ghost Admin > Design > Themes.
That’s not quite right - Ghost does have a comprehensive built-in compression and optimisation library which runs on uploaded images. Additionally, the level of compression can be customised in config:
1 Like
Oh, I didn’t know that - but I’m not sure if it’s efficient enough because when I check the images it’s still a very big file size compared to if I compress them myself.
I’m using Digital Press at the moment. Google Pagespeed says that, on mobile, my images aren’t properly sized and that savings could be around 1.7 seconds which is lot. How do I serve the correct images on mobile? I can’t modify handlebars and I only have access to code injections.
I found this article which seems to do the trick: https://www.ghostforbeginners.com/display-smaller-images-on-mobile/
That article is (just) over five years old, which would have been before Ghost implemented responsive images via CSS, at least for Casper…
If you check the source of your pages, the <img> tags should have a srcset attribute with different image sizes for different widths listed.
To get even better optimisation, I think you’d need to use either the Ghost-Cloudinary integration (relatively easy but you may exceed the free tier depending on how popular your site is) or use something like Modpagespeed in front of Ghost.
I use ngx_pagespeed, but it’s not terribly easy to set up.
I’ve just taken a look at your site and you’re using externally hosted images (from Unsplash), so they won’t use Ghost’s responsive images feature.
A relatively easy workaround is just to go to unsplash.com, download the images and upload them to your site, to host yourself.
It may be that Pagespeed Insights is being a bit harsh though. Webpagetest says your images are pretty well optimised already.
It’s still worth trying self-hosting your images though… the responsive images feature is worth using imho.
The casper theme is trying to use srcset but it loads the same image for every screen size. Also I’m not using raw images from unsplash. I’m downloading them, resizing them to max width 1920 and making them max 100kb. The original image from unsplash is usually 5 megabytes.
Is this built-in compression turned on by default? Does it work with both Ghost Pro managed hosting and self-hosted?
Yep. It’s turned on by default.
Theme developers can further optimize image optimization through the techniques described here: