Bildoptimierung für SEO: Was tatsächlich die wichtigsten Web-Vitalwerte bewegt

Der größte Leistungsgewinn, den ich jemals auf der Marketing-Site von WP Adminify ausgeliefert habe, war kein Caching-Plugin oder ein CDN-Tweak. Es wurde ein Bild gelöscht. Unser alter Held war ein 2.400px PNG-Screenshot, den ich exportierte bei "Voller Qualität", weil ich hartnäckig glaubte, dass PNG knusprig bedeutet. Diese eine Datei war 1,4 MB. Auf einem Android-Mittelklasse-Android über 4G war es das größte inhaltliche Farbelement - und es zog LCP auf ungefähr 4,1 Sekunden. Ich habe es gegen 84 KB WEBP bei der tatsächlichen Anzeigebreite ausgetauscht und LCP am selben Nachmittag unter 1,9 Sekunden gefallen. Kein Code. Nur ein kleineres Bild.

Das ist das Frustrierende an der Bild-SEO. Es ist nicht exotisch. Bilder sind normalerweise das schwerste auf der Seite - oft fast die Hälfte der Gesamtbytes - und die meisten von uns behandeln sie dennoch als nachträgliche Gedanke. Wir legen ein Kamera-Original in das CMS, geben "Screenshot" in das Alt-Feld ein und gehen weiter. Dann fragen wir uns, warum der Kern des Web-Vitals-Berichts in der Search Console auf dem Handy rot blutet.

Dieses Handbuch ist die Checkliste, die ich tatsächlich auf toolz.dev und Kundenseiten ausgeführt habe, die aus der Perspektive von jemandem geschrieben wurden, der dieses Zeug versendet. Ich bin ehrlich darüber, was die kostenlosen Tools tun und - genauso wichtig -, was sie nicht tun. Jedes Bildwerkzeug auf toolz.dev läuft vollständig in Ihrem Browser auf a <canvas>, so dass nichts, was Sie einlegen, irgendwo hochgeladen wird. Das hat echte Konsequenzen für Ihren Workflow, einige gute, eine nervig. Wir werden beides erreichen.

tl; dr: Ändern Sie die Größe des Bildes zuerst auf seine tatsächliche Anzeigebreite, dann komprimieren Sie und bedienen Sie dann ein modernes Format. In der Praxis sind das drei Durchgänge: Bildgröße ändern Zum Schneiden der Pixelabmessungen, Bildkompresse Bytes zu drücken und Formatkonverter webp erhalten. Hinzufügen width/height Attribute, um die Layoutverschiebung zu stoppen, Alt-Text zu schreiben, den ein Mensch laut aussprechen würde, und lädt alles unter die Falte. Tun Sie dies und Ihr LCP und CLS verbessern sich beide - die beiden imagegesteuerten Kern-Web-Vitals, auf denen Google einen Rang einstellt.

Warum sind Bilder für SEO so wichtig?

Zwei der drei Kern-Web-Vitalwerte sind Bildprobleme in Verkleidung. Größter Inhalt ist auf den meisten Inhaltsseiten das Hero-Image, das seinen Download beendet. Kumulative Layoutverschiebung ist sehr oft ein Bild, das spät geladen wird und den Text in eine Zeile sinkt. Beides sind bestätigte Ranglisteneingaben, und beides sind Dinge, die Sie durch besseren Umgang mit Bildern beheben - nicht durch Schreiben von mehr Inhalten.

Es gibt einen zweiten Verkehrskanal, den die Leute vergessen: Google Images. Für viele E-Commerce-, Rezept-, Reise- und Designseiten ist die Bildsuche ein sinnvolles Stück organischer Besuche, manchmal ein Fünftel davon. Dieser Datenverkehr hängt vollständig von den Dingen ab, die ein Crawler lesen kann - den Dateinamen, den Alt-Text, die umgebende Kopie und davon, ob das Bild sogar klein genug ist, um sofort indiziert zu werden.

Und dann ist da noch der langweilige, aber reale: Bandbreite kostet Geld und Geduld. Eine Seite, die 3 MB Bilder ausliefert, springt mobile Benutzer auf Metered-Verbindungen, bevor sie Ihre Überschrift sehen. Schnellere Seiten halten die Leute in der Nähe, und das Engagement, das Google misst, schadet jedoch nicht.

