Rendered HTML for images different in dev and production

Help Installation
#1

Hi
I’ve recently updated my production instance to v3.20.3 from v3.19.2 and something weird happened with my images.
When I write content using Markdown component and use:

![alt text](/content/images/2020/06/107_0724.JPG)

everything is fine and image is displayed properly. When I use the Image component, while still the the admin panel my image shows up correctly, but it doesn’t load if I preview my post.
Now I looked at HTML that’s being rendered and noticed that it looks like this

<figure class="kg-card kg-image-card kg-card-hascaption">
  <img src="/content/images/2020/06/107_0724.JPG" class="kg-image" alt=""
   srcset="/content/images/size/w600/2020/06/107_0724.JPG 600w, /content/images/size/w800/2020/06/107_0724.JPG 800w">
  <figcaption>my caption</figcaption>
</figure>

Where does the srcset come from? All my images sit in /content/images/, there’s no /content/images/size/ on my server.
Another weird part is, I updated my local version of Ghost to the same one and it’s all fine. On my local machine, in dev mode HTML is rendered as I’d expect it, like that

<figure class="kg-card kg-image-card kg-card-hascaption">
  <img src="/content/images/2020/06/107_0724.JPG" class="kg-image" alt="">
  <figcaption>my caption</figcaption>
</figure>

Any idea what’s going on?

#2

Hi @SixBytesUnder :wave:
srcset was added in a recent update to content images so they can make use of modern responsive image loading. Because the update is very new you’re probably seeing both implementations between versions, as for existing images they will remain the same and won’t have a srcset attribute. You can read more about the srcset attribute here.

Is there anything that’s causing problems for you with how images are rendering? I’d be happy to help with any visual presentation issues you’re having :blush:

#3

Hi @DavidDarnes
Thanks for your comment. Well the problem is, images are not showing at all on frontend :slight_smile:
Because the /size/… folder doesn’t exist at all, browser is trying to upload one of those images and failing because they don’t exist.
I understand what this is used for in HTML, but why Ghost is not creating those resized images, but still requesting them?

#4

I see. This could be an issue with your underlying installation in that case. There should be a sizes directory as feature images already have srcset applied as shown here. You may need to adjust permissions so Ghost is able to create those directories :slight_smile:

#5

srcsets get generated in HTML only under specific conditions ie: when the site url and prefix match for the image. If you are not getting them in the HTML and you expect you should you may need to check your hostname and paths.

The individual images are generated specifically during a request. It should “fix itself” as those srcsets are requested. Try going to one manually and see if it creates it in the backend storage.

That’s the way I understand it, anyway.

#6

@DavidDarnes that’s interesting. I did not have “image_sizes” section in my package.json at all. I’m using a custom built theme. Still if I have no size images specified, why ghost is forcing them upon me in HTML?
@elijahsgh sorry, maybe I didn’t explain that properly. If we take this as an example

<figure class="kg-card kg-image-card kg-card-hascaption">
  <img src="/content/images/2020/06/107_0724.JPG" class="kg-image" alt=""
   srcset="/content/images/size/w600/2020/06/107_0724.JPG 600w, /content/images/size/w800/2020/06/107_0724.JPG 800w">
  <figcaption>my caption</figcaption>
</figure>

We have three image URLs:

  1. /content/images/2020/06/107_0724.JPG - the original one, that works just fine when accessed directly in the browser.
  2. /content/images/size/w600/2020/06/107_0724.JPG - there is no “size” folder on my server and subsequently when I try to access that URL in the browser directly it throws a 404 and does not generate any files for me.
  3. /content/images/size/w800/2020/06/107_0724.JPG - same as point 2.

Let me ask a different question. Can I force Ghost to stick with just plain old simple src="" and do not generate srcset="" at all?

#7

If it’s already existing content you could move it (change the path) so it doesn’t match Ghost’s Local Content path. It won’t add the srcsets. Otherwise it should generate the srcsets and as soon as it is requested it should create it. If you navigate to the srcset links do you just get a 404? What storage adapter are you using?

#8

That’s the problem for some reason, it doesn’t generate the srcset images at all, and when I directly access one of the sized images it throws a 404 and still does not generate it.

I’d be super happy if I can make Ghost just not add srcset to my HTML and just do the plain old src.