Should I share the same image style as much as possible or create different styles for each size? 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
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!