Bilder und Screenshots fürs Web: Mit diesen Tools gelingt es perfekt

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Webentwickler und Redakteure haben einiges gemeinsam. Unter anderem benötigen beide einen geölten Workflow, wenn es um die Bereitstellung von Bildern und Screenshots im Netz geht. Bestimmte Größenkonventionen sind einzuhalten oder sollen erreicht werden. Die Dateien sollen so klein wie möglich sein. Gleichzeitig dürfen die Tools nicht schwer zu erlernen und müssen möglichst intuitiv zu bedienen sein. Ich habe das perfekte Set für meine Bedürfnisse gefunden. Möglicherweise ist es auch für Ihre geeignet…

Grafiktools: Editor’s Choice

Gleich vorweg sei gesagt, dass ich hier keine möglichst vollständige Auflistung verfügbarer Tools bringen will. Solche Beiträge kommen eventuell zu einem späteren Zeitpunkt noch. Heute stelle ich ganz gezielt meinen eigenen Workflow vor.

Da ich extrem viel schreibe und entsprechend viel zu bebildern habe, ist mir eine absolut zeitsparende Vorgehensweise extrem wichtig. Wenn ich beispielsweise an einem Beitrag mit 60 Fotografien pro Bild eine Minute sparen kann, bin ich mit dem ganzen Beitrag eine Stunde früher fertig, als wenn meine Tools diese Minute zusätzlich erforderlich machten. Man sieht, hier summieren sich kleine Effekte zu einem großen Ganzen.

Natürlich bin ich sehr daran interessiert, zu hören, ob es eventuell noch bessere Lösungen gibt. Zu diesem Zweck stehen die Kommentare zur Verfügung. Es würde mich wirklich, auch ganz eigennützig gedacht, sehr freuen, wenn möglichst viele Leserinnen und Leser ihren jeweiligen Workflow schildern würden. Im besten Falle lernen wir alle dazu…

Screenshots: Der häufigste Fall

Ich schreibe über Software, Tools, Webdienste und andere Netz- und Entwicklerthemen. In den allermeisten Fällen fertige ich zur Illustration der beschriebenen Funktionalitäten zwei bis fünf Screenshots an. Dabei lege ich zunächst die Dr. Web-Spezifikation zu Grunde, die eine Breite von maximal 640 Pixel definiert.

TechSmith SnagIt

Da ich ein Wanderer zwischen den Welten bin, habe ich mich für die Software SnagIt von TechSmith entschieden. Diese gibt es sowohl in einer Version für Windows, wie auch in einer funktional ähnlichen Version für Mac OS. Ich hatte das Privileg, bereits Kunde der Windows-Version zu sein, als es die Mac-Version noch nicht gab. So bot man mir seinerzeit an, mit dem Windows-Lizenzschlüssel auch die Mac-Version verwenden zu dürfen. Wenn man sich für den Erwerb der Version über den TechSmith-Onlineshop entschließt, erhält man auch aktuell eine Lizenz für beide Betriebssysteme und zahlt dafür 47,95 Euro.

Mittlerweile habe ich die Software im Mac App Store für 39,95 Euro, dann nur für Mac, noch einmal gekauft, weil mir die zentrale Überwachungsfunktion des App Stores besser gefällt als die manuelle Suche nach etwaigen Updates. Das muss aber jeder für sich selbst bewerten… Jedenfalls stehen beide Versionen auf der TechSmith-Website zum Download für einen 30-tägigen kostenlosen Test bereit.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

SnagIt klinkt sich in beiden Betriebssystemen als kleines SlideIn ein, das man mit dem Mauszeiger ins Blickfeld fahren lassen kann, wenn man darüber hovert. Bei Windows okkupiert es zusätzlich die Druck-Taste, was die Verwendung besonders bequem macht.

Egal, ob man SnagIt nun per Klick auf den Aufnehmen-Button im SlideIn oder per Druck auf die Druck-Taste aktiviert hat, in beiden Fällen erscheint ein Fadenkreuz, das man nun verwenden kann, um das abzulichtende Motiv zu fokussieren. Dabei hat man mehrere Möglichkeiten, von denen ich in 90 % aller Fälle die einfachste wähle. Ich ziehe die gewünschte Abbildung manuell unter Geklickthalten der linken Maustaste auf und lasse sie dann los. Nach kurzer Bedenkzeit öffnet sich der SnagIt-Editor, in welchem weitergehende Bildbearbeitung, etwa Annotieren und Versehen mit Pfeilen, Sprechblasen oder andere, meist wenig genutzte Funktionen möglich sind.

Hier verwende ich am liebsten die Mac-Version, denn nur diese merkt sich beim Resizen der Screenshots die zuletzt gewählte Größe. Ich klicke auf Edit > Resize Image und müsste jetzt den gewünschten Wert, im Falle von Dr. Web also 640 Pixel eingeben. Da ich den schon hundertfach gewählt habe, ist er bereits vorgetragen, so dass ich nurmehr die Return-Taste drücken muss, um die neue Größe zu bestätigen. Das geht rationell und schnell. Unter File > Save speichere ich den Screenshot im ebenfalls vorausgewählten Standardverzeichnis meiner Wahl.

Da SnagIt mehrere gleichzeitig offene Bilddateien in einer Leistenübersicht am unteren Rand des Editorfensters anzeigt, wäre theoretisch auch ein Workflow denkbar, bei dem ich zunächst alle Screenshots am Stück anfertige und sie dann später im Editorfenster einen nach dem anderen bearbeite. Ich habe jedoch die Erfahrung gemacht, dass ich da leicht durcheinander gerate. Welches ist bereits bearbeitet, welches nicht? Ich mache das daher lieber einzeln und nach jedem neuen Screenshot komplett fertig bis zur Speicherung im Zielordner.

In seltenen Fällen benötige ich Screenshots von geöffneten Navigationsmenüs. Da ist es sehr hilfreich, dass SnagIt die Einstellung einer Verzögerung in Sekunden erlaubt. Ich stelle diese zumeist auf fünf Sekunden ein. So habe ich nach dem Klick auf den Aufnehmen-Button noch fünf Sekunden Zeit, um mit dem Mauszeiger das Navigationsmenü zu öffnen und den entsprechenden Punkt hervorzuheben, bevor das bereits genannte Fadenkreuz den Zustand des Bildschirms zwecks Screenshot einfrieren lässt.

Auch Screenshots, die über den unteren Browserrand hinausgehen, sind mit SnagIt möglich. Entsprechend eingestellt, scrollt SnagIt automatisch bis zum Ende der Seite und legt einen entsprechend großen Screenshot an. Das allerdings benötige ich höchst selten, um nicht zu sagen, praktisch nie.

Neben verschiedenen Tools zur Bildbearbeitung, wie den bereits genannten Pfeilen und anderen Formen, sowie der Möglichkeit, Texte zuzufügen oder Bildbereiche zu entfernen, umzufärben etc. bringt SnagIt eine kleine Effektpalette mit. Hier stehen unter anderem Effekte zur perspektivischen Verzerrung der Shots bereit, was bisweilen wenig imposante Screenshots aufzupeppen vermag. Das Tool bietet mehr Möglichkeiten als ich benötige, ist aber in den Kernbereichen so gut, dass ich bereit war, den “Overhead” mit zu bezahlen.

Mein Standardworkflow mit SnagIt: Programm mit dem Rechner starten lassen, Seite mit gewünschtem Screenshotinhalt ansurfen, SnagIt-SlideIn mit der Maus öffnen und auf Aufnehmen klicken. Danach im Editor die Größe ändern und die Datei speichern. Fertig!

Skitch von Evernote

Bis vor Version 2 war auch das kleine Tool Skitch ganz gut für die genannten Zwecke zu verwenden. Hier hat mich jedoch die vergleichsweise komplizierte Handhabung gestört. Ständig war mir das Schwebefenster der Anwendung im Weg. Zudem gibt es Skitch nur für den Mac (und iOS/Android). Andere schwören, besser schworen auf Skitch. Und es hatte tatsächlich eine Reihe innovativer Features. So konnten Bilder etwa durch das Ändern der Fenstergröße mittels Schieben und Ziehen mit der Maus in der Größe geändert werden. Ganzseitige Shots von langen Websites erstellte man, indem man schlicht die URL auf das Skitch-Fenster zog. Auch zeitversetzte Shots, etwa zur Ablichtung geöffneter Navigationsmenüs beherrschte das Tool.

Alles in Allem: Eine valide Lösung für Entwickler und Redakteure, die eine kostenlose Software bevorzugen, und entweder nicht unter Windows arbeiten oder kein Problem damit haben, dort ein anderes Werkzeug verwenden zu müssen.

