Confuse about responsive image use cases

In the Responsive Use Case, I confused about the Resolution-based selection and Viewport-based selection. I think they are the same.

I think they are both talking about choosing the appropriate size image for the specify screen size. If big size image apply to small mobile device, bandwidth and performance will be wasted.

Am I right? If I'm wrong, what exactly the differences between Resolution-based selection and Viewport-based selection?