Misconfigured resizing images with Cloudinary storage adapter

Developer help
1

I have setup Cloudinary Ghost storage adapter for image optimisation and serving images as AVIF where possible. The default configuration worked fine.
However, Pagespeed kept flagging Properly size images as one of the main reasons for a lower score on my site.
To fix this, I tried to setup responsive image transformations following the official Cloudinary Node.js documentation.

I changed my configuration as follows:

"fetch": {
   "fetch_format": "auto",
   "responsive": true,
   "width": "auto",
   "crop": "scale",
   "quality": "auto",
   "secure": false,
   "cdn_subdomain": true
}

The default Ghost Image Optimisation has been disabled as required.

"imageOptimisation": {
    "resize": false
}

However, there seems to be no change in the widths on Pagespeed Insights.
While the image URL shows the parameters:

https://res-4.cloudinary.com/da9mvldpq/image/upload/c_scale,f_auto,q_auto,w_auto/v1/blog-images/2--Resource.jpg

The attribute for the image has the original width and height

<img src="https://res-4.cloudinary.com/da9mvldpq/image/upload/c_scale,f_auto,q_auto,…" class="kg-image" alt="" loading="lazy" width="1500" height="741">

I do not know if the problem is in my configuration or if the adapter does not support these functions.
P.S. I have next to no experience in code and have been piecing things together by searching. Any help is much appreciated!

  • What’s your URL? thedavincistoat.com

  • What version of Ghost are you using? 4.26.1

  • How was Ghost installed and configured? Digital Ocean 1-click image

  • What Node version, database, OS & browser are you using? Node v14.18.2, Ubuntu 20.04.3 LTS, Mac OS Monterey, Microsoft Edge 96

2

Hello,

Unfortunately, the adapter only returns an image path (or URL) and then the Ghost engine fetches dimensions off the image. There’s no way to force dimensions.

Cloudinary dynamically scale images upon loading so Ghost has no mean to know which size it should use into the img tag.

It’s been a while I haven’t dug into Ghost’s code but I’m not sure if there’s a way for an adapter to handle images after they got optimized. I’ll let the Ghost devs answer that :slight_smile:

Cheers!

1 Like