Website-Bild-Optimierung

Die Bildoptimierung ist einer der “lohnendsten” Aspekte der WordPress-Performance: Solange die Größe, die Abmessungen, die Formatierung und die Auslieferung der Bilder korrekt sind, verbessert sich das Ladeerlebnis bei gleicher Seitenstruktur und gleichem Theme sofort.

Aber die Bildoptimierung ist auch der einfachste Weg, um ein Chaos anzurichten, nicht weil es technisch zu schwierig ist, sondern weil die Informationen zu fragmentiert sind:
Sie lesen ein paar Artikel, wissen, dass “Kompression”, “WebP/AVIF”, “Lazy Loading”, und dann Blick auf die Plugin-Einführung und sagte “kostenlos jeden Monat! 100 Credits pro Monat”, “Free 20MB”, “1 Credit pro Bild”, aber je mehr ich lese, desto verwirrter werde ich. Ist kostenlos genug? Wie kann man die Gebühr abziehen? Haben Sie “das Gleiche” falsch verstanden? Und das Wichtigste:Hat es tatsächlich gewirkt, nachdem du es gemacht hast, oder nicht?

Dieser Artikel tut nur drei Dinge:

1. Gib dir eine ausführbare DateiStraßenkarte (auch Abb.)(Was zuerst zu tun ist, was als zweites zu tun ist)
2. Sei dir darüber im Klaren, für welche Option du dich entscheidest (was ist der Unterschied zwischen kostenlos und bezahlt und für wen ist jede Option geeignet)
3. Schreibe die häufigsten Fallstricke im Voraus auf (damit du nachher nicht lange suchen musst, um sie zu beheben).

1. die Quintessenz: Was WordPress bietet und was nicht

Wenn du nicht zuerst herausfindest, was der WordPress-Kern bereits tut, ist es leicht, eines von zwei Dingen zu tun:

• Anstatt die “freie Kapazität” zu nutzen, die du eigentlich genießen solltest, verbringst du Zeit/zahlst Geld, um das Rad immer wieder neu zu bauen.
• Ich dachte, WordPress würde “alle alten Bilder automatisch in WebP/AVIF konvertieren”, aber das tut es nicht!

Der WordPress-Kern hat diese wichtigen Funktionen bereits eingebaut:

• Responsive Bilder (srcset/sizes)Ab WordPress 4.4 gibt der Kern Bilder für die srcset 与 sizesund nutzt die beim Hochladen erzeugten Bilder in mehreren Größen, um dem Browser die Möglichkeit zu geben, je nach Bildschirmbedingungen eine geeignetere Ressource zum Laden auszuwählen.
• Natives träges LadenWordPress ab Version 5.5 ermöglicht standardmäßig das faule Laden von Bildern unter Verwendung von HTML-Standards. loading Implementierung des Attributs.
• Unterstützung für das Hochladen von WebPSeit WordPress 5.8 kannst du WebP als JPEG/PNG hochladen und verwenden (vorausgesetzt, deine Hosting-Umgebung unterstützt WebP).
• Unterstützung für das Hochladen von AVIFSeit WordPress 6.5 kannst du AVIF als JPEG/PNG hochladen und verwenden (hängt auch von der Unterstützung des Hostings ab).

Aber pass auf:
“Unterstützung für Upload/Nutzung” ≠ “Automatische Umwandlung/automatische Zustellung”.
Das heißt: Selbst wenn du bereits WP 6.5 benutzt, werden die JPG/PNGs in deiner Mediathek nicht von selbst in WebP/AVIF umgewandelt; du bekommst nicht automatisch den vollen “AVIF/WebP-Ausgabe entsprechend den Fähigkeiten des Browsers und Rückgriff auf das Originalbild bei nicht unterstützten Browsern”-Link! --Dieser Teil muss normalerweise durch ein Plugin oder einen Dienst gepatcht werden.

2) Roadmap: Bildoptimierung in 5 Schritten

Was zu tun ist, warum, was man tun muss, um sich zu qualifizieren, und was ein typischer Pit ist.

2.1 Zuerst die “Größe” richtig bestimmen (das wird am meisten übersehen, aber es lohnt sich am meisten)

Viele Sender sind nicht deshalb langsam, weil die Komprimierung nicht durchgeführt wird, sondern weil dieEin großes Bild heruntergeladen, das weit über den Anzeigebereich hinausgeht：
Wenn die Seite zum Beispiel nur 900px breit ist und du den Besucher aufforderst, das Originalbild mit 3000px herunterzuladen, lädt der Browser es einfach “herunter und verkleinert es dann”. Dadurch wird Bandbreite verschwendet, die Dekodierzeit erhöht und der erste Bildschirm verlangsamt.

WordPress 4.4+Responsive Image Mechanismus（srcset/sizes) wurde entwickelt, um genau dieses Problem zu lösen.

Mach das, was als Pass zählt:

• Wenn du eine Seite auf einem Handy öffnest, sollte die Größe des heruntergeladenen Bildes deutlich kleiner sein als auf dem Desktop
• Das gleiche Bild wird auf verschiedenen Geräten mit unterschiedlichen Ressourcengrößen geladen (anstatt immer das Originalbild herunterzuladen)

Die häufigsten Fallstricke:

• Es gibt Themes/Builder, die Diagramme als CSS-Hintergrundbilder behandeln oder sie auf eine eigene Weise ausgeben, die die srcsetDas Ergebnis ist ein großes Bild der
• Du verwendest extern verlinkte Bildbetten, Bildblöcke von Drittanbietern und kannst auch das von der Mediathek generierte Multi-Size-System umgehen

---

2.2 Komprimierung (die KB reduzieren, aber die Qualität nicht “vernichten”)

Der Kern der Komprimierung ist nicht “je kleiner, desto besser”, sondern “der Unterschied ist mit dem bloßen Auge kaum sichtbar, aber der Volumenverlust ist offensichtlich”.

