画像を最適化しよう!最適化手順と圧縮ツール&無料素材サイトご紹介

執筆者

株式会社NOBITA代表取締役。グループ企業の株式会社ノイズにてフロントエンドエンジニア兼ディレクターを担当。LIGMAKEPOなどのメディアでは「のび太」名義にてライターとして執筆活動も行っている。

監修

NOIZZ

株式会社ノイズ

http://noizz.co.jp/

マーケティングコンサルティング企業。事業戦略・事業開発支援のほか、MAKEPO等のメディアを展開。ウェブ制作系グループとして株式会社NOBITAを抱えている。

Webサイトには写真が欠かせません。人気ブログを見ていると、ほとんどはアイキャッチ画像が設定されているし、文章だけでなく魅力的な写真を使うことでもユーザーの興味をひいています。

しかし、画像を使用する時は必ず最適化してください。そのまま使うとサイトが重くなり、読み込み速度が低下します。SEO上これは良くありません。
ブログなどで画像を多く使っている方は、ぜひ今回の記事を参考にしてください!

画像を最適化するための手順や便利ツールご紹介!

young asian woman taking photo

画像の最適化方法

1. 画像の最適化方法

画像データにはファイルの形式を示すための拡張子がついています。最も多く使われているのは「.gif」「.jpeg」「.png」の3つ。これらの画像ファイルは、画像の読み込まれ方や表示のされ方が全然違います。場合に応じてうまく使い分けていかなければなりません。

各画像ファイルの特徴は以下↓になります。

GIF 最大8ビット(256色)までの色を扱うことのでき、ロゴ、リンクボタン、アイコン、アニメ調のイラストなど、単色ベタ面を多く含む平坦な画像に向いています。逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。
JPEG 24ビット(1670万色)まで扱うことができます。 このため、多くの色数を必要とする写真などの表現に向いています。 また、グラデーションのように色調が連続して変化する画像にはJPEGが適しています。 反対にアイコンやアニメ調の平坦なイラストなどをJPEGで保存するとにじんだように汚くなります。
PNG フルカラーにも8bitカラーにもすることができ、複数の透過色を指定できるなどの長所があります。ただ容量が比較的大きいため“重く”感じます。

GIFとJPEGとPNGの特徴と違い

2. 適切なサイズに調整

例えば幅600pxのブログに、3000px幅の写真を使ってはいけません。どのサイズで表示するのが最適であるかは、サイトのレイアウトや、スマホサイトでのレイアウトなどによって異なってきますが、適切なサイズに加工したものを必ず使ってください。

正しいサイズで画像を表示することで、ムダな負荷がなくなり、より早く表示できるようになります。

3. ファイル名を最適化

無料素材サイトなどでダウンロードすると、「image12.jpg」や「dafda_519.gif」などのような写真を示していない名前が付けられていると思います。SEOの観点から、これからのファイル名は効果的でありません。

しっかり写真の意味を示したファイル名を付けることで、写真を整理しやすくなるだけでなく、GoogleやYahooでの画像検索で引っかかりやすくなるのです。

4. タイトルと代替テキストタグを設定

多くの人が忘れがちですが、画像タグにはタイトルと代替テキストを追加しましょう。

ファイル名の最適化と同じく、しっかり写真の意味を示した名前を付けることで、写真を整理しやすくなるだけでなく、GoogleやYahooでの画像検索で引っかかりやすくなるのです。

これらは「メタ情報」と呼ばれ、検索エンジンが画像の内容を読み取れるようになり、SEO効果があると言われています。

画像圧縮ツール

ブログで使う写真を簡単に圧縮できるツールをご紹介します。

JPEG/PNG Minimizer

jpgminer

http://media4x.com/

画像圧縮ツールでは最も有名です。圧縮率が平均約70~80%と、かなり高い数字を誇っています。

JPGとPNGの圧縮が可能であり、ドラッグ&ドロップするだけなので簡単に使えます。また、圧縮した画像はZIPでまとめてダウンロードできます。(※ただし一度に圧縮できる数は20ファイルまで)

TinyPNG

tinypng

https://tinypng.com/

こちらはpng画像専用。画質をほとんど変えずにかなり大きく圧縮することができます。よく使っているのですが、だいたい50〜70%は容量を減らしてくれます。

WordPressプラグイン

EWWW Image Optimizer

EWWW

http://wordpress.org/plugins/ewww-image-optimizer/

画像サイズの削減、画像容量の削減、画像リスケールのオーバヘッド削減が全て対応できます。新しく画像を入れる度に自動で圧縮してくれます。

過去の画像も「BulkOptimize」で一気にすべて圧縮できます。(※15〜20分ほど時間がかかりました。)EWWW1

圧縮完了したものは「Re-optimaize」になっています。 EWWW2

WP Smush.it

sumich

https://wordpress.org/plugins/wp-smushit/

こちらのプラグインもEWWWと同じように、画像アップロード時に自動で圧縮・最適化してくれます。サムネイル画像も圧縮・最適化でき、最適化した画像は置き換えられるためリンク変更は不要になるのが助かります! また、過去の画像もまとめて最適化することができます。

上記プラグイン2つで圧縮した際、画像は若干荒くなりました。(ほとんどわからない違いですが。)
写真のクオリティが特に大事なコンテンツ、例えば旅行系や食べ物系の写真を使用する際は、圧縮には十分気をつけた方がいいと思います。

無料素材サイト

最後に、個人的によく使っている無料素材サイトをご紹介します。

国内サイト

写真素材 足成

ashinari

http://www.ashinari.com/

国内サイトではこちらを一番使わせてもらってます。写真の数が膨大なので検索すると大抵何かしらの画像は見つかります。

ぱくたそ

pakusoto

http://www.pakutaso.com/

インパクトのあるユニークな人物写真が特徴的です。このサイトの人物写真はどれも特殊でユニークなものが多く、写真にこだわっていきたい方にはオススメです。

海外サイト

Stock Up

StockUp
http://www.sitebuilderreport.com/stock-up

いろいろな、CC0(作品の著作権を放棄した写真)サイトから写真を一括検索するサービスサイトです。

Gratisography

Gratisography

http://www.gratisography.com/

無料とは思えないほどクオリティが高くユニークな写真が多いです!注目を集めたいアイキャッチを探している人にオススメです。最近はいろいろなブログで、ここの写真をよく見かけますね〜。

Snapwire Snaps

Snapwire
http://snapwiresnaps.tumblr.com/

人物系の写真が多いです。人とシチュエーションと風景が絶妙にマッチした写真が多く、ブログでよく使えそうです。

Unsplash

Unsplash
https://unsplash.com/

非常に高品質な風景写真が多いです。その他にも、人の後ろ姿、遠目に写った人など色々な写真が多いです。


写真はコンテンツの質を上げるために不可欠な要素です。使用する際は、面倒臭がらずに毎回しっかりと最適化していきましょうね!