Roots Discourse

ACF Blocks Optimise Images on Upload - Sage Preferred Plugin?

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?

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/

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.

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.

2 Likes

This topic was automatically closed after 42 days. New replies are no longer allowed.