メディア運営に必須の画像サイズ調整基礎知識

 

１.画像データの基礎知識

テキストデータだけでなく、画像や動画を追加してリッチなコンテンツを増やしていくことが、SEOでも重要なポイントであると理解されています。サイトやブログのコンテンツをリッチにしていく上で、もっとも簡単な方法は、記事のテーマに合った画像データを挿入することです。そこで問題となってくるのが、画像のサイズやファイルサイズを、どのくらいの大きさにするのが適当かということです。そこで今回は、画像データに関する基礎知識とオススメの画像サイズ調整ツールについて紹介いたします。
 

画像サイズと解像度について

レスポンシブWebデザインの普及によって、画面サイズ（ブラウザの横幅サイズ）に合わせて画像サイズも自動縮小されるサイトが増えてきました。メディアに追加する画像サイズは、レスポンシブWebデザインで最大の画面サイズにしたときに、ちょうど良いサイズ設定にするというのが現在主流になっています。自身やサイト訪問者のブラウザ環境によって異なってきます。したがって一概には言えないのですが、目安としてPCブラウザからの閲覧を考慮に入れる場合は、1000Pixel前後の横幅サイズを、モバイル端末をメインに閲覧環境を考えている場合は、750Pixel前後の横幅サイズに設定しておくと良いでしょう。レイアウトが微妙に崩れてしまう場合がありますので、サムネイル画像やアイキャッチ画像など、同じ用途で使う画像の横幅サイズは統一しておくことが非常に重要です。
 
画像のサイズと同様に重要な要素が、画像解像度です。画像解像度には、dpi（dots per inch）という1インチの中にどれだけのドッド（点）を敷き詰めることができるかを表す単位が使われています。印刷物はカラーで350dpi程度の解像度が必要と言われていますが、Webで使用する画像解像度は、一般的に72dpi〜96dpiの範囲で設定することが多いです。ウェブサイトに適正な画像解像度が印刷物に比べてかなり低いのは、パソコンが普及しはじめた頃のブラウン管モニタの解像度が72dpiであったことに由来します。高性能な液晶ディスプレイが普及している現在も、PCモニタの解像度は96dpi〜120dpi程度です。印刷物に比べて解像度が低いという点に変化はありません。また、モバイル・フレンドリーであることが優先される現在のネット事情から考慮しても、72dpi〜96dpiという画像解像度が、今後もしばらくスタンダードな値として使用されていくと考えられます。
 

ビットマップ形式とベクター形式

デジタルの画像表現形式には、ビットマップ形式とベクター形式があります。ビットマップ形式とは、色のついた点（ドット）が配列や集合することによって表現されるデータ再現方式のことです。その表現方式の一つにラスター表現というものがあります。ラスター表現では、点が線上に並んだラスター線を平行に並べた面として画像を表現しています。写真データの多くはラスター表現によるものであり、テレビ画面の走査線もラスター表現の代表例です。このラスター表現は拡大するとドットが階段状になったシャギーと呼ばれるギザギザが現れます。このギザギザがなるべく小さくなるように画像解像度を高く保つためには、データのサイズも大きくしておく必要があります。
 
これに対し、ベクター画像は、画像を円や直線といった幾何学的な図形の集まりとして表現する形式になります。ビットマップ形式のように微妙な色合いのグラデーションを表現するといったことはできないのですが、数式によって定義されているので、サイズを拡大・縮小しても画質が劣化することはありません。
 

拡張子について

ビットマップ形式とベクター形式を理解したところで、画像ファイルの形式を示す拡張子についても説明します。画像データの拡張子には様々なものがりますが、ここではWeb上で使われる代表的な画像形式４つについて解説します。
 

JPG（ジェイペグ：Joint Photographic Experts Group）

画像形式：ビットマップ
圧縮方法：非可逆圧縮
拡張子：.jpg／.jpegなど
 
静止画像のデジタルデータ圧縮方式の一つで、フルカラーである1670万色まで扱えるので、写真画像であればJPGを使うことが一般的です。この形式で圧縮された画像は、解像度を元に戻すことができない（非可逆圧縮）ので、オリジナルの生データは別に保管しておくことが大切です。
 

GIF（ジフ：Graphics Interchange Format）

画像形式：ビットマップ
圧縮方法：可逆圧縮
拡張子：.gif
 
最大256色と色数が制限された可逆圧縮の画像フォーマットです。イラスト、ロゴ、アイコン、図版などに向いている画像形式で、背景を透明にしたり、アニメーション画像（GIF animation）を作成することもできます。
 

PNG（ピング：Portable Network Graphics）

画像形式：ビットマップ
圧縮方法：可逆圧縮
拡張子：.png
 
