I tend to simply use max-width: 100%
in images. That way you don’t need to know the actual image width, it will naturally not go beyond it. This will make a more reusable class to apply to images of any size or not even using a class but a general image selector will make all images responsive by default.
img {
max-width: 100%;
height: auto;
}
Don’t forget the height: auto
to maintain the aspect ratio.
This natural scaling is quite sufficient for images of about 640px. I would only resort to image switching for quite large images that you may not want to load on mobiles.