PR

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

[st-cmemo fontawesome=”fa-lightbulb-o” iconcolor=”#FFA726″ bgcolor=”#FFF3E0″ color=”#000000″ iconsize=”100″]画像ファイルを最適に使い分けて、軽量で高画質な画像を書き出し各種メディアごとに挿入し活用できてますか?[/st-cmemo]

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

 

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

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

[st-kaiwa3 r]よろしくたのみます!赤ちゃんでもわかるようにカンタンにおねがいしますっす!![/st-kaiwa3]

 

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

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

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

 

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

企業さんの広告画像がなぜか写真なのにGIF保存で汚いw

GIF画像は色数が少ない漫画みたいなイラストに最適だけど、写真画像はJpegかPNGがおぬぬめ(人´ω`)

背景を透過させる場合もGIFよりPNGがおすぬぬめ

お客さんやデザイナーも最適な画像形式選べてないので、近日ブログ記事のネタにしますね!

— オレ流!イラレ道場@千葉名人 (@illareya) September 16, 2019

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

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

 

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

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

天使のララ

[st-cmemo fontawesome=”fa-comments” iconcolor=”#F48FB1″ bgcolor=”#FCE4EC” color=”#000000″ iconsize=”100″]これは、羽野晶紀さんがCMする「天使のララ」というコラーゲンのレクタングルバナー広告です。[/st-cmemo] [st-kaiwa3 r]ん?なんだか写真の画像が荒いっすね[/st-kaiwa3]

そうなんよ。せっかくキレイな芸能人を「プロが撮影した最高品質の写真」を使って広告バナーを作っているのに「ホームページ」や「ブログ」で使われる肝心の「バナー画像」が劣化してるんよ。で、こんな感じで画像を劣化させてしまっているとてももったい無い「広告バナー」が結構あるんよ。本当にもったいないよ。こういうケースは本当に多すぎるくらいに多いんだけど、最終工程に近い「作業担当者」が最適な画像書き出しと「画像ファイル形式」をわかってないと、せっかくの画像素材を劣化させちゃうことになるんよ・・・

[st-kaiwa3 r]千葉名人には、なぜこの広告の写真の画像が荒れてしまってるかわかるんすか?[/st-kaiwa3]

写真なのにgif形式で保存してるからだよ。拡張子が(.gif)ってなってたらgif書き出ししたってことなんよ。

[st-kaiwa3 r]gifで写真を書き出すとダメなんすか?[/st-kaiwa3]

絶対にやってはいけないやね!

 

 

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

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

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

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

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

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

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

[st-kaiwa3]マジすかー!![/st-kaiwa3]

 

 

写真は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!

と使い分けると良いでしょう!

[st-kaiwa3]pngいいっすね!時代はpngっすね!![/st-kaiwa3]

 

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

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

例えば、こういうのはgifが最適ですよ!軽いしキレイだよ!

[st-kaiwa3 r]おお!なるほど「白黒の線画」はgifが良いんですねー![/st-kaiwa3]

線画の2値画像はgif画像でも劣化を感じないよ。jpegよりむしろキレイじゃね?しかも圧倒的に軽い!!でも写真画像ではgifはNGね♪

[st-kaiwa3 r]ファイルが軽いから写真でもgif画像にしたくなっちゃうんすよねー[/st-kaiwa3]

 

 

DTPでの画像ファイル形式

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

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

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

[st-cmemo fontawesome=”st-svg-bigginer_l” iconcolor=”#9CCC65″ bgcolor=”#F1F8E9″ color=”#000000″ iconsize=”100″]昔は、高解像度のtiff画像やeps画像を書き出してから「QuarkXPress(クォークエクスプレス)」などの組版(ページレイアウトソフト)に配置していました。[/st-cmemo]

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

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

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

[st-kaiwa3]DTPって会社の環境で仕事の労働強度がすごい違うっていうのは、そういうのがあるんすね![/st-kaiwa3] [st-kaiwa1 r]せやね・・・もはや最新環境じゃないと辛いやね。今のオレはウェブの仕事しかもうやってないからアレなんだけど、まぁDTPは神経磨り減る仕事だよなぁ・・・

 

SNSにもpngおすすめ!

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

イラレ似顔絵 伊藤学

コメント