Removing responsivity for images in hosted Ghost Pro

Developer help
1

Hi, I don’t need help anymore, but I struggled with images in my posts in theme Dawn being bit blurry, because they were not loading for retina display correctly. I asked ChatGPT to figure it out, and it actually gave me javascript that can be inserted into the head and works! So, no need to modify theme. This works in first plan of Ghost Pro.

Thought, someone might consider this useful

<script>
window.onload = function() {
    // Select images by class name
    var images = document.querySelectorAll('.kg-image');

    for (var i = 0; i < images.length; i++) {
        var src = images[i].getAttribute('src');
        images[i].srcset = ""; // removing srcset
        images[i].sizes = ""; // removing sizes
        images[i].src = src; // setting src back to its original value
    }
}
</script>

I optimize images myself with https://tinypng.com/ and making sure I got at least 2x the resolution of the width displayed. So, no need for the responsivity. If I had the higher subscription, I guess I would customize the theme, but I don’t. So this is only solution I figured out.

2

While this script will do exactly what you want — replace responsive images with the src image — you likely don’t want to do this.

Responsive images ensure that the right-sized image is served. They make your site fast, save bandwidth for your users, and may even contribute to better SEO. By running this script, you’ll lose out on these benefits. Additionally, you’ll download every post image twice: once for the optimized version and then again for the full-size one.

Now, the HTML srcset, which provides the different possible image sizes, is generally pretty clever. If you’re on a retina display, for example, and you need a 600 px image, it’ll actually fetch a 1200 px one to keep up with the display. But it sounds like it wasn’t giving you sufficient results. Can you share a bit about what kind of images you were uploading and the base size you were using? Even better if you can share a link to a page with the blurry images, so we can see if there are any other steps that can be taken.

3

Well mine isn’t clever at all, the images are blurry. I know I know, I am Windows user with 4K monitor, rejected combo by all Mac designers :), I am using 175% scaling on the OS level, honestly if it loaded 2x size, it would be fine, nobody needs pixel perfect, scaled down is just as sharp. But not enough resolution, I just couldn’t let it go, since my images have text in them. Now despite the 125% and 175% scaling ratios on Windows occasionly causing problems with web or games, they are super popular on laptops and 99+% of web runs just as it should with them. So its not like its bound to be breaking all src-sets and retina images.

I was uploading images that are 2384x1328 … the Dawn theme uses 720px width images, and it was fetching me 1000px width variants. It should have been at least 1260px. I can see that Ghost/Dawn also generates 1600px width variant, but instead of rounding it to this one, it rounded it down and gave me the blurry one, so not sure how this works.

I dont think its all that bad, actually the full size 2384x1328 images when ran through TinyPNG seem much better optimized then even the small blurry ones by original Ghost Pro, some are 50-100kB PNGs with transparency. I don’t see any double loading either, it only loads the original optimized and uploaded by me and that’s it.

I think its fine, its still keeps the lazy load. So even if the image is bigger. Maybe il get penalized on mobile, if I have 1MB images there that are photos, but I can live with that. Since I dont see how else can I fix it without modifying theme, which I can only do on a higher subscription.