Website-Bild-Optimierung

Die Optimierung von Bildern 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 Thema oft sofort.

Aber die Bildoptimierung ist auch der einfachste Weg, ein Chaos zu verursachen, 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:Wurde es tatsächlich wirksam, nachdem Sie es getan haben, oder nicht?

Dieser Artikel dient nur drei Zwecken:

1. Sie erhalten eine ausführbare DateiStraßenkarte (auch Abb.)(Was ist zuerst zu tun, was ist als zweites zu tun)
2. Seien Sie sich im Klaren darüber, für welche Option Sie sich entscheiden (was ist der Unterschied zwischen kostenlos/bezahlt und für wen ist jede Option geeignet)
3. Notieren Sie sich die häufigsten Fallstricke im Voraus (so dass Sie nachher nicht lange suchen müssen, um das Problem zu lösen)

1. die Quintessenz: Was WordPress bietet und was nicht

Wenn Sie nicht zuerst herausfinden, was der WordPress-Kern bereits tut, können Sie leicht eines von zwei Dingen tun:

• Anstatt die “freie Kapazität” zu nutzen, die Sie eigentlich genießen sollten, verbringen Sie Zeit/zahlen 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 verfügt über diese wichtigen Funktionen:

• Reaktionsfähige Bilder (srcset/Größen)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 "Lazy Loading" von Bildern unter Verwendung von HTML-Standards. loading Implementierung des Attributs.
• Unterstützung für das Hochladen von WebPSeit WordPress 5.8 können Sie WebP als JPEG/PNG hochladen und verwenden (sofern die Hosting-Umgebung WebP unterstützt).
• Unterstützung für das Hochladen von AVIFWordPress ab Version 6.5 kann AVIF als JPEG/PNG hochladen und verwenden (auch abhängig von der Unterstützung durch das Hosting).

Aber aufgepasst:
“Unterstützung für Upload/Nutzung” ≠ “Automatische Konvertierung/automatische Zustellung”.
Das heißt: selbst wenn Sie bereits WP 6.5 verwenden, werden die JPG/PNGs in Ihrer Mediathek nicht von selbst in WebP/AVIF umgewandelt; Sie erhalten nicht automatisch den vollständigen Link “Ausgabe von AVIF/WebP entsprechend den Möglichkeiten des Browsers und Rückgriff auf das Originalbild bei nicht unterstützten Browsern”! --Dieser Teil muss normalerweise durch ein Plugin oder einen Dienst gepatcht werden.

2) Fahrplan: Bildoptimierung in 5 Schritten

Was zu tun ist, warum, was zu tun ist, um sich zu qualifizieren, und was eine typische Box ist.

2.1 Zuerst die richtige “Größe” bestimmen (wird am meisten übersehen, ist aber am lohnendsten)

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 z. B. nur 900 Pixel breit ist und Sie den Besucher auffordern, das Originalbild von 3000 Pixel herunterzuladen, lädt der Browser es einfach herunter und verkleinert es dann. Dies verschwendet Bandbreite, erhöht die Decodierungszeit und verlangsamt den ersten Bildschirm.

WordPress 4.4+Reaktionsfähiger Bild-Mechanismus（srcset/sizes) wurde entwickelt, um genau dieses Problem zu lösen.

Tun Sie, was als Pass zählt:

• Wenn eine Seite auf einem Mobiltelefon geöffnet wird, 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
• Sie verwenden extern verlinkte Bildbetten, Bildblöcke von Drittanbietern und können auch das von der Mediathek erzeugte System mit mehreren Größen umgehen

---

2.2 Komprimierung (Verringerung der KB, ohne die Qualität zu “zerstören”)

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/Liveaufnahmen (Menschen, Produkte, Landschaften)Vorrangige verlustbehaftete Kompression (maximale Verstärkung)
• Screenshots der Benutzeroberfläche / textlastige Bilder: Seien Sie bei der Komprimierung konservativer, um unscharfen Text zu vermeiden.
• Logo/SymbolPriorität SVG oder diskret verlustfrei (verlustfrei lässt sich leicht am Rand einfügen)

