[対象: 中〜上級]
ウェブサイトのパフォーマンアップ、平たく言うとページ表示の高速化は多くの読者さんにとって興味がある分野のようです。
僕も同じでスピードアップのためにいろいろ調べています。
そこでここまでの収穫として、今日は、画像ファイルの表示を高速化してサイトのパフォーマンスを向上するTIPSを5つ紹介します。
一応、簡単に実装できそうなものから順に並べてあります。
画像ファイル表示を高速化してサイトのパフォーマンスを向上させる5つのTIPS
1. 画像のファイルサイズの縮小
いちばん簡単にできて効果が期待できるのは画像のファイルサイズを小さくすることです。
画像編集ソフトを使ってサイズを縮小できますが、画質を損ねることなく小さくすることは普通の人にはさじ加減が難しいところです。
そんなときはツールを使いましょう。
画像のファイル縮小ツールはたくさん出回っていますが、インストールするのが面倒な場合はオンラインのツールを使うと便利です。
上のサイトはJPEG画像を自動で最適化してくれます。
下のサイトはPNG画像を自動で最適化してくれます。
使い方はいたって簡単でファイルサイズを小さくしたい画像を選んでブラウザにアップロードするかそのままドラッグ&ドロップするだけです。
下の2枚の写真を比較してください。
上がオリジナルの写真で下がJPEGminiを使って最適化した画像です。
よーく目を凝らして比べてみると違いに気付くかもしれませんが、普通に見る分にはほぼ完全に同じです。
少なくともブログ記事の画像に使う分には画質の劣化はまったく感じないはずです。
肝心のファイルサイズは、オリジナルが402KB、縮小版は73KBです。
60%近く小さくなりました。
色数の多い写真ではもっと大きな削減が期待できます。
TinyPNGも同様に優れもので、画像によっては画質を保ったまま70%以上もファイルサイズを小さくできます。
あなたのサイトが美しい画像をコンテンツの“ウリ”にしているのでなければ、ぜひ利用してみましょう。
2. width属性とheight属性で表示サイズを小さくしない
本来の大きさより小さく表示させるためにwidth属性とHeight属性を指定することができます。
しかしこの方法で表示サイズを調整しないようにします。
たとえば、元々の大きさは「ヨコ600px/タテ300px」だけれど半分の大きさで表示したいからといって、 width="300" height="150" で指定しないということです。
表示は小さくても読み込む画像のファイルサイズは同じです。
一般的に、大きさが小さくなればファイルサイズも小さくなります。
それなら最初からファイルサイズが小さい、大きさの小さな画像を使いましょう。
ちなみに余談ですが、“width”は「ウィドゥス（“ス”は舌先を上と下の前歯で軽く噛む“ス”）」、“height”は「ハイト」と僕は発音してます。ｗ
3. キャッシュを有効にする
ローカルPCまたはプロキシサーバーに画像ファイルをキャッシュさせて、ウェブサーバーへのリクエストをなくします。
キャッシュ期間の調整については、こちらの記事の5番目「Expiresヘッダーでキャッシュ期間を長くする」を参照してください。
JavaScriptの読み込み高速化の記事ですが、補足に書いてあるように画像表示の高速化にもこのセクションは応用できます。
4. 画像ファイルを別サーバーに置く
ブラウザが1つのサーバー（ホスト）と同時に張る“コネクション”の数には上限があります（ほとんどのブラウザは1ホストにつき6コネクションがマックスらしい）。
簡単に言えば、たくさんの画像（やその他の要素）があるときはすべてを同時にダウンロードできないことがあるということです。
そこで画像だけを別のサーバーに置きます。
もっともサーバーの性能がいいなら、同じサーバーの別ドメイン（images.suzukikenichi.comのようなサブドメインでOK）でも構いません。
僕ならAWSのS3を使うかな、いや使おうかと真剣に考えてます。
5. CSSスプライトを使う
サイト全体で共通して使う、比較的小さな画像は1枚の画像にまとめてしまって、必要な部分だけを“切り取って”表示します。
いわゆるCSSスプライトですね。
HTTPリクエストの数を減らせるのでスピードアップに効果があります（JavaScriptファイルやCSS参照ファイルを1つにまとめたりと、HTTPリクエストを減らすのはパフォーマンス改善にとても重要）。
CSSスプライトに関するもう少し詳しいことはこちらの記事の「ウェブサイトのパフォーマンスを最適化するステップ」セクションの7番目を参照してください。
なお僕はコーディングについては決して強くないのでCSSスプライトの具体的な実装手順については検索等で調べてください（「自分のサイトが参考になる」という方がいたら申告してください。良さ気なら参照先として紹介させていただきます。）。
ちなみに、CSSスプライトを作るのに便利そうなSpriteMeというオンラインツールがあります。
僕は使ったことがありませんが役立ちそうなら使ってみるといいでしょう。
以上です。
先週のWeb担当者Forumの連載コーナーで、サイトパフォーマンスの最適化についての住さんの記事をピックアップしました。
どんなサイトであれ運営している以上は、常にパフォーマンス向上に取り組みたいものです。
ただ必要性は感じていても何をどうやったらいいのか分からないのも実情です。
今日の記事で最初に紹介したファイルサイズの縮小のようにサイトの規模を問わず効果を期待できて今すぐに実行できるものから、CDNのような大規模サイト向けで直ちには始められなさそうなものまでさまざまです。
実装可能なことはサイトのタイプや運用体系、あなたのスキル（！）などによって異なってきます。
そうはいっても遅いサイトは誰にとっても嫌われます（自分でも嫌！）。
できるところから少しずつ始めていきましょう。