JPEG mit transparentem Hintergrund

JPG erlaubt keine transparenten Hintergründe.

Das einzige Sie können einen flachen Hintergrund verwenden, der sich in Ihre Website einfügt: z. Wenn der Hintergrund Ihrer Website weiß ist, lassen Sie JPGs mit weißem Hintergrund erstellen.

Andernfalls müssen Sie das Speichern als PNG in Betracht ziehen, um echte Transparenz zu ermöglichen.

Kommentare

• Ist dies eine gute Idee, eine Mischhintergrundfarbe festzulegen, da diese möglicherweise nicht homogen ist?
• @Amessihel Nein, aber ‚ ist die einzige Option, wenn tatsächlich ein JPG-Format erforderlich ist und Transparenz simuliert werden muss.

JPEG unterstützt überhaupt keine Transparenz.

Die am besten kompatible Option ist die Verwendung von PNG, führt jedoch zu großen Dateien für Fotos, da es sich um eine verlustfreie Komprimierung handelt.

Eine weitere Option ist die Verwendung des neuen WebP-Dateiformats, das sowohl verlustfreie (wie PNG) als auch verlustbehaftete Komprimierung (wie JPEG) unterstützt und Transparenz mit beiden ermöglicht. Unterstützung für WebP ist Heutzutage relativ gut, aber noch nicht universell (insbesondere werden weder Safari noch IE unterstützt es, aber Edge tut es).

Kommentare

• In Bezug auf WebP denke ich insbesondere: Safari unterstützt es derzeit überhaupt nicht (mobil oder Desktop) ). Dadurch entfallen ~ 25% des gesamten Browser-Marktanteils, offensichtlich einschließlich aller iPhones.
• Unterstützung für WebP-Browser .
• Warum sollte man Transparenz in hochauflösenden Fotos benötigen?
• @ Crowley, betrachten Sie eine “ über “ Seite mit Fotos der Mitarbeiter des Unternehmens ‚.
• @Mark Ich kann dort immer noch keinen Grund finden, Transparenz zu verwenden. Die richtige Wahl des Aufnahmehintergrunds ist viel einfacher.

Während das JPEG-Format nicht funktioniert Transparenz selbst. Mit modernen Browsern ist es durchaus möglich, Transparenz mithilfe von JPEGs zu erzielen. Dies ist jedoch kompliziert. Sie müssen SVG verwenden, um eine Schnittmaske zu erstellen, die die Transparenz verarbeitet. Mit Photoshop können Sie dies mit dem Stiftwerkzeug und tun Exportieren Sie dann nach Illustrator, wo Sie den Stiftwerkzeugpfad in eine SVG-Datei konvertieren können.

Hier finden Sie eine ausführlichere Anleitung also.

Der Trick besteht darin, zwei Dinge zu machen:

• Das JPG
• Das Abschneiden

Das JPG ist einfach genug. Geben Sie es direkt aus Photoshop aus. Optimieren Sie es.

Jetzt können wir die SVG einrichten. SVG nimmt gerne e eine Rastergrafik. SVG ist für Vektorgrafiken bekannt, aber „ein sehr flexibles Bildformat“.

<svg> <image xlink:href="/images/chris.jpg" x="0" y="0"> </svg> 

Um den Pfad abzurufen, exportieren wir den Pfad, den wir mit dem Stiftwerkzeug erstellt haben, nach Illustrator. Jetzt haben wir den Pfad dort drüben und es ist einfach, ihn als SVG [.]

zu exportieren

Jetzt haben wir die Pfaddaten, die wir benötigen [.] Verwenden wir diese innerhalb von a in der SVG, die wir gestartet haben. Wenden Sie diesen Clip-Pfad dann auch auf Folgendes an:

<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> 

Alternativ ist hier ein Tool, das nur ein PNG in ein SVG mit eingebetteten JPEGs konvertiert . Der Vorteil gegenüber WebP besteht darin, dass es in Internet Explorer (seit Version 9) und Safari (seit Version 3), einschließlich iOS, funktioniert.

Der übliche Standard besteht jedoch darin, nur den JPEG-Hintergrund einzufärben um dem der Website zu entsprechen oder um optimiertes 8-Bit-PNG zu verwenden (mit einem Tool wie PNGQuant, um reguläre 32-Bit-PNGs zu konvertieren).

Kommentare

