クライアントから、背景が透明なJPEGとしてウェブ用の画像を提供してほしいとのことです。これは可能ですか？
コメント
回答
JPGでは背景を透明にすることはできません。
唯一のことあなたができることはあなたのウェブサイトに溶け込むであろうフラットカラーの背景を持つことです：例えば。ウェブサイトの背景が白の場合は、白の背景でJPGを作成します。
それ以外の場合は、真の透明性を実現するPNGとして保存することを検討する必要があります。
コメント
- 均一ではない可能性があるため、ブレンドの背景色を設定することをお勧めしますか？
- @Amessihelいいえ、ただし’ JPG形式が実際に必要であり、透明度をシミュレートする必要がある場合の唯一のオプションです。
回答
JPEGは透明度をまったくサポートしていません。
最も互換性のあるオプションはPNGを使用することですが、損失のない圧縮であるため、写真のファイルが大きくなります。
別のオプションロスレス（PNGなど）とロスレス圧縮（JPEGなど）の両方をサポートし、両方で透過性を実現する新しいWebPファイル形式を使用することです。 WebPのサポートは最近は比較的良いですが、まだ普遍的ではありません（特にSafariもIEもサポートしていません）
コメント
- WebPに関して、私はもっと注目すべきことだと思います。Safariは現在それをまったくサポートしていません（モバイルでもデスクトップでも） ）。これにより、明らかにすべてのiPhoneを含め、ブラウザの市場シェア全体の約25％が排除されます。
- WebPブラウザのサポート。
- 高解像度の写真に透明性が必要なのはなぜですか？
- @Crowley、”について”ページを検討してください会社の’スタッフの写真付き。
- @Markまだ透明性を使用する理由が見つかりません。撮影の背景を適切に選択する方がはるかに簡単です。
回答
JPEG形式では処理できませんが透明度自体は、最新のブラウザでJPEGを使用して透明度を設定することは完全に可能ですが、複雑です。SVGを使用して、透明度を処理するクリッピングマスクを作成する必要があります。Photoshopでは、ペンツールを使用してこれを行うことができます。次に、Illustratorにエクスポートします。ここでペンツールパスをSVGに変換できます。
実行方法の詳細ガイドを次に示します。
秘訣は2つのものを作ることです：
- JPG
- クリッピング
JPGは簡単です。Photoshopから直接出力してください。最適化してください。
これで、SVGをセットアップできます。SVGは喜んで受け入れますeラスターグラフィック。 SVGはベクターグラフィックスで知られていますが、「非常に柔軟な画像形式です。
<svg> <image xlink:href="/images/chris.jpg" x="0" y="0"> </svg>
パスを取得するには、ペンツールで作成したパスをにエクスポートします。イラストレーター。これでパスができました。SVGとして簡単にエクスポートできます[。]
これで必要なパスデータができました[。]これを、開始したSVG内ので使用しましょう。次に、そのクリップパスを：
<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d="[path data from Illustrator]" /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> </svg>
または、 PNGをJPEGが埋め込まれたSVGに変換するツールもあります。 WebPに対する利点は、iOSを含むInternet Explorer（バージョン9以降）およびSafari（バージョン3以降）で機能することです。
とはいえ、通常の標準は、実際にはJPEG背景に色を付けることです。 Webサイトのそれと一致させるか、最適化された8ビットPNGを使用します（PNGQuantなどのツールを使用して通常の32ビットPNGを変換します）。
コメント
- 公平を期すために、クリッピングマスクを使用したSVGは jpgではありません。また、クリッピングマスクは、望ましい場合と望ましくない場合がある複雑さのレベルです。
- @Scott同意します。 ‘ tではありません。しかし、私は’質問をそれを必要としているとは読みません。 ‘透明度を含む” JPEGファイル”とは言わず、”透明度のあるJPEGとしてのウェブの画像、”これはよりあいまいです。さらに、それがOPまたはそのクライアントの意図ではない場合でも、私の回答の情報は、将来この質問を検索して見つける将来の読者に関連する可能性があると思います。 ‘ WebPに関する情報を含めたり、PNGの使用を提案したりするのと同じくらい有効です。
- 部分的な透明度が必要な場合は、マスクを使用する必要があります（クリッピングの代わりに別のグレースケールPNG）にします。
- これは、ボートに乗せれば、海の上で車を運転できると言っているようなものです。さあ。
- SVGにエクスポートするためにIllustratorへのパスをエクスポートするためだけにPhotoshopでペンステップを実行することは、プログラムのひどい誤用のように思えます。Illustratorでペンステップを実行するだけです。そうは言っても、これは問題を過度に複雑にし、現代の慣行には制限が多すぎるようです（たとえば、このオプションでは部分的な透明性を持たせることはできません’）。画像形式に’の柔軟性がある場合は、PNGを使用してください。ソース画像がJPGである必要がある場合は、Joeyが提案するようなグレースケール画像マスクを使用してマスキングを行う必要があります。特定のニーズを除けば、これらが2つの合理的なオプションのみである必要があります。
回答
JPEG 2000 （JP2とも呼ばれます）は、元のJPEG形式（1992年以降）の改良版であり、透過性も完全にサポートしていますが、異常なブラウザのサポート（Safariのみがサポートします）
Lucianに同意します。PNGを使用するだけで、非常によくサポートされており、多くのツール（pngcrush、optipng）があります。 、pngout …）ファイルを圧縮します。比較については、こちらを参照してください。
tylisirnが言ったことに関して、ファイルサイズに関する懸念は理解していますが、これを考慮してください。最近では、Webページが肥大化するのが一般的です。ただし、その一方で、ページの読み込み時間が速いとユーザーに良い印象を残し、はSEOにプラスの効果をもたらします。
コメント
- 関連：プログレッシブ画像レンダリング
- @ beppe9000リンクをありがとう！！それを読んでいると、Facebookが実際の画像をダウンロードするときにプレースホルダーとしてぼやけたサムネイルをどのように使用しているかを思い出しました。 ‘は実際にはプログレッシブな読み込みではなく、空白スペースではなく気を散らすものですが、マイクロサムネイルにはごくわずかなスペース（〜200バイト）を使用するという利点があります。この手法は間違いなくPNGに適用でき、カスタムメタデータをサポートしている場合はJPEGにも適用できますが、’ブラウザが実装に関心があるとは思いません… Engineering.fb.com/android/the-technology-behind-preview-photos
- fbでの優れたエンジニアリング…まあ、そうではないと思います’さまざまなエンティティによって提供されるコンテンツに合わせて、非常に適切に拡張できます。おそらくWebPはより魅力的な代替手段です。これも良い読み物です： Developers.google.com/web/fundamentals/performance/ …
回答
PHPとImagickを使用すると、背景を動的に削除できます。 （たとえば、フシアの色を削除します）。 〜実行時にJPGからPNG / GIFを作成します（サーバーの過熱を防ぐために透明な画像をフォルダーにキャッシュできます）
コメント
- クールなオプションですが、OPは単に画像ファイルを提供しているだけなので、おそらく関係ありません。クライアントは、ウェブサイト’のバックエンドを設計およびホストしていません。そのため、画像自体が透明度をサポートする必要があります。
回答
JPEGの圧縮性が低いため、圧縮、クロマキーイング用にフラットカラーの背景を持つJPEGを作成することは、色が周囲の領域ににじむため、お勧めしません。
画像の使用方法によっては、グレースケールのマット画像に加えてグレースケールのマット画像を提供します。 JEPG形式では、画像データのグレースケールコンポーネントがカラーデータよりもはるかに高い解像度で保存されるため、標準のJPEGで十分な場合があります。これらは、canvasAPIなどを使用して組み合わせる必要があります。
他の人が述べているように、より良い解決策は、アルファチャネルを素朴にサポートし、ブラウザと互換性のあるPNGのような形式を使用することです。
回答
CSS3 mask-imageプロパティの出現により、JPEGに外部アルファマスク画像を提供して、アルファチャネルを付与することができました。
コメント
- 私はこれに気づいていませんでした’知ってよかったです！しかし、’は質問に答えていないようです。 ‘ OPがWeb開発に直接関与しているようには見えませんが、クライアントからの誤った情報に基づくリクエストで壁にぶつかっています。
- もちろんです。ただし、同様の解決策を探している他の人にとっては、これが役立つ場合があります。
回答
エッジケースは別として。他の回答で示されているように、すべての実用的な目的のJPEGは透明度をサポートしていません。
透明度をサポートする最も一般的な形式は、PNG、GIF、およびSVGです。
これらのいずれでもない場合ファイル形式はクライアントに適しており、なんらかの奇妙な理由でJPEGが必要な場合は、ユースケースごとにJPEGを提供するだけです。
ポスターを作成している場合は、ポスターを教えてもらいます。色を付け、一致する背景を持つJPEGを提供します。単に紙に印刷している場合は、白い背景で十分です。ウェブサイトで使用する場合は、ウェブサイトで使用する場所ごとに適した背景を提供する必要があります。
ヒント：ユースケースごとに課金してください
コメント
- SVGをそのリストに含めることは、他の2つとは非常に異なる形式であるため、多少誤解を招く可能性があります。’ / li>
- @ Abion47 IE9でもサポートされています。塩分の価値のある印刷会社は、SVGを必要なだけ大きく爆破できるので、SVGを要求するでしょう。
- あなたは私の主張を誤解しています。ラスターイメージとして誕生したイメージは、PNGまたはGIFとして保存できるようにSVGとして保存することはできません。 OP ‘の画像が元々ベクター形式であった場合は、可能な限りベクター形式として保持する必要があります。ただし、’が画像構成（Photoshopなど）の場合、OPがプロジェクト全体を効果的にやり直して保存する必要がない限り、SVG船は長い間航海してきました。 SVG。
回答
透明度のあるPNG画像を作成し、それを色を含むSVGに変換できます。 JPEGとしての情報と、グレースケールマスクとしてのアルファチャネル。これは私がそれを行うために書いたツールです https://github.com/igrmk/transpeg
回答
はい、これは可能です。
[パス]パネルでクリッピングパスを作成するだけです。ファイルをJPEGとして保存する場合、PhotoshopはクリッピングパスをJPEGメタデータセクションに保存します。
クリッピングパスは、クライアントがPhotoshopでファイルを開いたときにのみ有効であり、他のほとんどのプログラムでは有効ではないことに注意してください。特にWebブラウザにはありません。
コメント
- “クライアントから提供を求められていますウェブ用の画像はJPEG ”
- @Scott OTOHで、この回答とJPEG2000の回答は実際には次のように質問に回答します。書かれています。 i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
- @JollyJokerいいえしないでください’ t、OPがウェブ上での使用に関して画像を具体的に要求したため、Photoshop固有のメタデータベースのマスクも、実質的に存在しないブラウザを使用したJPEG拡張画像形式もありませんサポートは、OP ‘の実際のニーズに質問に書かれているように実際に対処します。
.png画像で、.jpegを指定しなかった理由を尋ねられた場合は、はであり、透過性をサポートします。 WGroleauが言及しているように、彼らは’何も気付かないと思います。
image.jpeg.pngに変更するのは十分です。