こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

＜Web担当者編 第2回＞
Webで使う画像についてお伝えします。

担当は濱田です。

Webサイト用の画像作成では、写真に適した「JPG」、アニメやロゴ向けの「GIF」、透過できて劣化のない「PNG」を用途に合わせて使い分けることが大切です。

また、バナーなどのWeb用画像は印刷用のCMYKではなく「RGB」で作成し、ページの読み込み速度を落とさないよう、解像度を「72〜96dpi」に抑えて軽量化する必要があります。

さらに、書き出し時の品質調整だけでなく、「TinyPNG」などの外部Webサービスを併用することで、画質を保ったまま効率よく画像を圧縮し容量を抑えることができます。

”Webで使う画像について”をテーマに、
今日お伝えしたいことは２つあります。

今回は、Web担当者の方向けに解説します。Webサイトを運営する上で、日々のちょっとした画像加工や修正ができれば、作業効率が一段と上がると考えている方も多いかと思います。

でもPhotoshopは買ってもらえないし、高価なツールを準備するのが難しい、という方に朗報です。

「Web担当者編」のシリーズでは、Webサイトに必要不可欠な画像の加工方法について、フォトショップ等の高価なソフトを使わなくとも行う方法を解説します。

皆さんは、作成した画像等はどのようなファイル形式で保存していますか？ ファイル形式といっても用途によって様々なので今回はWeb制作で主に使用されている 代表的なファイル形式をご説明します。

まずはJPGから説明します。JPGのメリットは、人間の肉眼では見えない情報をカットしてくれるのでファイルサイズが小さく、フルカラーで1677万色まで扱うことが出来るので、写真等が綺麗に見える点です。

JPGには拡張子が複数あり、「.jpeg」「.jpe」等がありますが、表記が異なるだけで機能面に違いはありません。デメリットとしては、背景を透明にすることが出来ないこと、何度も上書き保存をすると
非可逆圧縮により画像が劣化してしまう点です。

「非可逆圧縮」とは、一度JPGの品質100未満で保存すると、元とまったく同じ画像には二度と戻せないことを指すものです。使用用途としては写真や多彩な色を使用したものに最適です。

続いてGIFです。GIFのメリットはデータ容量が非常に小さく、また背景を透過することができる点です。デメリットとしては、色が256色しか再現できないため、写真等の複雑な色の表現には適さない点が挙げられます。

使用用途は、背景を透過することが出来るので、簡単なイラストやロゴに向いており、また、1つのGIFファイルに複数の画像データを挿入して、パラパラ漫画の様なアニメーション動画を作成することもできます。

最後にPNGについて説明します。PNGのメリットは保存を繰り返しても画質の劣化の心配もなく綺麗な画質を保つことができ、さらに背景の透過も可能な点です。

デメリットとしては、JPGよりも圧縮率が低いことです。使用用途としては、透過を活かした画像を使用したい場合に適しており、図やイラストなどに向いています。

続いて画像をエクスポート（書き出す）する際に重要なこと、注意することについて解説します。

・CMYKとRGBの違い

まずCMYKとは色料の三原色のことで、「シアン」「マゼンタ」「イエロー」「キープレート」の頭文字をとっており、この色を混ぜ合わせるほど暗い色へと変化していきます。CMYKは紙などの印刷物に使う発色方式です。

一方、RGBは光の三原色のことで「赤」「緑」「青」の頭文字をとっており、この3色を混ぜるほど明るい色になっていきます。 RGBはテレビやPCのディスプレイやスマホといった画面上で使う発色方式であり、バナー等Web用に画像を作成する場合はRGBに設定します。

ちなみにGIMPは標準でCMYKに対応していません。「描画色の変更」ダイアログでCMYKカラーの値を設定することが出来ますが、実際には特別なプラグインを入れない限り、RGBカラー、グレースケールとして扱われます。

CMYKは印刷用の設定となりますので、今回は割愛致します。Web用のバナー画像についてですので、設定はRGBカラーにしてください。

・Web用に書き出す注意点

続いて、画像をエクスポート(書き出す)際の注意点についてです。画像をJPGで書き出す際、「Export Image as JPEG形式」ダイアログが表示され「品質」という項目があります。

この機能では画像の品質を調整できます。Web用画像の容量が大きすぎるとページの読み込み速度が低下してしまうため、「画像ウィンドウでプレビュー」にチェックを入れ、容量をなるべく抑えられるよう確認しながら調整しましょう。

・解像度

解像度とは画像の密度と、表示するための画素数の二つがあります。画素数が多くても、密度が少なければ画像が粗く見えますし、密度が高くても画素数自体が少なければ、画像の鮮明さに影響を与えません。

例えば、A4サイズの画像を同じ画素数のままA3へと引き伸ばすと、画質が粗くなります。これは画素数が同じでも、サイズを広げたことで密度（1インチあたりのドット数）が下がってしまうためです。コピー機でA4の書類をA3に拡大コピーしたときの、引き伸ばされた状態をイメージすると分かりやすいでしょう。

この画像の密度を「dpi」、画素数を「ピクセル（px）」という単位で表します。密度であるdpiが高いほど画像は鮮明になりますが、スマホやPCの画面はそもそもピクセルで表現されるため、Webの世界においては「画像解像度＝ピクセル」「画像品質＝dpi」と捉えて差し支えありません。

300px × 300pxの小さな画像は、表示倍率（dpi）をいくら高く設定したとしても、画像本来の解像度が300px × 300pxであることに変わりはありません。

そのため、Web用画像は単純にdpiを上げれば良いというわけではなく、数値を高くしすぎるとデータ容量が無駄に重くなってしまいます。こうした理由から、Web用の画像は72〜96dpiで作成するのが一般的です。

・外部ツールでWeb用に圧縮する

画像をエクスポート（書き出し）した際、PNG形式の画像はJPGやGIFと比べると画像の容量が大きく、サイトの表示速度に影響を与える可能性があります。

そこで紹介したいのが、PNGやJPGをまとめて圧縮することが出来る「TinyPNG」というWebサービスです。（URL：https://tinypng.com/）

インストールする必要がなく、使い方も簡単で圧縮したい画像をドラッグ＆ドロップすることで品質をできるだけ保ったまま画像を軽量化することが出来ます。

以上でWebの使用を想定した画像化方法と、画像そのものの基本についてご説明しました。

の２点についての内容でした。次回は写真のトリミングや補正の仕方などをご説明いたします。

最後までご覧いただきありがとうございました。