# Updates on responsive images in posts?

**URL:** <https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911>\
**Category:** Developer help\
**Created:** [February 10, 2020, 10:00pm UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911 "2020-02-10T22:00:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tippingpints](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tippingpints/32/6298_2.png) [@tippingpints](https://forum.ghost.org/u/tippingpints)\
**Post date:** [February 10, 2020, 10:00pm UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911/1 "2020-02-10T22:00:07Z")

</div>

Any update on actually having responsive images inside of posts?

This works fine but should not be needed.

> [@Responsive images inside of post content](https://forum.ghost.org/t/responsive-images-inside-of-post-content/6866):
>
> Problem When running performance tests on post pages, the images are a major problem. Even on mobile devices a full size image is being loaded. This quickly becomes a lot of data that does not need to be loaded. Current status Inside the post context only {{content}} is available, which returns all HTML for the content. There is no way to use responsive images here. Also no image resizing happens when uploading the pictures via the editor, so no custom solution is possible, such as injectin…

For any blog heavy on images this is really important especially on mobile and/or low bandwidth.

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [February 11, 2020, 8:54am UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911/2 "2020-02-11T08:54:49Z")

</div>

You can configure all the image sizes you want in the theme configuration:

> **[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.

These sizes can be accessed in the theme. Also any images uploaded to the content will have all these sizes added to the `srcset` attribute of the image. Hope this helps!

---

<div class="post-metadata">

**Author:** ![tippingpints](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tippingpints/32/6298_2.png) [@tippingpints](https://forum.ghost.org/u/tippingpints)\
**Post date:** [February 11, 2020, 6:19pm UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911/3 "2020-02-11T18:19:27Z")

</div>

Yep, I understand how to do it for the featured image but this does nothing for the majority of the images in posts.

Why is this template not used for the gallery images? Seems like that should be default or at least allow a partial to be created for the galleries so we can do it ourselves.

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [February 12, 2020, 3:12pm UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911/4 "2020-02-12T15:12:31Z")

</div>

Kevin did a pretty good job of answering that question in the thread you linked to 🙂

> [@Responsive images inside of post content](https://forum.ghost.org/t/responsive-images-inside-of-post-content/6866/2):
>
> The reason `srcset` output hasn’t been implemented for content images yet is due to problems with the current design where only images sizes specified in the theme can be generated to avoid opening up DoS attacks. Content is static so if you change theme or adjust the allowed image sizes to cater for a new design then you may end up with image sizes referenced in your content that can no longer be dynamically generated.
> 
> We need to come up with an alternative method for specifying generally allowed image sizes, then a plan for how old content could be migrated to use dynamic image sizes (if that’s possible). There also needs to be considerations made for how the new feature would work inside markdown cards, again if that’s possible, it may need to be limited to image cards.
> 
> It’s something the core team is thinking about but we want to make sure the implementation is correct this time 😉

---

<div class="post-metadata">

**Author:** ![tippingpints](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tippingpints/32/6298_2.png) [@tippingpints](https://forum.ghost.org/u/tippingpints)\
**Post date:** [February 13, 2020, 11:46pm UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911/5 "2020-02-13T23:46:27Z")

</div>

Yes, he did but that post is nearly a year old now.

Ghost’s own blog isn’t using responsive images correctly. Each url in the srcset is the same at 2000px.

> **[Ghost Resources — Stories & Ideas About Indie Publishing](https://ghost.org/resources/)**
>
> A library of resources to help you share content, grow your audience, and build an independent subscription business in the creator economy!

I notice that if you put in a non-valid size it redirects to the full size image. Why not just make the config sizes the source of truth and fail fast? I’m not sure if the sizes are generated in advance or on the fly but either should be handled with new config changes?

---

<div class="post-metadata">

**Author:** ![transclusion](https://avatars.discourse-cdn.com/v4/letter/t/3ec8ea/32.png) [@transclusion](https://forum.ghost.org/u/transclusion)\
**Post date:** [April 16, 2020, 1:42pm UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911/6 "2020-04-16T13:42:11Z")

</div>

I feel a bit fooled by ghost, [you say](https://ghost.org/docs/api/v3/handlebars-themes/responsive-images/):

> Ghost **image sizes** will be automatically generated **for all images** uploaded directly to Ghost, and will regenerated as needed automatically whenever you change an image, a list of sizes, or the theme being used. Unlike other platforms, there’s no manual work needed to manage image sizes, it’s all done in the background for you.

“All images” sounds for me like also images added to posts. However when uploading a 4000px image inside a post, it will also render only a 4000px image.

I updated the code by @b-m-f from [here](https://forum.ghost.org/t/responsive-images-inside-of-post-content/6866/2) to work with the latest version and e.g. with localhost paths. But it will still load the full-size image, in addition to a scaled down version. So not optimal at all…

Any idea how to fix this? Also is there an ETA for implementing responsive images for post content? Or a plan to update the misleading doc/ comparison with WordPress\*?  
(\*because my ghost blog is slower to load than previously on WordPress with ~30mb of images to load).

 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/3/315add93650770d23d027d2736283b319854b9d5.png)

```auto
function generateResponsiveImage(url) {
  const urlSplit = url.split("content/images");
  const start = "/content/images/size/";
  const end = urlSplit[1];
  return `srcset="${start}w100${end} 100w,
            ${start}w300${end} 300w,
            ${start}w600${end} 600w,
            ${start}w1000${end} 1000w"
    sizes="(max-width: 1000px) 400px, 700px"
    src="${start}600w${end}"
    `;
}

function improvePostPerformance() {
  const contentSection = document.querySelector(".post-full-content");
  let content = contentSection.querySelector(".post-content").innerHTML;

  const images = content.match(/<figure.+?figure>/g);
  const updatedImages = images.map(image => {
    const src = /src="([^"]*)/.exec(image)[1];
    const regexURL = /^((?:http(?:s)?:\/\/)?)((?:www\.)?[a-zA-Z0-9@:%._\+~#=-]{2,256}(\.|\:)[a-z0-9]{2,6}\b)((?:\:\d+)?)((?:[-\w@:%\+.~#&/=]*)?)((?:\?[-\w%\+.~#&=]*)?)$/img;
    const relativeSrc = regexURL.exec(src)[5]
    if (relativeSrc.split("/")[1] === "content") {
      return image.replace(/src="[^"]*"/, generateResponsiveImage(relativeSrc));
    } else {
      return image;
    }
  });

  images.forEach((image, index) => {
    content = content.replace(image, updatedImages[index]);
  });

  contentSection.innerHTML = content;
}

improvePostPerformance();

```

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [April 17, 2020, 3:48pm UTC](https://forum.ghost.org/t/updates-on-responsive-images-in-posts/11911/7 "2020-04-17T15:48:22Z")

</div>

Hey @transclusion, thanks for sharing your thoughts. We agree that the wording in our docs are a little misleading, which is why we’ve updated it accordingly: [How to use responsive images in Ghost themes](https://ghost.org/docs/api/v3/handlebars-themes/responsive-images/#compatibility)

However you mentioned that when you upload a 4000px wide image the same size image is being shown on your site, is that right? Ghost [resizes images down to a more manageable 2000px wide](https://ghost.org/docs/api/v3/handlebars-themes/responsive-images/#overview), which leads me to wonder if your hosting setup is preventing your site from doing any image manipulation. Same for smaller images linked in your custom `srcset` code. All images uploaded directly to Ghost will have alternative sizes available as long as those sizes are defined in the `package.json`, it’s just the use of `srcset` that stops them appearing in post content.

Maybe we can help with your image sizing issues on your Ghost install 😊