画像を圧縮する、縮小する、トリミングする…その違いってなに？初心者が戸惑いがちな画像用語を、カメラの仕組みから拡張子の読み方、高画質なまま圧縮する方法まで、画像について知りたいことを一挙にまとめてみました。このページを読めば今日からきっと画像が怖くなくなる！
圧縮、縮小、トリミングの違い。なぜ圧縮する必要があるのか？代表的な拡張子と読み方。ラスター形式とベクター形式。画像を保存するとは。画素数と解像度の違い。画像の大きさを一括で変更する方法。カメラの仕組み。
初心者の壁すぎる画像問題
ライターになるまでは私はライターのお仕事は文字を考えることだと思っていました。ですが、実際の作業は文字を考えて打ち込むのは全体時間の30％ほどで、記事の見直しや画像選定に大きく時間を割かれます。正直なところ、どれだけ画像に時間をさかれるかは仕事内容とライターによりますが、画像の元を探したり、時には自分で撮影しないといけない画像は慣れていない人にとっては大変なものです。
画像がSEO対策で重要なわけ
そもそも記事に画像は本当に必要なのか？という記事に記したように、専門誌以外のほとんどの記事では画像ナシは考えられないものになっています。それは、画像を上手く使えばSEO対策できるから。
たとえば、altタグのついた画像を置くことで、画像検索の上位に表示され流入が増えることがありますし、ユーザーに視覚的に読んでもらうことでページの離脱率を減らすことができます。
他にも、記事の間に適切な画像を設置することでGoogleに高品質な記事とリンクであると思ってもらいやすくなり、ページランクの上位を狙えます。
さらに、近年ではスマホでネットサーフィンをする方が多いため文字だらけのサイトには圧迫感を感じやすく嫌悪される傾向にあります。スマホは、画面サイズの問題から、どうしても文字が大きくなりパソコンなら1行で読める文章も2行3行と長くなり文章が詰まって見えるからです。
画像はページの容量の50％を占めている
そんな重要な画像ですが、普通になんとなく載せるだけでは悪いSEO対策になってしまいます。サイトを閲覧するときはサーバに保存してある情報を取り出してページに表現しているのですが、ページの情報量が多いと読み込むのに時間がかかってしまいます。この情報量はページの容量とも言い表すことができ、ページに占める容量は画像が50％ともいわれています。調査では、ページを開くのに3秒かかるとユーザーの4割が離脱すると言われています。ユーザービリティが低いサイトはSEOでも悪い評価を受けますので、画像の容量を軽くしページ速度を上げる対策は必須です。
しかし、いざ画像について調べて回ると、画像サイズを小さくするのと縮小って同じ意味？画像がはみ出て表示されない時は何を変えたらいいの？ドットとピクセルの違いって？dpIって何？と、専門用語が沢山出てきます。私もさんざん混乱しました。誰でもWEB業界に参入できる社会を目指しているのに、こんな壁があったら初心者の心が折れてしまう！ということで調べまくりました。正直、これを書いている今も完全に理解しきれている自信はありませんが一生懸命調べてみましたので、画像がよく分からない！という人は一度読んでみてください。
もしも間違っていたら教えてください。
画像サイズってそもそもなんのこと？
画像サイズという言葉には実に様々な意味合いがあります。画像そのもののサイズなのか、画像を表示する枠のサイズなのか、画像の容量サイズなのか…などなどサイトによって画像サイズをあらわす意味が異なるのです。さらには、解像度を画素数というサイトもあり、本当に初心者にとって混乱する難しい用語となっています。ですので、本編を読む前に、このサイトでの用語が表すそれぞれの意味を知っていただきたいです。
ピクセル
デジカメやパソコンなどのモニター画面は小さな四角の点が塗りつぶすことで画像を表しています。この小さな点をピクセルと呼んでいます。英語ではpixel、単位はpxと表します。モニターの液晶サイズはピクセルで表されています。
画素数
横と縦をかけ合わせたピクセルの総数。横のピクセルと縦のピクセルをかけることで計算できます。パソコンのモニターの画素数が1920px×1080pxのとき、横は1920px、縦は1080pxで合わせて約200万画素になります。縦横ではないところに注意が必要です。ネットでは、この画素数のことを解像度と呼んでいるサイトが散見しています。
画面サイズ、画像サイズ
モニターや液晶自体の画素数を表す画面サイズと、画像自体の画素数を表す画像サイズと分かれています。似た名称ですが、意味合いが大きく変わるので気を付けましょう。
画像表示サイズ
画面上に表示する画像のサイズ。もともと画面に表示する大きさが決まっているので、サイズ違いの画像であっても枠内におさまるように自動的に縮小・拡大されます。
ドット
ドットはモニターを表す点です。ピクセルとドットはモニターを表す点という意味では同じですが、大きさは違います。そもそもパソコンモニターが発色できるのは赤・青・緑の三原色のみで、ピクセルは三原色をかけあわせることで色を表現しています。この三原色のひとつひとつがドットです。つまり、パソコンモニターにおいては1ピクセル=3ドットといえます。しかし、プリンターでは1ドットのうちに複数の色を表現する仕組みがあります。このように、ドットの大きさはモニターによって差があるため、計算は簡単には行えません。
解像度
dpiは1インチ（約2，54㎝）あたりのドット数です。数が多いほど画質が良くなりますが、Windowsの最高解像度は96で、それに対し標準モニターの最高解像度は72です。この違いは印刷した時に分かります。モニターでは最高96でしか表せませんが、実際の解像度は96以上だったとき、印刷すると違いが現れます。しかし、一般的に印刷するようなことはないと思いますので、画像の解像度は72で十分でしょう。
画質
画像の綺麗さを表しています。画素数や解像度、どれだけの色調があるかなどで高画質・低画質と呼びますが、指標は決められないため人によってどの程度でそう呼ぶかは分かれています。
アートボード幅とコンテンツ幅
PhotoshopなどでWEBサイトをデザインするときにはアートボード幅を選択する必要があります。アートボード幅は、いわばモニターサイズの横幅いっぱいのことで、コンテンツ幅は記事や画像など、実際に表示される中身の幅を表しています。一般的にサイトを閲覧するとき、ウィンドウを全画面表示することは少なくブラウザの3分の２以下であることがほとんど。現在流通しているモニターサイズはFHD（フルHD)の1920×1080なので、1200pxほどしかサイトは表示されません。そのため、コンテンツ幅は1000px程度に収めるといいとされます。ただし、これは普通のサイトの場合で、レスポンシブデザインの時は自動でコンテンツ幅を拡大縮小してくれます。
画像容量を下げることを画像サイズを小さくすると解説するサイトもありますが、このサイトでは画素数を下げることを画像サイズを小さくすると解説しています。
圧縮と縮小とトリミングの違い
まずは一番よく違いが分からないといわれる圧縮と縮小とトリミングについてまとめます。
圧縮は画像の中の容量を下げることを言います。SEO対策でよくあげられるのはこちらですね。圧縮方法は様々ですが、どれも画像内の容量を下げることを表しています。
それに対し、縮小はピクセルを変えて画像サイズを小さくすることを表しています。いわゆるリサイズのことです。
トリミングは直訳すると整理。トリミングはいらない部分を切り取ったり削ったりすることです。画像の大きさが実際に変わります。Twitterに画像を載せるとタイムラインで見切れるのは、このトリミングが理由です。
圧縮の中に縮小やトリミングがあるといえます。
次では、なぜ圧縮やトリミングを行い最適な画像サイズにするべきなのか説明していきます。
最適な画像サイズにする理由
近年使われているパソコンモニターの画素数は、フルHDと呼ばれる1920px×1080pxです。デジカメで撮った写真は300万画素が平均で、ピクセルで表すと2048px×1536pxと、モニターの画素数より大きなサイズになっています。iPhoneなんかは最高で1200万画素とはるかに高画質な写真が撮れます。
こうしてデジカメやiPhoneで撮った写真をGoogleフォトなどのフォトビュアーで開く機会は多いと思いますが、画像の大きさをピクセルで表しているのに、パソコンの画素数より大きな画像をフォトビュアーで開いても大きすぎて画像が見れない！なんて問題は起きたことがありませんよね。それはフォトビュアーがどれくらいの大きさで画像を開くか決めているからなのです。WEBページでも同じで、大きな画像サイズのものでもきちんと枠内に収まって表示されるように画像表示サイズを各々で設定できます。
WordPressでしたら、外観→メディアで画像表示サイズを変更できますよね。
画像はその枠内に合わせて自動で拡大縮小されます。ですので、縮小されてぎゅっと高品質の画像になっているわけではなく、実際にモニターを通して表示される画像はパソコンのもともとの画素数までの画像です。
よく店頭で、4KモニターとFHDモニターの比較画像が紹介されていると思います。画素数が大きいほど綺麗な画像をうつせるのは、こういった理由があるんです。
しかし、サーバー上ではアップロードされている画像サイズで読み込まれます。画像サイズが大きければ大きいほど容量が上がり画面表示に時間がかかりますので、圧縮して容量を軽くする必要があるのです。他にも、小さな画像表示なのに高画質である必要はありませんよね。
めちゃくちゃ拡大しないと粗さが分からない…
ですので、いらない部分を削ってページを軽くしてあげましょう。
画像を保存するとは
では、実際に圧縮するにはどうすればいいのでしょうか。
実は、ほとんどの画像はすでに圧縮された状態なのです。それを理解するには、そもそも画像を保存するとはどういう意味かを理解しておくといいでしょう。
私たちがカメラで撮った写真を見るとき、フィルムで現像して直接確認する方法と画面上で確認する方法の2つがあります。カメラは、被写体の光をレンズで取り込むことで写真にすることができる機械で、フィルムカメラとデジタルカメラの2種類に分けることができます。
デジタルカメラの仕組み
フィルムカメラは特殊な塗料を塗ったフィルムに光を当てることで現像しています。ですので、フィルムカメラでは被写体のそのものの色が表現されます。
現在、私たちが主に使っているのはデジタルカメラです。デジタルカメラはフィルムではなく撮像素子を使っています。私たちが認識できる画像になるまでは複雑な処理がされていて、まず、被写体から受けた光を撮像素子が受け取り、そこから電子、そしてアナログの電気信号へと変換します。さらにA/Dコンバータと呼ばれる装置で細かい階段状のデジタル信号に変換されます。ここでようやく写真のもととなるデータ、RAWデータ（生データ）が出来上がります。
しかし、RAWデータはまだ、ただのデジタル信号の状態なので、私たち人間には認識することができません。最後に、画像処理回路で可視化処理が行われ、私たちは画面上で画像を確認することができるのです。つまり、私たちが画面上で見ているものは機械が画像を認識して、元写真のデータから読み取った情報を色により表現したものなのです。
つまり、模写しているのです。元写真そのものをデータとして表しているアナログと違いデジタルでは画像を点で表しており、その点を画素（ピクセル）と呼んでいます。画素数が低いと画質が荒くなるのは、写真の色を表す点の数が少なくなるからなんです。これで、一般的にアナログの方が画質が良いと言われる理由が分かったと思います。
拡張子をつけることでパソコンに画像だと認識してもらう
さて、話は保存に戻りますが、このようにデータ処理された画像はカメラの中に保存されているデータでしかありませんのでパソコンに画像としてアップすることはできません。そのため、パソコンに移す専用の拡張子をつけてあげる必要があります。つまり、画像を保存するとはパソコンが認識できる形にして保存することを表しています。画像の拡張子がはじめて生まれたのは1990年代頭で、当時のインターネットはモデムというルータを利用しており回線速度が今とは比べ物にならないほど遅いものでした。容量の多い画像は読み込むだけで何十分、何時間とかかるもので、この問題を解決するために作られたのがJPEGです。もともと圧縮してデータ容量を軽くするために作られた背景があるので、ほとんどの画像拡張子は圧縮されるのです。
これを知らないでむやみに圧縮済みの画像を圧縮すると画質が粗くなってしまいます。
また、gzip圧縮すると逆に容量を増やしてしまうこともあります。なぜなら、すでに圧縮済みなため、削る部分がほとんどないのですが、圧縮したという情報を追加するため逆に容量が増える問題が起きてしまうのです。
そもそもgzip圧縮はテキストファイルを対象にしています。圧縮にも方法が色々ありますが、このようにどんなものに向いているのかは事前に調べるべきといえます。
ですから、どんな方法で圧縮するべきかを考えていきましょう。まずは、拡張子ごとの違いを理解していきましょう。実は、拡張子によっておすすめする画像は異なってきます。合っていない拡張子にしてしまうと、余計な容量増えたりもやもやした画像になったりします。最適な拡張子を選ぶことでページの表示速度を早くすることができますので、内部SEO対策をしたい人には必見です。
【豆知識】パソコンは拡張子に依存している
拡張子があることでパソコンはどんなファイルなのかを認識できますので、拡張子がないとファイルを開くことができません。パソコンのOSやバージョンによって対応できる拡張子とできない拡張子があり、対応できることを互換性があると呼びます。パソコンは存外、我々が打つ文字を信頼していて、私たちが.xlsと書いてファイルを保存すれば、それが.docのファイル（Word）であってもExcelで開こうとします。パソコン自体がファイルの中身を認識して読み込んでいるわけではないので、拡張子は正しいものを選ばなくてはいけません。
ラスター形式とベクター形式
ところで、画像自体を拡大してみたら、ものすごく画質が粗くなってしまった…そんな経験はありませんか？ほとんどの拡張子では拡大表示させると画質が粗くなってしまいます。しかし、中には拡大縮小が得意なSVGと呼ばれる拡張子も。画像を表現する方法には2つの形式があり、それに合わせた拡張子が存在します。
ラスター形式
1つ目のラスター形式では、ピクセルを塗りつぶして点状に表すことで表現しており、デジカメにも使われています。ほとんどの拡張子はラスター形式です。なぜなら、WEBに対応しているのがラスター形式だからです。パソコンの液晶モニターはピクセルで解像度が表されていますよね。つまり、ピクセルでの表現＝モニターもラスター形式なのです。そのため多くの画像拡張子はピクセルで表現するラスター形式が選ばれています。しかし、ラスター形式では拡大してもピクセルの数は変わらないため、拡大するとどうしても画像が粗くなってしまいます。また、拡大縮小すると点の位置が多少ずれるため、エッジになった部分がジャギー(ギザギザ）になってしまいます。
ベクター形式
では、ベクター形式はどういうものかといいますと、ベクター形式では数式で画像を記録し表現します。ラスター形式では拡大縮小すると細かな部分がズレて綺麗な表現できないですが、ベクター形式は拡大縮小の度に新しく数値の計算をするので拡大縮小しても変化がほとんどありません。また、ラスター形式で高品質な画像を表現するには沢山のピクセルがなくてはいけないので容量が大きくなりがちですが、ベクター形式は数値で表現できるのでラスター形式よりも容量が軽いのです。
こうして聞くとベクター形式の方が優秀だと思われるでしょうが、ベクター形式だと数式のみで表現していますので写真のような複雑な色調変化のある画像だと表現するのに多くの情報がいり容量が増えます。また、モニターがベクター形式に対応していないため、ネットにアップするときにラスター形式に変換する必要もあります（ラスタライズ処理といいます）。数式(コード)を自分で作らないと行けないというデメリットもあります。
代表的な拡張子と、その使い分け
ですので、一般的に使われている拡張子はラスター形式のものが多いのですが、今回はベクター形式も合わせて有名な拡張子をご紹介します。
ラスター形式
JPEG(.jpeg/jpg)ジェイペグ
代表的な拡張子のJPEGは別名、非可逆圧縮のフォーマットと呼ばれており、保存するときに人の目では判断できないレベルの色調変化データを落とすことでデータ容量を落としています。JPEGは保存するたびにいらないデータを落とす処理を行ってしまうので保存するたびに画質が悪くなっていきます。また、一度圧縮したデータをもとに戻すことはできません。そのため、非可逆圧縮と呼ばれています。多くの写真でJPEGが使われていますが、その理由は圧縮率が高いこととフルカラーを使えるからです。高画質で容量の低い拡張子であると覚えるといいと思います。
PNG(.png)ピング
他に有名なのがPNGと呼ばれる拡張子です。PNGはよくイラストに適している保存形式と言われています。1つ目がJPEGと違い透過できるからです（透過についての説明は割愛します）。そして、JPEGでイラストを保存してしまうとモスキートノイズと呼ばれる灰色のモヤができてしまいますがPNGでは大丈夫であることです。これは、JPEGでは細かな色調変化を落とすことで圧縮しているため、輪郭がはっきりしているイラストでやってしまうとそのようになってしまうのです。しかし、PNGでは同じパターンでの情報を一つとしてとらえる方法でデータの圧縮を行っているため画像の色調が変わることはありません。そのうえ、JPEGと同じくフルカラー対応です。ですので、その分画質もよくなります。しかし、JPEGより容量を少なくすることは難しいため、写真で保存するのにはあまり使われていません。
GIF(.gif)ジフ
GIFはアニメーションを作るのに最適な拡張子です。複数の画像をひとつにまとめることで自動再生される短時間の動画が作れます。動画と比べ容量も低く、スマホなど、どの端末でも再生できるため広告に多用されています。また、透過の処理も行えるためロゴに使われることも多いです。しかし、非可逆圧縮形式なので保存するたびに画質が落ちます。ちなみに、PNGが開発されたのは一時期GIFが特許の関係で無料では利用不可になったためで、そのためGIFは後発開発のPNGと比べると圧縮率が低いです。しかし、動画のように扱える独自性からGIFはたしかな市民権を得ています。
TIFF(.tiff/.tif)ティフ
TIFFは圧縮を行わないので画像の入稿作業時によく使われます。そのままではパソコンにデータを移すことができないので、WEBで使う時はJPEGなどに変換しなくてはいけません。
ベクター形式
SVG（.svg.svgz）エスブイジー
対応しているブラウザが少ないことから普及がされていなかったのですが、近年はサポートするブラウザが増えてSVGで作られることも増えました。SVGが輝くのはレスポンシブデザインを採用するときで、レスポンシブデザインではどのウィンドウでもデザインが崩れないようにコンテンツ幅が自動で拡大縮小されるのですが、通常の設定ではもともとある画像の画質をブラウザごとに変化させているわけではありませんので見るブラウザによっては画像が粗くなってしまいます。ですが、SVGで作られた画像は拡大縮小されても画質の劣化がありませんので、どのブラウザで見ても綺麗に映る利点があります。しかし、写真を表現するには容量が大きくなってしまいますので、もっぱらイラストで使われています。
AI（.ai）エーアイ
AIとは、Adobe Illustratorで作られた画像データにつく拡張子のことです。ロゴや小さなイラストで使われていることが多いですが、サイトをデザインするのにも使えます。デザイナーが使うことが多く、AIを展開するにはAdobe Illustratorがないといけませんので、PDFデータも合わせて入稿されることがほとんどです。
使い分け
JPEGは一番圧縮率が高いですが、イラストには不向きです。写真に使うようにしましょう。
PNGにはフルカラーと透過を扱えるPNG－32と、JPEG並みの画質を持つPNG-24と256色まで扱えるPNG-8の2種類がありますので、フルカラーでなくても困らない画像ならば容量の小さいPNG-8を使うようにしましょう。
GIFはアニメーションを作りたいときに使いましょう。動画よりも軽い容量ですし、ブラウザに依存することなく機能します。
TIFFは印刷することが予想されるサイトで使いましょう。ポスターにしたり写真の現像をするサイトなどで十分です。
SVGはAIよりも互換性があるのでイラストを作るときにおすすめです。
AIは容量が軽く拡大縮小も簡単にできるのでイラストを大量に作るときにおすすめです。
写真の画質を悪くせず圧縮するには
これまでのことで、写真を保存するにはJPEGを利用するべきであることが分かりました。では、高画質のまま圧縮する方法はないのでしょうか。実はあります。RAWデータを画像編集する方法です。
ほとんどのデジカメにJPEGとRAW、2つの保存形式があります
RAWデータは先ほどもお話しした通り、そのままではパソコンに移すことはできませんがRAWデータとして保存することはできます。保存したRAWデータは専用のソフトを使うことで画像の編集ができます。ホワイトバランスなどの調整を行ったあと、パソコンが認識できるJPEGなどの拡張子に変換し容量を小さくします。JPEGにしたあとに画像調整を行ってしまうと、再度保存を行ったときに画質の劣化が起きます。また、すでに圧縮を行ったあとの画像を編集するため、どうしても細部の色調に変化が起きます。ですので、品質の劣化を防ぎたいときはRAWデータを専用ソフトで編集し、JPEGに変換することで、圧縮しつつも高品質の画像を手に入れることができます。
画像の大きさを一括で変える方法
容量を軽くするには、余分な画像サイズを削るべきです。画像の大きさはペイントなどの画像編集ソフトで簡単に大きさを変えることができます。Wordpressにも、画像の編集は可能で、投稿前にサイズの変更ができます。しかし、ひとつひとつ変えるのは手間です。そんな時におすすめしたいのがサルワカさんが提供してくださっている画像縮小ツールです。
画像をドラッグするだけで簡単に画像のサイズを変えることができます。横縦比も維持してくれますので、ゆがんでしまうこともありません。何より提供サイトがサルワカさんという有名どころですので、安心して使えると思います。ちなみに、縮小した画像は圧縮データで保存されるので、使うには展開してからになるところだけ注意しましょう。
さらにページを軽くする方法
ここまで、不要な画像サイズを小さくしたり、画像に合った拡張子にすることで画像の容量を下げる方法を紹介してきました。ここからは、一歩踏み込んで、さらに画像を圧縮したりページを軽くする方法について説明します。
画像ではなく、CSSやテキストファイルで表現する。
画像だとどうしても容量が大きくなります。そこで、CSSやテキストファイル形式で画像を表現しページを軽くします。ボタンなどの小さな画像をCSSで表現したり、SVGはテキストファイルとして編集できますのでPNGのイラストをSVGに置き換えます。さらに、テキストファイルに置き換えられたSVGはgzip圧縮も可能なので、容量をさらに小さくすることができます。
圧縮した画像をさらに圧縮する。
JPEGのように圧縮してある画像でも、撮影日時データを削除したりすることでさらに圧縮することができます。いろいろな圧縮サイトがありますが、Compressor.ioは、jpegやpng、gif形式の画像も圧縮できます。Compressor.ioは圧縮する前とした後の画質を見比べることができますので、自分にとって程よい画質になったかどうかを確認することができます。
ページ自体をミニファイして軽くする。
cssやJSは、人間が読んでも理解しやすいように改行したりスペースをあけて書きます。ミニファイ圧縮は、そういったデータを削除してページ速度を軽くする処理のことです。ミニファイ圧縮すると人間では解読しづらくなるため、セキュリティアップにもつながります。人力でミニファイ圧縮するのは大変ですが、最近はミニファイ用のサイトもありますので、そちらを利用してもいいかと思います。いちいち手動で圧縮するのは大変なので自動化するのも手です。
ブラウザに合わせて画質を変える
近年、Retinaなどの高解像度ディスプレイが増えています。
Retinaは、通常1ピクセルで表現するところを4ピクセルで表現するほど高解像度のディスプレイです。そのため、1000pxで画像を配信しているサイトを閲覧すると、どうしても画像の粗さが目立ってしまいます。かといって、 Retinaなどの高解像度ディスプレイに合わせた画質にすると、余分な通信が生まれページ速度が遅くなってしまいます。これを解決するには、ブラウザに合わせた画像を設定することです。
<img
srcset="1000×1000.png 1x, 2000×2000.png 2x, 3000×3000.png 3x"
src="2000×2000.png"
>1xは1×1の通常ディスプレイを、2xは2×2の高解像度ディスプレイをあらわしていて、それぞれで1000px×1000pxの画像を、2000px×2000pxの画像を配信するように設定しています。
まとめ
画像を圧縮するのには、いろいろな方法があることが分かりました。まだ足りていない部分もあるかと思いますが、画像を理解するのに少しでもお役に立てたら嬉しいです。
