Das waren noch Zeiten, als das Grafikprogramm Fireworks Mass aller Dinge für die Gestaltung fürs Web war. Lange hat es gedauert, bis das Tool einen, wie wir finden, würdigen Nachfolger erhalten hat. Geliefert hat sie uns die Softwareschmiede Bohemian mit Sketch, das mittlerweile bereits in Version 42 erschienen ist. Wir verlosen 5 Exemplare des Buchs «The Sketch Handbook» aus der Smashing Magazine-Kollektion.

Sketch, das Tool für UI-, UX- und Webdesigner

Wer heute fürs Web designt kommt an Sketch nicht vorbei. Das Grafikprogramm hat sich dank vielen praktischen Funktionen zum Liebling von Frontend-Designern gemausert. Falls Sie uns bei Twitter folgen oder unsere Linktipps per E-Mail abonniert haben, werden Sie es möglicherweise bereits bemerkt haben: Wir mögen Sketch. Diese Affinität kommt nicht von ungefähr. Sketch hat in unseren Teams die Adobe-Palette von Grafiktools grösstenteils abgelöst. Sei das für das Design von Interfaces oder das Kreieren von Bildern für Blog und Social-Media.

«The Sketch Handbook»

Das Buch «The Sketch Handbook» aus dem Hause Smashing Magazine bietet sowohl für Sketch-Einsteiger als auch -Kenner wertvollen Lesestoff. Autor Christian Krammer ist ausgewiesener Sketch-Profi und betreibt die Website sketchtips.info auf der er Tipps, Gedanken und Insights zu seiner liebsten Design-App publiziert.

In 12 Kapiteln führt Sie Christian durch alle Aspekte von Sketch: Von Smart-Guides über Ebenenmanipulationen zu responsiven Baseline-Grids und verschachtelten Symbolen. Und das nicht anhand theoretischer Szenarien sondern mit Beispielen aus der realen Welt. Eine grosse Rolle spielen dabei effiziente Workflows. Christian zeigt, wie Sie mit Keyboard-Shortcuts und dem cleveren Nutzen von verfügbaren Funktionen am schnellsten zum gewünschten Resultat kommen.

«The Sketch Handbook» darf in keiner Webdesigner-Sammlung fehlen. Mit ein bisschen Glück schicken wir Ihnen schon bald eines der 5 Exemplare zu. Für jede der folgenden Aufgaben erhalten sie eines oder mehrere Lose und nehmen so an der Verlosung teil:

Verlosung: 5 x 1 Exemplar des Buches «The Sketch Handbook»

Hinweis: Um teilzunehmen, müssen nicht alle Optionen gewählt werden.

Teilnahmebedingungen

• Verlost wird 5 x 1 Exemplar des Buches «The Sketch Handbook» von Christian Krammer. Eine Barauszahlung des Preises ist ausgeschlossen.
• Teilnahmeschluss ist der 24.02.2017, 17:00 Uhr.
• Teilnahmeberechtigt sind alle Personen die das 18. Altersjahr vollendet haben. Mitarbeiter der cyon GmbH sind von der Teilnahme ausgeschlossen.
• Die Gewinner werden nach Teilnahmeschluss mithilfe von Rafflecopter per Zufallsgenerator bestimmt und per E-Mail informiert.
• Der Teilnehmer erklärt sich einverstanden, dass sein Name im Fall des Gewinns auf der Website und den Social-Media-Profilen der cyon GmbH veröffentlicht wird.
• Wir behalten uns vor, die Verlosung jederzeit zu ändern, anzupassen oder zu beenden und Teilnehmer bei Missbrauch nachträglich von der Teilnahme auszuschliessen.
• Über die Verlosung wird keine Korrespondenz geführt. Der Rechtsweg ist ausgeschlossen.

Der Stein, den die kostenlosen SSL-Zertifikate von Let’s Encrypt ins Rollen gebracht hat, lässt sich nicht mehr stoppen. Verschlüsselte Verbindungen zu Websites werden der neue Standard sein. Mit den neusten Versionen der Browser Firefox und Chrome werden Login- und Kreditkartenformulare als unsicher markiert, wenn diese nicht durch ein SSL-Zertifikat geschützt sind.