Tun Sie, was als Pass zählt:

• Erhebliche Verringerung der Bildgröße auf den meisten Seiten
• Kein sichtbares Rauschen, matschige Kanten, Farbblockbrüche, unscharfer Text

---

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

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

1. Stapelkonvertierung historischer Mediatheken(Andernfalls optimieren Sie nur für “später hochgeladene neue Bilder”)
2. Ob eine Kopie erzeugt oder das Originalbild ersetzt werden soll(Dies ist ein riskanter Wendepunkt; wir werden uns später mit Plus WebP's “Replace and Delete Original Image” beschäftigen)

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 ab Version 5.5Standardmäßig träges LadenBild.
Dadurch wird die Bandbreitennutzung während des ersten Renderings reduziert:

• 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 verzögertes 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-DokumentationPolnische Komprimierungsmethoden (verlustfrei/verlustbehaftet/WebP) werden vorgestellt, und es wird erwähnt, dass die Komprimierung mit dem format=auto Das WebP/AVIF-Format ist zulässig.
• Jetpack Site Accelerator：Jetpack-DokumentationErklären Sie, dass es Bilder optimieren und sie zusammen mit statischen Ressourcen über sein Netz verteilen wird.

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 Verarbeitung führen:
A komprimiert, B komprimiert, A konvertiert in WebP/AVIF, B konvertiert, A ändert URLs, B schreibt neu - man kann 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 kostenlosen Ortsgespräche):Plus WebP oder AVIF + EWWW Image Optimizer(oder nur einer)
• Route B (Triple-Option für Cloud-Kompression):KurzPixel / Imagify / TinyPNG

---

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

Diese Route ist gekennzeichnet durch:

• Sie sind 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 der “Strategie und dem Risiko” mehr Aufmerksamkeit schenken müssen.”

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

• Bei der Erstellung von Bildern mit vollem Volumen: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, dass WP-CLI zuverlässiger ist, wenn es viele Dateien gibt.

Das bedeutet: Anstatt “still und leise ein WebP für Sie zu generieren”, könnte es sich um eineMigration von Vermögenswerten(Vor allem, wenn Sie die Option “Ersetzen und Löschen des Originalbildes” aktivieren).

Unterschiede zwischen den beiden Modellen

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

• Vorteile: Leichterer Rückgriff bei Kompatibilitätsproblemen
• Kosten: Die Festplattennutzung steigt (Originalbild + neues Format + Miniaturansichten in mehreren Größen)

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

• Vorteile: Festplatten erweitern sich nicht so schnell; Senderverweise werden direkt auf das neue Format übertragen
• Risiko: Sie “ändern Assets + ändern Referenzen”, was die Behebung von Kompatibilitätsproblemen verteuert (insbesondere 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 nicht mehr korrekt 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, Zwischenspeicherung, Thumbnail-Politik usw. nicht korrekt ist.
2. Je größer die Anzahl der Miniaturansichten, 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ändige Ersetzung bedeutet, dass Sie möglicherweise eine sehr große Sammlung von Dateien ändern.
3. Eine Formatmigration bedeutet nicht zwangsläufig, dass der Datenträger immer der kleinste ist.
   WebP/AVIF sind im Allgemeinen kleiner, aber “Größenstrategie” und “Komprimierungsstrategie” sind immer noch entscheidend. Denken Sie nicht an Plus WebP als “einen Klick schneller”.

---

3.1.2 EWWW Image Optimizer: Vertreter der freien lokalen Kompression

Die EWWW-Plugin-Seite ist sehr gut positioniert:

• Es kann auf Ihrem Server mit einer Reihe von Tools optimiert werden (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp usw.)
• 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 EWWW bei Route A spielen?

Wenn Sie Plus WebP als “Formatmigrations-/Ersatzstrategie” verwenden, 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 Stapeloptimierung
   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.) eine andere.
