なぜアンチエイリアスを無効にできないのか? - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

なぜアンチエイリアスを無効にできないのか?

法人・ビジネス ホームページ・Web制作 2012/12/10 21:29

HTMLで画像を拡大表示させると、勝手にアンチエイリアスされてピントがぼやけたような画像で表示されます。
このアンチエイリアス機能、便利な場合もあるとは思いますが、不便な場合もあります。
IEとFireFoxでは、無効にする方法が用意されてます。
しかしGoogleChromeとOperaは、その方法が用意されてないようです。
なぜ用意されてないのでしょう?そこが不思議でなりません。

アンチエイリアスしない方がいい場合など、いくらでもあります。
横3ピクセルの画像を拡大表示させ、フランス国旗を描きたい場合だってあるでしょう。
網目模様を拡大表示させ、市松模様を表示させたい場合だってあるでしょう。
横縞模様を拡大表示させ、ストライプを表示させたい場合だってあるでしょう。
なのに、なぜ、その方法すら、用意されてないのでしょう?

こうした画像節約手法は廃れた考えだということは理解してます。
ですが、方法としては残しておくべき。その方法を採用するかどうかはHP制作者に委ねるべきです。
なのに、なぜ、その選択肢すら用意されてないのか?そこが、不思議でなりません。

一番困るのはドット絵講座です。
ドット画像を、実寸、2倍、4倍、8倍、それぞれで表示させたい場合だってあるでしょう。
それともいちいちそれら画像を用意せねばならないのでしょうか?
ChromeとOperaの開発者は、ドット絵講座のようなサイトを、見たことがないのでしょうか?
プロのブラウザ開発者が、なぜこんなことにすら気付かないのでしょうか?
それともアンチエイリアスを無効にできない理由があるというのなら、ぜひお聞かせいただきたいものです。

専門家の方々は、この事実について、どのようにお考えですか?ご意見お聞かせいただければ幸いです。
以上、よろしくお願いします。

Hajestiaさん ( 長野県 / 男性 / 31歳 )

回答:1件

井上 みやび子

井上 みやび子
Webエンジニア

- good

バグに近いのではないかと思います

2012/12/11 20:51 詳細リンク
(4.0)

始めまして。Web開発などを行っております、すぐ使える株式会社の井上と申します。

画像のアンチエイリアスの件ですが、確かにおっしゃる通りですね。
少し調べてみましたら、やはり、Google Chrome ではCSSでの調整が有効にならない、なぜだ、という議論は続いているようです。

CSS3 でもこのあたりをコントロールする仕様が提案されていますので、実装が無いのはブラウザの機能不足という気がします。

「Chrome での設定方法」として検索するとヒットする方法はあるのですが、現時点(2012年12月)では実際にやってみるとアンチエイリアスされてしまう事から、少なくとも現在の最新バージョンではバグなのか、意図したものなのか、対応が無い事は確かなようです。

ただし、Opera の方では以下の設定でアンチエイリアス無しが可能です(Opera 12.11 で確認)。Chrome の方もある日対応されているかもしれませんね。

【現在の所Webを探して見つかった「ベストプラクティス」】

img.pixelated {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Mac Safari (Chrome?) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE */
}

Safari はMacだと期待通りですが、Windowsの方は若干アンチエイリアスされてしまうようです。

現時点で Chrome を無視したサイト制作は難しいですので、結局の所あまりお役に立てない感じですが、ご参考になりましたら幸いです。

画像
CSS

評価・お礼

Hajestiaさん

2012/12/12 02:11

井上様、ご回答ありがとうございます。
ご教授いただいた方法を試してみましたが、Operaでは上手く行きましたが、Chromeではアンチエイリアスされたままでした。

これは、バグでも機能不足でもなく、「配慮不足」だと私は思います。開発者の。
「アンチエイリアスができて、非アンチエイリアスができない」なんてこと、技術的にあり得ませんからね。
疑問に思うのは私だけではないのですね。ならばなおさら不思議です。Chromeの開発者は、いったい何を考えているのでしょう…?

それにしても、無効にするための記述が、なぜブラウザごとに違うのでしょう?
CSSで統一すればいいのに、それができない理由でもあるのでしょうか?

CSSにせよブラウザにせよ、「こうすればいいだろう」と思ったことがうまく行かない…そんなことが多すぎて、Web制作がイヤになりつつありますよ…orz

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

グーグル検索結果での問題点について matumatukodomoさん  2011-08-06 03:23 回答4件
Web制作を請負う際に使用するフリープログラム kimidoriさん  2009-12-14 23:50 回答5件
ミラーブログを作られています oceさん  2013-07-09 17:19 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

その他サービス

格安ホームページ制作

貴社のサイトを格安でお作りします。

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)