1バイトでも軽く その1~web用画像の圧縮を考える

■圧縮形式比較

※2013.05.06追記
ブロードバンドの普及やブラウザの機能の進歩により、当記事の数値等は
かなり時代遅れになっておりますが、基本的な考え方としては
まだ通用すると思いますので、この記事はしばらくは残しておきます。


サイトに載せる画像は軽ければ軽いほどいいです。
昨今ブロードバンドが発達し、なかなか絵が表示されないーなんてことは少なくなりましたが、それでも、1秒でも速く表示された方がうれしいですし、特にバナー用の画像などでは、他より1バイトでも軽くした方が、先に表示されますので、宣伝効果にも影響することになります。
かといって、圧縮法をまちがえると汚い画像になってしまいますので、悩ましいところ。

というわけで、1バイトでも軽くかつ、見栄えのよいweb用画像の作り方について考えます。


◆まずは、圧縮形式について。

web用画像として適当なのは、「JPG」「GIF」「PNG」の3種類です。
他の形式は対応ブラウザが限られていたり、プラグインが必要だったりするので、
何か特別な理由がない限り、やめておいたほうが無難です。
携帯電話対応にしたい場合は、さらに機種によって制限があります。
たとえば私の前の携帯はGIFが表示されませんでした。
JPGにしておけばほとんどの機種で表示できるようです。

これらの圧縮形式にはそれぞれ特徴がありますので、
圧縮したい画像の特性に合ったものを使いましょう。


「JPG」:じぇいぺぐ。JPEG。
  写真など、グラデーションで表現された画像に使う。
  アニメ絵や文字など、線のくっきりした画像に使うと、ちょっと圧縮率を下げただけでも
  すぐノイズが出て汚くなってしまうので注意。
  圧縮の品質は0-100の数値であらわされる。
  (Photoshopだと低画質・標準・高画質・最高画質となってて、わかりづらい。)

「GIF」:じふ。または、ぎふ。
  256色までしか使えない。
  横にとなりあうピクセル(画素)が同じ色だと圧縮率が高くなるらしい。
  ので、アニメ絵や文字など、使っている色はこれとこれ、とわかっている画像に最適。
  特許問題の発生で、一時フリーソフトで使えなくなったが、
  2004年6月20日に特許の期限が切れたので、また安心して使えるようになった。
  アニメも作れる。(しかも画像とまったく同じ扱いでweb上に掲載できる。)

「PNG」:ぴんぐ。
  GIFと似ていて、となりあうピクセルが同じ色だと圧縮率が高くなる。
  PNGは縦でも横でも圧縮率が高くなるらしい。
  アニメ絵や文字などに最適。
  色数は16色、256色、フルカラー。
  画像の作り方によってはGIFより軽くなるので、おすすめ。
  ただし表示の方法に特徴があって、
  ファイルサイズに関係なくちょっともたつく感がある。
  GIFアニメのように、PNGにもMNGというアニメーションを作れる形式があるが、
  表示するにはブラウザにプラグインを入れる必要があるので、普及していない。  


基本的には、実際に圧縮してみて一番軽くなったやつを使えばいいと思います。


◆どれぐらい圧縮すべきか? web画像の重さ

ファイルが重い軽いというのは、体感速度は通信環境によって異なりますので、一概には言えませんが、私が作成する場合に基準にしてるのはこんなかんじ。


バナー用画像:リンク用の看板画像です。200*40または88*31が主流。
  20K以上だと重すぎると思います。
  アニメGIFバナー専用のところでもない限り、避けた方がいいでしょう。
  10K以上でもちょっと重いと思います。
  基本的に、バナー画像はいっぱい並べて使うので、
  他より速く表示されないと見てもらえません。
  7K程度、できれば5K以下がベスト。
 
画像がメインコンテンツでない場合の画像:トップページやナビゲーション用の画像
  1度に表示される画像全部あわせて40K以下がベスト。
  それを越えたらちょっと重いかなと思います。

画像がメインの場合の画像:イラストページや写真ページなどの画像
  ひとつあたり、40K代までは、軽くてうれしい。
  60Kぐらいまでは、まあまあ。
  80Kを超えたら重いと感じるので、縮小画像を置いておいて、
  クリックしたら元サイズの画像が表示されるようにしています。


次回は画像を実際に圧縮してみて、最適な圧縮率・圧縮方法について考えます。

このエントリーをはてなブックマークに追加 はてなブックマーク - 1バイトでも軽く その1~web用画像の圧縮を考える RSS mailform

見る

▲このページを読み返す

次に書いたページ  アニメの作り方 概要その1:アニメ制作はマラソンである

前に書いたページ  一点透視えかきうた:背景を描こう!その1

関連する本
このページへリンクする


このページへトラックバック

※ このページに言及してない記事からのトラックバックはSPAMとみなして削除します。
※ 管理人が承認するまでトラックバックは表示されません。

ピクセル・画素 ピクセル (pixel) とはコンピュータで画像を扱うときの最小... 続きを読む

ピクセル・画素とは? 【花名所めぐり】
2007.01.31 21:25:21 ping

コメントする

あにめはっく.jpとは?
イラスト等の講座サイトです。
個人でやってます。
本館は 銀の月動画計画

玉英って誰?
アニメ作ったりイラスト描いたり
プラグインやフォントや素材作ったり
色々してる謎の人です。
プロフィール

■無料フォントダウンロード等
よく訓練されたフォント屋
■背景素材・絵コンテ用紙等
よく訓練された素材屋@あにめはっく.jp
西洋ファンタジー風誤変換人名辞書データベース もめいよふ オンラインボイスの総合カタログ VoiceFL@G▼
■参考サイト リンク集
アキツセントラルTV
■作品のサイト
超法戦隊S.T.7
霊珠

玉英/ザラスドットコム作品一覧

参考書籍等紹介

おすすめ一覧

リンク・RSS

リンクはご自由にどうぞ。

相互リンクご希望の方

このサイトは、次のライセンスで保護されています:
CCライセンス■表示-非営利-継承
クリエイティブ・コモンズについて

購読する このブログの読者になる

QRコード モバイル版こちら

作品購入

このサイトのバナー
Powered by Movable Type 4.01