Web用に作られた画像形式です。JPGとは異なり可逆圧縮の画像フォーマットなので、圧縮後、元の解像度に戻すことも可能です。また、GIF画像と同様に背景透過機能を持っています。GIFのような色数の制限はありませので、写真画像、グラデーション、色数の多いデザインなどにも対応可能で、GIFよりも表現の幅が広いのが特徴です。
 

SVG（エスブイジー：Scalable Vector Graphics）

画像形式：ベクター
圧縮方法：可逆圧縮
拡張子：.svg
 
この画像フォーマットは、ベクター形式ですので、画像を拡大してもシャギーが出ることはありません。また、可逆圧縮なので、何度圧縮をかけても画像が劣化することはありません。さらに、約280兆色もの色数が扱え、背景透過やアニメーション作成も可能です。SVGファイルであれば、１つのデータでモバイル端末から大画面のPCモニターまで、様々なディスプレイ画面に対応可能です。したがって、Webデザインの分野で、近年大きな注目を集めています。
 
 

2.おすすめの画像サイズ調整ツール

 
WordPressのメディアに新規追加すると、オジリナルのサイズ（フルサイズ）に加えて、大サイズ、中サイズ、サムネイルといった形で計3つの画像が、システム内部で自動生成されます。1つの写真をアップすると４つの写真が追加されることになるので、オジリナルのサイズが大きすぎると、サーバーの容量を圧迫してしまうことになるのです。
 
 

（メディアの新規追加画面）

（添付ファイルの表示設定）

（添付ファイルの表示設定の種類）

このフルサイズの画像は、自身やサイト訪問者のブラウザ環境を考慮した上で、最大公約数となるディスプレイサイズに合わせたサイズの調整を行っていくことが大切です。ここでは、おすすめの画像サイズ調整ツールをご紹介します。
 
 
 

ソフトウエア型

高度な編集を行いたい場合、多くのタスクを繰り返し作業したり、スピーディーに作業を進めたい場合などは、ソフトウエア型の画像編集ツールを導入するのが最適です。
 

Adobe Photoshop CC

画像編集ソフトといえばAdobeのPhotoshopです。Adobeのソフトは、製品版のCSシリーズから、定額の月額料金で利用できるCCシリーズに移行しています。月額料金は、個人向けでは月額980円のプランから、法人向けでは1ライセンス2,980円のプランから用意されています。様々な画像編集が可能なハイエンドのソフトウエアなので、高度な画像編集も行いたい場合などは、思い切ってこちらのソフトウエアを導入してしまうのも良いかもしれません。
 
 

Adobe Photoshop Elements

AdobeのPhotoshopの廉価版です。月額制ではなく15,800円〜購入可能です。CMYKのモードがありませんので、印刷向けの画像編集はできませんが、Webのみに使用する場合は、こちらの商品でも十分すぎる機能を兼ね備えています。無料の画像編集ソフト以上の機能を使いたいけれども、ランニングコストはなるべくおさえたいといった場合にオススメの商品です。
 
 

縮小専用。

画像サイズ調整ソフトウエアとして長年人気のある無料ソフトウエアです。JPGやPNGなど様々な画像ファイル形式が読み込めます。また、彩度をアップしたり、モノクロにしたりといた簡易な画像補正も可能です。画像のサイズだけでなく、ファイルのサイズを指定して変換や保存を行うことも可能です。
 
 

Multisize Resizer

サムネイル画像や詳細画像を一度に作成したい場合に便利な、無料の画像サイズ調整ソフトウエアです。画像サイズを一度に複数指定する事が可能で、一括でリサイズすることもできます。またリサイズ画像のトリミングも可能です。インストールには、Adobe AIRが必要になります。
 
 
 

ブラウザ型

企業によっては、会社のパソコンにソフトウエアを追加できないといったケースもあるかと思います。ブラウザ型の画像編集ツールは、インストールの必要がないので、環境に依存せず利用が可能です。同じ作業環境下で仕事ができない場合や、画像編集ソフトを保有していない外注ライター・編集者に画像のりサイズを依頼する場合などにも重宝します。
 

Image Resizer

無料の画像サイズ編集サイトです。画像縮小できるファイルは、JPEG、GIF 、PNG形式のみで、ファイルサイズは10MBまでしか対応していませんが、非常にシンプルで使い勝手が良いサイトです。横幅を指定してサイズ調整を行うこともできますが、アイコンサイズ、ウェブサイズ、モニターサイズといった形でスタンダードサイズの中からサイズを選択することも可能なので、数値を入力するなど細かな設定が苦手という方にもピッタリのサービスです。
 
 

バナー工房

登録やインストールが不要で完全無料で使用できる写真や画像の加工・編集サイトです。「縮小拡大・サイズ変更」だけでなく「文字入れ」「切り抜き・切り取り」「上下反転」「左右反転」「回転」といった画像編集の基本項目から、「ぼかし」「トイカメラ」「額縁」など有料ソフトにも引け劣らないエフェクト機能も搭載されています。
 
 

