# Are images added via Ghost optimised?

**URL:** <https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040>\
**Category:** Developer help\
**Created:** [June 12, 2020, 9:32am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040 "2020-06-12T09:32:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![NicolasK](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/nicolask/32/7905_2.png) [@NicolasK](https://forum.ghost.org/u/NicolasK)\
**Post date:** [June 12, 2020, 9:32am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/1 "2020-06-12T09:32:15Z")

</div>

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/](https://soundsirius.digitalpress.blog/products/)

---

<div class="post-metadata">

**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\
**Post date:** [June 12, 2020, 9:38am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/2 "2020-06-12T09:38:13Z")

</div>

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:

```plaintext
        {{#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:

> **[How to use responsive images in Ghost themes](https://ghost.org/docs/themes/assets/)**
>
> Ghost themes support automatic image resizing, allowing you to use a minimal handlebars helper to output different image sizes.

---

<div class="post-metadata">

**Author:** ![NicolasK](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/nicolask/32/7905_2.png) [@NicolasK](https://forum.ghost.org/u/NicolasK)\
**Post date:** [June 12, 2020, 9:55am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/3 "2020-06-12T09:55:53Z")

</div>

So all I have to do is inject that code in the header?

---

<div class="post-metadata">

**Author:** ![chenningg](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/chenningg/32/6461_2.png) [@chenningg](https://forum.ghost.org/u/chenningg)\
**Post date:** [June 13, 2020, 3:09pm UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/4 "2020-06-13T15:09:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\
**Post date:** [June 14, 2020, 8:14am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/5 "2020-06-14T08:14:04Z")

</div>

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:

> **[Configuration - Adapt your publication to suit your needs](https://ghost.org/docs/config/)**
>
> Find out how to configure your Ghost publication or override Ghost's default behaviour with robust config options, including mail, storage, scheduling and more!

---

<div class="post-metadata">

**Author:** ![chenningg](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/chenningg/32/6461_2.png) [@chenningg](https://forum.ghost.org/u/chenningg)\
**Post date:** [June 14, 2020, 8:26am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/6 "2020-06-14T08:26:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NicolasK](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/nicolask/32/7905_2.png) [@NicolasK](https://forum.ghost.org/u/NicolasK)\
**Post date:** [June 30, 2020, 9:31am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/7 "2020-06-30T09:31:07Z")

</div>

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/](https://www.ghostforbeginners.com/display-smaller-images-on-mobile/)

---

<div class="post-metadata">

**Author:** ![GainfulShrimp](https://avatars.discourse-cdn.com/v4/letter/g/bc79bd/32.png) [@GainfulShrimp](https://forum.ghost.org/u/GainfulShrimp)\
**Post date:** [June 30, 2020, 4:04pm UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/8 "2020-06-30T16:04:31Z")

</div>

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](https://ghost.org/integrations/cloudinary/) (relatively easy but you may exceed the free tier depending on how popular your site is) or use something like [Modpagespeed](https://www.modpagespeed.com/) in front of Ghost.

I use [ngx\_pagespeed](https://github.com/apache/incubator-pagespeed-ngx), but it’s not terribly easy to set up.

---

<div class="post-metadata">

**Author:** ![GainfulShrimp](https://avatars.discourse-cdn.com/v4/letter/g/bc79bd/32.png) [@GainfulShrimp](https://forum.ghost.org/u/GainfulShrimp)\
**Post date:** [June 30, 2020, 4:17pm UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/9 "2020-06-30T16:17:27Z")

</div>

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](http://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.

---

<div class="post-metadata">

**Author:** ![NicolasK](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/nicolask/32/7905_2.png) [@NicolasK](https://forum.ghost.org/u/NicolasK)\
**Post date:** [July 2, 2020, 8:35am UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/10 "2020-07-02T08:35:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [January 12, 2022, 4:49pm UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/11 "2022-01-12T16:49:12Z")

</div>

4 posts were split to a new topic: [Feature image srcset is not loading correct size](https://forum.ghost.org/t/feature-image-srcset-is-not-loading-correct-size/27866)

---

<div class="post-metadata">

**Author:** ![chillbilldill.com](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/chillbilldill.com/32/22849_2.png) [@chillbilldill.com](https://forum.ghost.org/u/chillbilldill.com)\
**Post date:** [February 5, 2023, 7:00pm UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/12 "2023-02-05T19:00:20Z")

</div>

Is this built-in compression turned on by default? Does it work with both Ghost Pro managed hosting and self-hosted?

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [February 7, 2023, 3:36pm UTC](https://forum.ghost.org/t/are-images-added-via-ghost-optimised/15040/13 "2023-02-07T15:36:31Z")

</div>

Yep. It’s turned on by default.

Theme developers can further optimize image optimization through the techniques described here:

> **[How to use responsive images in Ghost themes](https://ghost.org/docs/themes/assets/)**
>
> Ghost themes support automatic image resizing, allowing you to use a minimal handlebars helper to output different image sizes.
