Bilder und Grafiken für das Web: JPG, PNG, SVG, GIF?

Dateiformate

Nicht selten stelle ich fest, dass Kunden in Einzelfällen falsche Dateiformate für Bilder und Grafiken verwenden. Einer der häufigsten Fehler ist sicherlich, das PNG-Format für Fotos zu nutzen. Dadurch entstehen unnötig hohe Dateigrößen und dementsprechend längere Ladezeiten.

Dass man Bilder und Grafiken möglichst nicht größer einbinden sollte, als sie auf der Website auch angezeigt werden, ist allgemein bekannt. WordPress und oftmals auch Themes erstellen beim Hochladen mehrere Formate, die man sinnvoll nutzen kann. Aber: Das ist im Zeitalter von hohen Auflösungen / Retina schon wieder überholt. Die kristallklare Darstellung hat ihren Preis, Bilder und Grafiken sollten etwas größer eingebunden werden.

Oftmals kommt die Frage auf, wie groß man Bilder in Fullwidth-Slidern maximal einbinden sollte. Ich empfehle in der Regel nicht mehr als 1.500-2.000 Pixel Breite. Sollten Bilder dann unschön aussehen, kann man einen Pixel-Overlay darüber legen. Das kennt man von Fotografie-Websites im Vollbildmodus.

Kommen wir nun zu den verschiedenen Dateiformaten:

JPG / JPEG

Das Dateiformat für Fotos. JPGs sind gut komprimierbar, am bekanntesten ist die JPG-Qualitätsoption in Photoshop von 1-12 (maximale Qualität). Das Foto oben in einer Größe von 1500 x 1000 Pixeln hat in der maximalen Qualitätsstufe 12 eine Dateigröße von 1.300 KB. Komprimiert man das Foto auf Qualitätsstufe 9, ist das Foto nur noch 430 KB groß. Die Stufen unter 9 führen meist zu unschönen Artefakten. Eine umfangreichere Komprimierungsfunktion ist das „Für Web speichern“ in Photoshop. Damit lässt sich noch mehr herausholen.

Wichtig zu sagen ist noch, dass eine JPG-Datei bei jedem Öffnen und Speichern in einem Bildbearbeitungsprogramm neu komprimiert wird. Die Qualität nimmt also bei jeder Bearbeitung weiter ab.

Auch erwähnenswert ist, dass die Dateigröße von der Menge an Details abhängig ist. Ein Foto von blauem Himmel ist viel kleiner als ein Foto von einer herbstlichen Wiese voller Laub.

PNG

Das Dateiformat für (simple) Grafiken wie zum Beispiel Logos. Gute Qualität, verhältnismäßig kleine Dateigröße, und vor allem: PNG können transparent sein, was im Webdesign in einigen Fällen benötigt wird. Auch bei PNG gilt: je detailreicher, desto höher ist die Dateigröße.

Auf keinen Fall sollte man den Fehler machen, Fotos als PNG einzufügen: Aus dem oben genannten JPG-Foto mit 430 KB werden beim Speichern als PNG gleich 2.200 KB.

SVG

SVG sind verlustfrei skalierbare, schlanke Vektordateien, die für Grafiken wie Logos und Icons gut geeignet, aber dennoch (noch) nicht stark verbreitet sind.

GIF

GIF-Dateien können simple Animationen beinhalten, aber nur 256 Farben darstellen. Das führt zu dem punktierten Aussehen. Auf Websites sind GIFs kaum noch anzutreffen, in sozialen Netzwerken schon eher.

Tipps für die Farbschemata im WordPress-Dashboard

Farbschemata

Seit WordPress 3.8 kann man im Menü unter „Benutzer“ / „Dein Profil“ zwischen acht verschiedenen Farbschemata für das Dashboard wählen. So kann man sich nicht nur die Arbeit mit seinen Lieblingsfarben verschönern – es gibt auch noch ganz praktische Verwendungszwecke:

  1. Farbliche Unterscheidung von verschiedenen Accounts: Als Administrator hat man manchmal verschiedene Accounts, die man so gut auseinander halten kann – man verliert sich nicht mehr.
  2. Farbliche Unterscheidung von Live- / und Testumgebung: Bei größeren Websites und Shops hat man oft eine Live- und eine Testumgebung, die sich in der URL nur minimal unterscheiden – z.B. als dev.-Subdomain oder in einem dev-Verzeichnis. Da kann es zu folgenschweren Verwechslungen kommen. Nicht aber, wenn man sie farblich unterscheidet.

mehr