Welches Bildformat sollten Sie eigentlich verwenden?

Bei der Formatauswahl werden die meisten Einsparungen erzielt, und die Regeln sind einfacher als die Formatkriege, die sie klingen.

JPEG Ist für Fotos - alles mit glatten Verläufen und Tausenden von Farben. Es ist verlustbehaftet, genau das, was Sie für ein Foto wollen. Bei Qualität 75–85 ist die Komprimierung für einen normalen Betrachter unsichtbar und die Datei ist ein Bruchteil des Originals. Verwenden Sie es nicht für irgendetwas mit harten Kanten, Text oder Transparenz.

PNG ist verlustfrei. Verwenden Sie es für Screenshots, Logos, Diagramme und alles mit flachen Farbbereichen oder Transparenz. Der Haken: Für ein Foto produziert PNG im Vergleich zu JPEG eine komisch große Datei. Mein 1,4 MB Heldenfehler war genau das - ein fotografischer Screenshot, der in PNG gezwungen wurde.

WebP ist die praktische Standardeinstellung im Jahr 2026. Es ist sowohl verlustbehaftet als auch verlustfrei, unterstützt Transparenz und Animation und landet in der Regel um 25–34% kleiner als JPEG bei der passenden Qualität. Die Browser-Unterstützung ist jetzt universell. Dies ist das Format, in das ich fast alles konvertiere.

Avif Komprimiert noch härter - oft sinnvoller kleiner als WebP -, da es auf dem AV1-Videocodec basiert. Es ist ein großartiges Format. Aber ich muss hier direkt mit Ihnen umgehen, denn viele Anleitungen (einschließlich des Entwurfs dieses Artikels) sagen Ihnen, "nur in Avif konvertieren" mit einem Online-Tool zu konvertieren, und so funktioniert die Codierung des Browser-Canvas nicht.

SVG ist für Vektoren: Icons, Logos, einfache Illustrationen. Es skaliert unendlich und bleibt winzig. Es ist nutzlos für Fotos.

Die AVIF-Vorbehaltsvorbehaltsliste erwähnt niemand

Hier ist das ehrliche Stück. toolz.dev Formatkonverter Export PNG, JPEG oder WebP - und nur diese drei. Es kann AVIF nicht ausgeben, und die meisten In-Browser-Wandler können auch nicht. Der Grund ist technisch: Das Tool zeichnet Ihr Bild auf ein <canvas> und ruft canvas.toBlob('image/webp', quality)drohen Der Canvas-Encoder des Browsers liefert JPEG, PNG und WebP, es wird kein AVIF-Encoder ausgeliefert. Es gibt also keine Möglichkeit, einen Avif aus einer Leinwand zu quetschen, Punkt.

du kannst immer noch zuführen Eine AVIF-Datei in — Der Browser dekodiert AVIF glücklich über new Image(), so wird ein AVIF-Drop-In auf Leinwand fein gerendert. Sie können einfach keinen wieder herausbekommen. Es ist eine Dekodierung, eine codierende Asymmetrie, und es stößt die Leute ständig auf.

Also mein realer Rat: Verwenden Sie den Formatkonverter für den WebP-Schritt, der 95% des Gewinns abdeckt. Wenn Sie möchten, dass AVIF oben ist, generieren Sie es in Ihrer Build-Pipeline mit sharp, avifenc, oder Squooshs Offline-Encoder - dorthin gehört sowieso AVIF, da die Codierung langsam ist und Sie dies nicht für jedes Bild von Hand tun möchten.

Wie komprimiert man Bilder, ohne die Qualität zu zerstören?

Der Fehler, den ich am meisten sehe, ist das Falschen in der falschen Reihenfolge zu komprimieren. Das Komprimieren eines 4000-Px-Bildes, das bei 800 Pixel angezeigt wird, ist wie das Vakuumieren eines Koffers, den Sie nie zum Packen brauchen. Größe zuerst ändern, Zweite komprimieren. immer.

