Medien für die Website vorbereiten

Grundsätzlich empfehlen wir Fotos, als JPG-Dateien in einer Auflösung von 72 DPI zu speichern. Illustrationen sollten im Optimalfall als vektorbasierte SVG-Dateien erstellt werden. Videos werden bei einem Drittanbieter (z.B. YouTube) hochgeladen und in der eigenen Website referenziert. Dadurch erreichen Sie eine hohe Kompatibilität mit Dritt-Systemen und belasten die eigene Website nicht.

Es bietet sich immer an, frühzeitig ein Konzept für die Bildsprache, entweder mit Ihrem Fotografen oder Raptus, zu definieren. Nur so wird gewährleistet, dass später ein harmonisches Gesamtbild entsteht. Noch besser wird der Bildbedarf geklärt, sobald das Konzept (UI Design) bereitsteht.

Weiter ist das frühzeitige Definieren eines suchmaschinenfreundlichen Namensschemas (siehe unten) sehr wichtig. So haben Sie von Anfang an Ordnung und erhöhen die Sichtbarkeit Ihrer Website im Internet.

Bilder sind in der Regel urheberrechtlich geschützt und die Lizenzen müssen geklärt werden. Raptus kann Sie dabei unterstützen oder lizenzierte Bilder recherchieren.

Gut zu wissen

Menschen sind visuelle Wesen. Bilder und Videos können auf Websites ein wesentlich attraktiveres und interessanteres Erlebnis schaffen als reiner Text. Sie können Emotionen wecken, komplexe Ideen vereinfachen und ein visuell ansprechendes Element hinzufügen, das die Aufmerksamkeit der Nutzer auf sich zieht.

Informationstransfer

Videos und Bilder können oft Informationen effektiver vermitteln als Text. Infografiken und Anleitungsvideos zum Beispiel können komplizierte Konzepte oder Prozesse einfach und verständlich darstellen. Dies fördert das Verständnis der Nutzer und trägt zur Verbesserung der Nutzererfahrung bei.

Benutzerbindung

Visueller Content kann dazu beitragen, Nutzer länger auf einer Seite zu halten, was die sogenannte Verweildauer erhöht. Dies ist ein wichtiger Faktor, den Suchmaschinen bei der Bewertung der Qualität einer Website berücksichtigen. Darüber hinaus können Nutzer dazu ermutigt werden, den visuellen Content zu teilen, was wiederum die Reichweite und Sichtbarkeit der Website erhöht.

SEO (Search Engine Optimization)

Bilder und Videos können zur Suchmaschinenoptimierung beitragen. Google und andere Suchmaschinen verwenden Bild- und Videoinhalte, um den Inhalt und Kontext einer Seite zu verstehen. Durch die Verwendung von Alt-Texten bei Bildern und Transkripten bei Videos können Suchmaschinen besser verstehen, was auf einer Seite dargestellt wird, und dies kann dazu beitragen, das Ranking der Seite in den Suchergebnissen zu verbessern. Zudem hat Google separate Indizes für Bilder und Videos, wodurch gut optimierte visuelle Inhalte zusätzliche Möglichkeiten für Sichtbarkeit und Traffic bieten.

Markenbildung und Identität

Visueller Content ermöglicht es Unternehmen, ihre Markenidentität effektiv auszudrücken. Konsistente Bildsprachen, Farben und Stile können dazu beitragen, eine Marke wiedererkennbar zu machen und das Vertrauen der Nutzer zu stärken.

Soziale Medien und Teilen

Bilder und Videos sind sehr geeignet, um geteilt zu werden. Was besonders wichtig ist, wenn man die Rolle von Social Media in der heutigen digitalen Welt bedenkt. Nutzer sind eher geneigt, visuellen Content in ihren Netzwerken zu teilen, was zu erhöhtem Traffic und verbessertem Engagement führt.

Fazit

Bilder und Videos sind unverzichtbare Bestandteile eines erfolgreichen Webdesigns und einer effektiven Online-Kommunikation. Sie verbessern nicht nur das Nutzererlebnis, sondern tragen auch dazu bei, die Sichtbarkeit und Reichweite einer Website zu erhöhen.

Dateinamen & Bezeichnungen

Namensschema

Verwenden Sie aussagekräftige Namensschemas, um sicherzustellen, dass die Medienverwaltung übersichtlich bleibt und sowohl Suchmaschinen als auch Besucher der Website unterstützt werden.

Im Optimalfall definieren Sie als Erstes ein Namensschema und benennen alle Medien danach. Trennen Sie Begriffe im Dateinamen mit Bindestrichen und nicht mit Unterstrichen. Ein solches Namensschema kann wie folgt aussehen.

• Schema: <firmennamen>-<keyword1>-<keyword2>-<keyword3>-<nummer>.jpg
• Beispiel: raptus-webdesign-agentur-bern-001.jpg

Bezeichnungen

• Zusätzlich steht in der Regel ein Feld „Bildbeschreibung“ zur Verfügung, welches Platz für weitere Informationen bietet, beispielsweise für eine kurze Analyse eines Bildes.
• Die Bildunterschrift ist ebenfalls wichtig, damit Suchmaschinen, die das Bild an sich nicht auslesen kann, dessen Inhalt zuordnen und mit Suchanfragen in Verbindung bringen kann. Daher sollten Bildunterschriften relevant für den Inhalt des Bildes sein und Kontext hinzufügen. Auch in der Bildunterschrift sollten passende Keywords enthalten sein.
• Verwenden Sie niemals den Namen, den Ihre Digitalkamera vielleicht vorgegeben hat, z.B. DSCN000178.jpg. Mit diesem Namen kann niemand etwas anfangen, weder Google noch menschliche Besucher Ihrer Website.
• Machen Sie den Titel ohne Leerzeichen oder Spezialzeichen (z.B. ä, ö usw.), denn die werden dann so dargestellt: „jan%20otte.jpg“.