Aber Vorsicht: Die aktuelle Version 2 des nun zu Evernote gehörenden Tools entfernt nahezu die komplette bisherige Funktionalität und degradiert Skitch zu einer verkrüppelten Zuliefersoftware für Evernote-Notebooks. Im Netz kursieren allerdings inzwischen Freundschaftssicherungskopien der älteren Version…

Nachträgliche Änderungen der Bildgröße

Sowohl bei den eben ausführlicher thematisierten Screenshots, wie auch naturgemäß bei Fotodateien kommt es ständig vor, dass man die Auflösung noch einmal verändern muss. In meinem Falle ist es so, dass ich für Dr. Web die bereits genannte Pixelbreite von 640 benötige, das Schwestermagazin Noupe jedoch mit einer Breite von 550 Pixeln arbeitet. Will ich einen Dr. Web Beitrag auch unseren englischsprachigen Lesern verfügbar machen, naheliegenderweise inklusive Bebilderung, so muss ich die bereits für Dr. Web fertigen Screenshots nochmals anpacken und auf 550 Pixel in der Breite verkleinern. Natürlich könnte ich das ebenfalls über SnagIt realisieren, jedoch gehe ich einen anderen, weit schnelleren Weg.

Fotos liegen praktisch nie, jedenfalls nur absolut zufällig in der erforderlichen Auflösung vor. Will ich einen Beitrag bestücken, wie etwa “All The Colors Of The Sun”, liegen 60 unterschiedlich breite wie hohe Fotos in meinem Sammelordner. Auch hier könnte ich mit Photoshop oder sogar SnagIt ran, wobei mir Photoshop sogar eine Batchverarbeitung böte. Ich nutze allerdings etwas sehr viel einfacheres.

Shrink-O-Matic von TokiWoki

Shrink-O-Matic ist eine AIR-App, arbeitet also sowohl unter Windows, wie auch unter Mac OS. Das Funktionsprinzip ist total simpel. Man stellt einige Parameter ein und zieht den gesamten, zu bearbeitenden Bilderstapel in das Anwendungsfenster. In meinem Falle sehen die Einstellungen so aus:

Ich lege die maximale Breite auf 550 Pixel fest und lasse die Originaldateien im Rahmen des Änderungsprozesses überschreiben. Sind im Bilderstapel Dateien enthalten, die bereits 550 Pixel oder weniger haben, passiert mit diesen Dateien nichts. Alle anderen werden runterskaliert. Dadurch, dass ich keine Angabe zur Höhe mache, bleibt das korrekte Seitenverhältnis erhalten.

Aktuell ist die Version 2.0. Die App steht zum kostenlosen Download zur Verfügung.

Optimierungen der Dateigröße

Wer bis hierhin dabei geblieben ist, merkt schon, dass ein ganz wesentlicher Schritt noch fehlt, nämlich die Optimierung der Dateigröße. Gerade SnagIt kümmert sich im Standard eher weniger um die erzeugten Dateigrößen, so dass die Screenshots schon mal monumentale Gewichte an den Tag legen können. Möglicherweise könnte ich direkt in SnagIt daran rumtweaken, will ich aber gar nicht. Dafür habe ich zwei perfekte Dienste im Einsatz.

JPEGmini – Kompressor aus Israel

Das israelische Startup ICVT brachte vor einem runden Jahr einen Onlinedienst an den Start, der hochgeladene JPEG-Files, je nach Größe, auf ein Fünftel der Ausgangsgröße verkleinern kann. Das Beachtliche dabei: Die Verkleinerung erfolgt ohne Qualitätsverlust. Der Effekt ist einfach. Je größer die Ausgangsdatei, desto größer das Reduzierungspotenzial. Die auf der Website zu sehenden Beispiele überzeugen. Trotz mehrfacher Größenreduzierung sehen die mit JPEGmini behandelten Bilder exakt so aus wie die Unbehandelten.

Die Vorgehensweise des Algorithmus orientiert sich nach Aussagen der Macher an der visuellen Wahrnehmung des menschlichen Auges. Die Dateien sind auch nach der Behandlung noch Standard-JPEGs. Spezielle Viewer sind demnach nicht erforderlich.

Einzelne Fotos können über den Onlinedienst JPEGmini ohne Registrierung kostenfrei komprimiert werden. Bilderstapel, ganze Alben lassen sich ebenso kostenfrei bearbeiten, dann jedoch nur nach Registrierung. Registrierte Anwender sind zudem in der Lage, aus dem Dienst heraus nach Picasa und Flickr zu senden.

