Does using image sprites make sense in HTTP/2?

Question

The bundling of JS and CSS files won\'t be necessary in HTTP/2, but what about image sprites?

Looking at the demo it seems that it already works way faster than HTTP/1.1

Answer 1

I will agree with @dsign that it depends.

There's a trend towards inlining the types of small images that would normally be used as sprites within the CSS itself as data-urls. If you're inlining your images into CSS, just keep them as separate entries, this also has the advantage of per-image optimizations. Optimizations for one image in a sprite don't match others... with PNG, you can opt for potentially lossy conversion into an image at/under 256 colors with alpha transparency layers such as TinyPNG and pngquant. some images can go under 16-colors. When you are creating a combined sprite, these kinds of optimizations are more limited.

I'm leaning towards either simply using CSS inlining or keeping images separate. The positive is that tools like webpack (and others that people are moving towards) makes this a fairly trivial configuration matter for web applications.

If you're in a position to implement server-side push for images via HTTP/2, then keeping them separate more likely works in your favor.