初心者用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 の違いと使い分け(どっちがいい?)

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

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

 

GIFでバナー画像を作ってしまっている失敗例

千葉名人
じゃん!有名商品のバナー広告ですが良くご覧ください。

天使のララ

これは、羽野晶紀さんが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にすると劣化するしますが、PNGからJpegにしても劣化しません。変更にも強い画像形式です。

 

もちろん、元になるpsdやaiデータが手元にあるならそこから要望の画像を書き出します。

 

✅ 写真はjpegかpng。どっちでもOK!

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

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

千葉名人
と使い分けると良いでしょう!
アシスタントの田中君
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」にすると画像劣化を防げるよ!

イラレ似顔絵 伊藤学

【超初心者用】初めてのAdobe illustrator使い方講座【完全版】

【Udemy】初めてのイラストレーター使い方講座

動画版の「イラレ道場」です。動画で楽にAdobe Illustratorが使えるようになる超初心者用の講座です。

短期集中!このチャンスにIllustratorを学習し思い通りにサクサクと使えるようになってみませんか?

>>初めてのAdobe Illustrator使い方講座【完全版】のキャンペーンはこちら!

 

Adobe Illustrator用パターンスウォッチ素材集【製図・地質図・DTP・WEB・ロゴデザイン用】

【誕生20周年記念】ただいま期間限定キャンペーン実施中!

Illustrator ハッチング

【20年以上の実績】Adobe Illustrator用パターンスウォッチ素材集【実務特化】

 

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

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