Wenn ich unter Windows unterwegs bin, nutze ich den Onlineservice, der mich auch nach einem Jahr immer wieder aufs Neue zu begeistern weiß. Für Mac OS habe ich mir die kostenlos verfügbare App JPEGmini für Mac aus dem Mac App Store gezogen, die die Funktionalität des Onlineservice nicht nur exakt umsetzt, sondern dabei auch noch unverschämt gut aussieht.

Die 60 Fotografien zu meinem bereits erwähnten Beitrag “All The Colors Of The Sun” rechnete JPEGmini von insgesamt 18 MB auf unter 4 MB herunter. Und dabei waren die Fotos bereits mit Shrink-O-matic zuvor auf die korrekte Breite gebracht worden. Damit löste die App ihr Versprechen, Dateien auf bis zu ein Fünftel der Originalgröße zu reduzieren, fast punktgenau ein.

JPEGmini für Mac ist übrigens extrem simpel zu verwenden. Einstellungsmöglichkeiten gibt es nicht. Es wird immer volle Kompression angewendet, die Originaldateien werden überschrieben. Das sollte man natürlich im Auge behalten und bei wichtigem Bildmaterial nur mit Kopien arbeiten.

TinyPNG – JPEGmini für PNG-Dateien

TinyPNG macht mit PNG-Dateien, was JPEGmini mit JPG-Dateien macht. Es verkleinert sie extrem, ohne dabei sichtbar die Qualität zu reduzieren. Im Falle von PNG ist das insbesondere deshalb eine größere Herausforderung, weil das Format häufig Transparenzen enthält. TinyPNG schafft, was nicht mal Photoshop kann, es bietet indexierte 8-Bit PNG mit voller Transparenz an, die man mit dem bloßen Auge nicht von viel dickeren 24-Bit PNG unterscheiden kann. Kaum zu glauben, aber dennoch wahr, wie ich in unzähligen Selbstversuchen sicher nachweisen konnte.

Der Dienst arbeitet genau wie JPEGmini. Man lädt bis zu 20 Bilder gleichzeitig hoch, die jeweils maximal 1 MB groß sein dürfen. TinyPNG komprimiert diese dann im Stapel, meldet den Bearbeitungserfolg und stellt jeweils einen Downloadlink für das komprimierte PNG zur Verfügung.

Die Entwickler erklären die erstaunlich hohen Kompressionserfolge damit, dass die Reduktion durch das Entfernen überflüssiger Meta-Daten, sowie die selektive Entfernung nicht benutzter Farben aus der Farbpalette erreicht werde. Natürlich handelt es sich um ein verlustorientiertes Verfahren, aber eines, dem man die Verluste mit bloßem Auge nicht ansieht. Die echten Erfolge erzielt TinyPNG mittels Quantisierung, einem in der Bild-, Video- und Musikproduktion längst etablierten Verfahren, welches – vereinfacht ausgedrückt – stark ähnliche Werte zu einem einzelnen kombiniert und so die Dateigröße teils massiv verringern kann.

Die mit TinyPNG erzeugten indexierten 8-Bit PNG funktionieren sogar im IE 6 inklusive der Transparenz, was laut Voormedia bei anders erzeugten PNG nicht der Fall ist. Ebenso übertrifft TinyPNG in diesem Falle Photoshop, das weder in der Lage ist, entsprechende Datei zu lesen, geschweige denn, sie zu erzeugen.

TinyPNG wird völlig kostenfrei angeboten, eine darauf basierende App für Desktop-Betriebssysteme steht bislang nicht zur Verfügung. Manche Zeitgenossen kritisieren die “Terms Of Use” des Dienstes, die dem Betreiber des Dienstes eine Überlassung verschiedener Rechte an dem Bildmaterial zusprechen. Ich bin zwar kein Rechtsanwalt, würde aber mit an 100% grenzender Sicherheit behaupten, dass mit Copy, Store und Modify lediglich die Vorgänge gemeint sind, ohne die der Service seinen Nutzern den Dienst überhaupt nicht anbieten könnte. Mit anderen Worten: Wenn TinyPNG Ihre Bilder nicht modifizieren, kopieren und speichern dürfte, dann könnte er sie auch nicht verkleinern und bereit stellen.