• Um ehrlich zu sein, ist SVG mit einer Schnittmaske nicht jpg. Und eine Schnittmaske ist ein Grad an Komplexität, der erwünscht sein kann oder nicht.
• @Scott Ich stimme zu; es ist nicht ‚ t. Aber ich ‚ lese die Frage nicht als erforderlich. ‚ sagt keine “ JPEG-Datei mit Transparenz „, sondern nur “ Bilder für das Web als JPEG mit Transparenz, „, was mehrdeutig ist. Auch wenn dies nicht das ist, was das OP oder sein Kunde gemeint haben, glaube ich, dass die Informationen in meiner Antwort für zukünftige Leser relevant sein können, die diese Frage in Zukunft suchen und finden. Es ‚ ist genauso gültig wie das Einfügen von Informationen über WebP oder das Vorschlagen der Verwendung von PNG.
• Wenn Sie teilweise Transparenz benötigen, sollten Sie eine Maske verwenden (die dies könnte Seien Sie ein separates Graustufen-PNG), anstatt zu beschneiden.
• Dies ist so, als würden Sie Ihr Auto über den Ozean fahren … wenn Sie es auf ein Boot setzen. Komm schon.
• Wenn Sie den Stiftschritt in Photoshop ausführen, um den Pfad nach Illustrator für den Export nach SVG zu exportieren, scheint dies ein grober Missbrauch der Programme zu sein. Führen Sie einfach den Stiftschritt in Illustrator aus. Abgesehen davon scheint dies das Problem zu komplizieren und ist für moderne Praktiken zu einschränkend (z. B. können Sie mit dieser Option ‚ keine teilweise Transparenz haben). Wenn das Bildformat ‚ flexibel ist, verwenden Sie einfach PNG. Wenn das Quellbild ein JPG sein muss, sollte die Maskierung mit einer Graustufenbildmaske erfolgen, wie sie Joey vorschlägt. Vorbehaltlich spezifischer Anforderungen sollten dies die einzigen zwei sinnvollen Optionen sein.

JPEG 2000 (auch als JP2 bekannt) ist eine verbesserte Version des ursprünglichen JPEG-Formats (ab 1992), die ebenfalls volle Unterstützung für Transparenz bietet, jedoch abgründige Browserunterstützung (nur Safari unterstützt sie).

Ich stimme Lucian zu, verwende nur PNG, es wird sehr gut unterstützt und es gibt viele Tools (pngcrush, optipng) , pngout …) um Dateien zu komprimieren. Siehe hier für einen Vergleich.

In Bezug auf das, was tylisirn gesagt hat, verstehe ich die Bedenken hinsichtlich der Dateigröße, aber bedenken Sie Folgendes: Es ist Die Norm, dass Webseiten heutzutage aufgebläht sind. Andererseits hinterlässt eine schnelle Ladezeit der Seite einen guten Eindruck bei den Benutzern, und wirkt sich positiv auf die Suchmaschinenoptimierung aus .

Kommentare

• bezogen: progressives Bild-Rendering
• @ beppe9000 Vielen Dank für den Link ! Beim Lesen wurde ich daran erinnert, wie Facebook beim Herunterladen des eigentlichen Bildes verschwommene Miniaturansichten als Platzhalter verwendet. ‚ ist kein wirklich progressives Laden, eher eine Ablenkung als ein Leerzeichen, aber die Mikro-Miniaturansichten haben den Vorteil, dass sie eine vernachlässigbare Menge an Speicherplatz (~ 200 Byte) beanspruchen. Diese Technik könnte definitiv auf PNG angewendet werden, vielleicht sogar auf JPEG, wenn es Unterstützung für benutzerdefinierte Metadaten bietet, aber ich glaube nicht, dass Browser daran interessiert wären, sie zu implementieren … iv id. ‚ = „d958e390fc“>

Mit PHP und Imagick können Sie den Hintergrund dynamisch entfernen. (Entfernen Sie zum Beispiel eine Fushia-Farbe). ~ Sie erstellen zur Laufzeit ein PNG / GIF aus JPG (Sie können transparente Bilder in einem Ordner zwischenspeichern, um eine Überhitzung des Servers zu vermeiden)

https://stackoverflow.com/questions/43544467/imagemagick-white-to-transparent-background-while-maintaining-white-object

Kommentare

• Eine coole Option, aber wahrscheinlich nicht relevant, da OP lediglich die Bilddatei bereitstellt Ein Kunde, der das Backend seiner Website ‚ nicht für ihn entwirft und hostet. Daher muss das Bild selbst Transparenz unterstützen.

Aufgrund der verlustbehafteten Komprimierung von JPEG Bei der Komprimierung wird nicht empfohlen, ein JPEG mit einem flachen Farbhintergrund für die Chroma-Keying-Funktion zu erstellen, da die Farbe in die Umgebung übergeht.

