Artikel
Website-Medien für Tempo und Core Web Vitals optimieren
Bilder machen in der Regel rund 40 Prozent des Gesamtgewichts einer Webseite aus, mehr als jeder andere Ressourcentyp, und Video kommt auf medienreichen Seiten noch deutlich hinzu. Sie richtig hinzubekommen ist das Wirksamste, was Sie für Ladegeschwindigkeit, Core-Web-Vitals-Werte und Suchranking tun können. Die gute Nachricht: Nichts davon erfordert spezielle Software oder einen Server, und Ihre Dateien müssen nie Ihr Gerät verlassen.
Vor allem anderen das richtige Format wählen
Die Formatwahl zählt mehr als jeder Qualitätsregler. Für Fotos auf einer Webseite ist WebP der richtige Standard: Es ist bei gleicher Bildqualität 25 bis 35 Prozent kleiner als JPEG und wird von jedem modernen Browser unterstützt. AVIF komprimiert noch weiter, bis zu 50 Prozent besser als JPEG, um den Preis langsameren Encodings. Nutzen Sie AVIF für Hero-Bilder und Produktfotos, die Sie einmal komprimieren; nutzen Sie WebP für alles, was Sie im Stapel verarbeiten oder schnell brauchen. PNG gehört nur dorthin, wo Sie verlustfreie Genauigkeit oder einen transparenten Hintergrund benötigen. SVG ist die einzig sinnvolle Wahl für Logos, Symbole und Illustrationen: Es skaliert auf jede Größe und wiegt oft wenige Kilobyte gegenüber Hunderten bei einem gerasterten Gegenstück.
Bilder ohne sichtbaren Qualitätsverlust komprimieren
Beginnen Sie mit dem Verkleinern auf die tatsächlichen Anzeigemaße: Ein Hero-Bild, das 1280 Pixel breit angezeigt wird, braucht keine 4000 Pixel an Daten. Verkleinern Sie zuerst, dann komprimieren. Für Fotos ist Qualität 80 in WebP oder JPEG die praktische Untergrenze, unterhalb derer flüchtige Betrachter etwas zu bemerken beginnen, zielen Sie also auf 75 bis 85 und betrachten Sie die Ausgabe vor dem Veröffentlichen bei voller Vergrößerung. Bei Grafiken mit Text und Flächen bewahren PNG verlustfrei oder SVG die Schärfe, die verlustbehaftete Formate verschmieren. Der Bildkompressor auf dieser Seite beherrscht all diese Formate, läuft vollständig in Ihrem Browser und wendet dieselben Algorithmen an wie dedizierte Desktop-Programme.
Video fürs Web konvertieren, ohne es hochzuladen
Hintergrundschleifen und eingebettetes Video sind oft die Schwachstelle der Web-Medienoptimierung. Ein MP4 mit H.264 spielt überall, und WebM ist die lizenzfreie Alternative, die von jedem modernen Browser unterstützt wird. Der Video-Konverter dieser Seite kodiert WebM mit VP8, das in derselben Kompressionsklasse wie H.264 liegt: Der bloße Wechsel des Containers verkleinert die Datei also nicht, der eigentliche Gewinn ist eine vollständig lizenzfreie Codec-Kette und native Unterstützung für einen Alphakanal. Der praktische Ansatz ist, einmal zu WebM zu konvertieren, es als bevorzugte Quelle in einem Video-Element auszuliefern und das MP4 als Rückfalloption für ältere Browser zu behalten. Die Umwandlung läuft in Ihrem Browser über FFmpeg, kompiliert zu WebAssembly: Nichts wird hochgeladen, und Dateien bis 500 MB werden ohne Warteschlange umgewandelt. Für eingebundenes Hintergrundvideo ziehen Sie auch den Video-Trimmer in Betracht, um vor dem Encoding tote Sekunden herauszuschneiden: Die Dauer ist der größte Treiber der Dateigröße.
Inline-Assets: base64 und SVG
Sehr kleine Bilder, Symbole und Favicons, die direkt als base64-Zeichenketten in HTML oder CSS eingebettet sind, sparen pro Asset einen Netzwerk-Hin-und-Rückweg. Das ist sinnvoll für Assets unter etwa 2 KB, die auf jeder Seite erscheinen, etwa ein Logo-Sprite oder ein Ladeindikator. Größere Assets sollten getrennte Dateien bleiben, denn base64 codiert 33 Prozent größer als das Binär, und Browser cachen Dateiverweise, aber nicht eingebettete Daten eigenständig. Der SVG-Optimierer entfernt Editor-Ballast aus exportierten SVGs, ohne die visuelle Ausgabe anzutasten. Der Bild-zu-base64-Konverter erzeugt die fertige Daten-URI zum Einfügen in Ihrem Browser.
Die richtige Größe liefern und zuerst laden
Zwei Aspekte der Auslieferung sind genauso wichtig wie die Dateien selbst. Der erste ist die responsive Größenwahl. Mit einer srcset-Liste aus Breitendeskriptoren (image-400.webp 400w, image-800.webp 800w und so weiter) wählt der Browser die kleinste Datei, die den Bildschirm noch abdeckt: Er multipliziert die CSS-Breite mit dem device pixel ratio (Gerätepixelverhältnis), bevor er etwas anfordert. Ein Smartphone mit einem 390px breiten Layout und einem 3x-Bildschirm benötigt etwa 1170 Pixel und lädt daher die 1200w-Version, während das Desktop-Original übergangen wird. Der zweite Aspekt ist die Priorität. Browser nutzen einen preload scanner (Vorlade-Scanner), der vorausschaut und Bilder herunterlädt, bevor der Hauptparser sie erreicht. Fügt man dem größten above-the-fold-Bild (dem größten sichtbaren Bild im ersten Viewport) das Attribut fetchpriority="high" hinzu, teilt man dem Browser mit, es zuerst zu laden, was in der Regel den Largest Contentful Paint bestimmt.
Tools in diesem Artikel
- Bilder komprimierenBilddateigröße ohne Upload reduzieren. Qualitätsregler oder Zieldateigröße in KB. Stapelverarbeitung möglich.
- Bilder skalierenBilder skalieren und konvertieren (JPEG, PNG, WebP) ohne Upload.
- SVG-OptimiererSVG-Dateien mit SVGO direkt im Browser optimieren und minimieren. Kein Upload.
- Video-KonverterKonvertiere Videos zwischen MP4, WebM, MKV und MOV (H.264/VP8) in deinem Browser. Kein Upload.
- Bild zu Base64Bilder zu Base64-Daten-URIs konvertieren (und zurück) direkt in Ihrem Browser. Kopieren, CSS-Snippet, kein Upload.
- Bildvergleichs-SchiebereglerZwei Bilder nebeneinander oder mit einem Schieberegler vergleichen (Vorher/Nachher). Kein Upload.
Häufige Fragen
Beeinflusst Bildkompression mein Suchranking?
Google nutzt Core Web Vitals als Ranking-Signal, und Largest Contentful Paint ist fast immer ein Bild oder ein Video-Poster. Eine Seite, deren Hero-Bild in unter einer Sekunde lädt, schneidet besser ab als eine, bei der es drei Sekunden dauert. Kompression und das richtige Format beeinflussen diese Kennzahl direkt, also ja, Bildoptimierung hat einen messbaren SEO-Effekt. Am stärksten ist die Wirkung auf Mobilgeräten, wo Verbindungen langsamer sind und die Strafe für schwere Bilder größer ausfällt.
Warum Medien lokal verarbeiten statt einen Webdienst nutzen?
Die meisten Online-Medien-Tools verlangen, Ihre Dateien auf einen entfernten Server hochzuladen, was Zeit kostet, Bandbreite verbraucht und bedeutet, dass eine Kopie Ihrer Datei auf einer Infrastruktur liegt, die Sie nicht kontrollieren. Die Tools auf dieser Seite laufen vollständig in Ihrem Browser: Ihre Bilder und Videos werden auf Ihrem Gerät verarbeitet und die Ausgabe wird direkt heruntergeladen. Es gibt kein Konto, keine Upload-Wartezeit, und nichts über Ihre Dateien wird jemals an einen Server gesendet.