初心者用Illustratoの使い方講座 パソコン便利情報

【gifは劣化する】jpeg pngどっちがいい?イラストと写真で使い分ける方法!

投稿日:2019年9月26日 更新日:

画像ファイルを最適に使い分けて、軽量で高画質な画像を書き出し各種メディアごとに挿入し活用できてますか?

この記事を一読することで、今日からIllustrator、Photoshop、InDesign、DreamweaverなどのAdobe CC関連ソフトを使って作業している時に、最適な「画像ファイル形式」が選べるようになります。

 

jpeg pngどっちがいい?イラストと写真で使い分ける方法!

ちばこちばお
ちょっと難しそうに感じるかもしれないのと、画像形式の最適化について解説しているサイトを見ても初心者にすれば「可逆性」などの専門用語が混ざりすぎるとかえって混乱すると思いますので、シンプルにカンタンに具体例と要点だけをまとめて簡潔に解説しますね!
よろしくたのみます!赤ちゃんでもわかるようにカンタンにおねがいしますっす!!
アシスタントの田中君

 

ちばこちばお
とりあえず結論から先に言うと、写真はjpegかpngならどっちでもOK!写真画像ならgifだけはやめとけ!という内容です。

jpegとpngどっちがいいか?については、透過画像を含むならpng。画像をより高解像度にしたいならpng。色数が多いイラストならpngと、pngの圧勝です。

写真でpngより軽くてそこそこでOKならjpegです。

 

.gif .jpeg .png の違いと使い分け(どっちがいい?)

ということで、プロがやってるハズのお仕事でも間違った画像形式が使われているケースがかなり目立ちます。

さっそく具体例をお見せします。

 

ちばこちばお
じゃん!有名商品のバナー広告ですが良くご覧ください。

天使のララ

これは、羽野晶紀さんがCMする「天使のララ」というコラーゲンのレクタングルバナー広告です。

ん?なんだか写真の画像が荒いっすね
アシスタントの田中君
ちばこちばお
そうなんよ。せっかくキレイな芸能人を「プロが撮影した最高品質の写真」を使って広告バナーを作っているのに「ホームページ」や「ブログ」で使われる肝心の「バナー画像」が劣化してるんよ。で、こんな感じで画像を劣化させてしまっているとてももったい無い「広告バナー」が結構あるんよ。本当にもったいないよ。こういうケースは本当に多すぎるくらいに多いんだけど、最終工程に近い「作業担当者」が最適な画像書き出しと「画像ファイル形式」をわかってないと、せっかくの画像素材を劣化させちゃうことになるんよ・・・
ちばこ先生には、なぜこの広告の写真の画像が荒れてしまってるかわかるんすか?
アシスタントの田中君
ちばこちばお
写真なのにgif形式で保存してるからだよ。拡張子が(.gif)ってなってたらgif書き出ししたってことなんよ。
gifで写真を書き出すとダメなんすか?
アシスタントの田中君
ちばこちばお
絶対にやってはいけないやね!

 

 

 

gif画像では写真が劣化する!

gif画像形式で写真を書き出して保存したデータをバナー広告などで使おうとすると、gifは表現できる色数が限られるため写真などの色数が多い画像は激しく劣化します。

ポイント

写真をウェブ(ホームページ、ブログ等)で使う場合(バナー広告、ヘッダー画像等)は、jpeg(ジェイペグ)かpng(ピング)が基本となります。

gifのメリットは軽い+アニメーションgifが作れることです。ただし、写真を元にしたアニメーションを作る場合はAPNG(エーピング)と呼ばれる写真も劣化しないピングアニメが最適です。

ちばこちばお
gifを使う場合は、もともと画像が荒れてる場合か、元がイラストで色数が少ないものに限定するのが良いです。

もう一つのメリットとして、透過gifがあります。これは背景を透明にして透き通らせる機能です。昔はgifでしか透過画像を作れませんでしたが、今は「透過png」があります。

ちばこちばお
透過pngであれば透明な背景を写真画像で劣化なしで作れます。これが凄いことに画像が全然劣化しないんよ!つまり、gifは色数が少ないイラスト(白黒画像等)以外では基本的に使わないほうが良いと言えます。
アシスタントの田中君
マジすかー!!

 

 

写真はjpegかpngで保存しウェブで使いましょう

ちばこちばお
ネットで使う写真画像は、jpegかpngがベストです。

ウェブで使える画像ファイル形式は、jpeg、png、gifの3つです。しかし、写真を含む画像は、gifは劣化が激しいので除外となります。

つまり、写真画像はjpegとpngの2択であります。

 

jpegとpngのどっちがいいか?

もう全部pngでもいいと思います。jpegよりファイルサイズ容量が大きくなるのですが、例えばWordPressの場合自動でファイルサイズを圧縮するプラグインがあるので、jpegより写真画像も含めてキレイに表示してくれてイラストにも最適なpngならなにも考えず解像度だけ適度に合わせて作ってサクサクとインターネットにUPして使えます。