Ich verwende TinyPNG, Sie können es sich denken, für alle PNG-Dateien, was nahezu meinen gesamten Bedarf abbildet. JPEGmini ist da im Vergleich um ein Vielfaches seltener im Einsatz. Da TinyPNG ein Webservice ist, kann ich ihn sowohl unter Mac OS, wie auch unter Windows einsetzen. Leider können Dateien zwar im Batch hoch, jedoch nicht herunter geladen werden. Das macht die Arbeit bei vielen Dateien etwas zäh, andererseits habe ich noch keine bessere Alternative gefunden, weshalb ich mich mit dem holprigen Workflow vorerst arrangieren muss.

ImageOptim – Kostenloser Tausendsassa für Mac OS

Mac-Anwender können mit ImageOptim, das inzwischen in Version 1.4 vorliegt, eine völlig kostenlose App erhalten, die neben JPEG und PNG auch noch GIFs, sogar animierte, komprimieren kann. Dazu kombiniert es verschiedene Methoden unter einer Haube. Die Einstellungsmöglichkeiten sind übersichtlich. Sinnvollerweise setzt man bei allen Formaten die Kompressionsrate auf Maximum und harrt der Dinge, die da kommen werden.

Meine Erfahrungen mit der App sind durchwachsen. Schön ist natürlich ist die Drop-Funktionalität. Man wirft einen Stapel Bilder in das App-Fenster, sortiert es noch nicht einmal nach Formaten und lässt ImageOptim gewähren. In meinen Tests wartete ich stets recht lange auf die Ergebnisse, wodurch der Vorteil der Batchverarbeitung für mich schon einmal verloren ging. Und dann waren die Ergebnisse, weder bei JPEGs, noch bei PNG und dort ganz besonders nicht konkurrenzfähig im Vergleich zu JPEGmini und TinyPNG.

Die folgenden Screenshots zeigen das für diesen Artikel verwendete Imageset. Einmal komprimiert mit ImageOptim, einmal mit TinyPNG. Die Unterschiede sind einmal mehr sehr deutlich:


ImageOptim mit mäßigem Erfolg: Die KB-Werte sind schon die Werte nach Komprimierung.


TinyPNG bringt deutlich bessere Kompressionserfolge.

Sicherlich ist ImageOptim besser als nichts und ich habe von Entwicklern auch schon andere Erfahrungen gehört, ich persönlich jedoch kann ImageOptim derzeit nicht empfehlen.

Fazit: Das ist mein überschaubarer Ablauf bei der Erstellung von webtauglichen Bebilderungen. Für diesen Beitrag musste ich erstmals SnagIt und Skitch kombinieren, auch eine interessante Erfahrung. Womit wickeln Sie Tätigkeiten wie die hier beschriebenen ab?

Links zum Beitrag:

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Andre
Gast

Moin.. schöne zusammenstellung, was mich wundert ist das extrem geniale Fireshot für den Firefox und Internet Explorer nicht vorgestellt wird, das kann zwar “nur” Screenshoots von Websites machen, das aber mit atemberaubender Leichtigkeit und vielen Funktion.

Gruß aus HH

Dieter Petereit
Gast

Hallo Andre!

Das ist einfach erklärt. Dieser Beitrag beschreibt meinen Workflow und ich nutze Fireshot nicht.

Gruß
Dieter Petereit

Torsten
Gast

Die Anmerkung zu TinyPNG:

aber eines, dem man die Verluste mit bloßem Auge nicht ansieht.

kann ich nicht bestätigen. Bei Fotos sieht man die Umwandlung von 24Bit zu 8Bit enorm. Die Foto sehen aus wie “gerastert”. Aber anstatt über irgendwelche Filter kann man durch so ein Austauschbild den IE6 unterstützen, was je nach Projekt, durchaus sinnvoller sein kann.

Die Komprimierung/Optimierung von ImageOptim ist vielleicht nicht so effektiv, aber *tatsächlich* nicht mit dem bloßen Auge zu erkennen.

steve
Gast

evtl. auch interessant ist http://www.screenbutler.de … dort können user on the fly auf einer x-beliebigen website einen screenshot machen und den entsprechendem redakteur zukommen lassen.

Daniel
Gast

Hallo!

Danke für den Artikel! Ich weiß, dieser Beitrag beschreibt Deinen Workflow und Du stellst natürlich die Tools vor, die Du nutzt. Ich nutze allerdings vorwiegend Linux und es wäre schön, wenn in so einem Beitrag auch mal Linux-Tools vorgestellt würden.

Gruß
Daniel

wpDiscuz