kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Bilder & Grafiken


Responsive Image Replacement mit Breakpoints: Doubletake

Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.

Beitrag zu Ende lesen

Bessere Bildkompression mit Kraken

Performance-Optimierung zählt zu den wichtigsten Arbeitsbereichen eines Webdesigners. Es ist zwar manchmal etwas lästig die Website zu optimieren, vernachlässigen sollte man es deswegen aber nicht. Eine Möglichkeit die Ladezeit der Website zu verringern, ist die stärkere Kompression von Bildern. Vielleicht erinnert ihr euch noch daran, dass ich die Online-Komprimierungsdienste JPEG Mini, Smush It und Puny PNG verglichen habe. Nun möchte ich euch auf ein weiteres Tool aufmerksam machen: Kraken.

Beitrag zu Ende lesen

Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Beitrag zu Ende lesen

Einfachere CSS-Sprites mit ‚Sprite Cow‘

Ich habe euch vor einiger Zeit einen Online Generator für CSS-Sprites vorgestellt der sowohl die grafische Sprite, als auch den entsprechenden CSS-Quellcode generiert. Heute möchte ich euch auf ein alternatives Tool aufmerksam machen, das bei mir einige Wochen ein Leben als ungenutztes Lesezeichen fristen musste. Zu unrecht wie sich gestern herausstellte.
Sprite Cow ist kein Online-Generator im eigentlichen Sinn - vielmehr erleichtert er die Arbeit mit Sprites ohne, dass einem die Arbeit komplett abgenommen wird. Und genau hier liegt in meinen Augen der entscheidende Vorteil.

Beitrag zu Ende lesen

Transparentes Rauschen: Photoshop und CSS3

Photoshop CSS3

Moderne Websites realisieren mittlerweile einen Großteil der grafischen Elemente vollständig über CSS3. Hierbei stehen die Möglichkeiten von CSS3 denen von Photoshop in nichts nach, und es lassen sich mitunter sehr beeindruckende Effekte erzielen.
Leider wirken über Code erstellte Grafiken häufig zu glatt und zu einheitlich, was den fotorealistischen Gesamteindruck negativ beeinflusst. Es liegt ja gerade im Trend dezente Strukturen einzusetzen und so dem Design etwas mehr "Griff" zu geben. Was also tun? Die Lösung ist eine Kombination aus Photoshop-Pattern und CSS3.
In diesem Tutorial möchte ich euch zeigen, wie ihr zunächst eine transparente Struktur in Photoshop erstellt, und diese anschließend auf CSS3-generierte Objekte anwenden könnt.

Beitrag zu Ende lesen

Stock-Images sollten bewusster verwendet werden!

stock.image-krefeld-screenshot

Für viele Projekte, sei es nun eine Website oder ein Plakat, eine Broschüre oder auch nur das Icon einer App, benötigen wir Bildmaterial. Wenn seitens des Kunden keine Unterlagen zur Verfügung gestellt werden können, greifen wir meist auf so genannte Stock-Image-Portale zurück. Auf diesen Seiten kann aus tausenden von Fotos das passende Bildmaterial ausgesucht und anschließend gekauft werden. Die Qualität der Fotos ist meist auch sehr gut, so dass Designern hier ein wirklich brauchbares Hilfsmittel an die Hand gegeben wurde. Allerdings werden Stock-Images zu dem Zweck fotografiert, möglichst oft verkauft zu werden und wirken daher häufig sehr allgemein.
Trotz recht guter Voraussetzungen werden im Umgang mit Stock-Images jedoch unnötige Fehler gemacht, und so die Qualität des Endproduktes negativ beeinflusst. Worauf Ihr meiner Meinung nach achten solltet, möchte ich in diesem Artikel, anhand einiger Beispiele, erläutern.

Beitrag zu Ende lesen