Bluk Resize Photos

ドラック＆ドロップするだけで簡単に画像のリサイズができてしまうブラウザ型の画像調整ツールです。すべて英語ですが、非常にシンプルなサイトなので、英語が苦手という人でも簡単に使用することが可能です。
 
 
 

3.プラグイン

WordPressのプラグインにも画像サイズを調整するツールがあります。細かな画像解像度の設定やファイルサイズなどを気にしない場合は、プラグインで一括に画像を管理してしまうのも良いかもしれません。
 

Imsanity

画像をリサイズしてくれるWordPressプラグインです。一度、アップロードする際の画像の大きさを指定してしまえば、次からは画像サイズについて細かな設定や調整をせずに、自動で決まった大きさに変更可能です。アイキャッチ画像やサムネイル画像で、写真を毎回同じ大きさに調整しなければいけない場合などは、こちらのプラグインを使うと便利でしょう。背景画像、テーマヘッダー、ロゴなど、決まった大きさ以外でアップロードしたい画像については、設定で自動調整から除外することも可能です。細かな解像度指定はできませんが、JPGの画像品質を設定できますので、ファイルサイズの調整も簡単です。。一度、アップロードする際の画像の大きさを指定してしまえば、次からは画像サイズについて細かな設定や調整をせずに、自動で決まった大きさに変更してくれるプラグインです。アイキャッチ画像やサムネイル画像で、写真を毎回同じ大きさに調整しなければいけない場合などは、こちらのプラグインを使うと便利です。背景画像、テーマヘッダー、ロゴなど、決まった大きさ以外でアップロードしたい画像については、設定で除外することも可能です。細かな解像度指定はできませんが、JPGの画像品質を設定できますので、ファイルサイズの調整も簡単です。
 
 

Simple Image Sizes

WordPressの「メディアを追加」の画面で、サイズの選択肢を増やすことができます。デフォルトで設定されている「サムネイル」「中サイズ」「大サイズ」の自動生成を解除することも可能です。アップロード済みの画像にも、新しく設定した画像サイズを自動生成して追加することも可能です。
 
 
 

4.アプリケーション

画像サイズ調整をスマートフォンやタブレットのアプリケーションで行うというのも一つの方法です。モバイル端末でカメラ撮影を行うことも多いと思いますので、場合によってはPCよりも作業効率をアップすることができるかもしれません。
 

ImageResize

数回タップすることで、簡単に画像のサイズや画質を調整することができるiOSの画像加工アプリです。画像の編集中に、ファイルサイズがリアルタイムで表示されるので、ちょうど良いファイルサイズを設定しやすいのも特徴の一つ。プリセット機能が搭載され、リサイズの横幅を６つ登録することができるので、サムネイル画像、アイキャッチ画像、トップ画像といったように複数の定型サイズを管理することも可能です。
 
 

画像サイズ

画像サイズ調整ができるiOSアプリです。ピクセル、ミリメートル、センチメートル、インチの４つの単位を選択可能です。縦横比を維持したサイズ調整も簡単に行なえます。マルチタッチ、ジェスチャーなど指を使って感覚的にトリミングを行うことも可能です。 
 
 

Image Shrink

画像サイズ調整ができるAndroidアプリです。画像を使いたいときに簡単にリサイズできるのが、このアプリの特徴の一つ。例えば、メールに添付して画像を送信したいと言った場合でも、あらかじめ画像を縮小しておく必要はなく、共有機能からImage Shrinkを起動することで自動に縮小処理された画像が呼び出されるようになっています。スマホで撮影した取材画像を、すぐに担当者に送りたいといった場合に活躍が期待できそうなアプリケーションです。
 
 
 

3.まとめ

せっかくかっこいいテンプレートを使用したり、Webデザイナーにサイトをデザインしてもらったとしても、使用されている画像のサイズが揃っていないと、レイアウトが崩れて統一感のない印象を与えてしまいます。非デザイナー向けのデザイン入門書としてベストセラーになっている「ノンデザイナーズ・デザインブック（＊１）」では「近接」「整列」「反復」「コントラスト」がデザインの「4つの基本原則」であると提唱されています。画像のサイズがバラバラですと、これらの原則に則ってレイアウトすることが難しくなってきます。

また、ページ表示速度は、SEOにも一定の影響があると言われています。動画などに比べて画像データの容量は少ないので、ブロードバンドが普及した現在は、それほど気にする必要がないと感じる方もいるかもしれません。しかし、地理も積もれば山となります。特にモバイル環境では、ページの読み込みの遅さによって、離脱率も上昇していましますので、メディア運営において画像の管理は非常に重要な事柄なのです。

（＊1）参照文献
「ノンデザイナーズ・デザインブック［第4版］」Robin Williams 著／マイナビ出版