Strategy for Custom Image Sizes

• JakeOnACF

• November 19, 2023 at 10:28 am

I’m working on a site with a large image library. This site has a custom frontpage that has a banner image with a specific size (which does not match any of the built-in WordPress image sizes). Currently, users upload banner images via an ACF field, and the theme grabs the full-size upload and just forces it to the height/width requirements via CSS, which results in very large images loading and then being resized.

I would like to automatically resize the banner image on upload to the exact size actually we actually need.

The main method of doing this that I can find online is to use the add_image_size() function, whose documentation is available here. After that image size is created, a plugin like Regenerate Thumbnails can resize all existing images to make sure that the custom size is now available.

The problem is that “all existing images” part – the site has literally thousands of images. It would be costly in terms of time, CPU %, and ultimately storage to have a new banner sized version of every single image on the server. Of course, I can always skip the “resize existing images” step and only resize images uploaded from this point forward, but it still leads to the problem that we need one banner image while there are dozens of images uploaded weekly that would not need this size.

I’m wondering if there are any better strategies for this? I’m hoping there’s some way to create an image of specific height/width when (and only when) that image is uploaded via a specific ACF image field. Any ideas?

• John Huebner

• November 19, 2023 at 11:46 am

Is it possible to create a custom image size only for images uploaded to a specific ACF field. No, not really.

It is possible to create a custom image size that is only applied to specific images. The answer to this is yes, but it is only possible if you build your own template code and you use the WP function wp_get_attachment_image_src() or some other function in WP that implements this function like wp_get_attachment_image_url().

This image size will not appear anywhere in WP, it would only be available in code to those that knows that the image size exists. This could not be used in any type of page builder or shown in any WP admin UI including the ACF UI when editing a page.

I don’t have code that I can supply, but the following is then general idea.

This would involve adding a filter on the WP Hook ‘image_downsize’ which is called by the WP function image_downsize(). If you return something other than false from your this filter what you return will be returned by wp_get_attachment_image_src() so you must return the same array that you would expect when calling this function.

In the filter you would need use wp_get_attachment_metadata() and check this data to see if the image of the size already exists.

If it does not then you would generate a new image field using image_make_intermediate_size(), add the size to the image data and update the image data using wp_update_attachment_metadata(). After doing this you would return the image array as explained in the return value of wp_get_attachment_image_src().

Generally, the new image would be created the first time wp_get_attachment_image_src() is called for the image. It would be possible to do this when the post is saved in an acf/save_post filter.