3. Mit anderen Plugins immer wieder das Gleiche tun
   Wenn Sie sich für Weg A entscheiden, versuchen Sie, die ShortPixel/Imagify/TinyPNG-Wolkenkomprimierung nicht zu überlagern; wenn Sie sich für Weg B entscheiden, schalten Sie 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 eignet sich für Personen, die “Server-Ressourcen einsparen wollen, Batch mit weniger Aufwand durchführen wollen und eine Abrechnung pro Guthaben/Volumen akzeptieren”.
Der irreführendste Punkt bei der Cloud-Komprimierung ist jedoch der:Freie Kredite sind nicht so einfach wie “freie Blätter”!.. Die Anzahl der Thumbnail-Größen, die Tatsache, ob WebP/AVIF generiert wird oder nicht, und die Tatsache, ob der Druck wiederholt wiederholt wird oder nicht, kann den Verbrauch erheblich beeinflussen.

Im Folgenden wird erläutert, was es mit kostenlos und gebührenpflichtig auf sich hat, wie Kredite abgezogen werden, welche Fallstricke am ehesten zu bewältigen sind und welche Standorttypen geeignet sind.

---

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

Was ist los mit kostenlos/bezahlt

In der Beschreibung des ShortPixel-Plugins heißt es 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: Geben Sie eine bestimmte Anzahl von Credits pro Monat für einfache Websites oder Tests.
• Einwegpakete: geeignet für Websites mit großen Mediatheken, die ihre Bestände auf einmal leeren 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

Die offizielle KB von ShortPixel hat auch ein Update zu “One Time Pack vs. Unlimited Monthly” gegeben.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 Fazit: Wie werden ShortPixel-Gutschriften berechnet?

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

• WordPress erzeugt mehrere Miniaturbilder, wenn Sie ein Bild hochladen;
• Jede Optimierung eines Miniaturbildes zählt als Credit；
• Wenn Sie sich entscheiden, ein WebP oder AVIF zu erzeugen, wird dieJede WebP/AVIF-Version des Originalbildes und der Miniaturansicht verbraucht einen zusätzlichen Kredit.；
• Sie können bestimmte Miniaturansichten von der Optimierung ausschließen, um den Kreditverbrauch zu senken.

Credits Beispiel：

Nehmen wir an, Sie laden 1 Bild hoch und das Theme/Plugin erzeugt 8 Thumbnails:

• Nur das Originalbild + Miniaturansichten optimieren: 1 (Original) + 8 (Miniaturansichten) = 9 Credits
• Wenn Sie auch WebP/AVIF erzeugen wollen: eine weitere Next-Gen-Version für jede der 9 oben genannten → +9 Credits.
  Mit anderen Worten: Was Sie für “1 Bild” halten, kann in Wirklichkeit fast “2-stellige Beträge” 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 + zusätzliche Credits für die Erstellung von WebP/AVIF.
   Anregung：

• Bewerten Sie zunächst die Anzahl der Miniaturansichten 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 Sie Plus WebP-Ersetzungen und ShortPixel zum Erzeugen/Einfügen von Tags der nächsten Generation verwenden, stapelt sich die Logik und es wird schwieriger, Fehler zu beheben. Bei Variante B lassen Sie 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 Bilder der nächsten Generation zur Startseite hinzufügen kann (z. B. durch Tagging).
   Dennoch ist es wichtig, die Ergebnisse anschließend 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。
Die Plugin-Seite macht auch deutlich, 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 Kontingentnutzung berechnet?" wird der Abzugsmechanismus sehr klar dargelegt:

