cssでの画像グレースケール指定が効かない

質問

現在cssにて、特定の画像をグレースケール表示にする指定をしているのですが、Androidの機種にてこのcssが効かない事が判明しました。
(SONY NW-F805 ブラウザはこの機種に入っているデフォルトの「ブラウザ」というものです。)
あまりcssに詳しくなく、どなたか対応策ご存知の方、ご教示願えませんでしょうか。
cssのパスの間違いが無い事は確認しております。

cssの指定
img.gray {
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
}

html内での指定
<img src="sample.jpg" width="60" height="80" alt="sample" class="gray" />

お手数をおかけしますが、よろしく御願いいたします。

回答No.1

神崎 渉瑠（@taloo）

CSSをサポートしていないブラウザへの対応方法は昔から使われている決まった方法があります。
CSS適用後のデザインと同じ画像を用意して、その画像を表示してください。

グレースケールの画像を用意して、<img src="グレースケールの画像">とすれば、CSSを使わなくても（CSSをサポートしていないブラウザでも）グレースケールの画像が表示されます。