I have an image field displayed in slightly different sizes.

Let's say :

100px X 100px as a view field format
120px X 120px as another view field format
150px X 150px as a node view format

My question is :

Which is the best practice ?

1. Creating three different image styles for each size.

2. Creating just one image style and share it (Fixing the size accordingly by CSS) For example, create just the image style of 150px and then make it smaller for 100px and 120px by CSS

Why I wonder is :

1 obviously creates more files but 2 uses unnecessary bigger files for 120px and 150px

  • 1
    If the image styles have same ratio and the file sizes are in same range, not equal but almost the same, it's better to use only the highest resolution image style (in your case 150 px) – Alireza Tabatabaeian Apr 14 at 8:28
  • If this question is not already asked on ux.stackexchange.com, I bet you would get a lot of very helpful answers. For now, page load speed and concern for user mobile data are key indicators. it is always recommended to serve only what file size you need. – Prestosaurus Apr 14 at 14:54

I would zoom out the thinking and try to get two things into perspective:

  • user interaction "paths" and which images they "touch"
  • graphics design decision for the image sizes

What is the likeliest user scenario for downloading each image size?

What is the path your users take through the site that would trigger downloading those image sizes? Will the user see many of the 100px images in a list, then click through to only one that would display the 120px one, and then clicking on that one so 150px is displayed in a lightbox?

Aim to reduce downloaded data bandwidth

Diagram some likely user paths (if you have some analytics on your site you probably already know this, better to get data instead of making assumptions) and calculate how many Kb/Mb of image data users would most often download under those paths.

Compare if the data load is larger with 1, 2 or 3 sizes for those "user paths".

If you have a lot of mobile visitors the data size is super important. Your goal should be to provide meaningful content and experience while keeping the data exchange to a minimum.

If users click through a lot and you end up serving the largest 150px size very often, it may not be useful to have the smaller sizes, better use 150px and size down with CSS.

If your images are such that with the change in pixel size the file sizes also vary greatly (if the 100px image is disproportionately smaller in file size than the 150px one) then it may be useful to have a smaller size, especially if users mostly view "list pages" with smaller images and don't click through, so they rarely see the larger image.

Don't forget server resources and requests

The downloaded data size isn't the only criteria, reusing the same size pulls it out of cache, so saved bandwidth again, fewer server requests.

If you upload a lot of images and have a lot of image styles, server processing power is being used for that and can get congested in extreme cases. You also end up with a lot of data on the disk so storage is also important, as mentioned in comments.

Graphics design refinement

Having so many close-but-not-identical style elements might be a sign you could improve your graphics design by making different design elements more consistent. How justified is it to display some image type in that many different sizes, is there a need for it?

Taking a blind guess I don't expect a lot of difference between 100px, 120px and 150px so I would try and see whether I'd need 100px and 120px at all, maybe 120px and 150px would be enough? 3 sizes do seem excessive here, 3 sizes are usually used when there is a much larger difference between them (100px, 500px, hero).

I have a real-world example where I disabled image sizes completely because the uploaded originals were so well optimized that the smaller versions made by Image styles were bigger in file size than the large pixel original, even after using custom imagemagick rules!


Generally, as @Prestosaurus mentioned, you want to load the smallest image necessary, however there are a couple things to consider

  • Whether the same image is loaded via all the styles or if any individual image would only be loaded once. If you have a single page loading the same image with all 3 styles, that's not as good as just displaying the image with the largest style in all 3 places. I'd probably opt to use individual styles if a single page won't show the same image via multiple styles.
  • The additional server space need to store the additional styles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.