Bilder & Videos für Webseiten

Quelle, Format und Größe – sonst wird die Seite schwer und angreifbar.

Das richtige Format für Bilder und Videos

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.

pixabay.com

(kostenlos - deutsch)

pexels.com

(kostenlos - englisch)

unsplash.com

(kostenlos - englisch)

public.work

(kostenlos - englisch)

stock.adobe.com

(kostenpflichtig - deutsch)

coverr.co

(kostenlos - englisch)

blush.design

(kostenlos - deutsch)

https://www.videvo.net/

(kostenlos - englisch)

Icons für Webseiten

Wenn ein Symbol die Funktion trägt, braucht es kein Foto. Kostenfreie Sammlung:

fontawesome.com

(kostenlos - englisch)

Auswahl, Zuschnitt und Formate kann ich mit übernehmen. Der Ablauf steht unter Webdesign Köln, Anfragen über die Kontaktseite.