Der Workflow ist also: Öffnen Bildgröße ändern, Stellen Sie die Breite auf die größte Größe ein, auf der das Bild tatsächlich rendert (überprüfen Sie Ihr Layout - ein Blog-Körperbild ist oft 720–800 Pixel, nicht 1920). Der Resizer passt in Ihre Zielbox und dehnt oder schneidet niemals, so dass das Seitenverhältnis sicher ist. Dann nehmen Sie diese Ausgabe in Bildkompresse Und ziehen Sie die Qualität nach unten, bis Sie es kaum sagen können - normalerweise 78–82 für Fotos. Vorschau bei Vollzoom Bevor Sie festlegen, Artefakte in Verläufen und Hauttönen verbergen, nicht in der Miniaturansicht.

Eine Nummer zum Ankern: Für fotografische Inhalte ist Qualität 80 die langweilige, zuverlässige Antwort. Ich habe A / B & # 39; D 80 gegen 90 bei realen Produktschüssen und bei 100% zoomen auf einem guten Monitor können die meisten Leute es nicht nennen. 80 ist aber oft 40% kleiner. Unter ungefähr 60 sehen Sie blockartige Artefakte in glatten Bereichen, so dass dies der Boden für alles andere als ein winziges Miniaturbild ist.

Zwei Browser-Gotchas, die Sie verwirren

Beide kosten mich echte Debug-Zeit, also lernen Sie sie kostenlos.

Transparentes PNG → JPEG Verfärbt den Hintergrund schwarz, nicht weiß. Ich habe einmal ein transparentes Logo in JPEG umgewandelt und die transparenten Bereiche wurden durchgehend schwarz. Ich nahm an, dass das Werkzeug kaputt war und zwanzig Minuten lang darauf starrte. Es ist kein Fehler - es ist die HTML-Spezifikation. Wenn Sie eine Leinwand in einem Format ohne Alpha-Kanal (JPEG) serialisieren, werden die transparenten Pixel auf durchgehendem Schwarz zusammengesetzt. Wenn Sie Transparenz benötigen, behalten Sie PNG oder verwenden Sie webP, das Alpha unterstützt. Wenn Sie speziell einen weißen Hintergrund möchten, legen Sie zuerst eine weiße Ebene ab.

Jeder Re-E-Codierung Streifen EXIF und GPS-Metadaten. Da diese Werkzeuge das Bild auf eine neue Leinwand neu zeichnen, hat die Ausgabe kein EXIF, keine Kamerainformationen, keine eingebetteten GPS-Koordinaten. Das ist ein echter Gewinn der Privatsphäre - Sie veröffentlichen nicht versehentlich den Breiten- / Längengrad, den Ihr Telefon in ein Foto gestempelt hat. Aber es ist auch ein Genuss, wenn Sie sich auf eingebettete Farbprofile oder Urheber-Metadaten verlassen, die auch gehen. Für SEO spielt es keine Rolle, aber ich weiß, dass es passiert.

Wie funktionieren responsive Bilder und SRCSET?

Ein Telefon rendert Bilder mit einer Breite von 390 Pixel. Wenn Sie es versenden, verschwendet eine 1920px-Datei die meisten Bytes, die Sie gerade sorgfältig komprimiert haben. srcset Behebt das, indem du dem Browser ein Menü mit Größen gibt und es auswählen lässt.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Matte-black wireless headphones on a walnut desk"
  width="800" height="600" loading="lazy" />

Um diese drei Dateien zu erstellen, führen Sie dieselbe Quelle durch Bildgröße ändern bei 400, 800 und 1200px, dann konvertieren Sie jeweils in webp. sizes Das Attribut ist der Teil, den die Leute überspringen, und das Überspringen von es bricht das Ganze leise - ohne sie geht der Browser davon aus, dass das Bild das Ansichtsfenster füllt und den größten Kandidaten greift. Sagen Sie ihm, wie breit das Bild wirklich rendert und es das richtige herunterlädt.

Wie schreibt man Alt-Text, der tatsächlich hilft?