Die Regeln lauten wie folgt:

• Fotografien/Live-Aufnahmen (Menschen, Produkte, Landschaften)Vorrangige verlustbehaftete Kompression (maximaler Gewinn)
• Screenshots der Benutzeroberfläche / textlastige BilderKonservativere Komprimierung, um unscharfen Text zu vermeiden
• Logo/SymbolPriorität SVG oder diskret verlustfrei (verlustfrei lässt sich leicht einfügen)

Mach das, was als Pass zählt:

• Deutliche Reduzierung der Bildgröße auf den meisten Seiten
• Kein sichtbares Rauschen, matschige Kanten, Farbblockbrüche, verschwommener Text

---

2.3 WebP / AVIF (Formatstrategie: kleiner für gleiche Definition)

WordPress unterstützt bereits das Hochladen WebP (5.8) vs. AVIF (6.5)。
Aber damit das Next Generation Format wirklich funktioniert, müssen in der Regel zwei Dinge geklärt werden:

1. Wie man historische Mediatheken im Stapelverfahren konvertiert(Ansonsten optimierst du nur für “neue Bilder, die später hochgeladen werden”)
2. Ob eine Kopie erstellt oder das Originalbild ersetzt werden soll(Dies ist ein riskanter Wendepunkt; wir werden uns später auf Plus WebP's “Replace and Delete Original Image” konzentrieren)

Empfohlener Schreibstil:

• WebP: allgemein als Standard bevorzugt (stabilere Kompatibilität)
• AVIF: eine weitere Komprimierungsrichtung, geeignet für große Bilder/große Bilder auf dem ersten Bildschirm/Albumbilder (aber mehrAbhängigkeit von der Unterstützung durch die Umwelt）

---

2.4 Lazy Loading sollte richtig eingesetzt werden (keine Einheitsgröße für alle)

WordPress 5.5 aufwärtsStandardmäßig träges LadenBild.
Es reduziert die Bandbreitennutzung während des ersten Renderings:

• Lazy Loading für “Off-Screen-Ressourcen”
• Das kritischste große Bild auf dem ersten Bildschirm (und in vielen Fällen das Schlüsselbild auf dem ersten Bildschirm) ist oft ungeeignet für das verzögerte Laden

---

2.5 Lieferschicht: CDN / Foto CDN

Komprimierung, Größenanpassung und Formatierung lösen das Problem der “kleineren Dateien, die passen”.
Wenn die Bilder jedoch immer aus einer gewissen Entfernung von der Quelle abgerufen werden, beeinträchtigt die Netzlatenz das Erlebnis dennoch erheblich. An dieser Stelle kommt die “Delivery Layer”-Lösung (CDN/Bild CDN) ins Spiel.

Zwei typische Richtungen:

• Cloudflare Polnisch：Cloudflare-DokumentationEs werden polnische Komprimierungsmethoden (verlustfrei/verlustbehaftet/WebP) vorgestellt, und es wird erwähnt, dass die Komprimierung mit dem format=auto Das WebP/AVIF-Format ist erlaubt.
• Jetpack Site Accelerator：Jetpack DokumentationErkläre, dass er Bilder optimiert und sie zusammen mit statischen Ressourcen über sein Netzwerk verteilt.

Die Bildoptimierung ist dafür verantwortlich, dass die Bilder kleiner und angemessener werden.CDN Verantwortlich für eine engere und stabilere

3) Auswahl: nur zwei Hauptrouten

Der häufigste Fehler bei der Bildoptimierung ist nicht “keine Plugins”, sondern zu viele Plugins, die zu doppelter Bearbeitung führen:
A komprimiert, B komprimiert, A konvertiert nach WebP/AVIF, B konvertiert, A ändert URLs, B schreibt um - du kannst nicht einmal sagen, was im Sender vor sich geht.

Regeln:

Es gibt nur einen Weg: Entweder alles kostenlos lokal oder eine Cloud-Komprimierung der drei.

• Route A (alle freien Orte):Plus WebP oder AVIF + EWWW Image Optimizer(oder nur einer)
• Route B (Cloud Compression Triple Option):ShortPixel / Imagify / TinyPNG

---

3.1 Route A: Vollständig frei lokal (plus WebP oder AVIF oder EWWW)

Diese Route ist gekennzeichnet durch:

• Du bist nicht auf “pro Monat/pro Blatt”-Komprimierungsdienste von Drittanbietern angewiesen (obwohl einige Funktionen als optionale Dienste angeboten werden können).
• Der Preis: Die Stapelverarbeitung kann bei CPU/IO einen höheren Serverbedarf haben, so dass Sie mehr auf “Strategie und Risiko” achten müssen.”

3.1.1 Plus WebP oder AVIF: Der Kern ist “Erzeugen/Ersetzen”, es ist nicht das traditionelle “Komprimierungswerkzeug”.”

• Wenn du Bilder mit vollem Volumen erstellst:Die ursprüngliche Bilddatei-ID wird durch WebP/AVIF überschrieben, die Originaldatei wird gelöscht und die URL im Inhalt wird ersetzt.。
• Das Plugin bietet WP-CLI-Befehle und erinnert daran: WP-CLI ist zuverlässiger, wenn es viele Dateien gibt.

Das bedeutet, dass statt “still und leise ein WebP für dich zu generieren”, es eineMigration von Vermögenswerten(Vor allem, wenn du die Option “Originalbild ersetzen und löschen” aktivierst).

Unterschiede zwischen den beiden Modellen

Modus 1: Originalbild behalten + WebP/AVIF-Kopie erstellen (stabiler)

• Vorteile: Einfacherer Rückgriff bei Kompatibilitätsproblemen
• Kosten: Die Festplattennutzung steigt (Originalbild + neues Format + mehrere Miniaturbilder)

Modus 2: Ersetzen und Löschen des Originalbildes (aggressiver)

• Vorteile: Festplatten erweitern sich nicht so schnell; Senderreferenzen werden direkt auf das neue Format übertragen
• Risiko: Du änderst “Assets + Referenzen”, was die Behebung von Kompatibilitätsproblemen verteuert (vor allem, wenn einige externe Systeme oder Themenlogiken vom ursprünglichen Dateinamen/Pfad/Format abhängen).

Typische Fallstricke von Plus WebP oder AVIF

1. Nach dem Ersetzen der gesamten Bibliothek werden einige Seitenbilder abnormal angezeigt.
   Der Grund dafür ist in der Regel nicht, dass das Bild “kaputt” ist, sondern dass irgendein Glied in der Kette von URL-Ersetzung, Caching, Thumbnail-Richtlinien usw. nicht korrekt ist.
2. Je größer die Anzahl der Vorschaubilder, desto größer ist der Umfang der Änderung
   WordPress erzeugt beim Hochladen eines Bildes mehrere Größen; Themes/Plugins können auch weitere Größen hinzufügen. Vollständiges Ersetzen bedeutet, dass du möglicherweise eine sehr große Sammlung von Dateien änderst.
3. Eine Formatmigration bedeutet nicht zwangsläufig, dass der Datenträger immer der kleinste ist.
   WebP/AVIF sind in der Regel kleiner, aber die “Größenstrategie” und die “Kompressionsstrategie” sind immer noch entscheidend. Denke nicht, dass Plus WebP “einen Klick schneller” ist.

---

3.1.2 EWWW Image Optimizer: Vertreter der freien lokalen Kompression

Die EWWW-Plugin-Seite ist sehr gut aufgestellt:

• Sie kann auf deinem Server mit einer Reihe von Tools optimiert werden (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, etc)
• Sie können auch die CPU-lastige Verarbeitung auf den Server verlagern (optional), wenn Sie eine höhere Komprimierung oder mehr CPU-Einsparungen benötigen.

Welche Rolle sollte das EWWW bei Route A spielen?

Wenn du Plus WebP als “Formatmigrations-/Ersatzstrategie” verwendest, dann ist EWWW die bessere Wahl:

• Komprimierung und Volumenoptimierung(insbesondere Gewichtsreduzierung von Rohdaten wie JPG/PNG)
• Batch-Optimierung der historischen Medienbibliothek(mit dem Ziel der “Volumenreduzierung” und nicht der “URL-Ersetzung”)

Typische Grube der EWWW

1. Erhöhte Serverlast während der Batch-Optimierung
   Da die lokale Komprimierung CPU/IO frisst, lautet die Lösung nicht “nicht verwenden”, sondern “Stapelverarbeitung, niedrige Spitzenwerte, Offload/Cloud-Option, falls erforderlich”.
2. “Ein WebP wird erzeugt” bedeutet nicht, dass das Frontend ein WebP erzeugen muss.
   Viele Plugins leiden unter diesem Missverständnis: Generierung ist eine Sache, Lieferstrategien (Rewrites, Bild-Tags, Cache-Treffer usw.) sind eine andere.
3. Mit anderen Plugins immer wieder das Gleiche tun
   Wenn du dich für Weg A entscheidest, versuche, keine ShortPixel/Imagify/TinyPNG-Wolkenkomprimierung zu überlagern; wenn du dich für Weg B entscheidest, schalte die Plus WebP-Ersatzlogik nicht ein. Grundprinzip:Ein Weg zum Ziel.

---

3.2 Route B: Cloud-Komprimierung in dreifacher Ausführung (ShortPixel / Imagify / TinyPNG)

Dieser Weg ist für Leute geeignet, die “Server-Ressourcen sparen wollen, Batch mit weniger Aufwand machen wollen und eine Abrechnung pro Guthaben/pro Volumen akzeptieren”.
Der irreführendste Punkt bei der Wolkenkomprimierung ist jedoch:Kostenlose Kredite sind nicht so einfach wie “kostenlose Blätter”!.. Die Anzahl der Thumbnail-Größen, ob WebP/AVIF generiert wird oder nicht und ob es immer wieder neu gepresst wird, kann den Verbrauch erheblich beeinflussen.

Im Folgenden erfährst du, was es mit kostenlos und gebührenpflichtig auf sich hat, wie Gutschriften abgezogen werden, in welche Fallstricke man am ehesten tappen kann und welche Standorttypen geeignet sind.

---

3.2.1 ShortPixel100 kostenlose Credits/Monat, aber die Credits werden durch Vorschaubilder und WebP/AVIF-Vergrößerungen verbraucht.

Was ist los mit kostenlos/bezahlt

In der Beschreibung des ShortPixel-Plugins steht eindeutig:

• 100 kostenlose Credits pro Monat
• Es gibt auch “Extra Unlimited Monthly Credits” (die Plugin-Seite gibt Auskunft über die entsprechenden Preise)
• Auch erhältlich als “einmalige Kreditpakete, die nie ablaufen” (mit Informationen zum Startpreis)

Tipp:

• Kostenlos: Gib eine bestimmte Anzahl von Credits pro Monat für leichte Seiten oder zum Testen
• Einwegpakete: Sie eignen sich für Websites mit großen Mediatheken, die ihre Bestände auf einmal ausräumen wollen (einmal kaufen und aufbrauchen, sie laufen normalerweise nicht ab).
• Monatlich/unbegrenzt: geeignet für Websites mit ständig aktualisierten Bildern und langfristig stabiler Optimierung

In der offiziellen KB von ShortPixel gibt es auch ein Update zum Thema “One Time Pack vs. Unlimited Monthly”.ausdrückliche ErklärungUnlimited Monthly ist eine monatliche (oder jährliche) Zahlung, die eine unbegrenzte Anzahl von Credits mit einem festen Kontingent von CDN bietet; einmalige Credits verfallen nicht, so dass Sie sie nach Bedarf verwenden können.

Das Wichtigste: Wie werden die ShortPixel-Gutschriften berechnet?

ShortPixel Offizielle Dokumentation KB hat es sehr unverblümt ausgedrückt:

• WordPress erstellt mehrere Vorschaubilder, wenn du ein Bild hochlädst;
• Jede Thumbnail-Optimierung zählt als ein Credit；
• Wenn du dich entscheidest, eine WebP- oder AVIF-Datei zu erstellen, wird dieJede WebP/AVIF-Version des Originalbildes und der Miniaturansicht verbraucht einen zusätzlichen Credit.；
• Du kannst bestimmte Vorschaubilder von der Optimierung ausschließen, um den Kreditverbrauch zu reduzieren.

Credits Beispiel：

Angenommen, du lädst 1 Bild hoch und das Theme/Plugin erzeugt 8 Vorschaubilder:

• Optimiere nur das Originalbild + Thumbnails: 1 (Original) + 8 (Thumbnails) = 9 Credits
• Wenn du auch WebP/AVIF erzeugen willst: eine weitere Next-Gen-Version für jede der 9 oben genannten → +9 Credits.
  Mit anderen Worten: Was du für “1 Bild” hältst, kann in Wirklichkeit fast “2-stellige Credits” verbrauchen.

Also:“100 Credits gratis” ist nicht dasselbe wie “100 Bilder gratis”.

Die häufigsten Fallstricke von ShortPixel

1. Kostenlose 100 Credits sind schnell aufgebraucht
   Ursache: viele Vorschaubilder und zusätzliche Credits für die Erstellung von WebP/AVIF.
   Anregung：

• Beurteile zuerst die Anzahl der Vorschaubilder der Website
• Unnötige Thumbnail-Größen ausschließen (nur Größen optimieren, die tatsächlich verwendet werden)
• Legen Sie die Komprimierungsstrategie fest, bevor Sie die Massenproduktion starten, um wiederholtes Ausprobieren und Fehler zu vermeiden.

2. Gleichzeitiges Stapeln anderer Konverter-Plug-ins
   Wenn du Plus WebP-Ersetzungen hast und ShortPixel Tags der nächsten Generation generiert/einfügt, stapelt sich die Logik und es wird schwieriger, Fehler zu beheben. Bei Variante B lässt du ShortPixel das allein machen.
3. Ich dachte, wenn ich es installiere, würde es “WebP/AVIF im Vordergrund” sein.”
   ShortPixel Plugin SeiteErwähnt, dass es WebP/AVIF konvertiert und Next-Gen-Bilder auf der Startseite hinzufügen kann (z.B. durch Tagging).
   Es ist aber trotzdem wichtig, die Ergebnisse danach zu überprüfen.

---

3.2.2 ImagifyKostenlos: 20MB/Monat; Kontingent wird nach “Originalbildgröße + Anzahl der Thumbnails” abgezogen, wiederholte Abzüge werden für erneutes Pressen vorgenommen.

Freier Betrag und Positionierung

Imagify Offizielle PreisseiteDie Schrift ist klar:Kostenloses Konto Monatliches Kontingent 20MB。
Auf der Plugin-Seite steht auch, dass es WebP/AVIF komprimieren, in der Größe verändern und konvertieren kann.

Wie wird die Quote abgezogen?

Imagify Offizielle Dokumentation “In ”Wie wird die Quotenauslastung berechnet?" wird der Abzugsmechanismus sehr klar dargestellt:

• Anzahl der Vorschaubilder beeinflusst den VerbrauchWenn du z.B. 10 Thumbnails hast, wird aus der Optimierung von 1 Bild die Optimierung von 11 Bildern (Original + 10 Thumbnails), die alle zum Quotenverbrauch beitragen.
• Abzug der Quote entsprechend der Größe des OriginaldokumentsWenn du zum Beispiel ein Bild mit 100 KB an Imagify schickst, werden 100 KB von der Quote abgezogen.
• Wenn du die Komprimierungsstufe änderst und erneut optimierst, wird die Quote wieder verbraucht。
• Derselbe API-Schlüssel kann für mehrere Standorte verwendet werden, aber die Kontingente werden zwischen ihnen aufgeteilt.

Das ist der “Kern des Verständnisses” von Imagify:
Es ist eher wie ein Traffic-Pack: Es wird so viel abgezogen, wie du sendest; je mehr Thumbnails du hast, desto mehr wird abgezogen; und du wiederholst den Abzug, wenn du ihn immer wieder neu drückst.

Leicht verständliches Imagify-Quotenbeispiel

Nehmen wir an, du lädst ein 800 KB großes Bild hoch und die Website generiert 8 Vorschaubilder.

• Imagify optimiert das “Originalbild + 8 Vorschaubilder” (wenn du dich dafür entscheidest, alle zu optimieren), was bedeutet, dass diese einzige Aktion eine Quote verbraucht, die der “Originalgröße all dieser Dateien zusammen” entspricht.
  Deshalb haben manche Websites das Gefühl, dass “20MB schnell aufgebraucht ist”: Es liegt nicht daran, dass Imagify nicht ausreicht, sondern daran, dass Sie zu viele Bilder auf einmal hochladen, zu viele Miniaturansichten, und dass Sie wahrscheinlich immer wieder neue Kompressionsstufen ausprobieren.

Die häufigsten Fallstricke von Imagify

1. Frei 20MB Nicht genug, um eine “vollständige Bestandsaufnahme des Standortes” durchzuführen”
   20MB eignet sich in der Regel besser für Tests mit leichten Aktualisierungen; wenn Ihre Medienbibliothek bereits umfangreich ist, ist für eine einmalige Bereinigung wahrscheinlich ein Upgrade erforderlich.
2. Wiederholte Anpassung der Verdichtungsstufen führt zu doppeltem Quotenverbrauch
   Imagify macht deutlich, dassBei einer erneuten Optimierung wird die Quote wieder verbraucht.
   Ich schlage vor, du machst die “Strategie” auf dieser Seite deutlich:

• Beginnen Sie mit einer kleinen Anzahl von Bildern, um den Komprimierungsgrad und das Aussehen zu bestimmen.
• Lege die Strategie fest und führe sie dann in Massen aus
  Vermeide wiederholtes Ausprobieren der gesamten Bibliothek

3. Mehrere Websites, die den API-Schlüssel gemeinsam nutzen, führen zu einer “unerklärlichen Quotenreduzierung”.”
   Wenn du denselben API-Schlüssel für mehr als eine Station verwendest, wird das Kontingent gemeinsam genutzt.
   In Team-/Multistationsszenarien ist es also am besten, wenn du dir im Klaren bist, welche Stationen gemeinsam und welche einzeln genutzt werden, um unkontrollierbare Budgets zu vermeiden.

---

3.2.3 TinyPNG(Tiny Compress Images): kostenlos 500 Credits/Monat; beim Wechsel zu WebP/AVIF wird “1 Credit pro Größe abgezogen”.”

Kostenlose Kredite und ihre Abrechnungsideen

Die WordPress-Plugin-Seite von TinyPNG ist sehr übersichtlich:

• 500 Credits pro Monat kostenlos
• In der “Allgemeinen WordPress-Installation” kannst du wahrscheinlich die Ca. 100 Bilder/Monat
• Wenn jedoch die AVIF- oder WebP-Konvertierung aktiviert ist:Jede Bildgröße verbraucht ein zusätzliches GuthabenVermutlich kann es also nur komprimiert und umgewandelt werden Ca. 50 Bilder/Monat(je nachdem, wie viele Vorschaubilder du hast).

Inzwischen hat auch Tinify (die Entwickler von TinyPNG/TinyJPG) ihre API-PreisseiteBeschreibung: Melde dich an und erhalte 500 kostenlose Kompressionen pro Monat. Danach wird dir die Anzahl der erfolgreichen Kompressionen in Rechnung gestellt, es gibt kein obligatorisches Abonnement.

Fasse die Art und Weise, wie TinyPNG verstanden wird, in einem Satz zusammen:
Es zählt die Credits; je mehr Miniaturgrößen du hast und je mehr WebP/AVIF du aktiviert hast, desto schneller werden die Credits verbraucht.

Leicht verständliche Beispiele für TinyPNG Credits

Angenommen, deine Website generiert 8 Miniaturbilder für jedes Bild:

• Nur Komprimierung: Original + 8 Vorschaubilder → 9 Credits erforderlich
• Wenn die WebP/AVIF-Konvertierung eingeschaltet ist: ein zusätzlicher Punkt pro Größe → wahrscheinlich fast das Doppelte!
  Das entspricht der Beschreibung auf der Plugin-Seite: Nach dem Einschalten ändert sich der kostenlose Betrag von etwa “100 Karten/Monat” auf “50 Karten/Monat”.

Die häufigsten Fallstricke von TinyPNG

1. Denke 500 Credits = 500 Bilder
   Das ist sie nicht. Er wird durch “Bildgröße/Variante” verbraucht. Auf der Plugin-Seite wird deutlich davor gewarnt, dass “Conversions für jede Bildgröße zusätzlich 1 Credit abziehen”.
2. Themes/E-Commerce-Plugins generieren zu viele Größen und die kostenlosen Credits nehmen deutlich ab
   Je mehr Größen es gibt, desto leichter lassen sich Kredite aufstocken und verbrauchen.
3. Nachdem Sie die Umwandlung aktiviert haben, stellen Sie fest, dass das Guthaben plötzlich ungenutzt ist.
   Das ist kein Fehler, sondern der Abrechnungsmechanismus.
   Strategieberatung:

• Wenn die kostenlose Phase hauptsächlich zur Komprimierung und Gewichtsreduzierung genutzt wird, kannst du mit der reinen Komprimierung beginnen und die Konvertierung erst dann einschalten, wenn du sicher bist, dass deine Website-Struktur stabil ist und du Next-Gen wirklich brauchst.

4 Empfehlung für Unterszenarien: Wie wählt man verschiedene Arten von Standorten aus?

Auch WordPress, Inhaltsseiten, E-Commerce-Seiten, Portfolios und Mitgliederseiten haben nicht die gleichen “Druckpunkte” für Bilder.

4.1 Inhaltsseiten/Blogs (viele Artikelgrafiken, mittlere Häufigkeit der Aktualisierungen)

Prioritätsempfehlungen:

1. Sizing-Strategie (Schritt 1)
2. Komprimierung (Schritt 2)
3. WebP (Schritt 3)

Eine geeignetere Route:

• Willst du speichern: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Wenn du frei gehen willst: Route A (Plus WebP + EWWW), aber es wird empfohlen, mit dem “konservativen Modus (ohne Löschen des Originalbildes)” zu beginnen, um das Risiko abzuschätzen.

Typische Grube:

• Das erste Bild auf der Artikelseite ist sehr groß, eine falsche Strategie für träges LadenVerlangsamt den ersten Bildschirm

4.2 E-Commerce/Produktseite (viele Vorschaubilder, viele Bildvarianten, Stabilität zuerst)

Im E-Commerce liegt das Problem höchstwahrscheinlich nicht darin, dass der Komprimierungseffekt nicht gut ist, sondern darin, dass die optimierte Größe nicht stimmt, die Vorschaubilder fehlen und die vorderen Komponenten das Bild nicht erfassen können.

Prioritätsempfehlungen:

1. Stabilität geht vor: konservative Komprimierungsstrategie, nicht gleich eine komplette Bibliothek ersetzen
2. Bewertung der Thumbnail-Größen: E-Commerce-Themes erzeugen in der Regel mehr Größen, und der Mengenverbrauch wird vergrößert (ShortPixel/TinyPNG ist besonders auffällig)
3. Validierung im kleinen Maßstab vor der Charge (sehr kritisch)

Eine geeignetere Route:

• Route B ist in der Regel unkomplizierter: ShortPixel/Imagify/TinyPNG können alle Batches verarbeiten, und es ist wichtig, dass du den Quotenmechanismus verstehst und die Kosten im Voraus abschätzt.
• Route A ist in Ordnung, aber sei vorsichtiger mit dem Verhalten von Plus WebP “IDs überschreiben/ursprüngliche Bilder löschen/URLs ersetzen”: Es handelt sich um eine Asset-Migration, und es ist nicht empfehlenswert, gleich alles zu ersetzen.

4.3 Portfolio/Fotostation (Einzelbildqualität empfindlich, große Bilder, hohe Anforderungen an die Betrachtung)

Prioritätsempfehlungen:

1. Größenpolitik (Kontrolle des Anzeigebereichs)
2. Komprimierungsstrategie (besser größer sein, als die Details zu erdrücken)
3. WebP/AVIF (große Bildszenengewinne sind offensichtlich, aber überprüfe die Ansicht)

Eine geeignetere Route:

• Imagify: Ziehe die Quote nach der “Größe des Originalbildes” ab. Diese Art von Website ist leichter “budgetkontrollierbar” (du weißt, wie viel du für jedes große Bild abziehen musst), aber vermeide wiederholte Repressionen.
• ShortPixelWenn die Thumbnail-Größe nicht sehr groß ist, sind die Credits auch sehr intuitiv; aber wenn du viele Größen +next-gen generierst, wird der Credits-Verbrauch vergrößert, und du musst vorausplanen.

5) Quoten-/Fakturierungsvergleich: “Kostenlos ist nicht genug” relativieren

