14 kostenlose Bild- und Design-Tools, die in Ihrem Browser ausgeführt werden

Bei der Bildbearbeitung gibt es ein spezifisches Problem: Die Arbeit ist meist klein und die angebotenen Werkzeuge riesig. Sie müssen 400 KB von einem Heldenbild einsparen, einen Hex-Wert erhalten, den Ihr Designer erwähnt hat, oder ein Favicon generieren, das noch niemand erstellt hat. Dafür ist kein Abonnement erforderlich.

Die folgenden vierzehn Tools behandeln das Vorbereiten von Bildern, das Arbeiten mit Farben, das Erzeugen von CSS-Effekten und die kleinen Produktionsressourcen, die durch das Raster fallen. Alle laufen lokal, was für Bilder wichtiger ist als für Texte: Das Foto, das Sie gerade komprimiert haben, ist oft ein Foto, das Sie noch nicht veröffentlicht haben.

Bei den meisten Bildproblemen handelt es sich in Wirklichkeit um Gewichtsprobleme. Eine Seite, die sich langsam anfühlt, enthält normalerweise Bilder, die größer als ihre Anzeigegröße sind, im falschen Format und in einer Qualitätseinstellung, die niemand jemals in Frage gestellt hat.

Wie stark sollte man komprimieren? Die ehrliche Antwort lautet: Bis es falsch aussieht, dann einen Schritt zurücktreten. Bei einem fotografischen Heldenbild ist die Qualität bei 70 bis 80 Prozent in der Regel nicht vom Original bei normaler Betrachtungsgröße zu unterscheiden. Verwenden Sie für ein Logo, einen Screenshot oder alles mit flachen Farben und harten Kanten PNG und komprimieren Sie stärker – diese gewinnen mehr und verlieren weniger.

Eine praktische Faustregel: Alles unter 200 KB ist für ein Heldenbild in Ordnung, unter 80 KB für ein Miniaturbild, und wenn Sie nicht unter 300 KB kommen, liegt wahrscheinlich eher ein Dimensionsproblem als ein Qualitätsproblem vor.

Durch die Konvertierung eines Bildes in einen Base64-Daten-URI wird eine HTTP-Anfrage entfernt, was wie ein reiner Gewinn klingt. Normalerweise ist das nicht der Fall. Der codierte String ist etwa ein Drittel größer als die Binärdatei, kann nicht separat zwischengespeichert werden und bläht Ihr CSS oder HTML auf.

Inline nur, wenn das Bild klein ist – unter ein paar Kilobyte –, einmal verwendet wird und kritisch ist. Ein kleines Symbol in einer einzelnen E-Mail-Vorlage ist der klassische Fall. Stellen Sie alles, was seitenübergreifend wiederholt wird oder größer als ein paar Kilobyte ist, als Datei bereit und lassen Sie es vom Browser zwischenspeichern.

Machen Sie sich klar, was dies bewirkt. Es entfernt oder verdeckt die sichtbare Markierung. Die zugrunde liegenden Pixel können nicht rekonstruiert werden – übermalte Informationen sind verloren und kein Filter erfindet sie wieder. Die Ergebnisse reichen von unsichtbar, wenn die Markierung auf einem einfachen Hintergrund sitzt, bis hin zu einem deutlichen Verschmieren, wenn sie sich über Details befindet.

Noch eine Sache, die es klar und deutlich zu sagen gilt: Das Entfernen des Wasserzeichens einer anderen Person und die Veröffentlichung des Ergebnisses stellt in den meisten Rechtsordnungen ein Urheberrechtsproblem und eine Lizenzverletzung dar, unabhängig davon, ob Sie dabei erwischt werden. Das Entfernen von Markierungen aus Ihren eigenen Bildern oder aus von Ihnen lizenzierten Bildern ist der Fall, für den dieses Tool gedacht ist.

Durch die Farbe werden kleine Fehler deutlich sichtbar. Ein Kontrastverhältnis, das nicht zugänglich ist, ein Hex-Wert, der eigentlich ein HSL-Triple ist, eine Palette, die auf Ihrem Monitor kohärent und auf einem Projektor matschig aussieht.

Eine Einschränkung bei Farbtools: Sie gehen alle davon aus, dass Ihr Monitor kalibriert ist und dass die Person, die Ihre Seite betrachtet, funktionierende Augen hat. Keine der beiden Annahmen ist sicher. Das ist ein Grund, kontrastgeprüfte Kombinationen den subjektiven vorzuziehen.

Einen Farbverlauf oder einen geschichteten Schatten von Hand zu schreiben ist eine wirklich unangenehme Aufgabe. Die Syntax ist fummelig, man sieht nicht, was man erzeugt, und der Unterschied zwischen einem guten und einem schlechten Schatten beträgt ein paar Pixel Unschärfe.

Der Trick bei allen vieren ist Zurückhaltung. Zwei Schatten – ein enger dunkler und ein breiter, weicher – lesen sich als physische Erhebung. One Shadow liest sich wie eine Website von vor fünfzehn Jahren. Generieren, kopieren und dann löschen, bis Sie nicht mehr erkennen können, dass es vorhanden ist.

Hier leistet der gesamte Cluster einen echten Job. Eine Seite braucht einen Helden mit einem Hintergrundbild, einer Überschrift und einem Button, und noch ist nichts davon erstellt.

Fünf Tools, keine Design-Suite und jede Ausgabe ist ein Wert, den Sie direkt in den Code einfügen können.

Werden meine Bilder irgendwo hochgeladen? Nein. Komprimierung, Größenänderung und Base64-Konvertierung erfolgen alle in Ihrem Browser, weshalb es keine Dateigrößenbeschränkung und keine Upload-Warteschlange gibt.

Führt das Komprimieren eines Bildes zu einem Qualitätsverlust? Per Definition immer. Die Frage ist, ob es sichtbar ist. Bei 70 bis 80 Prozent Qualität und korrekten Maßen ist dies meist nicht der Fall.

Warum sieht mein in der Größe geändertes Bild immer noch groß aus? In neun von zehn Fällen haben Sie es vor der Größenänderung komprimiert, oder Sie speichern es als PNG, obwohl ein Foto besser als JPEG ist.

Kann ich diese für Kundenarbeiten verwenden? Ja, ohne Namensnennung und ohne kommerzielle Einschränkung.

Funktionieren sie auf einem Telefon? Ja, allerdings hängt die Größenänderung und Komprimierung großer Fotos auf einem Telefon vom Speicher Ihres Geräts und nicht von einem Server ab.

Ändern Sie die Größe, bevor Sie komprimieren, überprüfen Sie den Kontrast, bevor Sie über die Farbe streiten, halten Sie die Schatten dezent und vergessen Sie nie das Favicon. Das ist sowieso das meiste, was eine Design-Suite für Sie erledigt hat.