Logo von Mediengestaltung Torsten Kelsch

Bilder unter Linux fürs Web komprimieren

Ich bin vor kurzem von Windows auf Linux umgestiegen und habe mich als Webdesigner gefragt, ob es auch für Linux Werkzeuge gibt, die Bilddateien effektiv, aber möglichst verlustarm komprimieren können. Unter Windows hatte ich dazu IrfanView mit dem RIOT-Plugin verwendet – für Linux gibt es diese beiden Programme leider nicht. Und ich möchte nur in Ausnahme­fällen Windows-Software mit Hilfe von Wine unter Linux laufen lassen.

Im Blog meines Berufskollegen Marc Chiroiu fand ich eine mögliche Lösung: In einem seiner Artikel stellt er eine Software namens Trimage vor. Ich habe Trimage daraufhin selbst getestet. Dieses Werkzeug entfernt EXIF- und andere Metadaten aus den Bilddateien, wodurch die Dateigröße reduziert wird, ohne irgendetwas an der Bildqualität zu verändern. Darüber hinaus verwendet die Software die Techniken optipng, pngcrush, advpng und jpegoptim, je nach Dateityp – unterstützt werden die Formate PNG und JPG. Wenn das Bildbearbeitungsprogramm, das man benutzt, aber selbst schon diese oder ähnliche Techniken anwendet, kann Trimage die Größen der Bilddateien allerdings nicht weiter verkleinern, denn irgendwo ist ja die Grenze des Machbaren, wenn man ohne Verluste komprimieren will.

Trimage kann man als Kommandozeilen-Tool oder mit grafischer Benutzeroberfläche verwenden. Es ist quelloffen, kostenlos und steht unter der MIT-Lizenz.

Wenn die Dateigrößen der Bilder nach der Behandlung mit Trimage einem immer noch zu fett fürs Web erscheinen (Ladezeit!), hat man natürlich noch die Möglichkeit, sie verlustbehaftet zu komprimieren, indem man zum Beispiel die Kompressionsrate erhöht oder die Bilder kleiner skaliert. Und vielleicht muss es ja auch nicht immer ein farbiges Bild sein, sondern es reicht eins in Graustufen.

Stilvolle Fotogrüße ganz einfach?

Der deutsche Software-Hersteller Ashampoo vertreibt unter anderem System-, Multimedia- und Grafiksoftware. Zum Beispiel benutze ich gern deren Brennprogramm oder ihr Snap, mit dem man Webseiten fotografieren kann, und zwar auch die Teile, die außerhalb des gerade auf dem Monitor sichtbaren Bereiches liegen.

Aber als ich ihre Grafiksoftware Photo Card 2 ausprobiert habe, war ich doch arg enttäuscht. Man soll damit auf einfache Weise elektronische Grußkarten erstellen können, und das stimmt auch, die Bedienung ist sehr leicht. Doch das erste Wort in der Werbeaussage »Stilvolle Fotogrüße ganz einfach« finde ich, gelinde gesagt, ein wenig übertrieben. Stil mag ja immer auch ein bisschen Geschmackssache sein, aber wenn man als Benutzer keine Möglichkeit hat, die Farbgebung des eigenen in die Vorlage eingefügten Fotos an ebendiese Vorlage anzupassen oder umgekehrt, dann kommt doch schnell etwas zustande, das mit »stilvoll« recht wenig bis gar nichts zu tun hat, aus gestalterischer Sicht.

Und darüber hinaus finde ich die angebotenen Vorlagen auch verdammt nah am Kitsch. Viele davon haben mit gutem, stilvollem Geschmack in etwa so viel zu tun wie die Exponate in den Schaufenstern von bahnhofsnahen Souvenirläden. Aber gut, mit dieser furchtbaren, vielleicht schon all zu einfachen Ashampoo-Software kann sich jeder wie ein großer Künstler vorkommen und seine Machwerke an die lieben Verwandten, Freunde und sonstigen mehr oder weniger interessierten Menschen versenden – zum Beispiel per E-Mail, Picasa oder Facebook. Na dann: Viel Spaß!

Klassifizierung von Schriften