• Anzahl der Miniaturansichten beeinflusst den VerbrauchWenn Sie z. B. 10 Thumbnail-Größen haben, wird aus der Optimierung von 1 Bild die Optimierung von 11 Bildern (Original + 10 Thumbnails), die alle zum Quotenverbrauch beitragen.
• Abzug der Quote je nach Größe des OriginaldokumentsWenn Sie beispielsweise ein Bild mit 100 KB an Imagify senden, werden 100 KB von der Quote abgezogen.
• Das Ändern der Komprimierungsstufe und die erneute Optimierung verbrauchen erneut Quoten。
• Ein und derselbe API-Schlüssel kann für mehrere Standorte verwendet werden, aber die Kontingente werden zwischen ihnen aufgeteilt.

Dies ist der “Kern des Verständnisses” von Imagify:
Es ist eher wie ein Traffic-Pack: Es wird so viel abgezogen, wie Sie senden; je mehr Thumbnails Sie haben, desto mehr wird abgezogen; und Sie werden den Abzug wiederholen, wenn Sie ihn wiederholt drücken.

Leicht verständliches Imagify-Quotenbeispiel

Angenommen, Sie laden ein 800 KB großes Originalbild hoch, und die Website generiert 8 Miniaturansichten.

• Imagify optimiert das “Originalbild + 8 Thumbnails” (wenn Sie sich dafür entscheiden, alle Thumbnails 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. Die wiederholte Anpassung der Verdichtungsstufen führt zu einer Verdoppelung des Quotenverbrauchs
   Imagify macht deutlich, dassDurch eine erneute Optimierung wird das Kontingent wieder aufgebraucht.
   Ich schlage vor, dass Sie die “Strategie” auf dieser Seite deutlich machen:

• Beginnen Sie mit einer kleinen Anzahl von Bildern, um den Komprimierungsgrad und das Aussehen zu bestimmen.
• Bestimmen Sie die Strategie und führen Sie sie dann in großen Mengen aus.
  Vermeiden Sie wiederholtes Ausprobieren der gesamten Bibliothek

3. Mehrere Websites, die den API-Schlüssel gemeinsam nutzen, führen zu einer “unerklärlichen Quotenreduzierung”.”
   Wenn Sie denselben API-Schlüssel für mehrere Stationen verwenden, wird das Kontingent gemeinsam genutzt.
   In Szenarien mit mehreren Stationen im Team ist es daher am besten, sich darüber im Klaren zu sein, 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” können Sie wahrscheinlich die Ca. 100 Bilder/Monat
• Wenn jedoch die AVIF- oder WebP-Konvertierung aktiviert ist:Jede Bildgröße verbraucht einen zusätzlichen KreditEs kann also vermutlich nur komprimiert und konvertiert werden Ca. 50 Bilder/Monat(je nachdem, wie viele Miniaturgrößen Sie haben).

Inzwischen hat auch Tinify (die Entwickler von TinyPNG/TinyJPG) ihre API-PreisseiteBeschreibung: Melden Sie sich an und erhalten Sie 500 kostenlose Kompressionen pro Monat; danach werden Sie nach der Anzahl der erfolgreichen Kompressionen abgerechnet, kein obligatorisches Abonnement.

Fassen Sie in einem Satz zusammen, wie TinyPNG zu verstehen ist:
Es werden die Credits gezählt; je mehr Miniaturbildgrößen Sie haben und je mehr WebP/AVIF Sie aktiviert haben, desto schneller werden die Credits verbraucht.

Leicht verständliche Beispiele für TinyPNG-Gutschriften

Angenommen, Ihre Website erzeugt für jedes Bild 8 Miniaturansichten:

• Nur Komprimierung: Original + 8 Miniaturbilder → 9 Credits erforderlich
• Wenn die WebP/AVIF-Konvertierung aktiviert ist: ein zusätzlicher Punkt pro Größe → wahrscheinlich fast das Doppelte!
  Dies 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. Gedanke: 500 Credits = 500 Bilder
   Das ist sie nicht. Er wird durch “Bildgröße/Variante” verbraucht. Die Plugin-Seite warnt deutlich, dass “Conversions einen zusätzlichen 1 Kredit für jede Bildgröße 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 die Kredite aufstocken und verbrauchen.
3. Nachdem Sie die Konvertierung aktiviert haben, stellen Sie fest, dass das Guthaben plötzlich ungenutzt ist.
   Das ist kein Fehler, sondern der Abrechnungsmechanismus.
   Strategische Beratung:

• Wenn die kostenlose Phase hauptsächlich zur Komprimierung und Gewichtsreduzierung genutzt wird, können Sie zunächst nur mit der Komprimierung beginnen und die Konvertierung erst dann einschalten, wenn Sie sicher sind, dass Ihre Website-Struktur stabil ist und Sie Next-Gen wirklich benötigen.

4) Empfehlung eines Unterszenarios: 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)

