Mit CSS-Filtereffekten und Mischmodi können wir jetzt verschiedene Techniken zur Gestaltung von Bildern direkt im Browser nutzen. Die Erstellung ästhetischer Thematiken ist jedoch nicht alles, wofür Filtereffekte gut sind. Sie können Filter verwenden, um den Hover-Zustand anzuzeigen, Passwörter zu verbergen und jetzt – für die Web-Performance.
Beim Ausprobieren von Leistungsgewinnen durch die Verwendung von Mischmodi für Duoton-Bildeffekte (ich werde bald einen Artikel darüber schreiben) entdeckte ich etwas noch Aufregenderes. Ein großer Gewinn bei der Bildoptimierung! Die Idee ist, den Kontrast im Quellbild zu reduzieren, dadurch die Dateigröße zu verringern und dann den Kontrast mit CSS-Filtern wieder zu erhöhen!
So funktioniert es
Lassen Sie uns genau aufschlüsseln, wie das funktioniert
- Reduzieren Sie den Bildkontrast mithilfe einer linearen Transformationsfunktion (Photoshop kann das)
- Wenden Sie einen Kontrast-
Filterin CSS auf das Bild an, um die Kontrastreduzierung auszugleichen
Schritt eins beinhaltet das Öffnen Ihres Bildes in einem Programm, das es Ihnen ermöglicht, den Kontrast linear zu reduzieren. Der Legacy-Modus von Photoshop leistet hier gute Arbeit (Bild > Korrekturen > Helligkeit/Kontrast)
Nicht alle Programme verwenden die gleichen Funktionen zur Anwendung von Bildtransformationen (zum Beispiel würde dies mit dem Standard-Bildbearbeitungsprogramm von macOS nicht funktionieren, da es eine andere Technik zur Kontrastreduzierung verwendet). Ein Großteil der Arbeit zur Integration von Bildeffekten in den Browser wurde ursprünglich von Adobe geleistet, daher ist es logisch, dass der Legacy-Modus von Photoshop mit den Bildeffekten im Browser übereinstimmt.
Dann wenden wir einige CSS-Filter auf unser Bild an. Die Filter, die wir verwenden werden, sind contrast und (ein wenig) brightness. Bei der 50%igen Reduzierung im Legacy-Modus von Photoshop habe ich auf jedes Bild filter: contrast(1.75) brightness(1.2); angewendet.
Große Einsparungen
Diese Technik ist sehr effektiv zur Reduzierung der Bildgröße und damit des Gesamtgewichts Ihrer Seite. In der folgenden Studie habe ich 4 lebendige, mit einem iPhone aufgenommene Fotos verwendet, eine Kontrastreduzierung um 50 % im Legacy-Modus von Photoshop angewendet, jedes Foto mit maximaler Qualität (10) gespeichert und dann filter: contrast(1.75) brightness(1.2); auf jedes Bild angewendet. Dies sind die Ergebnisse
Sie können die Live-Demo hier ausprobieren und sich selbst davon überzeugen!
In jedem der oben genannten Fälle haben wir zwischen 23 % und 28 % Bildgröße eingespart, indem wir den Kontrast mit CSS-Filtern reduziert und wieder angewendet haben. Dies geschah *mit* dem Speichern jedes Bildes in maximaler Qualität.
Wenn Sie genau hinschauen, können Sie einige legitime Qualitätsverluste im Bild erkennen. Dies gilt insbesondere für überwiegend dunkle Bilder. Diese Technik ist also nicht perfekt, aber sie beweist definitiv auf interessante Weise Bildersparnisse.
Überlegungen zur Browserunterstützung
Seien Sie sich bewusst, dass die Browserunterstützung für CSS-Filter "ziemlich gut" ist.
Diese Browser-Supportdaten stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 18* | 35 | Nein | 79 | 6* |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4* | 6.0-6.1* |
Wie Sie sehen, fehlen Internet Explorer und Opera Mini die Unterstützung. Edge 16 (die aktuelle neueste Version) unterstützt CSS-Filter und diese Technik funktioniert einwandfrei. Sie müssen entscheiden, ob ein Bild mit reduziertem Kontrast als Fallback akzeptabel ist oder nicht.
Was ist mit Neuanstrich?
Sie denken vielleicht: *„Aber während wir Bildgröße sparen, belasten wir den Browser mehr, würde sich das nicht auf die Leistung auswirken?“* Das ist eine tolle Frage! CSS-Filter lösen einen Neuanstrich aus, da sie window.getComputedStyle() auslösen. Lassen Sie uns unser Beispiel profilieren.
Ich habe ein Inkognito-Fenster in Chrome geöffnet, JavaScript deaktiviert (nur um sicher zu sein, wegen der Erweiterungen, die ich habe), das Netzwerk auf "Slow 3G" und die CPU auf 6-fache Verlangsamung eingestellt.
Während die Bilder eine Weile zum Laden brauchten, war der eigentliche Neuanstrich ziemlich schnell. Bei 6-facher CPU-Verlangsamung dauerte der längste einzelne Rasterize Paint 0,27 ms, also 0,00027 Sekunden.
CSS-Filter stammen ursprünglich von SVG-Filtern und sind relativ browseroptimierte Versionen der beliebtesten SVG-Filtereffekttransformationen. Daher halte ich es für ziemlich sicher, sie zu diesem Zeitpunkt als progressive Verbesserung zu verwenden (wobei IE-Benutzer und Opera-Mini-Benutzer zu berücksichtigen sind!).
Fazit und Zukunft
Es gibt immer noch erhebliche Einsparungen bei der Reduzierung der Bildqualität (in dieser kleinen Studie wurden die Bilder mit hoher Qualität gespeichert, um ein ausgewogeneres Ergebnis zu erzielen). Das Durchlaufen von Bildern durch Optimierer wie ImageOptim und das Senden kleinerer Bilddateigrößen basierend auf der Bildschirmgröße (wie bei responsiven Bildern in HTML oder CSS) führt zu noch größeren Einsparungen.
In der Welt der Web-Performance-Optimierung halte ich die Bildleistung für das effektivste Mittel, um Web-Schrott und Daten für unsere Benutzer zu reduzieren, da Bilder mit Abstand den größten Teil dessen ausmachen, was wir im Web versenden. Wenn wir moderne CSS nutzen können, um einige der Lasten unserer Bilder zu reduzieren, können wir eine ganz neue Welt von Optimierungslösungen erschließen.
Beispielsweise könnte dies potenziell noch weiter ausgebaut werden, indem man mit anderen CSS-Filtern wie saturate und brightness experimentiert. Wir könnten Automatisierungstools wie Gulp und Webpack nutzen, um die Effekte auf die Bilder anzuwenden, so wie wir Automatisierungstools verwenden, um unsere Bilder durch Optimierer zu jagen. Die Kombination dieser Technik mit anderen Best Practices für die Bildoptimierung kann zu erheblichen Einsparungen bei den pixelbasierten Assets führen, die wir an unsere Nutzer senden.
Das ist ein verdammt cooler Trick. Aber…
Wenn ein Benutzer ein Bild mit diesem Trick speichert, lädt der Benutzer dann das Bild ohne den Kontrast herunter?
Das würde ich denken, *ja*. Obwohl man vielleicht, wenn man unglaublich raffiniert ist, das Bild auf eine Leinwand zeichnen und den Filter dort anwenden und das exportieren könnte?!
Ja, du kannst das Bild nicht mit dem Filter speichern. Du müsstest einen Screenshot machen oder einen Download-Button hinzufügen.
Zusätzlich dazu werden die Bilder nicht ohne den Kontrast erscheinen in
RSS-Reader,
automatisierte Post-to-Mail-Abonnenten und
überall sonst, wo der Inhalt ohne die Stile verwendet wird (denken Sie an eine mobile App, die Inhalte von einer WordPress-Website über die WP Rest-API abruft)?
bezüglich RSS... das hängt so ein bisschen davon ab. Vielleicht wenden Sie den Kontrast sowieso auf automatisierte Weise an und verwenden trotzdem ein Inline-
<img style="filter..." />. Nicht jede Syndizierung wird Inline-Stile belassen, aber einige tun es.So ziemlich. Filter sind nicht zerstörerisch, also wird nichts mit der Originaldatei gemacht.
Und wir würden diese Leinwand in Daten oder Blob-URL konvertieren und die Bild-URL damit ersetzen.
was ist mit dem Speichern der Bilder?
Das hätte in das Bildformat integriert werden sollen. Warum nutzen sie so etwas nicht?
Ich glaube, JPEG tut das tatsächlich (ich weiß, dass es Luminanz separat kodiert und quantisiert). Das Anpassen der Kompression könnte diese Einsparungen reproduzieren.
Dieser "Desaturations-Trick" reduziert nur die Farbpalette, was eine bessere Bildkompression (insbesondere für verlustbehaftete Formate wie JPEG) und Dateikomprimierung (insbesondere für verlustfreie Formate wie PNG) ermöglicht.
Sie sollten in der Lage sein, die Farbvielfalt perfekt zu reduzieren, ohne die Farbpalette/den Farbraum zu beeinträchtigen, und das ohne den ganzen CSS-Unsinn hin und her.
Ich schätze, wenn Sie IE11-Unterstützung benötigen, können Sie auf SVG zurückgreifen: Definieren Sie den Filter als SVG-Filter, fügen Sie den Filter in das DOM ein, laden Sie das Bild über ein SVG-Bild-Tag, wenden Sie den Filter per CSS an.
Dies ist fast identisch mit der Reduzierung der JPEG-Kompression. Die Reduzierung des Kontrasts verringert die Pixelamplituden, was die Amplituden der DCT-Koeffizienten verringert, was angesichts der begrenzten Auflösung von ganzzahligen DCT-Koeffizienten die Quantisierung erhöht. JPEG tut intern dasselbe mithilfe von Quantisierungstabellen.
Für reine Kompression ist es wahrscheinlich besser, MozJPEG zu verwenden, das die Quantisierung direkt optimiert.
Vorverarbeitung wie diese ist in einigen Situationen sinnvoll, z. B. wenn Sie einen Farbverlauf auf ein Bild anwenden, können Sie das Original auch in Graustufen erstellen (vermeiden Sie das Senden von Farbkanälen). Oder wenn nur ein Teil des Bildes nach dem Filtern klar sichtbar ist, können Sie die Dateigröße reduzieren, indem Sie die weniger wichtigen Teile verwischen.
Endlich jemand, der tatsächlich weiß, was JPEGs sind.
Ernsthaft – verwenden Sie diese Technik nicht. Speichern Sie Ihre Bilder einfach mit einer niedrigeren Qualitätseinstellung. Sie haben die gleichen Vorteile, aber eine höhere wahrgenommene Bildqualität und keine der Nachteile, wenn CSS nicht verfügbar ist.
Hier ist eine weitere Technik, die ich während meiner Arbeit in der Bildverarbeitung gelernt habe: Fügen Sie einen Weichzeichner nur zum blauen Farbkanal hinzu. Bis zu einem gewissen Punkt bemerken Sie es kaum, da das menschliche Sehvermögen unglaublich schlecht darin ist, Details im blauen Fotorezeptor zu sehen.
Das ist natürlich keine alleinstehende Lösung, sondern eine zusätzliche Bildoptimierung! :) Leute sollten Bilder immer durch Kompressions- und Optimierungsverfahren laufen lassen.
Community-Hinweis: Das ist eine schrecklich unhöfliche Art, einen Kommentar zu beginnen. Halten wir die Dinge respektvoller.
Ja, wenn ein Benutzer ein Bild speichert, wird es ohne den Kontrast gespeichert. Natürlich könnten Sie immer noch versuchen, das gefilterte Bild in ein Canvas-Element einzufügen, sodass das Speichern funktioniert.
Allerdings reduzieren Sie das Bildsignal und damit die Bandbreite, verstärken das Signal danach und verlieren dabei die Informationen, die Sie zuvor entfernt haben.
Sie können etwa die gleiche Anzahl an Bytes einsparen, indem Sie die Anzahl der Farben im Bild reduzieren, z. B. mit pngquant für PNGs, mozjpeg für JPEG oder svgo für SVG. Kennen Sie Ihre Bildoptimierungen und verwenden Sie immer das bestmögliche Bildformat oder sogar, wie man sie am effektivsten mischt.
Schön und pünktlich. Ich benutze velocity.js, um ein Vollbild-animiertes GIF zu simulieren und versuche, die Ladezeit von Bildern zu verkürzen, ohne zu viel Qualität zu opfern… das könnte nützlich sein. Danke.
Eine Kombination aus diesem und einigen zusätzlichen Filtern könnte nützlich sein, um Leute davon abzuhalten, Bilder von Ihrer Website zu stehlen. Zumindest die, die nicht so motiviert sind.
Das scheint ein wirklich praktischer Anwendungsfall dafür zu sein! Der Artikel sollte aktualisiert werden, um diesen großartigen Anwendungsfall zu erwähnen.
Haben Sie versucht, das Foto einfach zu speichern, ohne den Kontrast zu ändern, und sicherzustellen, dass die Größe des Bildes trotzdem nicht reduziert wurde?
Ja! Danke der Nachfrage.
Ich habe den Kontrast auch in Photoshop wieder hinzugefügt, um zu sehen, welche Auswirkung das auf das Bild hätte. Das Ausgangsbild und das Endergebnis, bei dem ich den Kontrast entfernt und wieder hinzugefügt habe, waren 5-20 KB kleiner. Die obigen Bilder zeigen Einsparungen von 500-900 KB!
Vielen Dank dafür. Das spart viel Zeit, da ich viele Bilder in Photoshop bearbeite, sie dann durch Compressor.io laufen lasse und die Kombination die Optimierung von Bildern sehr mühsam macht.
Netter Trick.
Die von Ihnen bereitgestellten Beispiele waren alle ziemlich groß in der Größe, und selbst die resultierenden Bildgrößen sind für das Web möglicherweise nicht ideal.
Haben Sie kleinere Bilder ausprobiert, um zu sehen, ob Sie immer noch den gleichen Prozentsatz an Byte-Einsparungen erzielen?
Wie sieht es mit Hintergrundbildern aus? Ich nehme an, dieser Trick kann dafür nicht verwendet werden?
Ich denke, Sie könnten es verwenden, wenn Ihr Hintergrundbild auf ein Pseudo-Element angewendet wird.
hmm! Frage mich, ob dasselbe Konzept auf Videos angewendet werden könnte?
Ich habe das in der Vergangenheit erwähnt (tatsächlich in einem Vortrag), aber dies ist etwas, das auf Videoebene und mit Erfolg, wie bei Netflix, getan werden kann.
Das Konzept des *Erstellens* mit geringem Kontrast ist der Schlüssel. Die Nachfilterung ist hier zweitrangig.
Also funktioniert es? Das ist cool! Hast du ein Codepen?
Ich halte es für einen netten Tipp, aber nicht so gut. Obwohl man den Benutzer davor bewahren kann, mehr Daten herunterzuladen, beeinträchtigt man die Leistung beim Rendern der Bilder mit Filtern.
Im Artikel gibt es einen Abschnitt dazu. Schauen Sie nach oben.
Hallo und vielen Dank, dass Sie sich die Zeit genommen haben, dies zu untersuchen. Es ist ein interessanter Ansatz, aber laut meinen Experimenten ist es keine gute Idee.
Wenn Sie den Kontrast senken, nutzt ein Kompressionsalgorithmus dies aus und wendet eine verlustbehaftetste Kompression an. Dies ist zulässig, da ein Bereich mit geringerem Kontrast weniger Details aufweist und ein Betrachter dies nicht wahrnimmt. Sobald Sie den Kontrast wieder erhöhen, haben Sie die Kompression dazu gebracht, eine stärkere Kompression anzuwenden, als angemessen ist.
In meinen Tests hat ein Bild, das den Kontrast-Trick verwendet, eine schlechtere Qualität als ein Bild mit vergleichbarer Dateigröße, bei dem die Kompressionsstufe erhöht wurde, um die Dateigröße des Kontrast-Trick-Bildes zu erreichen.
Ich habe keine großen Zweifel an dem, was Sie sagen, aber Una hat Tests vorgelegt, und Sie haben gerade *gesagt*, dass Sie Tests durchgeführt haben. Posten Sie sie!
Diese Technik ist sicherlich clever, aber ich würde diese Technik weder verwenden noch empfehlen.
Es ist im Grunde eine Reduzierung der Farbpalette unter anderem Namen.
Sie werden Banding einführen.
Eine einfache Reduzierung der Qualität oder Bittiefe beim Export sollte ähnliche oder sogar bessere Ergebnisse erzielen.
Filtereffekte sind nicht kostenlos. Die Bildgröße ist wahrscheinlich mit diesem Kompromiss verbunden, aber 27 ms sind nicht 0,00027 s, wie der Artikel behauptet. Es sind 0,027 ms.
Der große Hinweis hier, was wirklich vor sich geht, ist, dass beide Bilder mit maximaler Qualität gespeichert werden. Aber bei einem wurden Informationen gelöscht. (Daher ist die Dateigröße kleiner. Sie haben im Wesentlichen die Qualität vor dem Speichern reduziert.) Kein Filter wird die gelöschten Informationen wiederherstellen, obwohl ein Blick normalerweise keinen Unterschied zeigt. Aber dasselbe könnte man über die Reduzierung der Exportqualität sagen.
Es ist ein cooler Trick, aber ich mache mir Sorgen über die Ergebnisse in Google Bilder.
Das ist definitiv ein fairer Punkt :) Man würde den Kontrast dort verlieren, was, wie einige Leute angemerkt haben, ideal für Fotografen und andere sein könnte, die verhindern wollen, dass Leute ihre Bilder ohne Erlaubnis verwenden.
Funktioniert es in IE 10-11?
Ugh. Tippfehler. Ich meinte 0,027 s.
Gut gemacht, dass Sie experimentiert und um die Ecke gedacht haben, aber diejenigen, die verstehen, wie JPEG funktioniert, werden erkennen, dass dies eine weitaus unterlegene Technik ist als das reine Neu-Kompression des Bildes mit JPEG bei niedrigerer Qualitätseinstellung.
Ein JPEG-Codec untersucht Ihr Bild und bestimmt, welche Techniken verwendet werden sollen, um die höchstmögliche Bildqualität bei einer bestimmten Dateigröße zu erzielen. Was Sie hier vorschlagen, ist im Grunde nur ein einziges "Werkzeug" in der "Werkzeugkiste" von Algorithmen, die JPEG zur Kompression Ihres Bildes verwenden könnte.
Es ist also eine coole Idee – aber tun Sie das nicht im wirklichen Leben. Kodieren Sie die Bilder einfach neu und lassen Sie die Codecs herausfinden, wie Sie das beste Preis-Leistungs-Verhältnis erzielen.
Hallo! Danke für Ihren Kommentar. Ich möchte Sie jedoch bitten, den gesamten Beitrag zu lesen und zu bedenken, dass der Ton dieses Kommentars etwas herablassend wirkt. Zum Beispiel
„Diejenigen mit Verständnis dafür, wie JPEG funktioniert, werden erkennen, dass dies eine weitaus unterlegene Technik ist als das reine Neu-Kompression des Bildes mit JPEG bei niedrigerer Qualitätseinstellung.“ <– das ist etwas anmaßend.
„Was Sie hier vorschlagen, ist im Grunde nur ein einzelnes „Werkzeug“ in der „Werkzeugkiste“ von Algorithmen, die JPEG zur Kompression Ihres Bildes verwenden könnte.“ <– ja, genau das sage ich.
Im Gegensatz zu Ihrer Aussage habe ich tatsächlich umfangreiche Forschung betrieben, wie JPGs funktionieren, und dies in einem einstündigen Vortrag über pixelbasierte Medienkompression auf der An Event Apart dieses Jahr weitergegeben, wobei ich Werkzeuge zur Bildkompression besprochen und erklärt habe, warum bestimmte Techniken basierend darauf funktionieren, wie bestimmte Formate (d. h. JPEG) Bilder komprimieren.
In diesem Artikel schließe ich mit: „Das Kombinieren dieser Technik mit anderen Best Practices für die Bildoptimierung kann zu erheblichen Einsparungen bei den pixelbasierten Assets führen, die wir an unsere Nutzer senden“ und füge einen Link zu einem kostenlosen Online-Buch zu diesem Thema hinzu, das ich technisch redigiert habe.
Ich habe diesen Beitrag geschrieben, um eine neue Technik zur weiteren Optimierung von Bildern (abgesehen von den Standardpraktiken) zu beschreiben, nicht um allgemeine Bildoptimierung. War das im Titel oder in der Einleitung dieses Artikels unklar?
Ich versuche nicht, herablassend zu sein, aber gleichzeitig bin ich ein Experte auf diesem Gebiet, da ich beruflich Bild- und Videocodecs entwickle, und ich gebe keine Meinung ab – es ist eine Tatsache über die Funktionsweise von JPEG. Die von Ihnen vorgeschlagene Technik wird immer Bilder erzeugen, die bei gleicher Dateigröße von gleicher oder geringerer Qualität sind, als ein JPEG-Codec liefern würde. Punkt.
Nehmen Sie Ihr erstes Beispiel – Sie haben den Kontrast gesenkt und die Dateigröße von 3,2 MB auf 2,3 MB geändert – großartig. Aber wenn Sie stattdessen einfach die Qualitätseinstellung für den JPEG-Codec senken, erhalten Sie immer noch eine Datei, die 2,3 MB groß ist, aber eine höhere visuelle Wiedergabetreue aufweist als das Bild, das Ihre Technik erzeugt.
Dies liegt daran, dass Sie JPEG zwingen, nur eine einzige Technik (Kontrastreduzierung) zur Komprimierung des Bildes zu verwenden, während es normalerweise die beste von einer Vielzahl von Techniken auswählen würde, um dies zu erreichen, basierend auf einem Kompromiss zwischen „menschlicher Wahrnehmung/Dateigröße“, der vor Jahrzehnten von den JPEG-Ingenieuren untersucht wurde.
Ich sage das nicht, um ein Idiot zu sein – intelligente Leute erfinden Dinge ständig versehentlich neu, wenn sie angesichts ähnlicher Beweise zu derselben logischen Schlussfolgerung gelangen. Aber was Sie vorschlagen, wurde vor langer Zeit entdeckt und bereits in den JPEG-Standard integriert.
Warum den Kontrast nicht im Editor anwenden, bevor gespeichert wird, anstatt im Browser? Die Dateigröße sollte nach der Palettenreduktion nicht zunehmen.
Hallo, danke für Ihre Frage. Ich habe das oben kurz beantwortet (gerade eben)
Ich habe das versucht, um zu sehen, ob es die Bildgröße reduziert, indem einige kontrastreiche Bereiche verkleinert werden. Das Ausgangsbild und das Endbild, bei denen ich den Kontrast entfernt und wieder hinzugefügt habe, waren 5-20 KB kleiner. Die obigen Bilder zeigen Einsparungen von 500-900 KB.
Das lässt mich denken, dass die wirklichen Einsparungen von einer reduzierten Farbpalette kamen.
Warum wird diese Technik nicht in Bildcodecs verwendet?
Genau! JPEG macht das bereits.
Anstatt den Kontrast zu verringern, um JPEG zu „täuschen“, eine Datei von 3,2 MB auf 2,3 MB zu schrumpfen, verringern Sie einfach die Ausgabequalität des JPEG-Codecs. Sie erhalten immer noch eine 2,3 MB große Datei, aber sie wird eine höhere Qualität haben als die kontrastreduzierte.
Ist es möglich, Bildvergleiche hinzuzufügen (ähnlich wie Sie im Abschnitt „Major Savings“ gemacht haben) eines JPEGs, das einen höheren Komprimierungsgrad verwendet, der zu einer gleich großen Datei wie Ihr bildoptimiertes Bild führt? z.B. das Original ist 3,2 MB, Ihre Version 2,3 MB – wie sieht ein 2,3 MB großes JPEG-komprimiertes Bild aus? Alle mir bekannten Bildbearbeitungsprogramme unterstützen die Einschränkung der Größe.
Den eigentlichen JPEG-Algorithmus visuell zu übertreffen, wäre in der Tat eine beachtliche Leistung!
Ich bin spät dran, aber mir fällt auf, dass dies eine sehr gute Technik für Online-Unternehmen sein könnte, die Bedenken hinsichtlich Bildpiraterie haben (ich denke dabei insbesondere an Stockfoto-Websites). Jeder, der versucht, ein Bild kostenlos zu verwenden, erhält die entsättigte Version und Sie können die lahmen Wasserzeichen weglassen.
Das ist tatsächlich ein ziemlich guter Anwendungsfall.
Und dann macht der Benutzer stattdessen einen Screenshot von dem Bild.
Aber lahme Wasserzeichen funktionieren auch nicht, da die Bildrestauration sich verbessert. Es gibt Algorithmen, die hervorragende Arbeit leisten, um Text über einem Bild zu entfernen, mit Ergebnissen, die „gut genug“ sind. Sehen Sie sich Dinge wie Deep Prior, LapSRN, SRResNet oder andere Super-Resolution-Bildreparaturtechniken/-software an.
Der Dieb möchte nicht unbedingt das Original. Er möchte etwas „gut genug“ haben, das er verwenden kann. Ob das nun bedeutet, ein Wasserzeichen in der Ecke abzuschneiden, ein Wasserzeichen über einer einfarbigen Fläche zu entfernen, einen Screenshot des Bildes zu machen usw.
Die beste Vorgehensweise, um Kunstdiebstahl zu vermeiden, ist, keine Kunstwerke im Internet zu platzieren. Die zweite ist, zu akzeptieren, dass es passieren wird und zu versuchen, sein Urheberrecht rechtlich zu verteidigen (was teuer, zeitaufwendig und schwierig über das Internet ist). Die gängige Praxis ist, aufzuhören, sich darum zu kümmern, und zu akzeptieren, dass es passieren wird.
Ich liebe clevere Ideen wie diese. Gute Arbeit, Una!
Ich verwende bereits
filter: blur(), um in Photoshop unscharf gemachte Bilder zu glätten, aber ich werde diesen Trick hinzufügen müssen, um ein paar Bytes zu sparen.