Welches ist das bessere Angebot und wie lange ist es kostenlos?

5.1 Drei Rückvergütungsmodelle

• ShortPixel(Abspann)Credits basieren auf “Originalbild + Anzahl der Thumbnails”; zusätzliche Credits werden für jede entsprechende Version von WebP/AVIF abgezogen.
• Imagify(MB Quote)Je mehr Vorschaubilder, desto mehr wird abgezogen; beim erneuten Pressen wird wieder abgezogen.
• TinyPNG(Abspann)500 Credits pro Monat; wenn du die WebP/AVIF-Konvertierung aktivierst, werden zusätzliche Credits für jede Bildgröße abgezogen.

5.2 Schnellschätzungsmethoden

Du kannst es folgendermaßen einschätzen:

1. Suchen Sie ein zufälliges “Originalbild, das Sie häufig hochladen” und sehen Sie nach, wie groß es ist (z. B. 300KB / 1MB / 3MB).
2. Je nachdem, wie viele Vorschaubilder deine Website erzeugt (z.B. 5 / 10 / 20)
3. Entscheide, ob du WebP/AVIF generieren willst (ja/nein)

Dann verwende die folgende “Kopfrechnen”, um den Verbrauch zu verstehen:

• ShortPixel≈ (1 + Anzahl der Thumbnails) Credits pro Bild; wenn du WebP/AVIF generierst, verdoppelt sich das ≈ nochmals (da die Next-Gen-Version auch Credits nimmt)
• ImagifyJedes Bild ≈ (Originalgröße + jede Thumbnailgröße) zieht Quote ab; ändere die Komprimierungsstufe und komprimiere erneut, dann wird wieder abgezogen.
• TinyPNG500 Credits kostenlos; wenn deine Website viele Größen pro Bild generiert und die Konvertierung aktiviert ist, sinkt die Anzahl der kostenlosen Credits erheblich (die Plugin-Seite gibt eine visuelle Erwartung von “~100 Credits/Monat” gegenüber “~50 Credits/Monat” an)