Vorrangige Empfehlungen:

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

Ein besser geeigneter Weg:

• Möchten Sie speichern: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Wenn Sie frei gehen wollen: 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 der Artikelseite ist sehr groß, unzulässige Strategie für träges LadenVerlangsamt den ersten Bildschirm

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

E-Commerce ist höchstwahrscheinlich das Problem ist nicht “Kompression Wirkung ist nicht gut”, sondern “optimiert einige der Größe ist nicht richtig, fehlende Thumbnails, Front-Komponenten können nicht das Bild zu bekommen”.

Vorrangige Empfehlungen:

1. Stabilität an erster Stelle: konservative Komprimierungsstrategie, nicht gleich eine komplette Bibliothek ersetzen
2. Bewertung der Thumbnail-Größen: E-Commerce-Themen 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)

Ein besser geeigneter Weg:

• Route B ist in der Regel unkomplizierter: ShortPixel/Imagify/TinyPNG können alle Stapel verarbeiten, und es ist wichtig, dass Sie den Quotenmechanismus verstehen und die Kosten im Voraus abschätzen.
• Route A ist in Ordnung, aber seien Sie 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, das Ganze gleich zu ersetzen.

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

Vorrangige Empfehlungen:

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

Ein besser geeigneter Weg:

• ImagifyAbzug des Kontingents nach der “Größe des Originalbildes”, diese Seite ist einfacher zu tun “Budget-gesteuert” (Sie wissen, wie viel für jedes große Bild abzuziehen), sondern um wiederholte Repressionen zu vermeiden.
• KurzPixelWenn die Thumbnail-Größe nicht sehr groß ist, sind die Credits auch sehr intuitiv; aber wenn Sie viele Größen generieren +next-gen, wird der Credits-Verbrauch vergrößert, und Sie müssen vorausplanen.

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

Welches ist das günstigere Angebot und wie lange gilt das Gratisangebot?

5.1 Drei Rückvergütungsmodelle

• KurzPixel(Abspann)Credits basieren auf “Originalbild + Anzahl der Thumbnails”; zusätzliche Credits werden für jede entsprechende Version von WebP/AVIF abgezogen.
• Imagify(MB Quote)Abzug des Kontingents entsprechend der “ursprünglichen Dateigröße”; je mehr Thumbnails, desto mehr Abzüge; erneutes Pressen führt zu weiteren Abzügen.
• TinyPNG(Abspann)500 Credits pro Monat; bei Aktivierung der WebP/AVIF-Konvertierung werden zusätzliche Credits für jede Bildgröße abgezogen.

5.2 Schnellschätzungsmethoden

Sie können es so 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 Miniaturbilder Ihre Website erzeugt (z. B. 5 / 10 / 20)
3. Entscheiden Sie, ob Sie WebP/AVIF erzeugen wollen (ja/nein)

Verwenden Sie dann die folgende “Kopfrechnen”, um den Verbrauch zu verstehen:

