Automatic resize images?

Using Ghost
1

I just set up Ghost on my own server with the theme Casper. I added a publication cover image and feature images to some imported posts. However, I noticed that the images are all kept in their original size. I assumed Ghost would resize them automatically, so I didn’t think about it when uploading the images that they are all several MB heavy each.

Is there any setting or extension/plugin that optimizes/downsizes uploaded images automatically? Or is that something you are expected to do yourself? Just curious how it’s supposed to work.

2

Resizing of body content is handled by Ghost. Resizing of featured images and cover image would be handled by the theme (well, the theme directs Ghost to make additional sizes, and them uses a srcset to make the browser retrieve the right one). I’m looking at a Casper demo and it looks like srcsets are there, so I’d be interested to see a link to your site, if you think that isn’t happening.

(It’s also possible to turn off image resizing. But you’d have done that deliberately – it’s not a default.)

3

Okay, I see. So it makes an additional size for smaller resolutions.

I had thrown in some 3 MB .png images that were 1500 px wide. The feature images in Casper are only max 1200 px wide though, so 1500 px is a bit unnecessary. And .jpg would be much more space efficient compared to .png.

Now I manually resized my feature images and reuploaded them. 1200 px wide and .jpg with 70% quality, brought them down to about 90-130 KB each.

I have changed theme to Source now though. And I manually resized all feature images. And I also removed the publication cover image. So my setup if a bit different from what I originally posted. But my site is at https://www.danopcode.com/. I guess it’s as best as it can be now, I suppose.

1 Like
5

Talking of JPG v PNG, what about WebP? Huge reduction in file size from JPEG! Although I came across AVIFs today and was intrigued by how to add them, as I see themes using them, so must be done somehow. But why use the backdoor? Why does Ghost not support AVIFs in the editor yet, with fallbacks for unsupported browsers?

6

Ghost’s automatic image resize also supports converting formats, including AVIF and WEBP. But your theme “should ask” for it. It’s not done on upload time. For example, in Source theme you can see a file named partials/feature-image.hbs with content:

{{#if feature_image}}
    <figure class="gh-article-image">
        <img
            srcset="{{img_url feature_image size="s"}} 320w,
                    {{img_url feature_image size="m"}} 600w,
                    {{img_url feature_image size="l"}} 960w,
                    {{img_url feature_image size="xl"}} 1200w,
                    {{img_url feature_image size="xxl"}} 2000w"
            sizes="(max-width: 1200px) 100vw, 1120px"
            src="{{img_url feature_image size="xl"}}"
            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
        >
        {{#if feature_image_caption}}
            <figcaption>{{feature_image_caption}}</figcaption>
        {{/if}}
    </figure>
{{/if}}

This code provides different sizes of the same feature image according to the browser viewport size, by keeping original format. But img_url also has format option. So you can do this if you always want to use webp format on your featured images:

{{#if feature_image}}
    <figure class="gh-article-image">
        <img
            srcset="{{img_url feature_image size="s" format="webp"}} 320w,
                    {{img_url feature_image size="m" format="webp"}} 600w,
                    {{img_url feature_image size="l" format="webp"}} 960w,
                    {{img_url feature_image size="xl" format="webp"}} 1200w,
                    {{img_url feature_image size="xxl" format="webp"}} 2000w"
            sizes="(max-width: 1200px) 100vw, 1120px"
            src="{{img_url feature_image size="xl" format="webp"}}"
            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
        >
        {{#if feature_image_caption}}
            <figcaption>{{feature_image_caption}}</figcaption>
        {{/if}}
    </figure>
{{/if}}

But, there is even a better option: Providing best format according to browser support. If you want to use avif format if visitor’s browser support then use webp (or original format) as fallback you can use picture HTML element with source. (Don’t miss including img tag inside picture)

{{#if feature_image}}
  <figure class="gh-article-image">
    <picture>
      <source srcset="{{img_url feature_image size="s" format="avif"}} 320w,
                    {{img_url feature_image size="m" format="avif"}} 600w,
                    {{img_url feature_image size="l" format="avif"}} 960w,
                    {{img_url feature_image size="xl" format="avif"}} 1200w,
                    {{img_url feature_image size="xxl" format="avif"}} 2000w"
        type="image/avif"
      >

      <img srcset="{{img_url feature_image size="s" format="webp"}} 320w,
                  {{img_url feature_image size="m" format="webp"}} 600w,
                  {{img_url feature_image size="l" format="webp"}} 960w,
                  {{img_url feature_image size="xl" format="webp"}} 1200w,
                  {{img_url feature_image size="xxl" format="webp"}} 2000w"
        sizes="(max-width: 1200px) 100vw, 1120px"
        src="{{img_url feature_image size="xl" format="webp"}}"
        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
      >
    </picture>
    
    {{#if feature_image_caption}}
      <figcaption>{{feature_image_caption}}</figcaption>
    {{/if}}
  </figure>
{{/if}}

You can also add more source definitions for sure (like try avif, then webp then jpeg).

But be aware, then you define more variants, eventually with your visitors’ requests, you will have more image files for each source image in your storage.

1 Like