Je nachdem, wie die Bilder verwendet werden, wird zusätzlich ein mattes Graustufenbild bereitgestellt Ein Standard-JPEG kann ausreichen, da im JEPG-Format die Graustufenkomponente der Bilddaten mit einer viel höheren Auflösung als die Farbdaten gespeichert wird. Diese müssten mithilfe der Canvas-API oder ähnlichem kombiniert werden.

Wie andere bereits erwähnt haben, wäre eine bessere Lösung, nur ein Format wie PNG zu verwenden, das einen Alphakanal naiv unterstützt und browserkompatibel ist.

Mit dem Aufkommen der CSS3 mask-image -Eigenschaft könnte man ein externes Alpha-Maskenbild für die JPEGs bereitstellen und ihnen so den Alpha-Kanal gewähren es fehlt ihnen.

Kommentare

• Ich war mir ‚ nicht bewusst, schön zu wissen! Aber ‚ scheint die Frage nicht zu beantworten. ‚ Es scheint nicht, dass das OP direkt an der Webentwicklung beteiligt ist, sondern mit einer falsch informierten Anfrage eines Kunden an die Wand gestoßen ist.
• Natürlich. Für andere, die nach ähnlichen Lösungen suchen, könnte sich dies jedoch als nützlich erweisen.

Abgesehen von den Randfällen In den anderen Antworten wird ein JPEG für alle praktischen Zwecke nicht für Transparenz unterstützt.

Die gängigsten Formate, die Transparenz unterstützen, sind PNG, GIF und SVG.

Wenn keines davon Dateiformate sind für den Client geeignet und ein JPEG ist aus irgendeinem ungewöhnlichen Grund erforderlich. Sie müssen lediglich ein JPEG für jeden Anwendungsfall bereitstellen.

Wenn sie ein Poster erstellen, lassen Sie sich das Poster mitteilen Farbe und bieten ein JPEG mit einem passenden Hintergrund. Wenn sie einfach auf Papier drucken, sollte ein weißer Hintergrund in Ordnung sein. Wenn es auf der Website verwendet wird, müssen Sie einen Hintergrund angeben, der für jeden auf der Website verwendeten Ort geeignet ist.

Hinweis: Stellen Sie sicher, dass für jeden Anwendungsfall eine Gebühr erhoben wird.

Kommentare

• Die Aufnahme von SVG in diese Liste ist etwas irreführend, da ‚ ein ganz anderes Format als die beiden anderen ist.
• @ Abion47 Auch IE9 unterstützt dies . Ich würde sagen, dass jede Druckerei, die ihr Salz wert ist, eine SVG anfordern wird, da sie diese so groß sprengen kann, wie sie es brauchen.
• Sie verstehen meinen Standpunkt falsch. Ein Bild, das als Rasterbild gestartet wurde, kann nicht so als SVG gespeichert werden, wie es als PNG oder GIF gespeichert werden kann. Wenn das Bild von OP ‚ ursprünglich in einem Vektorformat war, sollte es unbedingt so lange wie möglich als Vektorformat beibehalten werden. Wenn es sich jedoch um ‚ um eine Bildkomposition handelt (z. B. in Photoshop), ist das SVG-Schiff längst gesegelt, es sei denn, OP möchte das gesamte Projekt effektiv wiederholen, um es als zu speichern ein SVG.

Sie können ein PNG-Bild mit Transparenz erstellen und es dann in ein SVG konvertieren, das eine Farbe enthält Informationen als JPEG und ein Alphakanal als Graustufenmaske. Hier ist ein Tool, das ich dazu geschrieben habe: https://github.com/igrmk/transpeg

Ja, dies ist möglich.

Erstellen Sie einfach einen Beschneidungspfad im Pfadbedienfeld. Wenn Sie die Datei als JPEG speichern, speichert Photoshop den Beschneidungspfad im JPEG-Metadatenabschnitt.

Beachten Sie, dass der Beschneidungspfad nur wirksam wird, wenn Ihr Client die Datei in Photoshop öffnet, nicht in den meisten anderen Programmen. speziell nicht in Webbrowsern.

Kommentare

• “ Mein Kunde möchte, dass ich etwas gebe Bilder für das Web als JPEG “
• @Scott OTOH, diese Antwort und das JPEG2000 beantworten die Frage tatsächlich als geschrieben. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nein, sie ‚ t, da OP speziell nach Bildern bezüglich ihrer Verwendung im Web gefragt hat, also weder Photoshop-spezifische metadatenbasierte Masken noch JPEG-erweiterte Bildformate mit praktisch nicht vorhandenem Browser Die Unterstützung richtet sich wirklich an die tatsächlichen Bedürfnisse von OP ‚ , wie in der Frage angegeben.