Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 18. November 2013

Collage verschiedener Fotos

Crashkurs Webdesign – Teil 4: Bilder und Videos

Bilder und Videos machen Websites lebendig. Sie sind fürs Design ebenso wichtig wie Inhalte. In diesem vierten Teil unserer Webdesign-Reihe geben wir Tipps, wie man Bilder und Videos optimal einsetzt.

Auch wenn das Internet in den letzten Jahren schneller geworden ist, gilt: Je weniger Daten übertragen werden müssen, desto schneller wird die Website im Browser angezeigt. Für Webdesigner bedeutet das: Bilder und Videos müssen so optimiert werden, dass die Dateien bei bestmöglicher Qualität so klein wie möglich sind.

JPEG: Schlanke Bilder dank Kompression

Für Bilder im Web ist JPEG (JPG) das wichtigste Format. Es eignet sich besonders für Fotos und Grafiken mit vielen Farben. JPEG erlaubt eine frei wählbare Bildkompression. Mit stärkerer Kompressionsrate werden kleinere Dateien erzeugt, allerdings wird auch die Bildqualität schlechter. Bei Komprimierungsraten bis etwa 80 Prozent leidet die Bildqualität jedoch kaum – und dennoch spart man Daten. Wer nicht mit Photoshop oder einer kostenlosen Bildbearbeitung wie Gimp arbeitet, wo man die Kompression beim Speichern einstellt, kann JPEG-Dateien online komprimieren und in der Größe ändern, etwa unter JPEG-Optimizer.com.

PNG: Transparenter Hintergrund möglich

Im Gegensatz zu JPEG ist PNG verlustfrei. Die hohe Bildqualität bringt jedoch große Dateien hervor. Der Vorteil von PNG bestimmt den häufigsten Einsatzzweck: PNG-Dateien können transparente Flächen enthalten – dort erscheint die Hintergrundfarbe der Website. Daher sind Logos und grafische Schriftzüge fast immer PNG-Dateien.

Bildgröße: Kleinere Bilder laden schneller

Ob JPEG oder PNG – für die Bildgröße gilt: Nie größer als nötig! Beispiel: Soll ein Bild maximal in der Größe 800 x 600 Pixel erscheinen, dann wird es als 800 x 600 Pixel gespeichert, nicht als 1024 x 768 Pixel. Damit entfällt das Laden einer unnötig großen Datei und das Verkleinern des Bildes per CSS. Sind kleinere Versionen eines Fotos als Vorschau gewünscht, bietet es sich an, die Miniaturbilder gesondert zu erzeugen, anstatt die Originale per CSS zu verkleinern. Die Miniaturen können außerdem stärker komprimiert werden, weil die geringere Bildqualität oft nicht zu erkennen ist. Google PageSpeed Insights zeigt, wo Verbesserungsbedarf besteht.

Extra-Tipp: Falls nötig, sollten Fotos mit Hilfe eines Bildbearbeitungsprogramms korrigiert werden, damit sie optimal zur Geltung kommen. Kontrast und Helligkeit lassen sich oft verbessern, ebenso die Schärfe. Grundlegende Werkzeuge bietet das kostenlose Tool Photoshop Express Editor.

Videos: HTML5 macht Flash überflüssig

Beim Video-Streaming werden die Filminhalte laufend nachgeladen und gleichzeitig angezeigt – wie zum Beispiel bei YouTube. Eigene YouTube-Videos müssen allerdings für eine gute Performance optimiert werden. Bei nicht eigenen Videos hat man keinen Einfluss auf die Ladezeiten. Die andere Variante ist, Videos direkt in die Website einzufügen. Bislang wurde das vor allem mit Hilfe des Adobe-Flash-Formats möglich. Die Wiedergabe von FLV-Dateien setzt allerdings voraus, dass der Browser mit einem Plugin ausgestattet ist. Vor allem mobile Endgeräte haben damit Schwierigkeiten.

Abhilfe verspricht der zukünftige Web-Standard HTML5. Wer seine Website in HTML5 codiert, kann ganz einfach Videos der Formate MP4, WebM und Ogg einbinden. Dafür steht das HTML5-Element „video“ bereit. Doch aufgepasst: Noch unterstützt nicht jeder Browser jedes Videoformat das „video“-Tag. Eine Übersicht dazu gibt es zum Beispiel auf der W3Schools-Website.

Beim Einsatz von Videos im Web sollte generell beachtet werden, dass durch die geringe Bildgröße Details weniger wahrgenommen werden. Deshalb sind Nah- sinnvoller als Fernaufnahmen, und der Ton nimmt eine wichtige Rolle ein. Gute Web-Videos sind eher kurz als lang, und wie bei Bildern gilt: Die Dateigröße gering halten!

Tags: Webdesign

Der Autor:

Autor: Sven Hähle

Mein Name ist Sven Hähle. Ich arbeite seit vielen Jahren als Fachjournalist und schreibe für diverse Zeitschriften und Online-Portale über Digitalkultur, eBusiness und Technik.

Ein Kommentar

  1. davodo sagte am 27. September 2016 um 10:57:

    Hallo Herr Hähle,

    besten Dank für Ihren informativen Beitrag.
    Anfangs hatten wir auch das Problem, dass wir unsere Bilder, aus Qualitätsgründen in PNG online gestellt hatten. Dadurch litt die Perfomanxe unserer Seite.

    Erneut vielen Dank

    Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen