Bilder & Videos für Webseiten
Quelle, Format und Größe – sonst wird die Seite schwer und angreifbar.
Quelle, Format und Größe – sonst wird die Seite schwer und angreifbar.
Bilder und Videos machen den Großteil des Ladegewichts einer Webseite aus. Die richtige Wahl entscheidet über Ladezeit, Lesbarkeit und darüber, ob Google die Seite überhaupt gut einstuft.
Bildformate
WebP ist heute Standard: meist kleiner als JPEG oder PNG bei gleicher Qualität. Fotos: WebP mit JPEG-Fallback. Logos, Icons und klare Kanten: SVG. PNG nur, wo Transparenz nötig ist und SVG nicht passt. AVIF setze ich nicht pauschal ein – dieselbe Qualitätszahl wie bei WebP heißt nicht automatisch eine kleinere Datei. Contao erzeugt die WebP-Varianten automatisch.
Größe statt nur Format
Ein 4000 Pixel breites Foto in einer 400 Pixel breiten Spalte bremst jede Seite aus – egal welches Format. Bilder gehören in der Breite des Platzes ins HTML, mit 1×- und 2×-Varianten über <picture>. Nichts sollte größer ankommen als der Bildschirm braucht.
Alt-Text
Jedes Bild braucht einen kurzen Alt-Text, der beschreibt, was zu sehen ist – für Screenreader und die Bildersuche. Gut: „Kölner Dom bei Abendlicht, Blick vom Rhein“. Schlecht: „Bild1“ oder der Dateiname. Dekorative Hintergründe dürfen leer bleiben, Inhaltsbilder nicht.
Videos einbinden
Kurze Hintergrund- oder Erklärvideos lockern eine Seite auf. Komprimiert, ohne Ton-Autoplay, mit einem Standbild (Poster). Große Clips besser über YouTube oder Vimeo laden, damit sie die eigene Seite nicht aufblähen – und den Datenschutz bedenken (Cookie, Zwei-Klick).
Lizenzen
Nicht jedes Bild aus dem Netz darf auf die eigene Webseite. Eigene Aufnahmen, gekaufte Stocks oder klar lizenzierte Datenbanken (unten) – „gefunden bei Google“ ist keine Lizenz. So bleiben Abmahnungen aus.
(kostenlos - deutsch)
(kostenlos - englisch)
(kostenlos - englisch)
(kostenlos - englisch)
(kostenpflichtig - deutsch)
(kostenlos - englisch)
(kostenlos - deutsch)
(kostenlos - englisch)
Wenn ein Symbol die Funktion trägt, braucht es kein Foto. Kostenfreie Sammlung:
(kostenlos - englisch)
Auswahl, Zuschnitt und Formate kann ich mit übernehmen. Der Ablauf steht unter Webdesign Köln, Anfragen über die Kontaktseite.