サイトロゴをRetina対応

久しぶりにサイトに手を入れました。
Macbook Pro Retinaにしてからというもの、自分のサイトを見るたびにロゴがにじんで見えるようになって目の焦点が合わない気持ち悪い見栄えになったのでRetina画面に対応させました。
新しいロゴはこちら。あんまり代わり映えしないものです。

今回は、スタイルシートのメディアクエリーを利用して、デバイス別に違う画像を表示するようにしました。Retina対応デバイスでは上記の新しいロゴが表示されるようにしてます。それ以外のデバイスは旧ロゴが表示され、これまでと変わりません。
どんな感じで設置しているかというと

#blog-title a {/* Retina以外のデバイスで表示 */
	background-image: url(image.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	#blog-title a {/* Retina対応デバイスで表示 */
		background-image: url(images@2x.png);
		background-size: 100px 100px;
	}
}

画像サイズが単純計算で４倍になる予定だったんですが、旧ロゴが10 KBだったのに対して新ロゴは175 KBへと17倍以上のサイズアップとなってしまいました。これからRetina対応サイトを作成する際には、予想以上のサイズアップが予想されそうです。
追記：新ロゴの画像サイズですが、大きな勘違いをしてました。作成に使ったイラストレータの画像サイズを参照してました。すいません。PNG画像サイズは16 KBと４倍どころか1.6倍程度に収まっていました。