7 – Do I share as much as possible the same picture style or create different styles for each size?

I have an image field displayed in slightly different sizes.

Let's say:

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

My question is :

What is the best practice?

1.
Creating three different image styles for each size.

2
Create a single image style and share it (set the size accordingly by CSS)
For example, create only the image style of 150px, then reduce it to 100px and 120px by CSS

Why am I wondering if:

1 obviously creates more files but 2 uses larger files useless for 120px and 150px