Nehmen wir an, Sie haben ein fotografisches Bild, das eigentlich ein JPG oder WebP sein sollte, für die beste Dateigröße und Qualität. Aber was, wenn ich auch Transparenz brauche? Brauche ich dafür nicht PNG? Wird das nicht entweder zu riesigen Dateigrößen (PNG-24) oder seltsamer Qualität (PNG-8) führen? Schauen wir uns einen anderen Weg an, der das Beste aus beiden Welten vereint.
Das Ziel ist es, mich selbst aus dem Bild auszuschneiden und den Hintergrund zu entfernen. Meine Technik dafür ist normalerweise, Photoshop zu verwenden und einen Beschneidungspfad manuell mit dem Zeichenstiftwerkzeug zu erstellen.
Jetzt kann ich die Umkehrung dieses Beschneidungspfades auswählen, um den Hintergrund leicht zu entfernen.
Der Versuch, dies als 1200 Pixel breites Bild als PNG-24 aus Photoshop zu speichern, ergibt ein Bild von etwa 1 MB!
Wir könnten das um 75 % mit PNG-8 reduzieren, aber dann 1) erhalten wir diesen seltsamen Giffy-Look (weniger fotografisch) und 2) müssen wir eine Mattefarbe für die Ränder wählen, da wir hier keine schöne Alpha-Transparenz erhalten, sondern nur binäre Transparenz.
Gott, wenn wir einfach JPG verwenden könnten! Die Qualität und Dateigröße ist viel besser.
Aber keine Transparenz.
Aber Moment mal! Können wir das Ding nicht einfach ausschneiden? Wir haben jetzt clip-path. Nun ja... klar. Wir haben clip-path. Es kann aber keinen path() nehmen, und was wir für Vektorpunkte in Photoshop erstellt haben, sind Pfaddaten. Es könnte jedoch ein polygon() nehmen, wenn wir alle Linien gerade machen. Das ist wahrscheinlich nicht ideal (ich bin kurvig!). Oder wir könnten ein <clipPath>-Element in einem Inline-SVG erstellen und clip-path: url(#id_of_clipPath); verwenden, was einen <path> darin unterstützt.
Es gibt auch Maskierung, was eine weitere Möglichkeit ist.
Betrachten wir jedoch eine dritte Möglichkeit: Alles in <svg> packen. Das ergab für mich logischen Sinn, so dass alles zusammenbleibt und zusammen skaliert.
Der Trick ist, zwei Dinge zu machen
- Das JPG
- Der beschneidende
<path>
Das JPG ist einfach genug. Geben Sie es direkt aus Photoshop aus. Optimieren.
Jetzt können wir das SVG einrichten. SVG nimmt gerne eine Rastergrafik auf. SVG ist bekannt für Vektorgrafiken, aber es ist ein sehr flexibles Bildformat.
<svg>
<image xlink:href="/images/chris.jpg" x="0" y="0">
<svg>Um den Pfad zu erhalten, exportieren wir den mit dem Zeichenstiftwerkzeug erstellten Pfad nach Illustrator.
Jetzt haben wir den Pfad dort und es ist einfach, ihn als SVG zu exportieren
Jetzt haben wir die benötigten Pfaddaten
Verwenden wir diesen <path> innerhalb eines <clipPath> im SVG, das wir begonnen haben. Wenden Sie dann auch diesen Beschneidungspfad auf das <image> an
<svg viewBox="0 0 921.17 1409.71">
<defs>
<clipPath id="chris-clip">
<path d=" ... " />
</clipPath>
</defs>
<image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>Tada!
Ein transparentes JPG im Wesentlichen.
Peter Hrynkow hat ebenfalls darüber geschrieben. Er verwendete ebenfalls SVG, aber ein schwarz-weißes PNG-Bild und das
<mask>-Element, um die Transparenz auf ein JPG anzuwenden.Es gibt sogar ein paar Tools, um diesen Prozess zu automatisieren
http://quasimondo.com/ZorroSVG/
https://github.com/arenanet/png2svg
Wir verwenden
png2svgin unserem Build-Prozess für Dateien, bei denen es kleiner ausfällt, und es war großartig.Beschneiden ist offensichtlich besser, wenn Sie nur transparente/nicht-transparente haben, aber das ist für uns in der Praxis ein relativ ungewöhnlicher Anwendungsfall.
Ich habe letzten Monat etwas Ähnliches gepostet, aber mit einer Maske: http://codepen.io/estelle/pen/jyGOpG
Ändern Sie die Zeile mask # in diese Zeile, um vier Beispiele zu sehen
Wo #Mask4 #Mask3, #Mask2 oder #Mask1 sein kann.
Ihre sehen viel besser aus. Die Maskenbeispiele enthalten ein Ratten-SVG und ein transparentes PNG. Es gibt so viele Optionen!
Was war die endgültige Dateigröße?
Erstaunlich, danke.
Das ist cool.
Cool!!!
(Wie Sie gefragt haben ;-)
Ich habe vor 4 Jahren ein Plugin dafür erstellt (und um transparente Bilder zu erhalten):)
https://github.com/Sly777/Jquery-Alpha-Image
Manchmal sind es diese Dinge, an die ich denken mag, aber mich zurückhalte, weil es hackelig erscheint... oder weil, wenn jemand es sehen würde, er denken würde, ich wüsste nicht, was ich tue. Letztendlich ist nichts falsch daran, oder? Es ist "out-of-the-box"-Denken und hat einen messbaren Vorteil.
Danke für diesen Beitrag, jetzt kann ich sagen, wenn ich diese Methode verwende: "Sehen Sie... Chris kann es tun, warum kann ich das nicht?"
Wie ich in Firefox sehe, erhalte ich das Bild nicht.
Vielleicht wird xlink:href nicht unterstützt?
Ups! Firefox benötigt Breite und Höhe für das
<image>, was ich nicht wusste. Füge es jetzt hinzu.Das ist wirklich super kreativ!
Das ist großartig, danke fürs Teilen.
Großartig :D
Liebe diese Technik!
In einer perfekten Welt würde JPEG2000 in mehr als nur Safari funktionieren, und Photoshop würde es erleichtern, PNG8-Bilder mit unterschiedlichen Alpha-Transparenz-Stufen zu exportieren (was Tools wie ImageAlpha bestens können). In diesem Szenario könnte man einfach ein
<picture>-Element mit JPEG2000 als bevorzugt und PNG8 als Fallback verwenden.Aber die SVG-Masken-Technik bietet all diese Vorteile mit einer viel besseren Unterstützung (und weniger Abweichungen von einem Standard-Bild-Workflow).
Dafür komme ich zu CSS-Tricks!
Danke fürs Teilen =)
Für diesen Fall würde ich normalerweise ein transparentes PNG-24 erstellen und dann die Dateigröße mit einem Tool wie ImageAlpha oder PNGyu drastisch reduzieren.
http://nukesaq88.github.io/Pngyu/
Cooler Trick – ähnlich dem, was wir im Printdesign Jahre vor der Unterstützung von Alpha-Transparenz und Ebenen in Bildern durch die meisten Layout-Apps tun mussten.
Schade, dass wir die großen Browser nicht (vielleicht) bessere Bildformate mit Alpha-Transparenz wie WebP https://developers.google.com/speed/webp/ oder sogar Flif http://flif.info unterstützen lassen können.
Tolle Zusammenfassung.
ZorroSVG macht etwas Ähnliches – http://quasimondo.com/ZorroSVG/.
Eine kurze Anmerkung zu 8-Bit-PNG: Es unterstützt Alpha-Transparenz, nicht nur die matte Farbintextur durch den Dialog "Für Web speichern". Photoshop kann jetzt 8-Bit-PNGs mit Alpha über "Exportieren als" ausgeben (obwohl die Farben für 8-Bit-PNGs immer noch indiziert sind, sodass Sie in halbtransparenten Bereichen immer noch GIF-ähnliches Dithering und Banding erhalten). Überraschenderweise bietet Fireworks ziemlich robuste Ausgabeoptionen für 8-Bit-PNGs mit Alpha, die Photoshop fehlen, einschließlich granularer Farbkontrolle und Dither-Prozentsatz.
Tolle Lösung! Könnte nützlich sein, wenn TinyPNG nicht die gewünschte kleine Dateigröße für transparente PNGs liefert.
Haben Sie http://compresspng.com ausprobiert?
Dieser Kerl ist kahl, was es relativ einfach macht – aber ich denke, man könnte auch den sprichwörtlichen Afro-Haarschopf mit mehreren Masken in Kombination mit unterschiedlichen Transparenzstufen meistern.
Ich benutze das SuperPNG-Plugin für Photoshop.
Sie können dann 8-Bit-PNGs mit Alpha-Transparenz haben.
Der "giffy"-Look bleibt erhalten. Guter Trick!
(Dienste wie TinyPNG oder ImageOptim unterstützen auch 8-Bit-Alpha-Kanäle – tatsächlich unterstützt nur die Photoshop "Für Web speichern" 8-Bit-PNG keinen Alpha-Kanal.)
Oder Sie können PNG als 24-Bit exportieren und pngquant verwenden, um das Bild in ein 8-Bit-Dithered zu konvertieren, während der 8-Bit-Alpha-Kanal erhalten bleibt. Nicht ganz so klein wie JPEG, aber kompatibler (was heutzutage bei SVG kein Problem ist, gebe ich zu).
Ich schätze, der Hauptgrund für die Betrachtung dieser Strategie ist die Reduzierung der Bandbreite. Ich denke, die Vorbehalte sollten ebenfalls erwähnt werden. Die Unterstützung älterer Browser und die zusätzliche CPU-Last sollten bei der Betrachtung dieses Ansatzes berücksichtigt werden.
In Ihrer Einleitung scheinen Sie jedoch anzudeuten, dass WebP keine Transparenz unterstützt, obwohl es dies tut und sehr effektiv darin ist. Vielleicht ist es nur eine unglückliche Formulierung, aber ich dachte, es wäre erwähnenswert. WebP ist auch nicht die Antwort auf alles. Die Browserunterstützung ist viel schlechter als die Maskierung eines JPGs, aber für die Browser, die es unterstützen, könnte es bandbreitentechnisch effizienter sein.
Entweder so oder so, Argumente für und gegen diesen Ansatz im Artikel würden es den Lesern ermöglichen, durchdachte Entscheidungen zu treffen, anstatt ihn blind anzuwenden.
Unabhängig davon ist es eine schöne Anwendung von SVG-Masken, die das Problem von jemandem lösen könnte.
Unterstützung für ältere Browser: das ist meiner Meinung nach der BESTE Teil von allem. Ich
weiß nicht, ob der Autor das gemerkt hat, aber das Ding funktioniert in Edge + IE11 (und wahrscheinlich bis IE9 zurück), *trotz* dessen, was caniuse sagt. Denn caniuse (wenn es "Nein" zur IE- und Edge-Unterstützung für clip-path sagt) meint das CSS clip-path, aber der verlinkte Artikel für clip-path, auf den sich caniuse bezieht (http://lab.iamvdo.me/css-svg-masks/) erwähnt, dass IE "nur SVG clip-path auf SVG-Inhalt" unterstützt, was genau das ist, was dieser Artikel verwendet.
Öffnen Sie einfach diese Seite in IE und scrollen Sie zum Fußbereich, um die Herrlichkeit des JPEG-Bild-Maskierens für alle zu sehen.
Es ist eine coole Idee.
Ich habe darüber geschrieben, wie man Peters ursprüngliche Methode an srcset anpasst.
https://www.jayfreestone.com/journal/masking-bitmaps-with-svg/
Beispiel hier
https://github.com/jayfreestone/svgbitmapmask/blob/master/scripts.js
Ein weiterer netter Trick für JPGs mit transparentem Hintergrund ist `mix-blend-mode: screen`, das jedes Weiß im Bild transparent macht. Großartig für Dinge wie Logos oder andere Bilder mit weißem Hintergrund.
Hallo, ich habe auch ein kleines Tool erstellt, um in der Vergangenheit JPG-Bilder zu generieren... Sie finden es unter http://xperiments.in/png2ajpg/