Schon als junger Bursche habe ich mich in meiner ersten Ausbildung zum Schauwerbegestalter sehr für Typografie interessiert, und in meiner zweiten Ausbildung zum Mediengestalter und in der jetzigen beruflichen Tätigkeit tue ich das noch viel mehr. Eine gut gestaltete Schrift ist so schön wie eine gute Fotografie, finde ich. Und ich freue mich, wenn ich es in seltenen Fällen mal schaffe, jemanden für Typografie zu begeistern.

Doch schwierig ist die Sache mit der Klassifizierung. Natürlich kann man ganz grob sagen: Es gibt Schriften mit Serifen, ohne Serifen, mit betonten Serifen, es gibt gebrochene Schriften und dann noch die Schreib- und Schmuckschriften. Ja gut, aber Schrift hat sich im Laufe vieler Jahrhunderte entwickelt und verändert, ähnlich wie Sprache, Kleidung, Musik, Architektur und so weiter. Es gibt also unheimlich viele verschiedene Stile, die sich manchmal nur in Feinheiten unterscheiden. In Deutschland ist die Klassifizierung nach DIN 16518 üblich, und es gibt hier elf Schriftkategorien. Jan Öztürk-Lettau stellt auf seiner Website oezet.de sehr anschaulich dar, wie man Schriften unterscheiden und zuordnen kann.

Zu der Unterteilung nach DIN 16518 gibt es durchaus kritische Stimmen, denn nicht alle Zuordnungen erscheinen als logisch. Und auch ich empfinde die DIN-Klassifizierung als teilweise verwirrend. Wo ich mich mehr mit anfreunden kann, ist die Schrift-Unterteilung (Classification of Type), die ein Lehrer namens John Magnik aus Melbourne, Australien, auf seiner offensichtlich uralten, aber nichtsdestotrotz immer noch nützlichen und informativen Website typography1st.com vorstellt. Hier werden die feinen Unterschiede der verschiedenen typografischen Zeitalter per Text und Bild sehr gut veranschaulicht. Da hier englische Begrifflichkeiten verwendet werden, werden mir als Deutschem auch die englischen Bezeichnungen der vielen Schriftenhersteller oder -händler verständlicher.

Typografie ist ein sehr weites Feld und wir haben uns hier nur mit einem kleinen Teilbereich befasst. Ich muss gestehen: Ich weiß ganz bestimmt nicht alles, was es auf diesem Fachgebiet zu wissen gäbe (gelernte Schriftsetzer werden da deutlich fitter sein), doch ich finde die Thematik spannend und lerne immer mal wieder was dazu.

Jeden Monat eine kostenlose Schrift

SoftMaker ist nicht nur Hersteller einer leistungsfähigen Bürosoftware, sondern auch bekannt für seine hochwertigen Schriften. Jeden Monat kann man sich eine Desktop-Schrift als Open Type Font oder True Type Font kostenlos von www.freefont.de herunterladen. Im Dezember 2015 wird die 1925 gestaltete Goudy Heavyface angeboten, die mit ihren stark abgerundeten Serifen sehr freundlich aussieht und sich beispielsweise gut für markante Plakatüberschriften eignet.

Photoshop: Bild auf vorgegebene Maße verkleinern

Aus meiner Kundschaft kam folgende Frage: Wie kann ich in Photoshop ein Foto so fürs Web verkleinern, dass es in die vorgegebenen Abmessungen passt, aber dabei nicht unproportional skaliert wird?

Die Lösung lautet: Man muss in zwei Schritten vorgehen. Und so geht’s:

Nachdem das Foto in Photoshop geladen wurde (zu sehen ist ein Beispielbild aus meinem eigenen Fundus an experimentellen und/oder missratenen Fotos, denn auf Motiv und Qualität kommt es hier nicht an), klickt man in der Menüleiste auf Bild > Bildgröße.

Bild auf vorgegebene Maße verkleinern (1)
(Aufs Bild klicken zum Vergrößern)