6) Risikowarnungen

Risiko 1: Lass nicht zu, dass mehrere Plugins immer wieder das Gleiche tun

Das ist die häufigste “Quelle der Katastrophe”.”

• Route A:Plus WebP oder AVIF + EWWW(Teilt euch die Arbeit auf, führt nicht gleichzeitig gleichartige Umstellungen und Lieferungen durch oder installiert nur eine von beiden)
• Route B: ShortPixel / Imagify / TinyPNG wähle drei(wähle eine für Kompression und Next-Gen)

Risiko 2: Außerdem ist die WebP-Funktion “ID überschreiben / Originalbild löschen / URL ersetzen” eine Asset-Migration.

Hervorhebung hinzugefügt:Plus WebP In der Beschreibung steht eindeutig, dass bei der vollständigen Generierung die ursprüngliche Bild-ID überschrieben, die Originaldatei gelöscht und die Inhalts-URL ersetzt wird.
Das bedeutet, dass es sich nicht um eine “kleine Einstellung handelt, die jederzeit zurückgenommen werden kann”, sondern um eine Änderung auf Vermögensebene.

Die vorgeschlagene Strategie sollte lauten:

• Zuerst ein kleiner Test (ein paar Dutzend bis ein paar Hundert)
• Überprüfen Sie, ob die Anzeige im Frontend, die Miniaturansichten und die Cache-Aktualisierungen ordnungsgemäß funktionieren.
• Vollständige Bearbeitung der Bibliothek überdenken

