In the layout (archive page) for a Wordpress project I'm working on right now there's a couple of image sizes that do not appear anywhere else. They are quite (by tens of pixels) close to the sizes that we already have registered — let's say, we have 210x300 already and the new size is 230x300. There's also another new image size which doubles that in height and could be also replaced by an already existing image size.

I know that having a lot of differently sized elements might not be good in terms of design consistency — so that could be one argument against it.

But, looking more from a practical side, are there any performance related concerns in adding more and more image sizes via add_image_size? Currently we have 8 custom image sizes, and I'm not sure whether it's optimal to add more of them.

If you have that minor differences between image sizes why not group them and handle them with CSS? I don't have an argument for the moment :)
– LaxmanaMar 7 '17 at 11:00

That's a good option in such cases. But the question remains, still, is there a rationale for optimizing the number of image sizes.
– certainlyakeyMar 7 '17 at 11:04

Depends. One argument could be that if the requested page use all sizes then there will be a lot of image calls (slower response, bandwidth etc) but you can bypass that i.e. by loading images with JS. Also more sizes means more disk space usage. I don't think there is any significant performance concern related to back-end.
– LaxmanaMar 7 '17 at 11:14

1 Answer
1

Depends. One argument could be that if the requested page use all sizes then there will be a lot of image calls (slower response, bandwidth etc) but you can bypass that i.e. by loading images with JS. Also more sizes means more disk space usage. I don't think there is any significant performance concern related to back-end, meaning the db calls / queries etc.

Also if the images are compressed from the begging a few pixels down in width or height won't be a difference in performance.

You can have an image with 600x900 dimension and cover a lot of intermediate sizes adjusting with CSS and keep a good aspect ratio and have a good quality for retina monitors. Better to have a bigger, in dimension, image and shrink it than to have a smaller image and scale it up.