• Erfassen Sie ALT-Attribute pro Bild, um Suchmaschinen und Menschen mit einer Sehbehinderung zu unterstützen. 

Dimensionen & Inhalt

Auf keinen Fall sollten Sie, wie eingangs erwähnt, das Originalbild der Kamera in die Mediathek hochladen! Das macht Ihre Website schwerfällig und kann sich je nach Einbindung in die Website äusserst ungünstig auf die Ladezeiten auswirken.

Hoch- und Querformat

Es sind sowohl quer- als auch hochformatige Medien für Websites geeignet. Es hängt von der Art des Bildes und dem Zweck ab. Wenn Sie ein Bild haben, das hoch ist und mehr vertikale Details enthält, wie z.B. ein Porträt oder eine Landschaft mit hohen Bäumen oder Gebäuden, dann ist das Hochformat besser geeignet. Wenn Sie jedoch ein Bild haben, das breiter ist und mehr horizontale Details enthält, wie z.B. eine Landschaft mit einem breiten Horizont oder ein Panorama, dann ist das Querformat besser geeignet.

Auflösung

Für die Darstellung am Bildschirm ist einzig und allein das absolute Bildmass (Höhe x Breite) in Pixeln entscheidend. Die Bildauflösung in DPI (dots per inch) ist ausschliesslich für den Druck relevant. Eine Datei im Web mit 300 DPI ist genauso gross wie eine Datei mit 72 DPI.

Breite x Höhe

Die genauen Dimensionen sind immer individuell pro Projekt und erst zuverlässig bekannt, sobald die Website in einer Beta-Version bereitsteht. Grundsätzlich können Medien sowohl im Hoch- als auch im Querformat verwendet werden. Bilder werden je nach Format des Anzeigegerätes nicht komplett angezeigt. Auf einem kleinen Bildschirm ist es möglich, dass Teile am Rand des Bildes verdeckt bleiben.

Richtgrössen

Bildinhalt

Weil viele Benutzer mit kleinen Bildschirmen (Smartphone) Ihre Website besuchen, ist es grundsätzlich empfohlen, Medien mit einem tiefen Detailgrad zu verwenden. In dem folgenden Beispiel sehen Sie ein Bild (links) mit tiefem Detailgrad und hohem Detailgrad (rechts). Anhand der kleinen Version ist gut zu erkennen, dass auf kleinen Bildschirmen weniger Details erkannt werden.

Bildformate

JPEG

JPEG ist ein weit verbreitetes verlustbehaftetes Bildformat, das gut für fotografische Bilder geeignet ist. Es bietet eine hohe Komprimierung, was zu kleineren Dateigrössen führt und die Ladezeit der Website verbessert. Allerdings kann die starke Komprimierung zu Qualitätsverlusten führen, insbesondere bei wiederholten Speicherungen.

PNG

PNG ist ein verlustfreies Bildformat, das Unterstützung für Transparenz bietet. Es ist ideal für Bilder mit klaren Linien, Texten oder Logos geeignet. PNG-Bilder haben in der Regel grössere Dateigrössen als JPEG, bieten jedoch eine bessere Bildqualität. Sie eignen sich gut für Grafiken mit begrenzter Farbpalette oder mit transparentem Hintergrund.

GIF

GIF ist ein älteres Bildformat, das Animationen unterstützt. Es hat eine begrenzte Farbpalette und kann nur 256 Farben anzeigen, was es für fotografische Bilder ungeeignet macht. GIFs sind jedoch gut geeignet, um einfache Animationen oder kurze Videoclips darzustellen, und sie haben in der Regel kleinere Dateigrössen als andere animierte Formate.

SVG

SVG ist ein vektorbasiertes Bildformat, das für Grafiken und Logos verwendet wird. Es ist skalierbar, verlustfrei und kann in verschiedenen Grössen angezeigt werden, ohne die Qualität zu beeinträchtigen. SVG-Dateien sind normalerweise kleiner als rasterbasierte Formate wie JPEG oder PNG. Sie eignen sich gut für Grafiken, die auf verschiedenen Geräten und Bildschirmauflösungen gut aussehen sollen.

Videoformate

MP4

Dies ist ein Standardformat, das auf den meisten Plattformen und Geräten gut funktioniert. Es bietet eine hohe Kompressionsrate, was bedeutet, dass es Videos in guter Qualität liefern kann, während die Dateigrösse relativ klein bleibt.

AVI

AVI-Dateien sind in der Regel grösser als andere Videoformate, weil sie weniger komprimiert sind. Daher ist es oft besser, dieses Format zu vermeiden, wenn Sie die Ladezeiten minimieren möchten.

MOV

Dieses Format wurde von Apple entwickelt und eignet sich besonders gut für Mac-Geräte. Es wird allerdings nicht immer von allen Webbrowsern unterstützt.

WEBM

Dieses Format wurde für das Web entwickelt und bietet eine ausgezeichnete Kompression bei gleichzeitig hoher Qualität. Es wird von den meisten modernen Webbrowsern unterstützt, obwohl einige ältere oder weniger gebräuchliche Browser Probleme damit haben könnten.