Risiko 3: Der tatsächliche Verbrauch an “Gratis-Credits” für die Cloud-Komprimierung hängt von der Anzahl der Vorschaubilder und der Auswahl der nächsten Generation ab.

• ShortPixelThumbnails und Next-Gen beeinflussen die Credits erheblich.
• TinyPNGWenn du WebP/AVIF aktivierst, wird ein zusätzliches Guthaben für jede Bildgröße abgezogen.
• ImagifyJe mehr Thumbnails abgezogen werden, desto mehr wird abgezogen. Bei starkem Druck wird der Abzug wiederholt!

Risiko 4: “WebP/AVIF generiert” bedeutet nicht “WebP/AVIF wird vom Front Office geliefert”.”

Viele Leute fühlen sich nach der Konvertierung “nicht schneller”, weil das Frontend immer noch JPG/PNG produziert (Caching/Umschreiben/Tagging/Browser-Aushandlung etc. sind nicht korrekt).

7. wie überprüft werden kann, ob die Maßnahme wirksam geworden ist, nachdem sie durchgeführt wurde

4 sehr einfache Validierungspunkte:

1. Ob dieselbe Seite ein zweites Mal aktualisiert wird und gleichmäßiger und schneller lädt(Caching und Optimierung des physikalischen Sinns, ob es funktioniert)
2. Unterscheiden sich die Größen von Bildern, die auf Mobiltelefonen und Desktops geladen werden, erheblich(ansprechbar) srcset/größen (ob sie funktionieren oder nicht)
3. Überprüfe stichprobenartig einige Bilder: ob WebP- oder AVIF-Dateien/Ressourcen vorhanden sind(Verwendet die Website tatsächlich nächste Generation）
4. Probiere ein paar Bilder aus: zoome sie heran, um zu sehen, ob sie sichtbar verschwommen sind, ob der Text unscharf ist(komprimierte Masse ist nicht übermäßig)

Wenn alle vier übereinstimmen, ist die von dir gewählte Route abgefahren worden. Der nächste Schritt. CDN “Lieferschicht”wird das Ganze stabiler sein.

8) Empfehlungen für Maßnahmen

