I recently worked on a project where we made an image sprite for some 20 images we had.

We created multiple sprites for different displays and used like this:

.something {
    background-image: url("img/sprite.png");
}
@media only screen and (min-device-pixel-ratio:1.6) {
    .something {
        background-image: url("img/sprite@2x.png");
    }
}

Now, over the course of the project, as the images kept changing, we had to re-photoshop the different sprite versions.

This is a big problem with sprites.

With every new change there's an overhead of editing the different sprite versions, replacing them and then doing a cache bust for the CSS. Not to forget setting the position for the slightest change and photoshop blur that occurs every now and then.

There are so many tiny things to care for and adjust while using sprites. All in the name of performance.

This question comes into my mind.. Is any of this "optimization" really necessary?