画像ファイルを最適に使い分けて、軽量で高画質な画像を書き出し各種メディアごとに挿入し活用できてますか？
この記事を一読することで、今日からIllustrator、Photoshop、InDesign、DreamweaverなどのAdobe CC関連ソフトを使って作業している時に、最適な「画像ファイル形式」が選べるようになります。
jpeg pngどっちがいい？イラストと写真で使い分ける方法！
jpegとpngどっちがいいか？については、透過画像を含むならpng。画像をより高解像度にしたいならpng。色数が多いイラストならpngと、pngの圧勝です。
写真でpngより軽くてそこそこでOKならjpegです。
.gif .jpeg .png の違いと使い分け（どっちがいい？）
企業さんの広告画像がなぜか写真なのにGIF保存で汚いｗ
— オレ流！イラレ道場@千葉名人 (@illareya) September 16, 2019
GIF画像は色数が少ない漫画みたいなイラストに最適だけど、写真画像はJpegかPNGがおぬぬめ(人´ω｀)
背景を透過させる場合もGIFよりPNGがおすぬぬめ
お客さんやデザイナーも最適な画像形式選べてないので、近日ブログ記事のネタにしますね！
ということで、プロがやってるハズのお仕事でも間違った画像形式が使われているケースがかなり目立ちます。
さっそく具体例をお見せします。
GIFでバナー画像を作ってしまっている失敗例
これは、羽野晶紀さんがCMする「天使のララ」というコラーゲンのレクタングルバナー広告です。
gif画像では写真が劣化する！
gif画像形式で写真を書き出して保存したデータをバナー広告などで使おうとすると、gifは表現できる色数が限られるため写真などの色数が多い画像は激しく劣化します。
ポイント
写真をウェブ（ホームページ、ブログ等）で使う場合（バナー広告、ヘッダー画像等）は、jpeg（ジェイペグ）かpng（ピング）が基本となります。
gifのメリットは軽い+アニメーションgifが作れることです。ただし、写真を元にしたアニメーションを作る場合はAPNG（エーピング）と呼ばれる写真も劣化しないピングアニメが最適です。
もう一つのメリットとして、透過gifがあります。これは背景を透明にして透き通らせる機能です。昔はgifでしか透過画像を作れませんでしたが、今は「透過png」があります。
写真はjpegかpngで保存しウェブで使いましょう
ウェブで使える画像ファイル形式は、jpeg、png、gifの3つです。しかし、写真を含む画像は、gifは劣化が激しいので除外となります。
つまり、写真画像はjpegとpngの２択であります。
jpegとpngのどっちがいいか？
もう全部pngでもいいと思います。
jpegよりファイルサイズ容量が大きくなるのですが、例えばWordPressの場合自動でファイルサイズを圧縮するプラグインがあるのでjpegより写真画像も含めてキレイに表示してくれます。
またイラストにも最適なpngなら「なにも考えず解像度だけ適度」に合わせて作ってサクサクとインターネットにUPして使えます。
jpegにして欲しいとクライアントから頼まれたら、pngからjpegに変換すれば良いだけです。
jpegからpngにすると劣化するしますが、PNGからJpegにしても劣化しません。変更にも強い画像形式です。
もちろん、元になるpsdやaiデータが手元にあるならそこから要望の画像を書き出します。
✅ 写真はjpegかpng。どっちでもOK！
✅ 背景に一部透明部分を作りたい場合は透過png。イラストだけの場合はpng。
✅ 色数が少ないイラスト。白黒の線画でとにかく容量を軽くしたい場合はgif。写真にgifはNG！
例外としてのgif画像活用例（白黒ならgif最強）
DTPでの画像ファイル形式
IllustratorからInDesignに画像を配置する。またはPhotoshopからInDesignに画像を配置したい。
そんな場合は、新しいAdobe CCであればIllustratorはaiファイルそのもの。
Photoshopは、psdファイルそのものをInDesignに配置して利用します。
昔は、高解像度のtiff画像やeps画像を書き出してから「QuarkXPress（クォークエクスプレス）」などの組版（ページレイアウトソフト）に配置していました。
しかし、AdobeのInDesignが進化してその代わりになった結果、InDesignにはIllustrator、Photoshopそのままの保存ファイルをそのまま配置して利用できるようになりました。リンク形式で配置すれば、一瞬で制作した元のソフト側が起動して修正変更が可能です。
逆に今、最新のInDesign側に「eps」などでファイルを配置すると印刷事故の原因になります。１回やらかしそうになって校正の段階で発見して、その時にAdobeが公式に「epsにせんでええよ」とアナウンスしていることを同時に知りました。それがもう2009年頃の話です。
古いバージョンのAdobe CC環境、または未だに「QuarkXPress（クォークエクスプレス）」がワークフローに入ってる会社は嫌だなぁ・・と当時思ってました。
SNSにもpngおすすめ！