1. Wähle zuerst deine Route:

• Ich versuche, so frei wie möglich zu sein.: Plus WebP oder AVIF + EWWW (oder nur eines davon)
• Willst du Server-Ressourcen sparen, bezahle pro Guthaben für mehr SeelenfriedenShortPixel / Imagify / TinyPNG - wähle eine aus!

2. Mache zuerst einen kleinen Test (ein paar Dutzend)
3. Vergewissere dich, dass alles in Ordnung ist, bevor du loslegst
4. Weitere Verbesserungen bei der Lieferstabilität sind erforderlich:lesen CDN Beschleunigung

allgemeine Probleme

1. wie viele Plug-ins muss ich installieren? Kann ich sie alle installieren?

Versuche, nur eine Route zu nehmen.

• Route A: Plus WebP oder AVIF + EWWW Image Optimizer (oder nur eines von beiden)
• Route B: ShortPixel / Imagify / TinyPNG - wähle eine!
  Wenn du in der gleichen Station mehrere Plug-ins gleichzeitig “Komprimierung / WebP / AVIF übertragen / URL ändern / Rewrite ausliefern” lässt, wird das wahrscheinlich immer chaotischer, aber es ist auch am schwierigsten zu kontrollieren.

2) Unterstützt WordPress nicht bereits WebP/AVIF? Brauche ich noch ein Plugin?

