img-responsive does not make an image responsive on its own

The class name suggests it handles responsive images. What it actually does is three declarations, and none of them affects which file gets downloaded — a 2400px photo is still a 2400px download on a phone.

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

It stops an oversized image from breaking the layout, which is worth having, but the bytes are the actual problem on mobile and this does nothing about them. Pair it with srcset for that. The display: block also catches people out: an inline image inside a paragraph stops flowing with the text once the class is applied, and centring then needs .center-block rather than text-align.