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.

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

30 frische Google Web Fonts für 2013

Google Web Fonts haben Typografie im Web revolutioniert. Es gab zwar schon vorher die Möglichkeit, beliebige Schriften ins Web zu bringen – und natürlich gibt es auch kommerzielle Anbieter. Aber dank Google Web Fonts wurden Web-Schriften massentauglich: eine große Menge kostenloser Schriften, besonders einfach einzubinden, performant und suchmaschinenfreundlich. Heute sind Google Web Fonts sogar in vielen WordPress-Themes integriert – und zwar nicht nur einzelne Fonts, sondern gleich alle zur Auswahl.

In diesem Artikel möchte ich 30 frische Google Web Fonts für 2013 vorstellen. Brandneue Fonts, wenig bekannte Fonts und Geheimtipps – mal ganz ohne Klassiker wie Open Sans oder Droid Serif!

Sans Serif

ABeeZee

Average Sans

Doppio One

Dosis

Exo

Gafata

Gudea

Julius Sans One

Numans

Oxygen

Questrial

Roboto

Scada

Signika

Titillium-Web

Serif

Alice

Amethysta

Andada

Average

Bitter

Brawler

Buenard

Cinzel

Esteban

Fenix

Lustria

Marcellus

Petrona

Radley

Trykker

10+ Webdesign-Trends für 2013

Das Jahr 2012 neigt sich dem Ende zu und das ist eine gute Zeit, den Blick auf Webdesign-Trends zu werfen – die sich zwar nicht an Jahren festhalten, aber trotzdem da sind.

Eigentlich wollte ich schreiben, dass die Zeit der Extreme vorbei ist. Zu starke Rundungen, Verläufe und Gloss sind ja längst out, aber auch noch aktuelle Extreme wie zu starke Schatten und Texturen, zu große Vektorgrafiken und sogar übertriebener Minimalismus sind im Verschwinden begriffen. Was bleibt sind stimmige, klare Websites mit großen Bildern, viel Platz und exzessivem Einsatz von Webfonts. Bei genauer Betrachtung wurden Extreme abgeschwächt und durch neue ersetzt. Aber die sind wirklich gut!

Werfen wir einen Blick auf aktuelle Trends, garniert mit WordPress-Theme-Beispielen.


große Bilder

Websites mit großen Hintergrundbildern oder riesigen Slidern sind ganz klar im Trend. Auch wenn ich persönlich Vollbild-Websites von Fotografen nicht mehr so wirklich sehen kann – es gibt auch andere, außergewöhnliche Anwendungsbeispiele, wie nachfolgend zu sehen (klick, auch auf Unterseiten).

Colorbow, CosmoThemes


außergewöhnliche Slider

Gewöhnliche Slider sind langweilig geworden – fast unerträglich sind inzwischen Modelle mit einem fetten Schatten darunter. Inzwischen sieht man dagegen häufiger toll integrierte Slider, die außergewöhnlich sind – z.B. mit wechselnden Hintergrundbildern und -farben, ungewöhnlich animierten Slides und Fortschrittsbalken.

Seekr, Themes Kingdom


Überraschung!

Es beeindruckt einen Nutzer, wenn etwas passiert, womit er nicht rechnet – allerdings darf er dabei keinesfalls verärgert werden. Ein positives Beispiel ist Scrollider von WooThemes: Scrollt man herunter, fährt der Contentbereich nach oben über den Slider, der seine Position behält. Einfach klasse.

Scrollider, WooThemes


volle Platz-Nutzung

Responsive Design ist Standard geworden und kann kein Trend genannt werden. Mehr und mehr werden die Bildschirme jedoch auch voll ausgefüllt, nicht nur mit Hintergrundbildern und Slidern. Das eignet sich allerdings nicht für jede Website, auf Usability (insbesondere Text-Lesbarkeit) muss geachtet werden.

Ink, Theme Trust


viel Whitespace

Noch mehr Freifläche, das ist auch modern. Und schön für die Strukturierung.

Hustle, WooThemes


Scrollen

Viele Inhalte auf einer Seite untereinander, klar voneinander abgetrennt – ein ganz heißer Trend, der uns 2013 noch öfter begegnen wird.

Blox, ThemeZilla


Flat Design

Minimalismus geht auch farbig, zumindest mit Farbspritzern. Schwarz-weiß ist langweilig geworden. Mit Farben können Nutzer wunderbar geleitet werden.

Venture, WPZOOM


Typografie

Ein ganz besonders wichtiges Thema. Dank der großen Verbreitung von Google Web Fonts wirken Websites, die Arial oder andere Standardschriften einsetzen, inzwischen ziemlich altbacken. Natürlich darf man es mit den Schriften auch nicht übertreiben. Hochwertig müssen sie sein, nicht wild kombiniert (chaotisch und problematisch in Sachen Ladezeit), sondern schön stimmig. Gute Beispiele gibt es da viele. Aber Vorsicht: Sehr häufig genutzte Schriften sind schnell wieder out. Individualität ist wichtig.

Mustache, cssigniter


hinterlegte Headlines

Nicht ganz neu, bis vor einer Weile aber nur spärlich anzutreffen: Headlines mit einem starken, farbigen Hintergrund.

Gadgetry, ThemeFuse


leichte Schatten

Mit den Schatten übertreibt man es nicht mehr. Ganz leichte Schatten sind aber noch gerngesehen.

Sentient, WooThemes


leichte Texturen

Ähnlich wie bei den Schatten sieht es auch mit Texturen aus. Vor einer Weile waren sie gern noch extrem, heute sind sie oft da, aber leicht und kaum erkennbar. Im Gesamtbild machen sie sich aber bemerkbar.

Diggity, CosmoThemes


noch immer Kreise

Kreise und Bullaugen werden heiß geliebt und sind noch immer nicht out.

Horizon, WPZOOM


und mehr

Feststehende Navigationen, Parallax Scrolling und Single-Page-Design sind seltsamerweise noch immer Randerscheinungen. Vielleicht kommt der endgültige Durchbruch 2013?

Habe ich noch etwas vergessen?