画像を白黒にする方法【CSS filter】

「カラー画像はあるけど、ホバー時だけ白黒にしたい」「準備中の商品だけモノクロ表示にしたい」…そんな時、わざわざPhotoshopでモノクロ版の画像を書き出す必要はありません。CSSのfilterプロパティを使えば、元の画像は1枚のままで白黒表示に変換できます。

grayscale()で画像を白黒にする

img {
  filter: grayscale(100%);
}

grayscale()の中の数値は0〜100%で指定でき、数値を小さくすると彩度が少し残った「薄いモノクロ」になります。完全な白黒ではなく、少しレトロな雰囲気を出したい時は50%前後を試してみるのもおすすめです。

ホバー時だけカラーに戻す(よくある実装パターン)

一覧ページでは白黒表示にしておき、マウスを乗せた瞬間だけカラーに変わる演出は、ECサイトやポートフォリオサイトでよく使われる定番のテクニックです。「注目してほしい」という視線誘導の効果があります。

img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

img:hover {
  filter: grayscale(0%);
}

transitionを付けておくと、白黒⇔カラーの切り替わりがふわっと滑らかになります。付けないと一瞬でパチッと切り替わってしまい、少し安っぽい印象になるので、実務では基本セットで指定しておくのがおすすめです。

実務での注意点: 画像の重さは変わらない

ここが誤解されやすいポイントですが、filter: grayscale()は表示上の見た目を変えているだけで、画像ファイル自体は元のカラー画像のまま読み込まれています。「白黒にすれば画像が軽くなる」わけではないので、表示速度の改善が目的の場合は、別途画像の圧縮・最適化が必要です。

grayscale以外にもあるfilterプロパティ

filterプロパティにはgrayscale以外にも様々な効果があり、組み合わせて使うこともできます。

img {
  filter: blur(5px);        /* ぼかし */
  filter: brightness(1.2);  /* 明るさ調整 */
  filter: sepia(100%);      /* セピア調 */
  filter: grayscale(100%) brightness(0.9); /* 組み合わせ */
}

まとめ

• filter: grayscale(100%);だけで、元画像はそのままに表示上だけ白黒にできる
• ホバー時のカラー復帰は視線誘導の定番テクニック。transitionを付けると自然な動きになる
• 見た目が変わるだけで画像ファイルの重さは変わらない点に注意
• blur・brightness・sepiaなど他のfilter効果と組み合わせることもできる