Große Bilder und Videos machen Webseiten langsam. Mit ein paar Tricks kannst du die Ladezeit deutlich verkürzen und trotzdem gute Qualität bieten.
Bilder verkleinern und komprimieren: Passe die Abmessungen deiner Bilder an die Anzeigegröße auf der Webseite an (z. B. maximal 1200px Breite). Speichere sie mit 60–80% Qualität ab.
.webp-Format nutzen: Das .webp-Format bietet bei gleicher Qualität oft deutlich kleinere Dateien als JPG oder PNG. In Photoshop kannst du unter Datei → Kopie speichern WebP-Dateien erzeugen. Viele Online-Tools und Bildbearbeitungen unterstützen WebP ebenfalls.
Alt-Text vergeben: Vergib für jedes Bild einen beschreibenden alt-Text. Das hilft bei der Barrierefreiheit und für Suchmaschinen.
Videos komprimieren: Nutze das kostenlose Tool Handbrake, um Videos für das Web zu verkleinern. Wähle als Preset „Web“ und stelle eine Breite von maximal 1280px (HD) ein. Reduziere die Bitrate, bis die Qualität noch gut aussieht, aber die Datei möglichst klein ist.
Dateien auf den Server laden und verlinken: Bilder und Videos müssen auf dem Webserver liegen, damit sie für alle erreichbar sind. Verlinke sie immer mit einem relativen Pfad ausgehend vom Projektordner, z. B. src="/bilder/meinbild.webp".
Responsive Bilder mit srcset: Erstelle von wichtigen Bildern mehrere Größen (z. B. 400px, 800px, 1200px Breite). So kann der Browser je nach Bildschirmgröße die passende Version laden und spart Datenvolumen.
<img
src="/bilder/beispiel-800.webp"
srcset="/bilder/beispiel-400.webp 400w, /bilder/beispiel-800.webp 800w, /bilder/beispiel-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
width="800" height="600"
alt="Beschreibung">HTML
Bilder für srcset aufbereiten: Exportiere dein Bild in mehreren Breiten (z. B. 400, 800, 1200 Pixel) und möglichst im .webp-Format. Benenne die Dateien eindeutig, z. B. bild-400.webp, bild-800.webp, bild-1200.webp.
Videos einbinden: Nutze <video> mit src und controls. Gib Breite und Höhe an, damit das Layout stabil bleibt.
<video src="/videos/meinvideo.mp4" width="800" height="450" controls></video>HTML