終了

挿入画像の画質がわずかに下がる現象(Web)

Community Beginner ,
Jan 31, 2022 Jan 31, 2022

リンクをクリップボードにコピー

コピー完了

●Web用画像(RGB、Web用ドキュメント作成)を、

イラレCC2022 26.0.3Verで作成する前提です。

アートボード:幅:1080 px、長さ:14603 px

 

以下の手順で挿入した画像ですが、

300ppiでラスタライズしても、ほんの少しオリジナルより劣化します。

問題点や対処法などご教授いただけないでしょうか。

よろしくお願いいたします。

==

・1080 px × 521 pxの元画像(72ppi、jpg)を、アートボードに挿入

 

・サイズを縮小(946.9105 px × 456.7966 px)し、

 マスクで切り取り(904 px ×425.6561 px)

 

・(ギザギザを防ぐため)ラスタライズかける

 ※RGB,300ppi、透明、アートに最適、特色保持は✓なし

  ↑本来であれば72ppiで良いかと

 

・スクリーン用に書き出しで、JPG100を選択

 ↓

この方法で、

書き出した画像内の「挿入画像」

オリジナルより、劣化する可能性はありますでしょうか。

 

画質・Webに関して知識不足な点もあり困っています、

ヒントでも構いませんのでよろしくお願いいたします。

 

P.S 記述していて思ったのですが、

   Webなのに小数点があるのがいけないでしょうか・・・

  ちょっと気になったのが

  ラスタライズかけた際に、サイズが変化したことです。

 (かける前:904 px ×425.6561 px →かけた後:904.08 px × 426 pxに変わった)

キーワード
読み込みと書き出し

表示

601

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines

correct answers 1 件の正解

Community Expert , Feb 01, 2022 Feb 01, 2022

最初の「挿入」した画像の保存形式と、配置方法リンクか埋め込みかで後の処理結果がすこし変わる場合があります。

が、Illustrator上でいじくり回すなら埋め込みでいいです。

 

このあと縮小してからラスタライズしていますが、これはオリジナルより劣化するというか…

ピクセル数を減らしたわけなので、画像の輪郭がなじんで、ぼやけていきます。

ピクセルは画像を構成する最小単位なので、そのものが小さくなるわけではなく近接色同士が混ざりながら数が減っていくだけです。まあ劣化かといえば劣化でしょう。

 

いったん300ppiでラスタライズしていますが、72の整数倍でなければ、ここでまた半端な色の混ざり方をします。劣化の原因になるかといえば微妙なところですが、最終的に72ppiで書き出すところをふまえれば、無意味といえます。

 

あとJpeg形式で書き出す以上は、少なからず非可逆圧縮による画質の劣化は必ず起こります。

 

もしPhotoshopをお持ちなら、拡大・縮小はPhotoshop側でやったほうがはるかにきれいに仕上がりますよ。

Illustrator上は画像をいじるアプリケーションではないの

...

投票

翻訳

翻訳
Community Expert ,
Feb 01, 2022 Feb 01, 2022

リンクをクリップボードにコピー

コピー完了

最初の「挿入」した画像の保存形式と、配置方法リンクか埋め込みかで後の処理結果がすこし変わる場合があります。

が、Illustrator上でいじくり回すなら埋め込みでいいです。

 

このあと縮小してからラスタライズしていますが、これはオリジナルより劣化するというか…

ピクセル数を減らしたわけなので、画像の輪郭がなじんで、ぼやけていきます。

ピクセルは画像を構成する最小単位なので、そのものが小さくなるわけではなく近接色同士が混ざりながら数が減っていくだけです。まあ劣化かといえば劣化でしょう。

 

いったん300ppiでラスタライズしていますが、72の整数倍でなければ、ここでまた半端な色の混ざり方をします。劣化の原因になるかといえば微妙なところですが、最終的に72ppiで書き出すところをふまえれば、無意味といえます。

 

あとJpeg形式で書き出す以上は、少なからず非可逆圧縮による画質の劣化は必ず起こります。

 

もしPhotoshopをお持ちなら、拡大・縮小はPhotoshop側でやったほうがはるかにきれいに仕上がりますよ。

Illustrator上は画像をいじるアプリケーションではないので融通ききません。

 

縮小時の入力値と結果で数値が変わったのはピクセルグリッドの影響かと想像しますが、そもそもなんで小数で指定したんでしょうか? %やmmで指定したとか?

最終的に書き出したらピクセルは整数に均されるので、やるとなれば縦横比をちょっぴり破壊してでも整数でやるべきとこです。

 

-----誤字修正しました----

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Beginner ,
Feb 07, 2022 Feb 07, 2022

リンクをクリップボードにコピー

コピー完了

丁寧なご回答いただき、ありがとうございました。

また、返信遅くなりまして申し訳ございません。

 

拡大・縮小はPhotoshop側でやったほうがはるかにきれいに仕上がりますよ。

はい、Adobeに問い合わせたりしまして

おっしゃられる通りでした。

今後は(綺麗に出したい画像の)加工は

フォトショップ側でするようにいたします。

 

縮小時の入力値と結果で数値が変わったのはピクセルグリッドの影響かと想像

なるほど、すっきりしました、ありがとうございます。

 

>そもそもなんで小数で指定したんでしょうか? %やmmで指定したとか?

>最終的に書き出したらピクセルは整数に均されるので、やるとなれば縦横比をちょっぴり破壊してでも整>数でやるべきとこです。

つい、Webの設定になっていない状態で

ピクセルを気にせずに指定していました。

ご指摘の通りだと思います。

今後は、必ず整数で作るよう意識したいと思います。

 

大変勉強になりました。

 

貴重なお時間を使っていただき、本当にありがとうございました!

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
ファン ,
Feb 08, 2022 Feb 08, 2022

リンクをクリップボードにコピー

コピー完了

最新

個人的な経験で恐縮ですが、

画像の解像度を確定したい場合(特にウェブ用)、ピクセルグリッドに合わせることも重要ですが、

メニューのオブジェクト→ラスタライズより

アピアランスの方でラスタライズした方が変化が少ないように思えます。

 

ラスタライズのタイミングによるものだと考えていますが、理由はわかりません。

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines