1. 画像ファイルの形式
一般的に、画像データは「ビットマップ」と「ベクター」の二つに分かれます。これらは画像の表現方法が異なります。用途に適したデータ形式を選びましょう。
a. ビットマップ（Bitmap）形式
画像を細かい格子状に分割し、その正方形の点ひとつひとつに色や輝度の情報が与えられて表現されます。要は点の集合体です。
見た目が綺麗に思える画像を拡大すると、ドット絵のようになったり、縁が粗くなったりしたという経験はありませんか？
これがビットマップ形式の特徴を示しています。
ビットマップ画像を拡大すると、小さな点であったはずのピクセルも拡大され、ジャギーと呼ばれるギザギザが発生します。
✅ ピクセルが集まって作られている
✅ 色を細かく表現できる
✅ 複雑な色の画像に最適
b. ベクター（Vector）形式
点・線・多角形などの情報を座標値や属性として保持し、数値データから演算される図形として画像を表現しています。要は計算式です。
ベクター形式の画像は拡大しても、数値データを変化させて再描写されます。それゆえ、ジャギーが発生して荒い画像になることはありません。
このように拡大・縮小や変形処理に強いのがベクターの利点です。
しかし、ベクター画像は計算式で表現されるため、複雑な画像の描写には不向きと言えます。
写真のように多彩な配色や複雑な輪郭を、計算による図形として表現するのは困難です。
また編集する場合も膨大な演算が必要となります。
✅ 拡大しても画像が荒くならない
c. よくある画像ファイルの形式と使い分け
それぞれメリット・デメリットがあるため用途に応じて使い分けていく必要があります。
画像ファイル形式は画像ファイルについている拡張子から判断できます。
拡張子とは、「.png」「.jpg」などの「.」以降のものを指します。
▼ JPEG
JPEGはビットマップ形式です。拡張子は「.jpg」「.jpeg」などとなります。
「不可逆圧縮を行うことで細かい色の差異データを切り捨て画像データを圧縮する」というのが大きな特徴です。
- 保存時のデータ容量が小さくなる傾向にあり一般的にWEBでよく使われる
- フルカラー約1677万色を扱えるため複雑な色で構成された画像に適している
- 背景の透過処理などができず編集に向いていない
- 若干画質が悪化しやすい
- 保存をするたびに不可逆圧縮をして画質が悪化するため、編集作業の際はPNGなどが向いている 必ずPNG形式などで保存しておき、WEBサイトにアップロードをする際にJPEGに変換するといった使い方がおすすめです。
▼ PNG
PNGはビットマップ形式です。拡張子は「.png」となります。
- JPEG同様フルカラー約1677万色を扱うことができ、透過処理もできる
- 可逆圧縮のため画質が保存のたびに悪化したりせず、編集に向いている
- ファイルサイズが大きくなりがち
- WEBサイトにアップロードする際は他のファイル形式に変換して容量を圧縮するケースも多い
▼ GIF
GIFはビットマップ形式ですが時代遅れになっており使われるケースは減っています。拡張子は「.gif」となります。
- アニメーションを表現できる
- 扱える色の種類に制限があり、ファイルサイズを小さくできる
1枚の画像で使用できる色が256色に限定されている
▼ SVG
SVGはベクター形式です。拡張子は「.svg」となります。
サイズが大きく変わりうる画像に使用するのがおすすめです。
- ベクター形式であるため拡大・縮小しても画像が荒れずに綺麗に表現できる
- マークアップ言語で記述されているため、CSSやデザインツールを使って一部だけ色を変えたり、形を変えたりしやすい
- 複雑な画像では計算量が膨大になってしまい、ファイルサイズが大きくなってしまう
▼ WebP
WebPはビットマップ形式です。拡張子は「.webp」です。
Google社がサイトスピードの高速化を目的として作った比較的新しい画像フォーマットです。
- Googleによると、ファイルサイズはJPEGと比較して25-34%、PNGと比較して26%ほど減ると言われています。
- 画像ファイルサイズを減らすことでサイトスピードの高速化が期待できます。
- ほぼすべての主要なブラウザに対応していますが、一部未対応のブラウザがあります。
- ですがこれはものすごくレアケースなのであまり気にしなくてよいと思います。
結局、画像の使い分けはどう行うべきか
理由としては画質が荒くなることを防止しながら編集できるからです。
WEBサイトにアップロードするときは基本的にWebP形式がおすすめです。
画像のファイルサイズがサイトスピードに与える影響は大きいので、ファイルサイズが削減できるのは非常に大きなメリットだからです。
ブラウザサポートが気になって使いたくないという場合は容量を減らす目的でJPG形式、SVG形式、GIF形式を検討するとよいでしょう。
ちなみにWebPの変換ツールはGoogleで「WebP 変換 ツール」などと検索すれば出てきますが一つ紹介しておきます。
TIPS：「画像をWEBサイトにアップロードしてみたらなんか粗い…！」という時の対応法
画像が粗くなる現象はサイズが小さすぎる画像を無理やり大きいサイズでWEBサイトで表示しようとする際などによく発生します。
その際はFigmaなどでサイズを拡大してエクスポートするのがおすすめです。
左はFigmaの画面ですが、赤い箇所に「Export 1x」と書いてあります。1xであれば作成した画像を1倍の大きさにしてエクスポートする、2xであれば2倍、4xであれば4倍になります。
1xだと画質が悪いという時は、2xや4xでエクスポートしてWEBサイトにアップロードしてみましょう。
そうすると多くの場合改善されます。
デメリットとしては画像の容量が増えてしまうことです。
画像容量の増大に対する対応としてはその後webp形式に変換したり、画質を落とさない範囲で圧縮ツールで圧縮などを試みましょう。
画質を目でわかるほど悪くしてまでサイズを圧縮する必要はありません。
あくまで「綺麗な画質は保ったままできるだけサイズを圧縮する」という考え方で画像を取り扱っていきましょう。
2. 画像編集の便利ツール
a. 画像変換ツール
画像ファイル形式を変換したい場合はよくあります。
その際ツールを使うと無料かつ簡単に変換が可能です。ここで紹介するツールの名前などはわざわざ覚えなくても大丈夫です。
Googleで「JPG PNG 変換」「PNG webP変換」などと「画像ファイル形式 + 変換」などのキーワードで調べるとツールがすぐにヒットします。
調べ方を理解しておけばいつでもツールにはたどり着けます。
▼ iLoveIMG
画像の圧縮については品質と圧縮のバランスをうまく保って行ってくれるため非常に重宝します。
一般にサイトスピードには画像のファイルサイズが大きく影響します。
サイトスピードの速さは「GoogleのSEOスコアを上げる」「ユーザーの離脱率を下げる」という観点で非常に重要であるため、画質が荒くなりすぎない範囲で圧縮するのが実務においては重要です。
b. 背景切り抜きツール
近年、自動で背景を切り抜いてくれるサービスが出ており、それらを使うと高精度かつ短時間で切り抜けるので非常におすすめです。
▼ remove.bg
高画質で切り抜きをダウンロードする際は料金がかかりますが料金自体もとてもリーズナブルなのでおすすめです。
少し低い画質であればいくらでもダウンロードできるので試しに使ってみてください！
▼ Adobe Express
無料で背景除去ができるのでこちらも大変便利で重宝するツールです。