Optimize image size

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.

4 Likes