I think this will depend on the case.

Sprites can help.. but what if your sprite contains some simple lines yet must be 500px * 500px... then a canvas (or even svg) will indeed be a lot smaller. On top of that, external javascripts usually are cached (even better than images). In that regard, they indeed help slim down the weight.

However, if you'd expect IE to also 'work', then you might need to start to provide some html5/canvas shims and yes that would increase the weight.

Edit:

Look at this jsfiddle example (I whipped up for this question) where a full-size 'granite' background is created with a radial gradient. As you can see (in the source) this is a LOT less bytes then a separate image (and will alway's be pixel-perfect).

On the other hand, it also (depending on the complexity) take some calculation-time that regular images wouldn't take (after the necessary bytes are downloaded to the client).

Edit2:

I found a link where they did a little test.

In our sprite example, the raw SVG file was 2445 bytes. The PNG version was only 1064 bytes, and the double-sized PNG for double-pixel ratio devices was 1932 bytes. On first appearance, the vector file loses on all accounts, but for larger images, the raster version more quickly escalates in size. SVG files are also human-readable due to being in XML format. They generally comprise a very limited range of characters, which means they can be heavily Gzip-compressed when sent over HTTP. This means that the actual download size is many times smaller than the raw file — easily beyond 30%, probably a lot more. Raster image formats such as PNG and JPG are already compressed to their fullest extent.

However, note all this is still depending how complex the image is: as an extreme counter-example.. try to describe a full color photo of a forrest (leaves..) versus simply a jpg..