Alt-Text ist die andere Hälfte von Image SEO und es ist die halbe Entwickler. Es erledigt drei Aufgaben gleichzeitig: Es ist das, was ein Screenreader einem blinden Benutzer vorliest, es ist, wie ein Crawler versteht, was das Bild zeigt, und es ist der Fallback-Text, wenn das Bild nicht geladen wird. Wenn es richtig ist, geht es hauptsächlich darum, wie eine Person zu schreiben, nicht wie ein Schlüsselwort-Roboter.

Die von mir verwendete Regel: Beschreiben Sie das Bild so, wie Sie es jemandem bei einem Telefonanruf beschreiben. Spezifische, natürliche, kurz - unter etwa 125 Zeichen, damit Bildschirmleser es nicht unangenehm abschneiden. Überspringen Sie "Bild von" oder "Foto von", weil der Bildschirmleser bereits ankündigt, dass es ein Bild ist, das mit diesen führt, verschwendet die Zeit des Hörers. Und wenn Ihr Ziel-Keyword wirklich ins Bild passt, schließen Sie es natürlich einmal ein. Wenn es nicht passt, lassen Sie es aus - ein Foto einer Tastatur benötigt keine "Kaufen Sie billige drahtlose Kopfhörer" in die Alt.

Ein paar Vorher/Nachher von echten Bewertungen habe ich gemacht:

• alt="image" → alt="Matte-black wireless headphones on a walnut desk"
• alt="chart" → alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"
• alt="best cheap headphones buy now free shipping sale" (Stichwort gefüllt) → alt="Over-ear headphones with the carrying case open beside them"

Eine Nuance, die Menschen falsch machen: Rein dekorative Bilder - ein Teiler, ein Hintergrundgedeihen - sollten eine haben ausleeren alt="", keine Beschreibung. Ein leeres ALT weist den Bildschirmleser an, ihn vollständig zu überspringen, genau das, was Sie zur Dekoration wünschen. Reservieren Sie echten Alt-Text für Bilder, die Informationen enthalten.

Wenn Sie dabei sind, benennen Sie die Datei auch beschreibend. wireless-headphones-matte-black.webp Beat IMG_4532.jpg Weil Suchmaschinen den Dateinamen als Signal lesen und Bindestriche (nicht unterstrichen) sind die Trennzeichen, die Google als Wort bricht.

Wie sehr verändert dies die Kern-Web-Vitalwerte?

LCP (größte inhaltliche Farbe): Dein Held ist normalerweise das LCP-Element. Servieren Sie es in den richtigen Abmessungen, in webp, bei Qualität ~ 80 und - kritisch - tun nicht faul laden es. Lazy-Loading Der obige Hero ist ein klassischer Eigener, der das genaue Element verzögert, das LCP misst. Wenn es der Held ist, <link rel="preload" as="image"> es stattdessen.

CLS (kumulative Layoutverschiebung): Immer setzen width und height auf dem <img>drohen Diese beiden Attribute lassen den Browser den Platz vor dem Eintreffen des Bildes reservieren, sodass der Text beim Laden nicht springt. Dies ist die billigste CLS-Fix, die es gibt, und ich finde immer noch, dass Websites vermisst werden.

INP (Interaktion zur nächsten Farbe): Bilder treiben nicht direkt inp an, aber eine Seite, die an 3 MB nicht optimierter Bilder erstickt, verhungert im Hauptthread und dem Netzwerk der Kapazität, die Ihr Javascript benötigt, um zu reagieren. Leichtere Bilder, schnellere Interaktionen indirekt.

Ein paar Dinge habe ich auf nervigen Weg gelernt

Audit bevor Sie optimieren. Führen Sie die Seite durch PageSpeed Insights und reparieren Sie zuerst die schwerste Datei - der 1,2-MB-Täter ist wichtiger als das Rasieren von 4 KB von einem Symbol. Namensdateien wie ein Mensch: wireless-headphones-matte-black.webp Beat IMG_4532.jpg Bei der Bildsuche, da der Crawler den Dateinamen als Inhaltssignal liest. Schreiben Sie Alt-Text, den Sie tatsächlich sagen, wenn Sie das Foto am Telefon beschreiben - spezifisch, natürlich, Schlüsselwort-eingeschlossen Nur wo es passt, niemals Keyword-gefüllt. Und vergessen Sie nicht Ihr offenes Graph-Freigabebild: ein korrekt dimensioniertes 1200 × 630, das Sie in der Größe erstellt haben Bildgröße ändern ist das, was in sozialen Vorschauen und manchmal in der Suche auftaucht.

