SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

これから身につけるWebサイト高速化テクニック

Webサイト高速化に必要な画像形式の基礎知識

これから身につけるWebサイト高速化テクニック(3)

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

 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて、Webサイト高速化に関する手法や技術について解説していきます。第3回からは、Webサイトの高速化に欠かせない前提知識として「画像の最適化」の概要を解説します。

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

はじめに

 こんにちは、クラスメソッド株式会社でWebを担当している野中です。前回はWebサイトの高速化を行うにあたり知っておきたい「HTTPの仕組み」について紹介しました。

 HTTPの仕組みについて何となく理解できたでしょうか? この連載で紹介していく高速化テクニックの解説を理解するために必要ですので、都合の良い時に読んでおいてください。

 「いつ読むか? 今でしょ!」なんてね(笑) もう古いですね。

対象者

 この記事では、特にWebデザイナーを対象としています。

 フロントエンドエンジニアの方はWebデザイナーから受け取ったPSD(Adobe Photoshop Data)ファイルや、AI(Adobe Illustrator Data)ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。

  • Webデザイナー
  • フロントエンドエンジニア
  • Webディレクター
  • Web担当者

 ビギナーも含めた広い層に向けて解説しているので、当たり前と思われる説明も多く含まれます。また、各画像形式の仕様について深く解説はいたしません。あらかじめご了承ください。

 ※本記事に間違いや解説に分かりづらい部分があれば、@nonaka_ryuichiまでご連絡いただけるとうれしいです。

画像最適化の全体像

 今回からWebサイトのレスポンスを改善するために、3回に渡って画像の最適化に必要な知識とテクニックについて紹介します。

 画像最適化を行う上で改善できるポイントは3つあり、関連していくつかのテクニックがあります。ここでは全体像を把握しておきましょう。

  • ファイルサイズを抑える
    • それぞれの画像形式について特性を知り、適切な画像形式を選択する
    • ムダなメタデータの削除する
    • 人の目には分からない程度に画質を調整し、ファイルサイズを抑える
  • リクエスト数の削減
    • インラインイメージを利用する(HTML・CSS)
    • CSS Spriteを利用する
    • SVGでHTMLに埋め込む
    • Webフォントアイコンを利用する
    • イメージマップを利用する
    • 画像を使わずCSS3で対応する
  • レンダリングの負荷軽減
    • 実際の表示サイズと画像のサイズを合わせる
    • 画像のサイズ(width,height)を指定する

解説の流れ

 次の流れで画像最適化を解説します。

  1. 画像形式の基礎知識
  2. 最適な画像書き出しの基本
  3. 画像に関する高速化テクニック

 それでは、画像最適化1回目「画像形式の基礎知識」について解説を始めます。

コンピューター上で利用できるグラフィック形式のお復習い

 ほとんどの方がご存じかと思いますが、コンピューター上で利用できる代表的なグラフィック形式には、ラスター形式ベクター形式の2種類があります。

 簡単にまとめると、ラスター形式は色付きタイルを縦横に並べた集まり、ベクター形式は点を数学的な計算によって得られる線でつないだ図形です。

 ラスター形式は拡大すると荒くなりますが、処理がシンプルなのでコンピューターへの負荷が低いのが特徴です。ベクター形式はどれだけ拡大してもなめらかな線を維持することができますが、図形の計算が発生するので機器への負担となります。

 本記事では3つのラスター形式GIF/JPEG/PNGと、ベクター形式SVGについて紹介します。それぞれの画像形式を理解しておくことで画像の切り出しを行う際に画質を維持しつつ、ファイルサイズをどのように落とすことができるか判断できるようになります。

 それでは、それぞれの画像形式について詳しく見ていきましょう。

GIF(Graphics Interchange Format)

 まずはアニメーションする画像としておなじみのGIF形式について紹介します。

 現在一般的に利用されているGIFは、GIF89aというバージョンです。

バージョン GIF87 GIF87a GIF89a(現在利用されている)
圧縮形式 可逆圧縮形式
圧縮技術 LZW
データ形式 ラスター形式
拡張子 .gif
一般的な色深度と色数 8bit(256色)
インデックス化 対応
透明色(Transparent) 非対応 非対応 対応
透過処理(Alpha Channel) 非対応
段階的表示 非対応 対応(インターレース) 対応(インターレース)
アニメーション 非対応 非対応 対応

GIFの特徴

 GIFは色数が256色に限定されており、写真のような色数の多い画像には向きません。

 GIFの大きな利点は透明色(Transparent)を指定できることです。これはCSSの背景色や背景画像と合わせて利用することでJPEGではできない表現を可能にします。ですが、最近はPNGを利用することが多いかもしれません。

補足

 GIFは水平方向に連続する同じ色を圧縮します。つまり、横方向のストライプは圧縮率が高く、縦方向のストライプは圧縮率が低くなります。

 蛇足ですが、圧縮技術のLZWは一時期特許で問題となりました。現在は失効しているので問題なく利用できます。

GIF形式が向いている用途

  • べた塗りの多い画像(PNGと比較しましょう)
  • アニメーション画像

次のページ
JPEG(Joint Photographic Experts Group)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
これから身につけるWebサイト高速化テクニック連載記事一覧

もっと読む

この記事の著者

野中 龍一(クラスメソッド株式会社)(ノナカ リュウイチ(クラスメソッドカブシキガイシャ))

クラスメソッドで企画、制作、運用までやるWebマスター。Webデザイン、Webサイト高速化、広義のHTML5、JavaScript、jQuery、CSS3、PHP、AWSを広く浅くやってます。クラスメソッド開発ブログを作ってる中の人。http://dev.classmethod.jp/author/nonaka-ryuichi/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7138 2013/05/23 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング