Does Ghost make multiple image sizes?

Using Ghost
1

I saw a video that briefly described how Ghost takes a huge photo file and optimizes it for the web, which is good. But what is it doing behind the scenes? Is it making multiple copies of the same image, so it can serve the most appropriate size based on which type of device a user is using?

Thank you.

2

Yes, that is what’s happening.

The different sizes are controlled on a theme level:

3

Is there an easy way to determine if the theme I paid for is making use of this feature?

4

Yeah, just have a look in the package.json file and check if there is an image_sizes configuration in it.

5

To be clear that’s only true for images used by the theme such as on index pages. Within post content all images are resized using Ghost default content sizes independent of any theme settings.

1 Like
6

Ohh nice. Thank you for clarifying! I somehow missed that and wasn’t aware of that :smiley:

7

@jannis, I’m not sure if these dimensions are used to squish a larger file into a smaller size, or if it’s actually making use of smaller image files as needed.

sizes
sizes700×1522 193 KB

8

Ghost generates the image size when it’s requested. That image sized is then saved for future use.

The package.json specifies which images sizes should be available. The theme then needs to make use of those image sizes like this:

<img class="post-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="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/>

As @jannis said, you can learn more here → How to use responsive images in Ghost themes

The additional optimization themes can make is to also transform the file format because, e.g., webp images are generally much smaller in size than jpeg.

1 Like