画像の書き出し形式｜WDSG策定チーム［#09］
みなさんは普段、Photoshopなどで行う書き出し画像のファイル形式は、どんな形式で書き出しますか？
WDSG策定チーム専用Slackにて、メンバー間で談義を行い［画像の書き出し形式］のガイドラインを作成しました。
WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。
１．画像の書き出し形式
１）基本的に、画像の書き出し形式は［解像度］［背景透過の有無］［ファイルサイズ］を考慮して、最適な形式で書き出しを行います。
２）色数が多い写真や、グラデーションを含む図やイラストは［JPEG形式］で書き出します。
意図：
フルカラーでの表現が可能で、PNG形式よりもファイルサイズが小さくなります。
３）色数が少ない図やイラストは［PNG-8形式］で書き出します。
意図：
色数が少ない場合、JPEGよりもPNG-8の方がファイルサイズが小さくなります。
４）背景の透過が必要な画像は［PNG形式］で書き出します。
５）ベクターデータを所持しているロゴやアイコンは［SVG形式］で書き出します。
意図：
ベクターデータは計算式で画像を表現するので、単純な形状であればファイルサイズは小さく、色やサイズの変更も容易に行なえます。
２．比較サンプルデータ
１）色数の少ない画像での［ファイルサイズの比較］と［解像度］
［ファイルサイズの比較］
JPEG：画質100 = 98KB
JPEG：画質80 = 69KB
JPEG：画質60 = 55KB
JPEG：画質40 = 33KB
PNG-24 = 35KB
PNG-8 = 15KB
※note上では画像が圧縮されているので、上記の［sample01.zip］にて確認してください。
２）色数の多い画像での［ファイルサイズの比較］と［解像度］
［ファイルサイズの比較］
JPEG：画質100 = 1.4MB
JPEG：画質80 = 748KB
JPEG：画質60 = 467KB
JPEG：画質40 = 314KB
PNG-24 = 3.4MB
PNG-8 = 973KB
※note上では画像が圧縮されているので、上記の［sample02.zip］にて確認してください。
３．策定までの流れ
［画像の書き出し形式］について行ったSlackでの流れを、公開議事録として掲載します。
ホナミさん：
【画像の書き出しについて】
写真など…jpg
文字拡大する…png
文字拡大しない…gif ←最近はpngに統一
という認識でずーーっといます。
ですが、コーディング会社に外注すると、画像がすべてpngであがってきます。
何回言ってもメイン画像もpng書き出し。なぜ？？今の主流知りたいです。
ヒカル：
僕の画像形式を選ぶ基準は、［写真全般→jpg］［透過画像→png］です。
基本、jpgの方がファイルサイズが小さくなりますし、透過が必要じゃない場合はjpgで書き出しますね。
今の主流も上記の認識ですが、みなさんの方法も聞いてみたいですね！
桑島さん：
私は、
・写真 → jpg
・透過画像 → png-24
・それ以外 → png-8
って感じですかね。
前はpng-8をgifで作っていましたが、pngの方が容量が小さくなるということなのでgifは使わなくなりました。
文字画像やロゴはsvgを使うこともあります。
園川さん：
自分もヒカルさんとほぼ同じです！
透過のみpngで
透過させないものはもっぱらjpg
ロゴ周りは桑島さんと同様svgを使うことが多いです。
svgはベクターデータなので見た目が荒れないですし、部分的な装飾として使うとしてもソースから色の変更ができるので便利ですよね！
４．WDSG策定チーム専用Slack
WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！
意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。
この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！
最後までお読み頂き、ありがとうございました！
サポート頂いたお金は交通費などの活動資金として、大切に使わせてもらいます^^