In dem nun erschienenen Fenster gibt man in die Eingabefelder die Abmessung der kleineren Endgröße ein. Angenommen, es sind die Abmessungen 960 Pixel Breite und 260 Pixel Höhe als Maximalmaße für das Bild auf der Webseite vorgegeben, so verkleinern wir das Foto auf die Breite 960 Pixel. Dabei ist darauf zu achten, dass Proportionen erhalten angeklickt ist und dass rechts neben den Eingabefeldern die Klammer Breite und Höhe aneinander koppelt.

Bild auf vorgegebene Maße verkleinern (2)
(Aufs Bild klicken zum Vergrößern)

Die Höhe überragt jetzt das vorgegebene Maß, und wir kommen zum zweiten Schritt. In der Menüleiste wird Bild > Arbeitsfläche angeklickt.

Bild auf vorgegebene Maße verkleinern (3)
(Aufs Bild klicken zum Vergrößern)

In dem nun erscheinenden Fenster lässt sich per Eingabefeld die gewünschte Größe eintippen. Darunter kann man noch die Position angeben, denn die Höhe kann ja zu gleichen Teilen von oben und unten beschnitten werden oder aber auch nur von oben oder nur von unten, je nach Motiv. Das Motiv sollte solche Beschneidungen natürlich erlauben.

Bild auf vorgegebene Maße verkleinern (4)
(Aufs Bild klicken zum Vergrößern)

Photoshop weist nun noch darauf hin, dass die Arbeitsfläche nach diesem Bearbeitungsschritt kleiner sein wird als das Bild, sodass Teile des Bildes eben abgeschnitten werden. Nun, genau das wollen wir ja.

Bild auf vorgegebene Maße verkleinern (5)
(Aufs Bild klicken zum Vergrößern)

Und als Endergebnis haben wir jetzt unser Bild in der vorgegebenen Größe und können es als neue Datei abspeichern, am besten in einer fürs Web optimierten Dateigröße (Datei > Fürs Web speichern …). Anschließend kann das Bild auf den Webserver hochgeladen und in die Webseite eingefügt werden.

Bild auf vorgegebene Maße verkleinern (6)
(Aufs Bild klicken zum Vergrößern)

Vielleicht wird der/die eine oder andere Leser/in jetzt sagen: »Öh, das ist doch profan!« Dazu möchte ich sagen: Es ging mir in diesem Blogartikel nicht darum, Photoshop-Profis spezielle Tricks zu vermitteln – dafür gibt es diverse Fachblogs und Regale voller Bücher in den Buchhandlungen und Bibliotheken. Vielmehr kam die Fragestellung, wie eingangs schon erwähnt, aus der Praxis; und meine Kundinnen und Kunden sind in aller Regel keine Grafikdesigner, die tagtäglich mit Grafiksoftware arbeiten, möchten aber ihre Webseiten weitgehend selber pflegen. Wenn dabei Fragen auftauchen und ich ein wenig Hilfestellung geben kann, freut das sowohl meine Kunden als auch mich. Und für den Fall, dass jemand anders mal vor dem gleichen Problem steht und im Web danach sucht, habe ich diesen Blogartikel geschrieben.

Affinity für Mac: Die Kampfansage an Adobe

Der Grafiksoftware-Hersteller Serif hat zusätzlich zu seiner sehr guten Software für Windows nun auch Grafikprogramme für den Mac auf den Markt gebracht. Zwei Anwendungen gibt es bisher, nämlich eine für die Bearbeitung von Bitmapgrafiken und eine für die Erstellung von Vektorgrafiken. Sie nennen sich Affinity Photo und Affinity Designer. Beide Programme gibt es zur Zeit für den Markteinführungspreis von jeweils 40 Euro. Später soll der Preis bei je 50 Euro liegen, was natürlich immer noch ein Kampfpreis ist.

Man könnte denken, dass man für dieses kleine Geld auch keine besonders leistungsfähige Software bekommt, aber das dürfte ein Irrtum sein. Ich kann zwar leider die Programme nicht testen, weil ich keinen Mac mein Eigen nenne, aber ich verwende schon seit Jahren die Windows-Software von Serif. Und die braucht sich vor den Anwendungen aus dem Hause Adobe nicht zu verstecken.

