not serving optimized version

[berkmh]

got this installed today.

1/ I am able to access the normal image directly from the new cloudfront dist url 2/ I am able to access the optimized version directly by appending url with ?format=auto&width=300 3/ but when requesting from site only the normal unoptimized image is served.

this is being done on a existing Wordpress site using an existing bucket, not sure if that matters or not. what could be going wrong? do I need to update anything on the existing bucket for this to work?

[achrafsouk]

Can you share your website url so I can have a look?

[berkmh]

yes, its https://www.cannabox.com

[berkmh]

I also noticed when I try to access one of the images stored in the optimized bucket directly I get a 403 access denied. not sure if that is expected or not...

https://imgtransformationstack-s3transformedimagebucket6d-78jqx6167qy3.s3.us-west-2.amazonaws.com/wp-content/uploads/2023/05/08150107/grav-19mm-octo-bowl-400x400.jpg/original

not seeing any "transformed" images in this bucket, only with /original

[achrafsouk]

Just checked your website. 1/ your frontend is not requesting any transformations using query strings, this is why the solution is defaulting to the original image. 2/ Its normal that you cant access images directly from the S3 bucket, its an intentional security control.

[berkmh]

1/ your frontend is not requesting any transformations using query strings, this is why the solution is defaulting to the original image.

thanks!

do you happen to know how to make that happen within Wordpress?

[achrafsouk]

i can explore that in the next weeks, but I guess a small change to the CloudFront Function to read transformations as requested by WP should do the trick.

[berkmh]

thank you sir :)

[achrafsouk]

based on this article, it seems that wordpress creates multiple sizes of uploaded images, and its frontend uses the most appropriate one according to screen (responsive design). So the question is what do you need the image optimisation solution for?

[achrafsouk]

If its just to serve different formats of the images (jpeg, webp, avif), than you can change the code of the CloudFront Function to the below:

function handler(event) { var request = event.request; var format = 'jpeg'; if (request.headers['accept']) { if (request.headers['accept'].value.includes("avif")) { format = 'avif';} else if (request.headers['accept'].value.includes("webp")) { format = 'webp'; } } request.uri = request.uri + '/format=' + format; request['querystring'] = {}; return request; }

[achrafsouk]

Please consider this as sample code, and test it before running in prod. I quickly made it on my mobile phone to avoid keeping you waiting till I come back from PTO.

[berkmh]

that worked great! thank you again sir!

[achrafsouk]

awesome