Der größte Einzelleistungsgewinn, den ich je auf WP Adminify' s-Marketing-Seite ausgeliefert habe, war ' t ein Caching-Plugin oder eine CDN-Optimierung Es war das Löschen eines Bildes Unser alter Held war ein 2.400 px PNG-Screenshot I' d exportiert bei & quot; volle Qualität" weil ich hartnäckig glaubte, dass PNG knackig bedeutete Diese eine Datei war 1,4 MB. Auf einem Android der Mittelklasse über 4 G war es das größte Contentful Paint-Element - und es zog LCP auf ungefähr 4,1 Sekunden. Ich habe es gegen 84 KB ausgetauscht WebP Bei der tatsächlichen Displaybreite und LCP fiel am selben Nachmittag unter 1,9. Kein Code Nur ein kleineres Bild.
That' s das Frustrierende an Bild-SEO It' s nicht exotisch Bilder sind normalerweise das schwerste auf der Seite - oft fast die Hälfte der gesamten Bytes - und doch behandeln die meisten von uns sie als einen nachträglichen Einfall Wir lassen ein Kamera-Original ins CMS fallen, geben & quot; screenshot" in das Alt-Feld ein, und gehen weiter Dann fragen wir uns, warum die Kernnetzvitale Bericht in der Search Console blutet auf dem Handy rot.
Diese Anleitung ist die Checkliste, die ich tatsächlich auf Toolz.dev und Client-Seiten ausführe, geschrieben aus der Perspektive von jemandem, der dieses Zeug versendet. I & #39; werde ehrlich sein, was die kostenlosen Tools tun und - genauso wichtig - was sie tun & #39; t. Jedes Bildtool 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/heightAttribute, um Layoutverschiebung zu stoppen, Alt-Text zu schreiben, den ein Mensch laut sagen würde, und alles unter dem Falt auf die faule Haut zu legen Tun Sie das und Ihre LCP und CLS verbessern sich beide - die beiden bildgesteuerten Core Web Vitals, auf denen Google tatsächlich rangiert.
Warum sind Bilder für SEO so wichtig?
Zwei der drei Core Web Vitals sind verkleidete Bildprobleme Größte Contentful Paint ist auf den meisten Inhaltsseiten das Heldenbild, das seinen Download beendet Kumulative Layout-Verschiebung ist sehr oft ein Bild, das spät geladen wird und den Text eine Zeile nach unten schiebt Beides sind bestätigte Ranking-Eingaben, und beides sind Dinge, die Sie beheben, indem Sie Bilder besser handhaben - nicht, indem Sie mehr Inhalte schreiben.
There' s ein zweiter Traffic-Kanal, den die Leute vergessen: Google Images Für viele E-Commerce, Rezept, Reise - und Design-Seiten ist die Bildersuche ein aussagekräftiger Ausschnitt organischer Besuche, manchmal ein Fünftel davon Dieser Traffic hängt ganz von Dingen ab, die ein Crawler lesen kann - dem Dateinamen, dem Alt-Text, der umgebenden Kopie, und ob das Bild überhaupt klein genug ist, um zeitnah 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 Fotografien - alles mit glatten Farbverläufen und Tausenden von Farben It' s verlustbehaftet, was genau das ist, was Sie für ein Foto wollen Bei Qualität 7585 ist die Komprimierung für einen normalen Betrachter unsichtbar und die Datei ist ein Bruchteil des Originals Don' verwenden Sie es nicht für alles mit harten Kanten, Text oder Transparenz.
PNG Verlustfrei ist Verwenden Sie es für Screenshots, Logos, Diagramme, und alles mit flachen Farbbereichen oder Transparenz Der Haken: für ein Foto erzeugt PNG eine komisch große Datei im Vergleich zu JPEG Mein 1,4 MB Heldenfehler war genau dieser - ein fotografisch-ischer 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 bedeutungsvoll kleiner als WebP - weil it's auf dem AV1-Videocodec aufbaut It's ein tolles Format Aber ich muss hier direkt mit Ihnen sein, denn viele Anleitungen (einschließlich des Entwurfs, den dieser Artikel ersetzt hat) sagen Ihnen, dass Sie " einfach in AVIF" konvertieren; mit einem Online-Tool, und das & #39;s funktioniert nicht wie die Browser-Canvas-Kodierung funktioniert.
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 & #39; t AVIF ausgeben, und die meisten In-Browser-Konverter auch nicht Der Grund ist technischer Natur: Das Tool zeichnet Ihr Bild auf eine <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 Squoosh's Offline-Encoder - das und #39;s, zu denen AVIF sowieso gehört, weil seine Kodierung langsam ist und Sie #39; Sie möchten es nicht für jedes Bild von Hand tun.
| Format | am besten für | verlustbezogen? | Toolz.dev-Konverter kann es ausgeben? |
|---|---|---|---|
| JPEG | Foto | ja | ja |
| PNG | Screenshots, Logos, Transparenz | kein | ja |
| WebP | Fast alles im Web | beide | ja |
| Avif | Maximale Komprimierung bei schweren Bildern | ja | Nein - verwenden Sie ein Build-Tool |
| SVG | Ikonen, Logos, Vektorgrafiken | n / a | Nein (Vektor, nicht Leinwand) |
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, die Breite auf die größte Größe einstellen, die das Bild tatsächlich rendern wird bei (überprüfen Sie Ihr Layout - ein Blog-Body-Image ist oft 720 –800 px, nicht 1920).Der Resizer passt in Ihr Zielfeld und dehnt oder schneidet nie, also ist das Seitenverhältnis sicher. Dann nehmen Sie die Ausgabe in Bildkompresse Und ziehen Sie die Qualität nach unten, bis Sie es gerade noch erkennen können - normalerweise 78 – 82 für Fotos Vorschau mit vollem Zoom, bevor Sie sich verpflichten; Artefakte verstecken sich in Farbverläufen und Hauttönen, nicht im Miniaturbild.
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 mal ein transparentes Logo in JPEG umgewandelt und die transparenten Bereiche kamen einfarbig schwarz raus Ich nahm an, dass das Tool kaputt ist und habe zwanzig Minuten damit verbracht, es anzustarren It' s kein Bug - it' s die HTML-Spezifikation Wenn man eine Leinwand in ein Format ohne Alphakanal (JPEG) serialisiert, werden die transparenten Pixel auf einfarbig schwarz zusammengesetzt, wenn man Transparenz braucht, dann behält man PNG oder nutzt WebP, das Alpha unterstützt, wenn man gezielt einen weißen Hintergrund haben möchte, legt man zuerst eine weiße Ebene ab.
Jeder Re-E-Codierung Streifen EXIF und GPS-Metadaten. Da diese Tools das Bild auf eine frische Leinwand neu zeichnen, hat die Ausgabe kein EXIF, keine Kamera-Info, keine eingebetteten GPS-Koordinaten That' s ein echter Datenschutzgewinn - you' veröffentlichen nicht versehentlich den Breiten-/Längengrad, den Ihr Telefon in ein Foto eingeprägt hat Aber it's ist auch ein Gotcha, wenn Sie sich auf eingebettete Farbprofile oder urheberrechtliche Metadaten verlassen; diese gehen auch Für SEO spielt es keine Rolle und #39; aber wissen Sie, dass es passiert & #39;s.
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 Attribut ist der Teil, den die Leute überspringen, und wenn man es überspringt, wird das Ganze leise unterbrochen - ohne es geht der Browser davon aus, dass das Bild den Ansichtsfenster füllt und den größten Kandidaten ergreift. Sagen Sie ihm, wie breit das Bild wirklich rendert, und es lädt das richtige herunter.
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 Regel, die ich verwende: Beschreiben Sie das Bild so, wie Sie & #39; d es jemandem in einem Telefonanruf beschreiben Spezifisch, natürlich, kurz - unter etwa 125 Zeichen, so dass Bildschirmleser es nicht umständlich kürzen & #39; t skip & quot;image of & quot; oder & quot; photo of, " weil der Bildschirmleser bereits ankündigt, dass es it& #39;s ein Bild; führt mit diesen Verschwendungen der Listener's Zeit. Und wenn Ihr Zielschlüsselwort wirklich zum Bild passt, fügen Sie es einmal ein & #quot; es braucht.
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 die Leute falsch verstehen: Rein dekorative Bilder - ein Trennwand, ein Hintergrundblühen - sollten einen 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): Ihr Held ist normalerweise das LCP-Element Servieren Sie es in den richtigen Dimensionen, im WebP, in der 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 du optimierst Führe die Seite durch PageSpeed Insights und fixiere zuerst die schwerste Datei - der 1,2 MB große Täter ist wichtiger als das Abrasieren von 4 KB von einem Icon Namensdateien wie ein Mensch: wireless-headphones-matte-black.webp Beat IMG_4532.jpg In der Bildersuche, weil der Crawler den Dateinamen als Inhaltssignal liest Schreiben Sie alt text you' d tatsächlich sagen, das Foto jemandem am Telefon zu beschreiben - spezifisch, natürlich, Keyword-eingeschlossen Nur da, wo es passt, niemals mit Stichwörtern gefüllt Und don' vergiss dein nicht Grafik öffnen Bild teilen; ein korrekt dimensioniertes 1200 ̄NF630, das Sie in 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 Browser' s Canvas-Encoder gibt nur JPEG, PNG und WebP aus - dort's kein AVIF-Encoder, der ihm zur Verfügung steht Konvertieren Sie für den größten Teil des Gewinns online in WebP und generieren Sie AVIF in Ihrer Build-Pipeline mit Tools wie scharfen oder avifenc, wenn Sie es benötigen.
Sollte ich 2026 WebP oder AVIF verwenden?
WebP ist die sichere Voreinstellung und das, was ich zuerst erreiche - universelle Unterstützung, große Einsparungen, und Sie können es im Browser machen AVIF komprimiert noch härter und lohnt sich für große Helden - und Galeriebilder hinzuzufügen, aber generieren Sie es zur Build-Zeit und bedienen Sie es über <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?
Nein. Die Bildwerkzeuge auf Toolz.dev verarbeiten alles lokal auf einer Leinwand in Ihrem Browser - die Datei verlässt Ihr Gerät nie Ein wissenswerter Nebeneffekt: Jede Neukodierung streift EXIF - und GPS-Metadaten, was zwar gut für die Privatsphäre ist, aber bedeutet, dass eingebettete Kameradaten und Farbprofile ebenfalls fallen gelassen 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- Dateigröße nach Größenänderung ausschneiden
- Bildgröße ändern- responsive Größen und soziale Bilder erstellen
- Formatkonverter- PNG, JPEG oder WebP exportieren
- Das Handbuch des Entwicklers für Bildtools
- Bildkomprimierung erklärt