Mac-Anwender, denen Photoshop und Illustrator zu teuer sind, die aber dennoch mit professioneller Grafiksoftware arbeiten möchten, können sich näher informieren auf der sehr chic aufgemachten Website von Serif. Und bitte mit einem ordentlich großen Bildschirm, nicht mit einem winzigen Mobiltelefönchen.

Serif Affinity für Mac
Bild: © Serif

CoffeeCup Web Image Studio

Eine Grafiksoftware, die sich speziell an Webdesigner richtet, ist CoffeeCup Web Image Studio. Sie kam mir recht interessant vor, und so teste ich sie gerade.

Angefangen habe ich, ein Foto damit bearbeiten zu wollen. Das Programm bietet nämlich ganz hübsche Effektfilter und diverse Korrekturmöglichkeiten.
Effekte in Web Image Studio

Also habe ich mein nicht optimal fotografiertes Test-Rinderfoto ins Programm geladen und mit Filtern bombardiert. Und da zeigte sich schon, dass mein Webdesign-Computer dafür offenbar zu schwach ist, denn das Programm beanspruchte die CPU bei meinen Bearbeitungsversuchen immer so zwischen 50 und 80 Prozent, selbst dann noch, als ich die Größe des Bildes auf 800 Pixel mal 600 Pixel verkleinert hatte. Weil natürlich noch andere Programme liefen, zum Beispiel der Webbrowser, war die CPU teilweise bis zu 100 Prozent ausgelastet. Ich habe in diesem Computer einen Pentium-IV-Einkernprozessor mit Hyper Threading und 3 GHz Taktrate; an Arbeitsspeicher sind 2 GiB verbaut. Eine alte Gurke also, aber die reichte bisher für alle Grafikprogramme völlig aus, die ich so benutze. Ich hätte noch mit einem meiner besseren Computer testen können, aber wozu, ich will das Programm ja an ebendiesem PC benutzen.

Mit PNG-Grafiken, die wenige Farben und einfache Formen haben, kommt Web Image Studio etwas besser zurecht als mit JPG-Fotos. Logos und Buttons lassen sich also ganz gut bearbeiten. Damit wirbt der Hersteller auch: nämlich, dass man Webgrafiken an seine Bedürfnisse anpassen kann. Tatsächlich lässt sich recht leicht die Farbgebung verändern, ein Schatten um einen Schriftzug legen oder ein plastischer 3D-Effekt für eine Schaltfläche erzeugen.
Effekte in Web Image Studio

Doch was fehlt, sind Ebenen, die eigentlich jede bessere Grafikanwendung bietet. Ich habe es auch nicht geschafft, eine Vektorform automatisch auf der Bildfläche zentrieren zu lassen. Überhaupt ist das Programm nicht gerade intuitiv bedienbar. Manchmal klappen angebotene Bearbeitungsoptionen nicht; man sieht nie einen Fortschrittsbalken, wenn das Programm mal etwas länger braucht, um eine Bearbeitung durchzuführen; und der Image Editor, eine Art Werkzeugleiste, lässt sich nirgendwo andocken, sondern schwebt frei im Raum, selbst dann noch, wenn eine andere Anwendung im Vordergrund ist. So etwas ist natürlich nervig.

Mein Fazit: Webgrafiken und Fotos lieber mit den bisher gewohnten Programmen bearbeiten. Die Anschaffung von CoffeeCup Web Image Studio lohnt sich nicht, schon gar nicht für einen Preis von $ 39.

Kostenlos: Microsoft Expression Design 4

Expression Design ist, wie der Hersteller schreibt, ein Werkzeug für kreative Profis und Entwickler, die Grafiken für Anwendungsoberflächen, das Web oder jedes andere Medium erstellen möchten. Die Software wurde in dieser Version im Jahr 2012 auf den Markt gebracht und ist seit einiger Zeit kostenlos erhältlich. Der Dateiname beinhaltet noch immer den Vermerk »trial«, aber Einschränkungen im Funktionsumfang oder eine zeitliche Begrenzung gibt es nicht, und so wie ich erkennen kann, darf man es auch im geschäftlichen Bereich einsetzen. Natürlich hat man keinen Anspruch auf Hilfe und Support. Erhältlich ist es für das Windows-Betriebssystem ab XP. Die Hardware-Anforderungen sind moderat, denn die Software soll auf Computern laufen mit 1-GHz-CPU und 1 GiB RAM.

