ACF Blocks Optimise Images on Upload - Sage Preferred Plugin?

[ushka]

Hello,

I’m using the kindly put together library https://github.com/MWDelaney/sage-acf-wp-blocks

I had to slightly tweak the code to get it to work on my site, as per this post - https://github.com/MWDelaney/sage-acf-wp-blocks/pull/9/commits/9da69c2c2647efcc054a6c52266e3f524184bdb3

I have a Hero block I’m making, not dissimilar to the one discussed in this post - https://joeyfarruggio.com/wordpress/custom-gutenberg-block-advanced-custom-fields/

My question is… if we allow users to upload images, they will likely upload massive images that will slow down the site.

Is there a plugin that anyone is aware of for optimising the image on upload that works well with sage?

[alwaysblank]

If you’re using ACF, then on your ACF image field you can limit the height and/or width and/or size of an uploaded image: https://www.advancedcustomfields.com/resources/image/

[ushka]

Good point, you can set the file size limit which should help however it would be great if there was a way to run some form of image optimisation as well.

Thanks for your reply.

[alwaysblank]

Wordpress runs image optimization on all images it generates, which has generally been enough for my purposes.

You can adjust the JPEG compression using this filter: https://developer.wordpress.org/reference/hooks/jpeg_quality/

You can create new image sizes to use with this function: https://developer.wordpress.org/reference/functions/add_image_size/ (Images with the same ratio of height/width with be automatically included in the srcset for <img> elements generated w/ WordPress’s internal functions).

You can also change the maximum image width that WordPress will put in the aforementioned srcset with this filter: https://developer.wordpress.org/reference/hooks/max_srcset_image_width/ (You can use this to prevent especially large images from being downloaded.)

In my experience, a combination of these things and good responsive images practices w/ srcset and sizes attributes will help make sure browsers only download images as large as they need, not larger.