Natürlich muss nicht bei 8 Farbschemata Schluss sein: Mit dem Plugin Admin Color Schemes vom WordPress-Team kann man sich ganz einfach 8 weitere sorgfältig kombinierte Schemata installieren. Wenn man es selbst probieren möchte, ist das Plugin Admin Color Schemer empfehlenswert – damit hat man eine freie Wahl. Dashboard-Branding in Firmen-Farben? Kein Problem. Schöne Schemata kann man sich ansonsten auch bei Adobe Color zusammenstellen – oder sich hier inspirieren lassen.

WordPress 3.8: das neue Dashboard-Design

Das Design der Administrationsoberfläche von WordPress hatte eine Generalüberholung nötig, das muss man als Nutzer und Designer sagen – auch wenn es längst nicht so altbacken aussah wie die Backends anderer populärer CMS. Mit WordPress 3.8 (heute erschienen) erstrahlt WordPress in neuem Glanz: Das Redesign hat es in sich.


Alt und neu

Beginnen wir mit einem kleinen Vergleich zwischen 3.7 und der neuen Oberfläche in 3.8:

Dashboard-Design

Dashboard-Design neu

Flat, kontrastreich, luftig und mit neuer Typo (Open Sans).


Neue Farbschemata

Nutzer haben nun die Wahl zwischen acht verschiedenen Farbschemata (einzustellen unter Benutzer / Dein Profil).

Farbschemata


Überarbeitete Widget- und Theme-Verwaltung

Die Widget-Verwaltung war vielen Nutzern ein Dorn im Auge. Nun wurde sie, wie auch die Theme-Verwaltung, grundlegend verbessert.

Widgets

Widgets


Absolut responsive

Das Dashboard passt sich jetzt jeder Auflösung perfekt an – egal auf welchem Gerät.

responsive


Und mehr…

An vielen weiteren (kleinen) Stellen wurde die Nutzerfreundlichkeit verbessert. Chapeau!

Das neue Dashboard-Design schon jetzt – per Plugin

Das Design der Administrationsoberfläche von WordPress ist anderen, populären CMS um Längen voraus – aber auch nur, weil diese oft im benutzerunfreundlichen Uralt-Stil von Version 1.0 daherkommen. Auch das Dashboard von WordPress bedarf einer Generalüberholung, das muss man als Nutzer und Designer sagen.

Das Redesign, welches mit WordPress 3.8 kommen soll, kann man sich schon jetzt holen, und zwar über das Plugin MP6. Ich habe das Design schon länger testweise im Einsatz – anfangs gefiel es mir nicht wirklich, aber es wurde und wird laufend verbessert und inzwischen gefällt es mir extrem gut. Neuerdings gehören auch Darstellungsfehler der Vergangenheit an: Jetzt kann ich es empfehlen.

Hier ein kleiner Vergleich zwischen WordPress 3.7 und der neuen Oberfläche.

Dashboard-Design

Dashboard-Design neu

Flat, kontrastreich, luftig und mit neuer Typo (Open Sans).

Design-Trend Flat Design und WordPress-Themes

Flat Design ist ein frischer, moderner Design-Trend, der zwar nicht neu ist, sich in der jüngsten Zeit aber immer stärker verbreitet – vor allem dank Microsoft. Microsoft hat Flat Design zwar nicht erfunden, aber mit Windows 8, Software und der neuen Website massiv unter die Leute gebracht. Heute sieht man immer mehr Websites im flachen Stil, insbesondere natürlich auch WordPress-Themes.

Was zeichnet Flat Design aus?

Beim Flat Design wird weitgehend auf Texturen, Farbverläufe, Glanzeffekte, Schatten und 3D-Elemente (wie Buttons) verzichtet, stattdessen ist alles flach, minimalistisch, großzügig – und häufig bunt. Also das komplette Gegenteil des „Skeuomorphic Design“, welches die „Wirklichkeit“ darstellen will und überladen ist wie ein unaufgeräumter Schreibtisch.

Vergleich

Den Unterschied sieht man am besten an dieser Gegenüberstellung:

Flat Design

WordPress-Themes

Hier einige brandneue WordPress-Themes im Flat Design.

Anubis

Anubis – Responsive Portfolio & Blog Theme

Tfingi

Tfingi • Responsive Multipurpose WordPress Theme

Raider

Raider – Responsive Portfolio & Blog Theme

Showy

Showy – Bold & Flat Portfolio

Pitch

Pitch Creative Showcase

Bloq

Bloq: Responsive and Multipurpose Flat Theme

PrimaShop

PrimaShop – Clean WooCommerce WordPress Theme

Minett

MINETT – WordPress Responsive Theme

Vis

Vis – Responsive & Retina Ready Blog Theme

Wryter

Wryter – Simple Personal Blog