Aber was kann das Programm? Expression Design ist ein Vektorgrafikprogramm. Es verfügt über die in solchen Programmen üblichen Werkzeuge: geometrische Formen (Rechteck, Ellipse, Polygon und Linie), Zeichenstift (Bézierkurve, Polylinie und B-Spline), Freihandpinsel, Text, Füllwerkzeug, Schere, Pipette. Leider werden keine komplizierteren Formen angeboten, etwa Spirale, Stern, Wolke, … Und beim Erstellen eines Polygons wird, so weit ich erkennen kann, auch nicht gefragt, wie viele Ecken es bekommen soll, es wird immer ein Dreieck vorgegeben. Zwar kann man hinterher mit dem Zeichenwerkzeug Vektorpunkte hinzufügen, aber das finde ich im Vergleich zu anderen Vektorgrafikprogrammen doch recht umständlich.

Dennoch kommt man, zumindest wenn es um weniger aufwändige Gestaltungen geht, recht schnell ans Ziel. Die Software bietet Ebenen an, und darüber hinaus lassen sich Objekte, die sich überschneiden, auch bei Mausklick per Kontextmenü in den Vorder- oder Hintergrund verschieben. Beides sind natürlich Grundfunktionen, die ich aber trotzdem nicht unerwähnt lassen wollte. Natürlich lassen sich auch Fotos und sonstige Bitmapgrafiken importieren und in gewissem Umfang bearbeiten oder mit Filtern versehen.

Winddrachen

Die Import- und Export-Möglichkeiten sind gut. Es lassen sich alle üblichen Pixel-Bilddateien wie auch Dateien im Postscript-Format öffnen, und außerdem werden Photoshop- und Illustrator-Dateien importiert. Als Exportformat werden alle wichtigen Pixel-Grafikformate angeboten (BMP, JPG, PNG, TIF etc.), als Vektorgrafik-Formate fürs Web SVG und XAML. Als Vektorformat für den Druck findet man PDF vor, doch leider gibt es keine Ein­stellungs­möglich­keiten. Weder lässt sich ein Farbprofil einbinden, noch kann man angeben, ob in RGB oder CMYK abgespeichert werden soll, geschweige denn, in welcher PDF-Version. Druckereien verlangen in aller Regel PDF/X-3 oder PDF/X-1a. Immerhin wandelt das Programm Fonts in Kurven um.

Dass Micorosoft dieses Expression Design 4 als »Werkzeug für kreative Profis und Entwickler« anpreist, finde ich ein wenig übertrieben. Zwar ist die Software durchaus brauchbar und hat eine schöne Benutzeroberfläche, aber einige Arbeitsschritte sind etwas umständlich und so manche Profifunktion fehlt eben doch.

Die korrekte Verwendung des Apostrophs

Ich rege mich immer wieder auf, in welch unsinniger Weise der Apostroph, also das Auslassungszeichen, verwendet wird. Dieses eigentlich eher selten verwendete Zeichen muss wohl äußerst beliebt sein, denn es wird gern und häufig an den unmöglichsten Stellen gesetzt, also dort, wo es überhaupt nicht hingehört. Und dann wird dieser scheue und rare Apostroph auch noch mit anderen Zeichen verwechselt. Doch ein Akzent zum Beispiel ist nun mal schlicht und ergreifend kein Apostroph. Das mag typografisch desinteressierten Menschen alles pingelig und kleinkariert vorkommen, aber Typografie hat nicht nur sehr viel mit guter Lesbarkeit, sondern genauso viel auch mit Ästhetik und Schönheit zu tun. Man trägt ja zum Nadel­streifen­anzug oder schwarzen Kostüm auch keine Badelatschen, nur weil die gerade am griffbereitesten im Schuhschrank liegen.

Wie der Apostroph korrekt verwendet wird, kann man bei Typefacts – Typografie verstehen nachlesen.