The problem

If your website uses the same image on a lot of places (e. g. profile photos), it is a better option to resize and have a differente image for each place that uses a different size and i will tell you why.

Let's say your image size is 500x500, but you only use this size for the main page of the article, then you go to the list of articles and the size that you need is only 100x100.

What a lot of people do? Just change the size of the HTML element to 100x100.

This is not a good solution, the browser still will download the bigger image, and besides that, will make effort to resize it in the rendering phase (can you imagine how worse is the experience for a mobile user?).

The solution

You can make use of media queries together with resizing the image to solve this problem:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .profile img {
        background-image: url(../images/user_100x100.jpg);
    }
}

Source and idea

Yes, i know that this seems to be kind of obvious for people who already knew this, but i have seen this same mistake happen countless times in companies that i used to work.

The idea of making this tip came from this article on Nettuts, it is a worth-reading article about web assets, and how treat them so you can have a better website performance.