O problema

Se o seu site usa a mesma imagem em muitos lugares (por exemplo, fotos de perfil), é uma opção melhor redimensionar e ter uma imagem diferente para cada lugar que usa um tamanho diferente e eu direi por quê.

Digamos que o tamanho da sua imagem seja 500×500, mas você só usa esse tamanho para a página principal do artigo, então vai para a lista de artigos e o tamanho que você precisa é de apenas 100×100.

O que muitas pessoas fazem? Basta alterar o tamanho do elemento HTML para 100×100.

Essa não é uma boa solução, o navegador ainda fará o download da imagem maior e, além disso, fará um esforço para redimensioná-la na fase de renderização (já imaginou como é pior a experiência para um usuário móvel?).

A solução

Você pode fazer uso de consultas de mídia junto com o redimensionamento da imagem para resolver este problema:

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

Fonte e ideia

Sim, eu sei que isso parece meio óbvio para quem já sabia disso, mas já vi esse mesmo erro acontecer inúmeras vezes em empresas que eu costumava trabalhar.

A ideia de fazer essa dica veio deste artigo da Nettuts, é um artigo que vale a pena ler sobre os ativos da web, e como tratá-los para que você tenha um melhor desempenho do site.