Häufig gestellte Fragen

Beeinflusst die Bildoptimierung wirklich die SEO-Rankings?

Ja, durch die Kern-Web-Vitalwerte. LCP und CLS sind bestätigte Google-Ranking-Signale, und beide sind stark bildgesteuert. Optimierte Bilder verbessern die Scores für die mobile Seitengeschwindigkeit in der Regel um einen spürbaren Vorsprung und auf Mobilgeräten, die sich auf eine Rangfolgebewegung übertragen lassen können. Es entsperrt auch Google Images als separate Verkehrsquelle.

Kann ich Bilder mit einem kostenlosen Online-Tool in AVIF konvertieren?

Normalerweise nicht, und Toolz.devs Formatkonverter kann nicht. In-Browser-Konverter ziehen auf <canvas>Und der Canvas-Encoder des Browsers gibt nur JPEG, PNG und WebP aus – es steht kein AVIF-Encoder zur Verfügung. Konvertieren Sie für den größten Teil des Gewinns zu WebP Online und generieren Sie AVIF in Ihrer Build-Pipeline mit Tools wie Sharp oder AviFenc, wenn Sie es benötigen.

Sollte ich 2026 WebP oder AVIF verwenden?

WebP ist die sichere Standardeinstellung und das, was ich zuerst greife - universeller Support, große Einsparungen, und Sie können es im Browser schaffen. AVIF komprimiert noch härter und ist es wert, für große Helden- und Galeriebilder hinzuzufügen, aber zur Bauzeit zu generieren und über die server <picture> mit einem webp-Fallback.

Auf welche Qualitätseinstellung soll ich JPEG und WEBP komprimieren?

Qualität 80 ist die zuverlässige Antwort auf Fotos. Es ist normalerweise bei normaler Sicht nicht vom Original zu unterscheiden, während es dramatisch kleiner ist. Vorschau bei 100% zoomen vor dem Commit, da Artefakte in Farbverläufen und Hauttönen angezeigt werden. Unter 60 wird die Komprimierung sichtbar.

Warum wurde mein transparentes PNG nach der Konvertierung in JPEG schwarz?

Weil JPEG keinen Alphakanal hat. Die HTML-Leinwand-Spezifikation besagt, dass transparente Pixel beim Serialisierungs-Serialisierungsformat auf ein nicht-alpha-Format auf Vollschwarz zusammengesetzt werden. Es ist erwartetes Verhalten, kein Fehler. Behalten Sie das Bild als PNG oder webp, um die Transparenz zu erhalten, oder fügen Sie es zuerst auf einem weißen Hintergrund zusammen, wenn Sie weiß.

Laden diese Tools meine Bilder auf einen Server hoch?

kein drohen Die Bildwerkzeuge auf toolz.dev verarbeiten alles lokal auf einem Canvas in Ihrem Browser – die Datei verlässt Ihr Gerät nie. Ein Nebeneffekt, der es wert ist, zu erfahren: Jeder Re-E-Codierung-Streifen Exif und GPS-Metadaten, der gut für den Datenschutz ist, bedeutet jedoch, dass eingebettete Kameradaten und Farbprofile ebenfalls gelöscht werden.

Was ist die ideale Dateigröße für ein Web-Bild?

Als grobe Ziel: Heldenbilder unter ~200 KB, Inhaltsbilder unter ~100 KB und Miniaturansichten unter ~30 KB. Diese sind sehr erreichbar, wenn Sie die Größe der tatsächlichen Anzeigebreite ändern und webp bedienen. Die genaue Anzahl ist weniger wichtig als die Gewohnheit, die Größe zu ändern, dann zu komprimieren und dann zu konvertieren.

Verwandte Lektüre und Werkzeuge:

• Bildkompresse — Größe nach der Größenänderung schneiden
• Bildgröße ändern — Responsive Größen und soziale Bilder erstellen
• Formatkonverter — Exportieren Sie PNG, JPEG oder WebP
• Das Handbuch des Entwicklers für Bildtools
• Bildkomprimierung erklärt