初心者用Illustratoの使い方講座

イラレのスクリーン用書き出し&WEB用書き出し jpg100、jpg80、jpg50、jpg20とPNG、PNG 8の違い

イラレのスクリーン用書き出し&WEB用書き出しフォーマットの解説です。

jpg100、jpg80、jpg50、jpg20とPNG、PNG 8の違いと、高画質で画像を書き出す方法をまとめました。

※jpg=jpeg(ジェイペグ)の略称でもありどちらも同じ画像フォーマットです。

 

「スクリーン用に書き出し」を使うと一括で複数アートボードを書き出せます。

「WEB用に書き出し」を使うとより高精度なWEB用書き出しができます。

 

※スクリーン用書き出ししたWEB用画像(JPG、PNG)が劣化したりギザギザすることはありません。

どちらもイラレからWEB用画像(JPG、PNG、GIF)を高品質画像で書き出すことができます。

 

今回は、よりキレイに高品質なWEB用画像(JPG、PNG)を書き出すための基礎知識をまとめました。

特に重要な「書き出し」する時に選択するJPG100PNG24PNG8の違いをまとめました。

 

 

スクリーン用に書き出し

イラレの「スクリーン用に書き出し」で選べるJPGフォーマットです。

 

イラレ スクリーン用書き出し jpg100、jpg80、jpg50、jpg20とPNG、PNG 8の違い

イラレ スクリーン用書き出し jpg100、jpg80、jpg50、jpg20とPNG、PNG 8の違いは下記です。

 

JPG(JPEG)100、80、50、20

jpg100(画質10 (10点満点の10)、圧縮率が低い)(ファイルサイズは大きくなる)

jpg80(画質8 )(サイズは小さい)

jpg50(画質5 )(サイズは小さい)

jpg20(画質2 )(サイズは小さい)

画質はjpg100がMAXの10点満点。最高画質でファイルサイズは大きく圧縮率が下がる。画質がよく劣化しない。

jpg20は画質が10点満点の2点。最低画質で圧縮率が高い。ファイルサイズは小さい。画質はギザギザしたり劣化する。

推奨:JPG100

 

PNG

PNG 最高画質でファイルサイズは大きい

PNG 8 透過表現に向かない。画質は劣化する。ファイルサイズは小さい。

推奨:PNG

 

 

WEB用に保存のPNG-24とPNG8 128ディザの違い

結論から言うと、PNG-24一択です。データ容量が軽くなっても画像が劣化しギザギザしてしまうことのあるPNG-8を高速通信の5G時代に選ぶ理由はありません。

 

WEB用書き出しのPNG24、PNG8、JPEG高、JPEG低、JPEG標準の違い

PNGを書き出す場合は「PNG-24」を選んで書き出しましょう。

推奨:PNG-24

推奨:JPEG高の「最高画質」

推奨:GIF128ディザ、またはディザなし【線画だけのイラストの場合】

 

 

画像サイズはWEBサイトがプラグインやプログラムで自動圧縮します

ちなみに、WEBサイト側で「画像を自動圧縮する技術」があるので、多少画像サイズが大きくなっても軽量かつ高速表示されます。

WordPressにも画像を勝手に圧縮したりサイズを最適化してくれるプラグインがあります。

例えば、イメージオプティマイザーというプログラムが発展しましたので、自動でWEB画像をWordPressなどで表示する時「画像」を劣化させずにサイズだけプログラムが勝手に圧縮します。

上記はWordPressの無料プラグインです。アクティベートするだけで導入できます。

 

これらの技術やインフラの発展により、イラレやPhotoshopから書き出す「WEB画像(JPG、PNG、GIF等)」は高画質であるほど良いです。

そのため、これからの時代はWEB画像の容量は気にせず「画質」を徹底重視してください。

 

画像サイズだけはしっかり設定しましょう

画像サイズは利用目的の最大サイズでOKです。無駄に画像サイズが大きいことに意味はありません。

特に大きくても困らないのですが、(小さいと劣化の原因になり困ります)モニターで見られる画像の解像度は「72」です。

例えば、画像の使用される最大の横幅サイズが1200pxなら、それ以上のサイズの大きさの画像を書き出す必要はありません。

 

 

最高画質で納品する

デザインだけやってる人は、プログラムの進化に気づいてない場合があり情報が古いケースが多く、未だに外注さんが劣化画像を納品してくることがあるので困ってます。

納品してもらった画像が、劣化PNGや劣化GIFだったりすると再納品をお願いすることになっちゃうのですが、これは双方かなりの無駄です。

そのため、イラレからWEB画像を書き出す時は最初から「最高画質」で納品しましょう。

 

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

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

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

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

↓ 【93%OFF】割引クーポン有効期限 2021年7月30日まで

>>初めてのイラストレーター(Adobe Illustrator)使い方講座【完全版】はこちら!

 


ロゴデザインマスターコース|Adobe Illustrator(イラストレーター)【完全版】

はじめてAdobe Illustrator(イラレ)でロゴデザインをスタートする人が、ロゴの基礎から学習し「Photoshop CC」のモックアップを活用した画像書き出しまで含めてできるようになるロゴデザインマスターコースです。

正確で完璧なロゴデザインを完成させる手法のすべてを公開します。

↓ 【93%OFF】割引クーポン有効期限 2021年7月30日まで

>>ロゴデザインマスターコース|Adobe Illustrator(イラストレーター)【完全版】はこちら!

 

 


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


Illustrator ハッチング

【プロ用】Illustrator素材集【効率化】

 

-初心者用Illustratoの使い方講座
-, , , ,

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