WEB担当者も行うべき！サイトにおける画像の最適化とは

「WEBサイトが重くてなかなか読み込まない・・・」とイライラする事はありませんか？

これが自分のところのサイトだと、上司から、やれ何でこんなに重いんだ、やれ速く読み込むようにしろと言われ、困っているWEB担当者の方も多いかと思います。

また、この表示速度について、googleの表示速度をチェックしてくれるウェブパフォーマンスツールPageSpeed Insightsから「画像最適化をしてください」とアドバイスされた経験のある人もいますよね。

こういう感じで・・・

今回はこの「画像を最適化する」とは何か、どうしたらWEBサイトの表示速度が改善されるのかについて、その方法とおすすめツールなどをまとめていきます。制作者はもちろんですが、WEBサイトを運営したり担当している人でも出来る事はあります。是非チェックしてみてください！

そもそもそこに画像使いますか？

画像の最適化するために行う事は大きく3つあります。

• 画像コンテンツの内容から適切なフォーマットを選択する事

• 使用する大きさ(寸法)でトリミングする事

• 圧縮ツールを使って調整を繰り返し適切な設定で圧縮する事

3つのするべき事についてはこのあと説明していくとし、その前にもう1つ大事な事があります。

それは、

そもそも画像を使用しない事。

画像を使わない事で大幅に容量をカット出来る為、実はこれも「画像の最適化」のひとつの作業になります。

具体的には、以下のポイントをチェックしてみてください！

画像をカット

画像そのものが効果的でない場合は思い切って削除してしまうのも手です。

無駄な画像は使わない方が本当に意味のある画像が際立つという事もあります。

今一度デザインを検討してみましょう。

CSSで再現する

CSSで出来る事はCSSで行いましょう。

CSSを使えば、解像度にも左右されず常に鮮明な表示が出来ますし、画像を使うよりも大幅に少ない容量で作る事が可能です！

calc()を使用すればサイズに合わせてグラデーションを変化させることが出来るのでレスポンシブでも問題ないですし、アニメーションも併用する事で魅力的なオブジェクトがcss3だけで作れたりします！

ウェブフォントで再現する

ウェブフォントを使用するメリットは画像を使わず容量カット出来るという点の他にもあります。

当たり前ですが、テキストとして扱えるので、選択や検索をする事が出来、SEOでも効果的です。

また、拡大縮小しても画像と違い劣化せず鮮明なままなので、ユーザビリティも損ないません。モバイルフレンドリーのレスポンシブでも問題なしですね。

絶対このフォントじゃないと！！と強い拘りや、特定のフォントに意味がある場合以外はWEBフォントを使用しましょう。

画像コンテンツの内容から適切なフォーマットを選択する事

「そもそも画像を使わない」事を検討した上で、いやこの画像は必要である！と判断した場合、次のステップに進みます。

次は画像の適切なフォーマットについて理解しましょう。

WEBサイトに扱う画像のフォーマットは主にJPEG、GIF、PNG、SVGの4種類があります。(表示の高速化を考えるのであれば最新のフォーマットであるJPEG-XR、WebPの話も含めるべきかもしれませんが、まだ一部のブラウザに対応していない事もあり今回は割愛します。)

これらのファイル形式の特徴をしっかりと理解し、画像のコンテンツに対して適切なフォーマットを選択する事が画像最適化につながります！

ベクター画像とラスター画像

冒頭でWEBサイトで扱う画像フォーマットは主に4種類と言いましたが、それらは大きくベクター画像とラスター画像という2種類に住み分けされます。

	ベクター画像	ラスター画像
種類	SVG	JPEG、PNG、GIF
特徴	拡大縮小しても画像が劣化しない ディスプレイの解像度に依存しない	拡大するとぼやける 高解像度画面において影響が出る
適しているオブジェクト	ロゴ、テキスト、アイコン	写真、複雑なイラスト

解像度や大きさに依存しないベクター画像は、様々な端末や高解像度の環境に最適です。ロゴやアイコンなどはSVG形式のベクター画像を優先して使いましょう。

ベクター画像以外はラスター画像扱いとなります。

ラスター画像の中でも何を選ぶかという判断基準について、Google Developersの中にわかりやすい図があったので、使わせていただきます！

Google Developersより引用

わかりやすいチャートですね！

JPEGかPNGかの話