Es muss getrennt werden:
“Unterstützung für Upload/Nutzung” ≠ “Automatische Umwandlung/automatische Zustellung”.
WordPress 6.5 konvertiert alte JPG/PNG-Dateien nicht automatisch in WebP/AVIF und übernimmt auch nicht automatisch den Export von AVIF/WebP in browserfähige Dateien und Fallback-Dateien. Normalerweise braucht man ein Plugin oder einen Dienst, damit die historische Mediathek funktioniert.

3) Was ist der “lohnendste” Schritt bei der Bildoptimierung?

Normalerweise ist es Stelle zuerst die “Größen” richtig ein (srcset/sizes).。
Viele Websites sind nicht langsam, weil sie keine Komprimierung haben, sondern weil die Seite nur 900px groß ist und der Nutzer aufgefordert wird, ein 3000px großes Bild herunterzuladen. Komprimierung spart zwar KB, aber die “falsche Größe” führt dazu, dass du umsonst ein Vielfaches mehr Daten herunterlädst.

4) Wie kann ich sicher sein, dass ich das “kleinere Bild” lade und nicht das Originalbild für immer?

Schau dir zwei Phänomene an:

• Wenn du eine Seite auf einem Handy öffnest, ist die Größe des heruntergeladenen Bildes deutlich kleiner als auf dem Desktop
• Dasselbe Bild wird mit unterschiedlichen Ressourcengrößen auf verschiedenen Geräten geladen
  Wenn das Originalbild für immer heruntergeladen wird, liegt das häufig daran, dass das Theme/der Builder das Bild als CSS-Hintergrundbild oder als benutzerdefinierte Ausgabe behandelt und die Größenveränderung der Medienbibliothek mit srcset umgeht.

5) Bedeutet “WebP/AVIF generiert”, dass das Frontend WebP/AVIF erzeugen muss?

Nicht gleich.
Mit der Erzeugung ist nur die “Dateiebene” fertig; ob das Frontend tatsächlich WebP/AVIF liefert, hängt von Rewrites, Bild-Tagging-Richtlinien, Cache-Treffern, Browser-Verhandlungen und so weiter ab. Wenn du fertig bist, solltest du ein paar Bilder stichprobenartig auf Ressourcentypen überprüfen.

6. plus Was ist so gefährlich an WebP oder AVIF? Kann ich die gesamte Bibliothek mit einem Klick starten?

Sein Risikopunkt ist nicht die “Kompression”, es istVeränderungen bei der Migration von Vermögenswerten：

• Die vollständige Generierung kann die ID der Originalbilddatei überschreiben, die Originaldatei löschen und die URL im Inhalt ersetzen.
  Der Grund dafürEs ist nicht empfehlenswert, gleich die ganze Bibliothek zu ersetzenTeste zuerst in kleinem Maßstab (zehn bis hundert) und halte Backups bereit, bevor du die gesamte Bibliothek bearbeitest.

