画像をCSSで縮小した際の各ブラウザの表示

  • このエントリーをはてなブックマークに追加

こんにちは、工藤です。

年明け早々寒いですね。
危うく早速風邪をこじらせてしまうところでした。
3連休は暖かくして過ごそうと思います!



今回はブラウザ間での画像をCSSで縮小した際の表示について検証してみたので書いてみます。

というのも先日jQueryでギャラリーを作ったのですがその時にサムネイルを元画像をcssで縮小表示したところ、ブラウザによって表示がかなり異なることに情けないことに初めて気がついたのでした。
(実際に使用したものとは異なりますがGallerifficさんのこちらのサンプルのような感じです!)

Chromeでは画像の縮小がきれいに表示されたのですがFirefoxIEではジャギーが発生してしました。

結果を見てみる

以下検証画像です。

photoshop

まずはPhotoshopでサイズを縮小してwebサイト上にあげたものです。
上から横幅が500px(原寸。縮小率の基準とします。)、250px(50%縮小)、100px(20%縮小)となっています。
この画像を基準にブラウザで画像をCSSで縮小した際の表示を見ていきたいと思います。




ではChromeから。

chrome
ChromeでCSSで縮小して表示しました。
photoshopとあまり違いはないかなと思います。きれいに表示してくれます。




次にFirefoxで見てみましょう。

firefox
うーんジャギーが発生してしまいました・・。
50%あたりまでなら耐えられますが20%はちょっと・・ですね。




最後はIE10です。

ie10
こちらもジャギーが発生しています。
50%縮小でもFirefoxとは異なって、ジャギーが目立ちますね。

===============================================

以上が結果でした。
作成するギャラリーは最終的にPhotoshopで縮小したものをサムネイルとして使用することにしました。
確実に綺麗で、表示速度もはやいですしね・・。

対処法としてはIE7用に
画像をCSSだけでハイクオリティに縮小サムネイル化する方法
がありましたが、他にめぼしいものは見つけられませんでした。

Chromeのように全部のブラウザが綺麗に表示してくれたら・・とわがままを思いつつ、もっとブラウザ間の表示の違いを勉強しないといけないな~と思いました。
それでは!

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。