ここでもう少しラスター画像の住み分けについてです。

上の図で「最高解像度で精細さを維持する必要がありますか？」と問われましたが、いずれにしよ写真や色数の多い複雑な画像にはJPEGとPNGが適しています。

さて、ここで悩むのがJPEGかPNGかの話です。

透過するパーツは迷わずPNGで良いのですが、最高解像度で表現したい写真を本当にPNGで、そうでもない画像の場合は全てJPEGで良いかと言うと、ちょっと待った！です。

実際圧縮ツールを使い、JPEGとPNGでどの程度クオリティーに差が出るかみていきましょう。

例1：塗りの多い画像(イラストなど)の場合

ローディング画面の時に登場した重いWEBサイトを背負っている男性再登場です。オリジナルは寸法が1358 × 838、サイズ80kbあります。この画像をPNGとJPEG形式でそれぞれ大きさ650pxにリサイズし、さらに圧縮して比較してみましょう。

オリジナル画像(80kb)大きさ(寸法)：1358 × 838

PNGで圧縮(14kb)

JPEGに圧縮(25kb)

結果、PNGの方圧縮率も高く、さらにイラストの輪郭もくっきりと残りました。実は、輪郭がくっきりしていたり、色数の少ないイラストのような画像は、JPEGよりもPNGの方が圧倒的に高い圧縮率と、画質を得る事が出来るのです。

例2：複雑な画像（写真など）の場合

次に写真を例にみていきましょう。今が旬の秋刀魚の握りの写真です。

こちらはオリジナルの画像を、単純に同じ大きさ760pxへリサイズし、PNGとJPEGで保存しました。圧縮はかけていません。

リサイズしPNG保存(784kb)

リサイズしJPEG保存(439kb)

画質自体には2つに差はありませんが、ただリサイズしただけでファイルのサイズはPNGよりもJPEGの方が約6割のサイズになりました。

実はPNGは高画質で再現したい画像に使いたいところなのですが、ファイルサイズは大きくなってしまう懸念点があるのです。精度の高い写真で再現性を求めるのであればPNGが適していますが、軽量化重視なのであればJPEGの方が良いと思います。

 

使用する大きさ(寸法)でトリミングする

カメラで撮った写真をそのまま、ネットで購入した高解像度の画像をそのままサーバーにアップしていませんか？

これらは実際の表示する寸法よりも大きい寸法の場合がとても多く、非常に無駄です。

実際に使う寸法にトリミングする事も画像最適化のひとつの要素になります。

オンライン上にトリミングのサービスはたくさんありますが、

私はサイズ変更だけであれば、

プレビュー>ツール>サイズを調整※Mac

を使います。簡単です！

画像を圧縮する＜圧縮ツールのご紹介＞

画像の必要性の再考、画像フォーマットの最適化、実際の使用寸法でのトリミングと問題なければ、いよいよ最後は画像の圧縮を行います。

photoshopでJPEGに保存する際には画質設定ができますね。

どれぐらいの画質設定にするかはいろいろと試してみて判断しましょう。これだけでもけっこう容量を少なくできますよ。

またphotoshopのような専用のソフトがなくてもオンライン上で圧縮出来るサービスはたくさんあります！おすすめのサービスを2つご紹介します。

imagecompressor.com

imagecompressor.com

20ファイル同時にドラック&ドロップで画像をアップ出来、画質レベルの調整も可能です。JPEGもPNGも対応しているのでこれ一つでいいのも使いやすいです！

jpeg-optimizer

http://jpeg-optimizer.com/

JPEGだけなのですが、圧縮とリサイズが同時に出来るところが便利です！

▼関連記事

EWWW Image Optimizerの設定方法と画像が表示されない場合の対策方法

 

まとめ

長々と書きましたが、要は

適したフォーマットを選び、実サイズにトリミング。そして圧縮。

これが誰でも出来る基本の画像の最適化です。

どれだけ質を維持したまま軽量化していくかはバランスを見ながら行っていきましょう。画像の最適化には答えはありません。

その作業は地味ですし、サイズも一気に何MBも軽くなるものでもありません。しかしチリも積もればサイトも軽くなる！作業自体は難しくないので、習慣にすれば良いと思います。

画像を多用する傾向にある昨今のWEBサイトだからこそ、しっかりと画像の最適化をしていきましょう。