Schrittweise Angewöhnung

Konsequenterweise müssten alle Websites, die nicht per HTTPS aufgerufen werden, als unsicher markiert werden. Doch ein Überfluss an Warnungen kann abstumpfen und der gewünschte Effekt verpufft. Deshalb haben sich die Entwickler der beiden Browser für eine schrittweise Angewöhnung der Nutzer an den zukünftigen Normalzustand entschieden.

Unsichere Login-Formulare werden markiert

Zu den Informationen, mit denen Angreifer den grössten Schaden verursachen können, gehören Passwörter und Kreditkarten-Daten. Darum werden ab Chrome 56 und Firefox 51 Websites neu als unsicher eingestuft, wenn sie über unverschlüsseltes HTTP geladen werden und Formularfelder enthalten, in denen Login- oder Kreditkarten-Daten abgefragt werden. Und so sieht das aus:

Warnung vor unsicheren Login-Formularen in Firefox.

Warnung vor unsicheren Login-Formularen in Chrome.

Die Entwickler von Firefox planen zudem, Nutzern direkt in den Formularfeldern eine Warnung anzuzeigen, wenn diese unsicher sind:

Firefox: Geplante Warnung in unsicheren Formularfeldern.

HTTPS: Schutz vor Manipulation

Dass SSL-verschlüsselte Verbindungen Vertrauen schaffen, von Google bevorzugt werden und Voraussetzung für das schnellere Protokoll HTTP/2 sind, ist bekannt. Ein Aspekt von HTTPS ist bislang jedoch nicht allzu oft beleuchtet worden, verdient aber unbedingt mehr Beachtung: Schutz vor Manipulation.

Websites, die Sie über eine unverschlüsselte Verbindung aufrufen, können prinzipiell auf dem Weg zu Ihnen verändert worden sein. Oder Ihr Internet-Provider lässt zusätzliche Werbung anzeigen.

Oh @Fly_Norwegian … you didn't just do that?!? /cc @troyhunt pic.twitter.com/1QpsOlUDxX

— David Peter Hansen (@DPHansen) January 10, 2016

Schützen Sie Besucher Ihrer Website vor solchen Manipulationen. Dank Let’s Encrypt sind die benötigten SSL-Zertifikate nur noch einen Mausklick entfernt.

Auch wenn die verfügbaren Bandbreiten von Internetanschlüssen immer grösser werden: Dateigrössen zu optimieren lohnt sich. Je weniger Bits über das Netz verschickt werden müssen, umso besser. Gerade bei Bildern ist oft noch Optimierungspotenzial vorhanden. Das Bildformat WebP soll besser als JPEG und PNG sein. Doch stimmt das wirklich?

Die Geschichte

WebP wurde 2010 erstmals der Öffentlichkeit vorgestellt und seither konstant weiterentwickelt. Hinter dem Projekt steht Google, das mit dem Videoformat VP8 den Grundstein für das neue Bildformat gelegt hatte.

WebP unterstützt sowohl eine verlustbehaftete (lossy) als auch eine verlustfreie (lossless) Komprimierung und kann für statische und animierte Bilder genutzt werden. Damit kann WebP die drei im Web genutzten Bildformate JPEG, PNG und GIF ersetzen.

Wieviel spart WebP ein?

Google hat im Vergleich zu JPEG im Schnitt 25%-34% kleinere Dateigrössen gemessen. Und das bei gleichem SSIM-Index. Das heisst, die WebP-Bilder verfügen trotz kleinerer Dateigrösse über die gleich wahrgenommene Qualität wie die JPEG-Versionen.

Gegenüber PNGOUT, das PNG-Dateien komprimiert, hatten die Google-Ingenieure Dateigrösseneinsparungen von durchschnittlich 26% gemessen. Vor allem für bildlastige Websites ein schlagendes Argument für WebP. Mit den Tools ImageAlpha und ImageOptim konnten wir in unseren Tests jedoch noch kleinere Dateien im PNG-Format erzeugen, als das mit WebP der Fall war.

Kritik von Experten

