素材配布などには使いにくいかも知れませんが、データベースなどのアイコンを大量に表示する場合、たんにファイルサイズだけでなく、１つ１つの画像を読み込むときの通信のオーバーヘッドなどで、通信量が大幅に増えることを防止するために、複数の画像を一つにまとめ、それをCSSで分割表示させます。

ブロックレベル要素に対して、clip:rect(top,right,bottom,left)を使うと、指定した部分だけが表示されるようになりますが、この方法だと、topとleftの位置が変わらないので、基準値を計算しづらくなります。
そこで、divで画像を表示する「枠」を作り、background-imageに画像を指定、background-positionで位置を決めます。

１つの画像に30x30ピクセルの４つのアイコンを入れた画像を作成します。

左上の画像の位置は、(0px, 0px)なので

<div style="width:30px;height:30px;background:url(background.png) 0px 0px"></div>

と指定すると、

このように表示されます。

30px下の画像を表示させる場合は、マイナスで指定します。

<div style="width:30px;height:30px;background:url(background.png) 0px -30px"></div>

<img src="spacer.gif" style="width:30px;height:30px;background:url(background.png) -30px 0px;">

画像のsrcに透明画像を指定して、background-imgを表示させるることも出来ます。
画像の背景にすることで、文章の途中に画像を表示させることも出来ます。

問題のファイルサイズですが、４つのファイルサイズはそれぞれ
晴れ：342バイト、曇り：263バイト、雨：287バイト、雪：301バイト、合計1.16kb
合成ファイル：594バイト
ファイルサイズだけでも半分になりましたが、実際にブラウザで表示させるときは、ファイル１つ１つに対して、自分のブラウザ情報などの付加情報を付けてサーバーとやりとりするため、付加情報のサイズは1/4になります。