品質を損なうことなくファイルサイズを縮小する

11

Photoshopでファイルを保存したいのですが、できるだけ小さくしてください。

Web（およびデバイス）用に保存して、JPEGとして保存します。使用した設定は次のとおりです。

設定

テキストを使用しているので、品質設定を下げたくありません。設定が低すぎると、アーティファクトが表示されることがあります。

これにより、画像のサイズに応じて数百キロバイトのファイルサイズが生成されます。これは大きな問題ではありませんが、これらの画像はウェブで使用されており、小さいほど良いです。品質を落とさずにファイルサイズを小さくする手法は何ですか？

更新：

ここにいくつかの情報を追加するには：

私が使用して作成した画像の多くはメールで送信されます。これにより、画像の上にHTMLとCSSを使用してテキストを配置することでできることがいくつか制限されます。

また、さまざまなフォントを使用しています。CSSを使用してWebに使用@font-faceできるものもありますが、ファイルサイズが大きくなり、フォントを合法的にWebにアップロードできない場合があります。Typekitのようなサービスを使用することもできましたが、使用するフォントの多くはTypekitでは使用できません。

以下は画像の例です。

画像の例

adobe-photoshop  images  image-quality  save 
— L84
ソース
1
これにはいくつかの答えがあります-あなたが話している種類の画像の例が役立つでしょう。
— e100 2012
1
@ e100-質問を更新してサンプル画像を提供し、さらに情報を追加します。
— L84
— Kornel
ウェブサイト側を管理している場合は、コード/ビルドオプションを確認してください。私はプロのWebチームのデザイナーであり、大ヒットなしにデスクトップ/携帯電話にフルスクリーンビデオを配信します。厳密に要求されない限り、画像はベクターSVGであり、フォントとして読み込まれます。ページのKB数を大幅に削減します。2000ピクセル幅のヒーローバナーはJPGが85％で、背景にプリロードされています。エンドユーザーのデバイスが検出され、ファイルの相対バージョン（つまり、モバイル用の小さいバージョン）で配信されます。ユーザーがホームページを通過するまでに、画面の読み込みは瞬時に行われます。また、ホームページは最大2秒を目指しています。
— Applefanboy

回答:

15

最適な圧縮方法の選択は、画像コンテンツによって異なります。多くの色とそれらの間のスムーズな移行で画像を保存しようとしている場合は、むしろJPEGを選択します。それ以外の場合は、ラインアート、テキスト、2色の画像がある場合は、PNGを試してください。

特定の圧縮スキーム、パラメータ、減色などは、特定のケースに依存します。アーティファクトを明らかにせずにJPEG圧縮の「スライダー」を30または40に設定して安全に保存できる画像がいくつかあります。他のいくつかは80以上の設定が必要です。あなたの目は裁判官でなければなりません。

JPEG圧縮について話すときは、「プログレッシブ」オプションを使用したり、「ぼかし」をゼロ以外の値に設定したりすることをためらわないでください（微妙なぼかしは深刻な圧縮アーティファクトを隠す可能性があります）。

PNGの場合、使用する色の量をできるだけ減らすようにしてください（PNG-8を使用してください）。「スムージング」が必要な場合は、別のディザリングアルゴリズムを試してください。

次に例をいくつか示します。

JPEG、プログレッシブ、品質：40、ぼかし：0.18 JPEG、最適化、品質：60、ぼかし：0 JPEG、プログレッシブ、品質：60、ぼかし：0 PNG-8、ディザリング：拡散、256色

左から右、上から下、それらのパラメーターは次のとおりです。

  1. JPEG、プログレッシブ、品質：40、ぼかし：0.18、サイズ：9 672バイト
  2. JPEG、最適化、品質：60、ぼかし：0、サイズ：16 898バイト
  3. JPEG、プログレッシブ、品質：60、ぼかし：0、サイズ：11104バイト
  4. PNG-8、ディザリング：拡散、色：256、サイズ：4 528バイト

