SRCSET source image using thumbnails instead of source for manipulation

[atsbob]

I am not sure if this is the intended behaviour, but I assumed using CF Image Optimization would mean that all manipulations would be done on the source file rather than the thumbnail. Here is a sample excerpt from a vanilla installation with the Twenty twenty theme.

<img loading="lazy" src="http://site.com/cdn-cgi/image/width=580,height=386,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1024x682.jpg"
 alt="" class="wp-image-13"

srcset="http://site.com/cdn-cgi/image/width=1024,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1024x682.jpg 1024w, 
http://site.com/cdn-cgi/image/width=300,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-300x200.jpg 300w, 
http://site.com/cdn-cgi/image/width=768,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-768x512.jpg 768w, 
http://site.com/cdn-cgi/image/width=1536,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1536x1024.jpg 1536w, 
http://site.com/cdn-cgi/image/width=1200,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1200x800.jpg 1200w, 
http://site.com/cdn-cgi/image/width=1980,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image-1980x1320.jpg 1980w, 
http://site.com/cdn-cgi/image/width=2000,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2022/02/image.jpg 2000w" 

sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="682"> 

For each line, the plugin is pulling the thumbnail size (e.g. image-1024x682.jpg) rather than using image.jpg (original) to perform the manipulation.

Disclaimer: Cloudflare is not enabled on this site yet as I just wanted to see the URL structure for planning purposes.

[bgabler]

Opened a PR that got a bit borked from my editor settings (sorry guys).

This fix should also help with reducing origin pulls

Resizing causes the original image to be fetched from the origin server and cached — following the usual rules of HTTP caching, Cache-Control header, etc.. Requests for multiple different image sizes are likely to reuse the cached original image, without causing extra transfers from the origin server.

Since all resize url's will have the same source image, it should pull it from the Cloudflare Cache to resize as needed vs pulling all the different dimensions from the origin each time.

[Mecanik]

This was definitely not an intended behaviour and I cannot believe my eyes I missed this. However, if we think about it the performance is much greater because CloudFlare would pull already a smaller image than normal and optimize it.

At the end you would actually gain from this something, but I do agree it should only pull the original image.

@bgabler Please submit a new PR with proper indentation and I will merge it.

Many thanks guys.

[bgabler]

This was definitely not an intended behaviour and I cannot believe my eyes I missed this. However, if we think about it the performance is much greater because CloudFlare would pull already a smaller image than normal and optimize it.

At the end you would actually gain from this something, but I do agree it should only pull the original image.

@bgabler Please submit a new PR with proper indentation and I will merge it.

Many thanks guys.

Will do, sorry editor malfunction due to the spaces and tabs mix in the original.

The one other downside to optimizing a smaller image vs the original is it resulted in a pretty massive quality loss.

none the less, will get a new PR up tomorrow :)

[bgabler]

PR has been updated and linked.

You may want to run a linter just for the future as there is a mix of spaces and tabs in the original version.