画像ファイルの形式⏱ 目安45分

一般的に、画像データは「ビットマップ」と「ベクター」の二つに分かれます。これらは画像の表現方法が異なるため、用途に適した形式を選ぶことが重要です。

a. ビットマップ（Bitmap）形式

ビットマップ形式は、画像を小さな点（ピクセル）の集合として表現する形式です。画像を細かい格子状に分割し、正方形の点ひとつひとつに色や輝度の情報を与えることで表現します。ラスター形式と呼ばれることもあります。

見た目が綺麗な画像を拡大すると、ドット絵のように見えたり縁が粗くなったりすることがあります。拡大時にピクセルそのものも大きくなるため、ジャギーと呼ばれるギザギザが発生するのが原因です。ほとんどの画像ファイルは、このビットマップ形式に当たります。

b. ベクター（Vector）形式

ベクター形式は、複雑な計算式によって画像の色や形を表現する形式です。「ベクトル」と発音される場合もあります。点・線・多角形などの情報を座標値や属性として保持し、数値データから演算される図形として画像を表現します。

拡大しても数値データを再計算して描き直されるため、ジャギーが発生せず、拡大・縮小や変形処理に強いのが利点です。一方で、写真のように多彩な配色や複雑な輪郭を計算式で表現するのは困難で、編集にも膨大な演算が必要になります。

c. よくある画像ファイルの形式と使い分け

画像ファイルにはJPG・PNG・WebP・SVGなど様々な形式があり、それぞれメリット・デメリットがあるため用途に応じた使い分けが必要です。画像ファイル形式は、ファイル名の「.」以降に付く拡張子から判断できます。

画像ファイルはJPG、PNG、WebP、SVGなどの形式間で簡単に変換できます。おすすめの変換ツールはiLoveIMGです。

画像の編集作業やPCへの保存はPNG形式で行い、WEBサイトにアップロードするときは基本的にWebP形式がおすすめです。画質の悪化を防ぎながら編集でき、ファイルサイズを抑えてサイトスピードを高速化できるためです。ブラウザ対応が気になる場合は、JPG・SVG・GIF形式を検討しましょう。WebPへの変換にはこちらのツールが使えます。

TIPS：画像が粗いときの対処法

このTIPSは、今後のレッスンで学ぶデザインツールFigmaの操作を想定しています。今の時点では、画像を書き出す際に表示したいサイズより大きめに書き出すと綺麗になることがある、という点だけ覚えておきましょう。

画像が粗くなるのは、サイズの小さい画像を無理に大きく表示しようとしたときによく起こります。Figmaでエクスポートする際に1xではなく2xや4xを選ぶと、画質が改善するケースが多いです。

サイズを上げると画像の容量は増えるため、WebP形式への変換や圧縮ツールでの調整を組み合わせましょう。画質が目に見えて悪くなるほど圧縮する必要はなく、綺麗な画質を保ったままできるだけ容量を抑えるという考え方で扱うのが基本です。

画像編集の便利ツール⏱ 目安40分

a. 画像変換ツール

画像ファイルの形式を変換したい場面は多くあります。ツールを使えば無料かつ簡単に変換できます。Googleで「画像ファイル形式 + 変換」のようなキーワードで調べれば、目的のツールにすぐたどり着けます。

▼ iLoveIMG

iLoveIMGでは、画像の圧縮・サイズ変更・切り抜き・ファイル変換・回転など、あらゆる画像編集が一括で簡単に行えます。画像の圧縮は品質と圧縮率のバランスを保って処理してくれるため重宝します。

画像のファイルサイズはサイトスピードに大きく影響します。サイトスピードの速さはGoogleのSEOスコアやユーザーの離脱率にも関わるため、画質が荒くなりすぎない範囲で圧縮することが実務では重要です。

b. 背景切り抜きツール

人物だけ、あるいは建物だけを使いたいときなど、背景を切り抜きたい場面があります。近年は自動で背景を切り抜いてくれるサービスが登場し、高精度かつ短時間で切り抜けるため活用がおすすめです。

▼ remove.bg

remove.bgは画像をアップロードすると、自動で背景を削除して人物などを切り抜いてくれるツールです。高画質でダウンロードする場合は料金がかかりますが、リーズナブルな価格です。低い画質であれば無制限にダウンロードできるため、試しに使ってみるとよいでしょう。

▼ Adobe Express

Adobe Expressでも、画像をアップロードすれば自動で背景を除去できます。無料で使えるため、こちらも重宝するツールです。