Längst nicht alle Experten sind von WebP überzeugt. Kritiker zweifeln den Nutzen des Dateiformats im Alltagsbetrieb an. So sind WebP-Dateien zwar kleiner als Dateien, die ihre älteren Konkurrenzformate produzieren, verbrauchen auf dem Gerät des Betrachters hingegen auch mehr Rechenzeit bei der Darstellung. Unter Umständen schmilzt damit der durch die geringere Dateigrösse erzielte Geschwindigkeitsvorteil dahin.

Ausserdem wird kritisiert, dass mit neueren Algorithmen auch mit JPEG und PNG vergleichbar kleine Dateigrössen möglich sind. Ein weiteres Format sei damit unnötig. Die noch geringe Verbreitung zeigt sich auch im Livebetrieb: Benutzer kennen JPEG und PNG und können die Formate mit all ihren Geräten anzeigen. WebP hingegen wird nur von den Browsern Chrome und Opera ohne Plugins verstanden. Schickt ein Benutzer z.B. ein WebP-Bild per E-Mail an einen Empfänger, kann dieser oft nichts mit der Datei anfangen.

WebP auf der eigenen Website nutzen

Mit wenig Aufwand können Sie den Besuchern, die mit einem WebP-kompatiblen Browser unterwegs sind, die passende Datei anzeigen. So funktioniert’s:

Mit WordPress

Für das beliebteste CMS unserer Kunden stehen zwei Plugins zur Verfügung, mit denen sich mit wenigen Klicks WebP-Support einbauen lässt. Kombinieren Sie das Bildoptimierungsplugin Optimus und das Caching-Plugin Cache Enabler um ganz einfach WebP-Bilder auszuliefern, wenn der Browser Ihres Besuchers das Dateiformat unterstützt.

Übrigens: Wir nutzen Optimus und Cache Enabler in unserem Blog. Wenn Sie diesen Beitrag mit Chrome oder Opera lesen, sind die Bilder im WebP-Format eingebunden.

Mit Joomla

Im Einsatz mit Joomla hilft das Plugin WebP for Joomla. Es konvertiert zum einen Bilder aus den Formaten JPEG und PNG und stellt zum anderen sicher, dass die Dateien nur an Browser ausgeliefert werden, die das Format unterstützen.

Das Plugin setzt für die Umwandlung auf die GD Library, die bei allen von uns angebotenen PHP-Versionen integriert ist und den nötigen WebP-Support mitbringt.

Unterstützung selbst erkennen

Ob Ihre Besucher mit einem Browser unterwegs sind, der WebP unterstützt, können Sie mit einer Rewrite-Regel in der .htaccess-Datei erkennen:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Quelle: Ilya Grigorik

Kann der Browser WebP darstellen, erhält er mit dieser Regel automatisch das Bild mit der passenden Dateiendung. Das bedingt, dass Sie Ihre Bilder zusätzlich im WebP-Format auf dem Server ablegen. Am einfachsten erreichen Sie das mit einem Dienst wie Optimus, der sich über eine API ansprechen lässt und bestehende JPEG- und PNG-Bilder nach WebP konvertiert. Oder Sie konvertieren die Bilder bereits, bevor Sie sie auf den Server laden. Eine ganze Menge von Bildbearbeitungsprogrammen unterstützt WebP übrigens von Haus aus. Darunter Apps wie Sketch, Pixelmator und GIMP. Bringt Ihre favorisierte Software keine native Unterstützung mit, lässt sie sich oft mit einem passenden Plugin erweitern.

Fazit

Die Formate PNG und JPEG mag WebP zwar nicht komplett ersetzen, dazu fehlt die nötige Unterstützung in Browsern wie Firefox, Safari oder IE. Nutzen Sie ein Content-Management-System wie WordPress oder Joomla, genügt aber bereits die Installation eines Plugins um Ihre Website mit WebP auszustatten und je nach Besucher die passende Datei auszuliefern.

Steht für Ihr CMS kein Plugin zur Verfügung oder bauen Sie Ihre Website manuell? Dann ist der Aufwand ein wenig grösser, um WebP in Ihren Workflow einzubauen. Dieser Zusatzaufwand lässt sich jedoch gut automatisieren.