kulturbanause Blog

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

Bilder & Grafiken


Bilder für Websites exportieren – Dateiformat, Optimierung, Farbraum

Bilder für eine Website müssen im richtigen Dateiformat gespeichert und möglichst gut optimiert werden. Ist das nicht der Fall, wird die Website zu »schwer« und lädt länger. Eine langsame Ladezeit wiederum wird von Suchmaschinen schlechter bewertet. Auch die User Experience wird beeinträchtigt.

Es gibt zahlreiche Grafik-Dateiformate die im Web eingesetzt werden können. Alle haben ihre Vor- und Nachteile. Für das beste Ergebnis sollte das passende Dateiformat gewählt und das Bild korrekt exportiert werden. Wir geben einen Überblick was beachtet werden muss.

Beitrag zu Ende lesen

Bilder und Grafiken im WebP-Format exportieren

Bilder und Grafiken gehören zu den Schwergewichten, wenn es um die Optimierung der Website-Ladezeiten geht. Im Verhältnis zu anderen Bereichen einer Seite kann mit Bild-Optimierung überdurchschnittlich viel Last eingespart werden. Es lohnt also i.d.R. hier Aufwand zu betreiben. Das Bild-Dateiformat WebP existiert bereits seit geraumer Zeit, und rückt nun dank deutlich verbessertem Browser-Support wieder in den Fokus. Wir zeigen wie und in welchen Programmen WebP-Grafiken exportiert werden können.

Beitrag zu Ende lesen

Schriftgrößen in vw – Bilder mit Texten proportional skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.

Beitrag zu Ende lesen

Bildunterschriften mit CSS immer perfekt ausrichten

Die Gestaltung von Bildunterschriften kann mitunter lästig werden. Es ist schwierig zu entscheiden ob der Text zentriert oder linksbündig unter dem Bild angezeigt werden soll, da die Textmenge oft stark variiert. Zentrierte Bildunterschriften sehen bei kurzen Texten gut aus. Linksbündig passt besser wenn die Bildunterschrift mehrere Zeilen umfasst. Was also tun?

In diesem Beitrag findet ihr ein CSS-Snippet, dass automatisch dafür sorgt, dass kurze Bildunterschriften zentriert werden, und mehrzeilige Bildunterschriften linksbündig ausgerichtet werden.

Beitrag zu Ende lesen

Hintergrund-Grafiken mit CSS positionieren

Mit CSS lassen sich Hintergrund-Grafiken einbinden und positionieren. Welche Möglichkeiten man bei der Positionierung dieser Grafiken hat, wollen wir euch in diesem Artikel zeigen. Dabei gehen wir neben der CSS-Eigenschaft background-position auch auf die Eigenschaften background-clip und background-origin ein und zeigen euch anhand von Beispielen ihre Auswirkungen auf die Hintergrundgrafik. Beitrag zu Ende lesen

image-rendering: pixelated/crisp-edges – Bildinterpolation im Browser steuern

image-rendering-pixelated

Grafiken werden in flexiblen Web-Layouts häufig mit Hilfe des Browsers skaliert. Sofern es sich um Pixelgrafiken handelt, geht Qualität verloren, wenn die Grafik über ihre tatsächliche Größe hinaus skaliert wird. Das Bild wird unscharf. Aus diesem Grund werden Grafiken normalerweise kleiner skaliert. Doch auch diese Vorgehensweise hat Nachteile, denn es werden mehr Daten geladen als notwendig. Responsive Images und Techniken wie Downsampling schaffen hier Abhilfe, doch auch die Art wie der Browser die Bildskalierung berechnet, kann euch dabei helfen ein optisch besseres Ergebnis zu erreichen.

Beitrag zu Ende lesen