< !--Tradedoubler siteverification 3222025-- >

Photoshopで書き出した画像の拡張子はどれを選ぶ?

Photoshopでファーストビューを作りましたが、書き出す時にどの拡張子を選んだら良いか迷ってしまいました。

それぞれ画像に適した拡張子があるので適切に選ぶことが大切です。
今回は作った画像を書き出す時の拡張子の選び方について見ていきましょう。

拡張子とは

それぞれのファイルにある文字には「.(ドット)」がありその後ろにアルファベットがあります。

このアルファベットが拡張子でファイルの種類を区別するためにあります。

画像の拡張子の例

デザインでよく使う拡張子について見ていきましょう。

形式拡張子透過圧縮特徴
JPG、JPEG.jpg1678万色透過なし非可逆圧縮Web用の画像
ビットマップ
写真などを高画質に画像容量を少なく保存が可能。色の少ないイラストなどは容量がおおきくなってしまう。
PNG-8.png256透過あり可逆圧縮ロゴやイラストなどをきれいに保存出来る。
PNG-24.png1678万色透過あり可逆圧縮きれいだが容量が特に大きい。
GIF.gif256透過あり可逆圧縮png-8と似ている。アニメ可。軽量

透過させたい場合、簡単なロゴやイラストなどは「PNG」で保存するのが良いでしょう。

写真など複雑で高画質な画像は「jpeg」で保存するのが良いでしょう。

その他の形式

HEIF.heic約10億6433万色透過あり可逆圧縮iphone11以降で使われている画像形式。
より軽量化したjpg.
APNG.apng1678万色透過あり可逆圧縮アニメーションするpng
LINEスタンプにも使われている。
WEBP.webp1678万色透過あり非可逆圧縮軽量
AVIF.avifディスプレイの輝度、カラービット深度、および色域透過あり可逆圧縮、非可逆圧縮を選択できるgifより高画質で小さいサイズでアニメーションできる

Webp

「Webp」はGoogleが開発した画像形式で圧縮率が高いのが特徴です。

透過、アニメーションにも対応していてきれいな画像を容量を小さく保存できます。

画像が多く使われているサイトなどは表示スピードも上がるため「WebP」は次世代のフォーマットとして注目されています。

PhotoshopでのWebpへの書き出し

では早速注目の拡張子「webp」に書き出してみましょう。

「ファイル」から「コピーを保存」

「webp」を選択する。

これで画像容量を抑えて保存できます。

まとめ

Photoshopで画像を保存する時は

ロゴや簡単なイラストなら「PNG」

透過させたい場合も「PNG」

写真は「JPEG」

で保存するようにしましょう。

そして今後使用が増えていく「Webp」にもぜひ書き出してみてください。

Photoshop

Posted by sweetchilli