jpegにして欲しいとクライアントから頼まれたら、pngからjpegに変換すれば良いだけです。jpegからpngにすると劣化するので変更にも強いと言えます。

もちろん、元になるpsdやaiデータが手元にあるならそこから要望の画像を書き出せば良いだけです。

 

✅ 写真はjpegかpng。よりキレイな写真にしたいならpng。

✅ 背景に一部透明部分を作りたい場合は透過png。イラストだけの場合はpng。

✅ 色数が少ないイラスト。白黒の線画でとにかく容量を軽くしたい場合はgif。

ちばこちばお
と使い分けると良いでしょう!
アシスタントの田中君
pngいいっすね!時代はpngっすね!!

 

例外としてのgif画像活用例(白黒ならgif最強)

ちばこちばお
例外的に例えば特許図面なんかの場合、特許庁に写真はjpeg,bmp,基本的にgifの線画、白黒など出願の種類でファイル形式が指定されている業種の仕事も存在します。そのようなケースは、そのルールの中で一番キレイで軽い画像ファイルになるようにgifも含めて最適な画像形式、解像度も含めてルールの範囲で研究し最適化させていきましょう。

ちばこちばお
例えば、こういうのはgifが最適ですよ!軽いしキレイだよ!
おお!なるほど「白黒の線画」はgifが良いんですねー!
アシスタントの田中君
ちばこちばお
線画の2値画像はgif画像でも劣化を感じないよ。jpegよりむしろキレイじゃね?しかも圧倒的に軽い!!でも写真画像ではgifはNGね♪
ファイルが軽いから写真でもgif画像にしたくなっちゃうんすよねー・・・
アシスタントの田中君

 

DTPでの画像ファイル形式

IllustratorからInDesignに画像を配置する。またはPhotoshopからInDesignに画像を配置したい。

そんな場合は、新しいAdobe CCであればIllustratorはaiファイルそのもの。

Photoshopは、psdファイルそのものをInDesignに配置して利用します。

昔は、高解像度のtiff画像やeps画像を書き出してから「QuarkXPress(クォークエクスプレス)」などの組版(ページレイアウトソフト)に配置していました。

しかし、AdobeのInDesignが進化してその代わりになった結果、InDesignにはIllustrator、Photoshopそのままの保存ファイルをそのまま配置して利用できるようになりました。リンク形式で配置すれば、一瞬で制作した元のソフト側が起動して修正変更が可能です。

逆に今、最新のInDesign側に「eps」などでファイルを配置すると印刷事故の原因になります。1回やらかしそうになって校正の段階で発見して、その時にAdobeが公式に「epsにせんでええよ」とアナウンスしていることを同時に知りました。それがもう2009年頃の話です。

古いバージョンのAdobe CC環境、または未だに「QuarkXPress(クォークエクスプレス)」がワークフローに入ってる会社は嫌だなぁ・・と当時思ってました。

アシスタントの田中君
DTPって会社の環境で仕事の労働強度がすごい違うっていうのは、そういうのがあるんすね!
せやね・・・もはや最新環境じゃないと辛いやね。今のオレはウェブの仕事しかもうやってないからアレなんだけど、まぁDTPは神経磨り減る仕事だよなぁ・・・
ちばこちばお

 

SNSにもpngおすすめ!

ちばこちばお
ちなみに、Twitterとかに投稿するのもpngがおすすめ!Twitterはアホで勝手にjpeg変換して画像が劣化するけど、透過pngにすると画像劣化を防げるよ!

アシスタントの田中君
なるほどー!プラットフォームによって「使い分ける」とよりベストにちかづけることができるんすねー!!
ウサ耳子
ということで、みんなもわかったかな?写真はpngかjpegで書き出して使ってみてね♪

 

ちばこちばお
Illustratorのアートボードからキレイに画像を書き出す方法はこちら!
ウェブ書き出し
illustratorアートボードの使い方「サイズ変更」と「ウェブ書き出し」
illustratorアートボードの使い方「サイズ変更」 アートボードを使ってクリップすると上手くいく (^_-)☆ アートボードのサイズを定義します。書きだして使いたい画像の「仕上がりサイズ」に設定 ...

続きを見る

 

ちばこちばお
他の偉そうにしてるイラレ素人ブロガーはネタパクるなよ!プロ、企業がひた隠す裏技を思いっきり暴露中!!

▶ イラレマスターが教える!ウェブ書き出しで変倍(画像が変形)する場合の対策

▶ 【製図業者がひた隠す企業秘密】超高解像度で画像を書き出しサイズも完全に設定する裏技暴露!

 

-初心者用Illustratoの使い方講座, パソコン便利情報

Copyright© イラレ屋 , 2019 All Rights Reserved.