Updates on responsive images in posts?

Developer help
6

I feel a bit fooled by ghost, you say:

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 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
image1450×234 22.4 KB

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();