7 Welche Wahl gibt es zwischen den beiden Modi von Plus WebP: das Originalbild behalten oder das Originalbild ersetzen und löschen?

Einfach zu verstehen:

• Modus 1: Originalbild behalten + WebP/AVIF-Kopie erstellen (stabiler)Praktisch für Rollbacks, aber der Speicherplatz wird größer (Originalbild + neues Format + Miniaturansichten in mehreren Größen).
• Modus 2: Ersetzen und Löschen des Originalbildes (aggressiver)Festplatten sind weniger anfällig für Blähungen, aber du änderst “Assets + Referenzen”, was die Behebung von Kompatibilitätsproblemen teurer macht.
  Je komplexer die Website ist (E-Commerce/Multi-Plugin/Multi-Größe), desto eher empfiehlt es sich, mit einem stabileren Modell zu beginnen.

8. ist die kostenlose lokale Komprimierung von EWWW Image Optimizer ausreichend? Wird es den Server überfordern?

EWWW ist eher ein “lokaler Verdichter”: Er frisst CPU/IO.
Es ist üblich, dass die Last während der Batch-Optimierung ansteigt, was nicht bedeutet, dass sie “nicht funktioniert”, sondern vielmehr, dass die Strategie stimmen sollte: Batch, niedrige Spitzen und Offload-/Cloud-Optionen, wenn nötig.
Wenn du Einsparungen erzielen willst oder deine Serverressourcen knapp sind, ist Route B serverfreundlicher.

9. 100 Gratis-Credits/Monat bei ShortPixel, warum habe ich das Gefühl, dass sie nach ein paar Bildern weg sind?

auf Grund von Credits ist nicht die “Anzahl der Bilder”.”Die next-gen wird durch ein Thumbnail mit der next-gen vergrößert:

• Originalbild + jedes Thumbnail zählt als Credit
• Wenn ein WebP/AVIF erzeugt wird, wird für jede entsprechende Version ein zusätzliches Guthaben verbraucht.
  Was du also für “1 Bild” hältst, kann in Wirklichkeit fast “2-stellige Credits” verbrauchen. shortPixel

10. 20MB/Monat sind bei Imagify kostenlos, warum geht es auch schnell zu Ende?

Imagify ist eher ein “Verkehrspaket”:

• Wie du es geschickt hast.Original DateigrößeAbzug von Quoten
• Je mehr Vorschaubilder du hast, desto mehr verbrauchst du
• Das Ändern der Komprimierungsstufe zur erneuten Optimierung verbraucht die Quote erneut
• Derselbe API-Schlüssel für mehrere Standorte, Quota-Sharing
  20MB wird bald aufgebraucht sein“ wird also oft durch zu große Bilder, zu viele Vorschaubilder oder durch wiederholtes Ausprobieren verursacht.

11. 500 Credits/Monat für TinyPNG sind kostenlos, warum sagt das Plugin, dass es nur etwa 100 Credits/Monat und dann 50 Credits/Monat mit WebP/AVIF sind?

Denn auch TinyPNG-Credits werden durch “size/variant” vergrößert:

• Eine normale WordPress-Installation komprimiert wahrscheinlich etwa 100 Blätter/Monat.
• Aktiviere die AVIF- oder WebP-Konvertierung:Jede Bildgröße verbraucht ein zusätzliches GuthabenDu kannst also wahrscheinlich nur etwa 50 Bilder pro Monat komprimieren und konvertieren (abhängig von der Anzahl der Miniaturgrößen).
  Also 500 Credits ≠ 500 Bilder.

12. wie viele Vorschaubilder gibt es auf meiner Website? Warum ist das so wichtig?

WordPress generiert mehrere Größen für das Hochladen eines Bildes; Themes/Plugins (insbesondere E-Commerce) können weitere Größen hinzufügen.
Die Credits/Quoten für die Cloud-Komprimierung sind in der Regel “Original + Thumbnails zusammen”. Je mehr Thumbnails du also hast, desto weniger freie Credits stehen dir zur Verfügung.

13. ist "Lazy Loading" immer schneller? Warum sagen manche Leute, dass "Lazy Loading" die Dinge verlangsamt?

Lazy Loading ist für “Off-Screen-Ressourcen” geeignet.
Wenn der erste Bildschirm des kritischsten großen Bildes auch verzögert geladen wird, kann das die Erfahrung des ersten Bildschirms verlangsamen. WordPress 5.5 ist seit der Standardeinstellung “Lazy Loading” in Ordnung, aber es gibt keine "Einheitsgröße für alle".

14. ich reise auf Route A oder B. Wann brauche ich CDN / Bild CDN?

Komprimierung, Größenanpassung und Formatierung lösen das Problem der “kleineren Dateien, die passen”;
CDN Die Lösung besteht darin, eine engere und stabilere。
Wenn Bilder aus einer Entfernung von der Quellseite abgerufen werden, die zu einer erheblichen Latenz führt, dann wird die Ergänzung von CDN/Bildern mit CDN (z. B. Cloudflare Polish / Jetpack Site Accelerator) insgesamt stabiler sein, lesen WordPress CDN Beschleunigung。

15. wie kann ich am einfachsten überprüfen, ob es wirklich funktioniert, wenn ich fertig bin?

Die zeitsparendste Überprüfungsmethode:

• Ob dieselbe Seite ein zweites Mal aktualisiert wird und gleichmäßiger und schneller lädt
• Unterscheiden sich die Größen der Bilder, die auf Handys und Desktops geladen werden, merklich (spielt srcset/sizes eine Rolle)?
• Überprüfe stichprobenartig einige Bilder: ob WebP- oder AVIF-Dateien/Ressourcen vorhanden sind
• Probiere ein paar Bilder aus: zoome sie heran, um zu sehen, ob sie sichtbar verschwommen sind, ob der Text unscharf ist