Multiple Images copies

When I upload images using GhostSharp, multiple copies of each image is created (like wordpress?): the year folder and size folder, inside size folder there are two folders w1000 and w2000 each containing copies of images from the year folder.
Why is it happening? How to disable this?

This is part of our responsive images feature How to use responsive images in Ghost themes

We don’t actually generate the images in the size directory on upload, but when they’re requested from the server they’re generated dynamically.

If you do not wish to use responsive images you can update your theme to not use them anymore, and they won’t be generated :slight_smile:

1 Like

If you’re short on space, I could see that being an issue for sure… but I think most even basic hosting packages come with multiple GB. I’m using the $5 plan at DigitalOcean and it’s got 25 GB of storage.

The difference in image sizes can be considerable though, especially on mobile plans, so it might be better for your visitors if you just let it create the various sizes. Just my 2 cents.

1 Like

It’s just we’ve reached almost 50 gigabytes with wordpress in 5 years that our site exists and it’s becoming a problem. Not even because of the size itself, but it’s just unused copies).

So, if I decide to, I can safely remove the size folder, if I understand this correctly?

@unnanego - Rather than removing folders, I find it’s safest to modify the templates so they are simply not attempting to find and load files that are not there.

I think that the folders (and the images contained within them) will continue to be re-created as long as the theme templates contain code that is pointing to them.

@egg is this correct?

2 Likes

Can someone explain with words for dumb people?

yeah, would be nice

@unnanego, @ewartlace – let’s try again… so here is the example of the code used in the Casper theme (the index.hbs template in that theme) which does request the responsive images:

<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="{{title}}"
/>

What you need to do is to open up that file (index.hbs) in your text editor, and change it to this instead (all we are doing here is removing the above srcset and sizes lines):

<img class="post-image"
    src="{{img_url feature_image}}"
    alt="{{title}}"
/>

… looking at it the following way, it is just an image tag…

<img class="post-image" src="{{img_url feature_image}}" alt="{{title}}" />

This is the minimalistic approach. This will load the one and only image you uploaded as the featured image for each post, but in the exact size of the image before you uploaded it in the post setting.

And since we have remove the srcset portion of the code, no additional copies of the images will be made, because we have removed the portion of the code in the index.hbs template that was requesting (and therefore generating) a different size of the original image.

Let me know if you need more explanation… I know these things take some simplification to wrap our heads around… :nerd_face:

2 Likes

@denvergeeks Thanks for an in-depth answer - everything you’ve said here is correct!

To clarify on the size folder - it is totally safe to delete this at any point, you may treat it as a cache.

Like denvegeeks mentions though, this folder will be regenerated everytime resized images are requested, so you’ll need to update your theme to stop this, again as denvergeeks has shown you :relaxed:

2 Likes

This is true up to a point. Images in content will also use srcset attributes and generate resized images to increase performance for your site’s visitors.

If you want to disable all image resizing you can do so in your site’s config:

{
    ...
    "imageOptimization": {
        "resize": false,
        "srcsets": false
    }
}

If you do that, make sure to remove any usage of srcset from your theme otherwise you can decrease performance for your site visitors further by introducing redirects and mismatched sizing hints in the html. If you’ve had a site running for a while with srcsets enabled you’ll also want to regenerate the html value of all of your posts for similar reasons.

3 Likes

This doesn’t work on Hero/Cover images on Casper. Can you please take another look and see if there is something missing?

What isn’t working exactly?

If I go into index.hbs, the section posted above by Denvergeeks doesn’t exist. There is no post-image srcset in that file.

Figured it out… the above information doesn’t work and isn’t complete. To disable any and all resizing her are the tweaks you need to make to Casper:

index.hbs

Replace this:
        <img class="site-header-cover"
            srcset="{{img_url @site.cover_image size="s"}} 300w,
                    {{img_url @site.cover_image size="m"}} 600w,
                    {{img_url @site.cover_image size="l"}} 1000w,
                    {{img_url @site.cover_image size="xl"}} 2000w"
            sizes="100vw"
            src="{{img_url @site.cover_image size="xl"}}"
            alt=""
        />

with this:

	<img class="site-header-cover"
               src="{{@site.cover_image}}"
                alt="{{title}}"
                />


page.hbs

Replace this:
            <img
                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="(min-width: 1400px) 1400px, 92vw"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />

with this:

           <img class="article-image"
               src="{{img_url feature_image}}"
                alt="{{title}}"
                />


post.hbs

Replace this:

            <img
                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="(min-width: 1400px) 1400px, 92vw"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />

with this:

           <img class="article-image"
               src="{{img_url feature_image}}"
                alt="{{title}}"
                />


tag.hbs

Replace this:

                    <img class="post-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, 800px"
                        src="{{img_url feature_image size="m"}}"
                        alt="{{title}}"
                        loading="lazy"
                    />

with this:

	<img class="post-card-image"
    src="{{img_url feature_image}}"
    alt="{{title}}"    
    loading="lazy"
        />


In partials directory post-card.hbs

Replace this:

        <img class="post-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, 800px"
            src="{{img_url feature_image size="m"}}"
            alt="{{title}}"
            loading="lazy"
        />

With this:

	<img class="post-card-image"
    src="{{img_url feature_image}}"
    alt="{{title}}"    
    loading="lazy"
        />

Furthermore in your config file, you need the following in addition too - the srcsets option doesn't really do anything for Casper (from what I can tell, because srcsets is baked into the theme), but it is necessary for third party themes that might not have it specified:

"imageOptimization": {
        "resize": false,
        "srcsets": false
    }

That option isn’t for themes, it’s for the post content output. By default image cards would have the srcset attribute applied if resizing is available, if you have "resize": false you shouldn’t need "srcsets": false as well.

No, that’s incorrect. If you do not include

"imageOptimization": {
        "resize": false,
        "srcsets": false
    }

It will still resize images uploaded to a post. I just removed the srcsets option to test it, and sure enough, it resizes/recompresses images. You have to have that enabled in the config.