それらを視覚的に比較してから、それぞれのデータサイズをよく見てください。最初のペアは、約9.7 kB対16.9 kBです。2番目は11.1 kB対4.5 kBです。（IMHO）無視できるほどの視覚的な違いによるすべて。

— テボジオ
ソース
プログレッシブオプションに関する私の最大の懸念は、電子メールクライアントのサポートです。これを説明するために質問に情報を追加しました。
— L84、2012
1
私が知る限り、「プログレッシブ」はJPEG標準の一部であり、エキゾチックなものではないため、サポートはほぼ100％になるはずです。しかし、それは「私が知っている」ではなく「私が思う」です:)。
— thebodzio
私は同意し、あなたが正しいと思います。私はWebmaster SEでこの質問をしました。最悪の場合、画像は表示されますが、完全に読み込まれるまで表示されません。
— L84
1
これがまさに「プログレッシブ」が機能することを意図したものです。より多くのデータが利用可能になるにつれて、イメージのより詳細なバージョンを連続して表示する必要があります。
— thebodzio
申し訳ありませんが、私が意味したことは、画像が読み込まれるか、スキャンごとに読み込まれるまで、何も表示されないことでした。
— L84 2012
10

ここにいくつかのオプションがあります：

  • JPEG（PNGまたはGIF）以外の別の形式を使用します。ファイルサイズと画質の両方に関する結果は、画像の内容によって異なります。それぞれが特定の種類のコンテンツで優れています
  • ピクセル単位で画像を小さくする-これは非常に大きな影響を与えるため、全体的なレイアウトを制御できる場合は、必ず検討する必要があります
  • 可能な場合は画像以外の要素を使用します。たとえば、画像内のテキストをHTMLテキストに置き換えます。色のブロックをHTML要素に置き換えてみてください。

最後の2つの点を拡張すると、既存の画像のファイルサイズを減らすことに時間をかける前に、レイアウト全体の画像の範囲を最小限に抑えるようにすべきです。

— e100
ソース
2

これまで未回答だったいくつかの質問に答えてみます。

私が使用して作成した画像の多くはメールで送信されます。これにより、画像の上にHTMLとCSSを使用してテキストを配置することでできることがいくつか制限されます。

HTMLメールを送信できます（ニュースレターの作成方法）。HTMLおよびインラインCSS（互換性のため）。画像はサーバー上にある必要があり、完全なURLをstylings / img-tagsに配置する必要があります。以下は、さまざまな電子メールクライアントで機能するもののリストです。

また、さまざまなフォントを使用しています。CSSの@ font-faceを使用してWebで使用できるものもありますが、ファイルサイズが大きくなり、フォントを合法的にWebにアップロードできない場合があります。

これまでで最高のwebfont-sourceであるgoogle webfontsを試してください。すべて無料で使用できます。もう1つはFont Squirrelです。（@ font-faceも使用します）。

— ヤンニック・ルフ
ソース
リンクをありがとう。いくつかのCampaign Monitors Webサイトを閲覧しましたが、CSSページを見ていません。非常に役立つ情報があります。
— L84 2012
-1

これを行う方法はありません。JPEGは非可逆形式です。品質とファイルサイズの間には常にトレードオフがあります。

— 欲しい252
ソース
JPEG以外の推奨事項。PNGはどうですか？
— L84 2012
1
PNGはロスレスですが、非常に大きいです。この画像はどこで使用しますか？Webの場合は、テキストをコーディングする方が常に適切です。
— Jannik Ruf 2012
JPEGおよびGIFは、Webビューに適した選択肢です（PNGはほとんど使用されません）。しかし、それはあなたが何をしたいかに依存します：背景、画像スライドショー、サムネイルまたはアイコンなど...
— 252252
効果のないテキストのみ（つまり、黒い背景に白いテキストのみ）の場合、Gifは適切でサイズが非常に小さいです。
— Jannik Ruf 2012
4
これは本当に良い答えではありません。ファイルサイズを小さくする方法はいくつかあります。PNGがWebで使用されることはめったにないというのは誤りです。
— e100 2012
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.