• KurzPixel≈ (1 + Anzahl der Thumbnails) Credits pro Bild; bei der Erzeugung von WebP/AVIF verdoppelt sich das ≈ nochmals (da die Next-Gen-Version ebenfalls Credits nimmt)
• ImagifyJedes Bild ≈ (Originalgröße + jede Thumbnailgröße) zieht Quote ab; ändern Sie den Komprimierungsgrad und komprimieren Sie erneut, wird erneut abgezogen.
• TinyPNG500 Credits kostenlos; wenn Ihre 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: Lassen Sie 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(Teilen Sie die Arbeit zwischen den beiden auf, führen Sie nicht gleichzeitig gleichartige Umstellungen und Lieferungen durch, oder installieren Sie nur eines von beiden)
• Route B: ShortPixel / Imagify / TinyPNG drei auswählen(wählen Sie 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 Aus der Beschreibung geht eindeutig hervor, 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, die jederzeit zurückgenommen werden kann” handelt, sondern um eine Änderung auf der Ebene des Vermögens.

Die vorgeschlagene Strategie sollte lauten:

• Zunächst ein kleiner Test (einige Dutzend bis einige Hundert)
• Überprüfen Sie, ob die Anzeige im Frontend, die Miniaturansichten und die Cache-Aktualisierungen ordnungsgemäß funktionieren.
• Bearbeitung der gesamten 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.

• KurzPixelThumbnails und Next-Gen beeinflussen die Credits erheblich.
• TinyPNGAktivieren von WebP/AVIF: Für jede Bildgröße wird ein zusätzliches Guthaben abgezogen.
• Imagify: wird entsprechend der Größe des Originalbildes abgezogen, je mehr Thumbnails abgezogen werden, desto stärker 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 aufgefrischt wird und gleichmäßiger und schneller lädt(Zwischenspeicherung und Optimierung des physikalischen Gefühls, 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üfen Sie stichprobenartig einige Bilder: ob WebP- oder AVIF-Dateien/Ressourcen vorhanden sind(Verwendet die Website tatsächlich nächste Generation）
4. Probieren Sie einige Bilder aus: zoomen Sie 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, wurde die von Ihnen gewählte Strecke abgefahren. Der nächste Schritt. CDN “Lieferschicht”wird das Ganze stabiler sein.

8) Empfehlungen für Maßnahmen

1. Wählen Sie zuerst Ihre Route:

• Ich versuche, so frei wie möglich zu sein.Plus WebP oder AVIF + EWWW (oder nur eines von beiden)
• Sie möchten Server-Ressourcen sparen und zahlen pro Guthaben, um mehr Sicherheit zu habenShortPixel / Imagify / TinyPNG - wählen Sie eines!

2. Machen Sie zunächst einen kleinen Test (ein paar Dutzend)
3. Vergewissern Sie sich, dass alles in Ordnung ist, bevor Sie loslegen
4. Weitere Verbesserungen der Lieferstabilität sind erforderlich:lesen CDN Beschleunigung

allgemeine Probleme

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

Versuchen Sie, 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ählen Sie eine!
  In der gleichen Station zur gleichen Zeit lassen mehr als ein Plug-in zu tun “Kompression / Transfer WebP / AVIF / URL ändern / Lieferung Rewrite”, die am ehesten zu bekommen mehr und mehr chaotisch, sondern auch die am schwierigsten zu überprüfen.

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

Es muss getrennt werden:
“Unterstützung für Upload/Nutzung” ≠ “Automatische Konvertierung/automatische Zustellung”.
WordPress 6.5 konvertiert auch nicht automatisch alte JPG/PNGs in WebP/AVIF, noch macht es automatisch die ganze “Export AVIF/WebP zu Browser-fähig und Fallback” Sache für Sie. 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 Stellen Sie zuerst die “Größen” richtig ein (srcset/sizes).。
Viele Websites sind nicht deshalb so langsam, weil sie nicht komprimiert sind, sondern weil die Seite nur 900px groß ist und der Benutzer aufgefordert wird, ein 3000px großes Bild herunterzuladen. Die Komprimierung spart KB, aber die “falsche Größe” führt dazu, dass Sie umsonst ein Mehrfaches an Daten herunterladen.

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

Betrachten Sie zwei Phänomene:

• Wenn eine Seite auf einem Mobiltelefon geöffnet wird, 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 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.
Die Generierung ist nur die “Dateiebene”; ob das Frontend tatsächlich WebP/AVIF liefert, hängt von Rewrites, Bild-Tagging-Richtlinien, Cache-Treffern, Browser-Verhandlungen und so weiter ab. Wenn Sie fertig sind, sollten Sie 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”, sondern dieVeränderungen im Niveau 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 gesamte Bibliothek zu ersetzen.Testen Sie in kleinem Maßstab (Dutzende bis Hunderte) + haben Sie verfügbare Backups, bevor Sie die Verarbeitung der gesamten Bibliothek in Betracht ziehen.

7) Was ist die Wahl zwischen den beiden Modi von Plus WebP: Beibehaltung des Originalbildes oder Ersetzen und Löschen des Originalbildes?

Einfach zu verstehen:

• Modus 1: Originalbild behalten + WebP/AVIF-Kopie erzeugen (stabiler)Praktisch für Rollbacks, aber der Speicherplatz wird größer (Originalbild + neues Format + Miniaturbilder in mehreren Größen).
• Modus 2: Ersetzen und Löschen des Originalbildes (aggressiver)Festplatten sind weniger anfällig für die Aufblähung, aber Sie “ändern Assets + ändern Referenzen”, was die Behebung von Kompatibilitätsproblemen teurer macht.
  Je komplexer die Website ist (E-Commerce/Multi-Plugin/Multi-Größe), desto mehr 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 dass die Strategie richtig sein sollte: Batch, niedrige Spitzen und Offloading/Cloud-Optionen, falls erforderlich.
Wenn Sie Einsparungen anstreben oder wenn Ihre 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 “Anzahl der Bilder”.”Die next-gen wird um 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ätzlicher Kredit verbraucht.
  Was Sie also für “1 Bild” halten, kann in Wirklichkeit fast “2-stellige Credits” verbrauchen. shortPixel

10. 20MB/Monat sind bei Imagify kostenlos, warum geht das Geld auch schnell aus?

Imagify ist eher eine Art “Verkehrspaket”:

• Wie Sie es geschickt haben.Größe der OriginaldateiAbzug von Quoten
• Je mehr Miniaturansichten Sie haben, desto mehr verbrauchen Sie
• Das Ändern der Komprimierungsstufe zur erneuten Optimierung verbraucht erneut Kontingent
• Derselbe API-Schlüssel für mehrere Standorte, gemeinsame Nutzung von Kontingenten
  20MB wird bald aufgebraucht sein“ ist also oft auf zu große Bilder, zu viele Vorschaubilder oder wiederholtes Ausprobieren zurückzuführen.

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.
• Aktivieren Sie die AVIF- oder WebP-Konvertierung:Jede Bildgröße verbraucht einen zusätzlichen KreditSie können 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 erzeugt mehrere Größen für das Hochladen eines Bildes; Themes/Plugins (insbesondere für den elektronischen Handel) können weitere Größen hinzufügen.
Die Credits/Quoten für die Cloud-Komprimierung sind in der Regel “Original + Thumbnails zusammen”, d. h. je mehr Thumbnails Sie haben, desto weniger freie Credits stehen Ihnen 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 der kritischsten großes Bild ist auch verzögertes Laden, kann der erste Bildschirm Erfahrung verlangsamen. WordPress 5.5 seit der Standard-Lazy-Laden ist in Ordnung, aber nicht “eine Größe passt 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, was 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 aufgefrischt wird und gleichmäßiger und schneller lädt
• Unterscheiden sich die Größen der auf Mobiltelefonen und Desktops geladenen Bilder merklich (spielt srcset/sizes eine Rolle)?
• Überprüfen Sie stichprobenartig einige Bilder: ob WebP- oder AVIF-Dateien/Ressourcen vorhanden sind
• Probieren Sie einige Bilder aus: zoomen Sie sie heran, um zu sehen, ob sie sichtbar verschwommen sind, ob der Text unscharf ist