Responsive image transformation
leonerdodavinci opened this issue · comments
I was trying to setup responsive image transformations following the official Cloudinary Node.js documentation.
I changed my configuration file 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.
Any help is much appreciated!
Hi @leonerdodavinci,
The adapter is not aware of any transformation processed by the image host, it only "reassigns" the hosting part of the image somewhere else. I personally chose to implement RetinaJS to face this issue but this requires having a fixed content width.
I don't think there's a solution from the adapter perspective since the adapter never passes the image dimensions to Ghost, so this would require deeper Ghost hacking to implement.
Have you asked your question on the Forum?
Thanks!