解像度が足りない画像でもマシに見せるCSS（モダンブラウザ専用）

最近だとPCでもたまにバカみたいに解像度高いディスプレイ使ってるケースとかあったりするので、そんな環境用にメインビジュアルとか背景画像とかでバカでかい画像準備しないでCSSでぼかす方法です。

画像ぼかしちゃおう

CSS3のfilterでぼかしてしまいましょう。
ブラウザの対応状況はコチラ
IEは基本対応していませんが、CSS-Filters-Polyfillとか使うと使えるっぽいです。
他にもIE独自のFilterとかありますが、その上に重ねた要素がおかしくなったりするので、あんまり使わない方が良いかも。

実装サンプル

<style>
.filterSampleBlur, .filterSampleBlur img{
    width:1200px;
    max-width:1200px;
}
.filterSampleBlur img.blur{
    filter:blur(2px);
    -moz-filter:blur(2px);
    -webkit-filter:blur(2px);
    -ms-filter:blur(2px);
}
</style>
<div class="filterSampleBlur">
<img src="https://drscdn.500px.org/photo/64932615/w%3D440_h%3D440/6406a9c82eae61635f60da28177ecbf7?v=0" />
<img src="https://drscdn.500px.org/photo/64932615/w%3D440_h%3D440/6406a9c82eae61635f60da28177ecbf7?v=0" class="blur" />
</div>