Zahllose Kopien von Bildern in jahrelang genutzen WordPress-Instanzen reduzieren

Du betreibst seit über 10 Jahren einen WordPress-Blog, hast schon mehrere Designs (Layouts) im Einsatz habt und vielleicht setzt du auch grundsätzlich viele Bilder ein. Das Mass ist irgendetwas über 10000 Bilder. Unter ungünstigen Umständen können dadurch über 30gb Daten am Server unter dem Ordner /wp-content/uploads/ entstehen. Das ist, gemessen an den 10000 Bildern und dass unsere Seiten eigentlich nur für das Web und für kleinere Geräte ausgerichtet sind, viel zu viel an Daten.

Mehrfach Duplizierung aller Bilder

WordPress alleine

Wie kommt das? WordPress alleine macht schon sechs Versionen von jedem Bild. Aber nur drei davon sind unter Einstellungen > Medien einstellbar. Drei davon werden automatisch generiet und ggf. auch im Backend bei adaptiven Medien (siehe weiter unten), ungefragt ausgeliefert.

1. Vorschaubilder (thumbnail)
2. Mittelgroß (medium)
3. medium_large: oft ungefragt im Einsatz im Backend
4. Groß (large)
5. 1536x1536 ist für grosse Displays gedacht
6. 2048x2048 ist für grosse Displays gedacht

Neben diesen 6 liegt natürlich auch das Originalbild am Server, welches ebenso ungefragt ausgespielt werden kann. Es liegt also schon mal viel herum und das wird durchaus auch grossformatig in die Webseite eingebunden. Plattenplatz und Datendurchsatz explodieren.

Durch Designs generierte Bilder

Aber so als ob dem nicht genug sei, generien auch Designs Bilder für ihre Zwecke. Das ist meist für Features wie Sliders oder verschiede Thubnailgrössen. Hier unten ein Beisipel des Designs Cleanblogg (welches wir eine Zeit lang einsetzten, das aber nicht mehr unterstützt wird). Man sollte sich von dem Begriff “thumb” unten nicht irritieren lassen, das sind schon auch grosse, datenintensive Bilder.

1. cleanblogg-mini-thumb, 100x80pxCrop, im Widget Post on Tab
2. cleanblogg-grid-thumb, 400x270pxCrop, Tabellen-Vorschau, ohne Wasserzeichen
3. cleanblogg-list-thumb, 300x220pxCrop, Listen-Vorschau, ohne Wasserzeichen
4. cleanblogg-full-thumb, 1050x0pxCrop, Slider-Bild-Standard, ersetzt, ohne Wasserzeichen Server-seitig gesperrt

Selber generiere Bilder

Man will ja unter Umständen selber eingreifen um Photos passend und schön zu platzieren. Das ging vor 10 Jahren noch schlechter, also war das legitim. So korrigierte ich das Design Cleanblogg folgendermassen:

1. sliderLarge, 1200x0px, ersetzt cleanblogg-full-thumb, ohne Wasserzeichen, Server-seitig gesperrt ausser für Startseite
2. landscape, 794x0px, Querbild, mit Wasserzeichen
3. zweiAx, 392x0px, für zwei Bilder nebeneinander, mit Wasserzeichen
4. dreiAx, 258x0px, für drei Bilder nebeneinander, mit Wasserzeichen
5. leftOrRightSmall, 200x0px, zum links- oder rechtsbündig Einbinden, ohne Wasserzeichen

Wir sind jetzt, wenn man zusammenzählt, bei 15 generierten Bildern plus das Original!

Wasserzeichen-Plugins

Wir verwenden auch Wasserzeichen, konkret Copyright-Hinweise meist rechts unten. Es sind im den Sinne keine halbtransparenten Wasserzeichen. Unabhängig von den gestalterischen Problemen mit diesen sind sie auch datenintensiv. Da man auch das Original mit einem Wasserzeichen versehen kann, wird von diesem Original eine 1:1-Kopie angelegt (in mindestens einem Unterordner von /wp-content/uploads/).

Ausgangslage

Damit sind wir bei 17 Versionen pro Bild. Bei 10000 Bilder macht das 170000 Bilder. So sind dann langsam 30gb möglich. Nun ist es so, dass wenn man Design wechselt und zum Beispiel eines einsetzt, welches keine zusätzlichen Bilder generiert, Bilder des alten Designs einfach am Server bleiben. Die zusätzlich generierten Bilder geleten immer nur für das gewählte Design und die im Einsatz befindlichen Plugins. Deswegen ist der Wechsel von Designs auch so komppliziert. Es gibt zwar helfende Plugins wie Regenerate Thumbnails, die arbeiten sauber mit den Bildern, sie sanieren aber nicht die einzelnen Referenzierungen in die Beiträgen.

Wir werden, bei einigen Insatzen nach 15 Jahren, versuchen hier etwas aufzuräumen. Die Sache läuft nur halbautomatisch, mit starker Betonung auf “halb”.

Neue Bildgrössen

Unter Einstelungen > Medien kann man zwei Hauptgrössen von Bildern neben der kleinen 200x200px-Vorschau einstellen. Standarmässig ist die kleine zu klein und die grosse zu gross. Es geht um Mittelgross (medium) und Gross (large). Das Ziel ist es möglichst brauchbare grössen für das Layout zu haben, das sind im unseren Fall 400px breit für hochkant (portait) und 900px breit für quer (landscape). Um den andere Seite nicht beschneid zu lassen, setzt man 0 ein.

400px breit ist für 2er- und 3-Galerien, 900px breit für Querbilder im Beitrag und das Header-Bild.

Man sollte auch unnötige Bildgrössen entfernen, so spart man Platz am Server. Das geht unter Design/Thema-Datei-Editor/functions.php. Dort diese Anweisung unten hinzufügen. Man kann das nicht anders machen, weil die Angaben im Code an vielen verschiedenen Stellen stehen. Einige Plugins erkennen diese Formate als gültig an, aber sie werden nicht mehr generiert sobald dies eingefügt ist. Achtung, beim Update des Designs können diese eingefügten Funktionen wieder weg sein, man muss sie also ggf. nachträglich wieder einfügen. Am Besten fügt man den Code ganz unten ein und markiert diese Blöcke mit einem Kommentar am Anfang und am Ende (// KOMMENTAR….)

function remove_default_image_sizes( $sizes ) {
  unset( $sizes['medium_large'] );
  unset( $sizes['1536x1536'] );
  unset( $sizes['2048x2048'] );
  return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'remove_default_image_sizes' );

Mit diesen Änderungen bleiben vier Dateigrössen am Server, sofern man nun ein Design verwendet, welches keine eigenen Bilder genieriert und man auch nicht selber noch dementsprechende Anweisungen im Code hat. Dies gilt nur für neu hochgelade Bilder ab dem Zeitpunkt der Änderung!

1. IMG_6391-200x200.jpg ist für echte Thumbnails
2. IMG_6391-400x533.jpg
3. IMG_6391-900x1200.jpg
4. IMG_6391.jpg ist das Original

Bilder neu generieren

Das Plugin Regenerate Thumbnails ermöglich das genieren neuer Bilder nach den gültigen Einstellungen unter Einstellungen > Medien. Dieses Plugin zeigt auch die versteckten Formate medium_large, 1536x1536 und 2048x2048 an, aber diese werden wegen der Anweisung weiter oben nicht mehr generiert.

Man kann es generell für alle Datein lancieren, davon raten wir aber dringend ab! Am Besten macht man es je Blogeintrag weil man diese danach auch einzeln sanieren muss.

Man landet anschliessen mit Anwenden im Interface des Plugins.

Mit dem zweiten Hackerl werden auch alle alten Bilder gelöscht, das ist genau was wir wollen. Die angebene Warunung ist korrekt, viele Bilder werden anschliessend in besagten Blogbeitrag fehlen.

Es werden beim Regenerieren die originalen Bilder herangezogen, das sind jene am Server ohne Formatangaben im Dateinamen, also zb. IMG_6204.jpg und nicht IMG_6204400x270.jpg.

Das Regenerieren dauert durchaus, je nachdem wieviele Bilder man ausgewählt hat und je nachdem wie gross die Originaldateien sind.

Nach dem Ende des Prozess, nicht wieder auf Medien klicken sondern im Browser zurück gehen damit die ausgewählten Bilder für den nächsten Schritt erhalten bleiben.

Wasserzeichen anbringen

Nun  müssen wir die Wasserzeichen neu überlagern, sie sind ja weg weil aus dem Originalbild die neuen Bilder generiert wurden. Wir verwenden das Plugin Image Watermark, es ist nicht perfekt, aber stabil und gratis. Dies geht wiederum unter dem Menü in Medien, hier mit den (noch) ausgewählten Bildern Apply Watermark ausführen. Man bleibt dabei auf der Medien-Seite, es wird jedes Bild nacheinander abgearbeitet. Der Prozess dauert, weil ja alle Verkleinerungen mit Wasserzeichen versehen werden.

Das Plugin Image Watermark macht unter Umständen nicht 100% opake Wasserzeichen. Bei mir hängt der Wert auf maximal 76% obwohl das PNG richtig formatiert ist. Das Plugin legt den Wert in der Datenbank unter einem komplizierten Array ab. Er ist dort auslesbar aber nicht einfach änderbar. Man kann es aber auch unter Design/Thema-Datei-Editor/functions.php festlegen, dort folgenden Code einfügen:

$options = get_option('image_watermark_options');
if (isset($options['watermark_image']['opacity'])) {
  $options['watermark_image']['opacity'] = 100; // Changez 100 par la valeur voulue
  update_option('image_watermark_options', $options);
}

Image Watermark legt Kopien der Originaldatei unter /wp-content/uploads/iw-backup/ ab, dies mit der selben Ordnerstruktur wie unter /wp-content/uploads/. Der Grund: das Plugin ermöglicht auch die Originaldatei mit Wasserzeichen zu versehen. So hat das Plugin unter Medien auch die Option Remove watermark. Das macht durchaus Sinn, man muss sich aber der Verdopplung der Originaldateien am Server bewusst sein.

Es kann sein, das hier Bilder fehlen, dann beschwert sich Image Watermark und es passiert nichts. Nun muss man entweder händisch diese Dateien auf /wp-content/uploads/iw-backup/ spielen, oder aber man nimmt die hochgeladene Originaldatei her, die ohnehin auch am Server liegt. Das geht z.B. so, ggf. muss man vorher auch die Ordner mit am Ziel anlegen:

/wp-content/uploads/2025/09# cp 20250913*7D.jpg /wp-content/uploads/iw-backup/2025/09/

Händische Eingriffe im Blogbeitrag

Anschliessend in den besagten Blogbeitrag gehen, denn nun müssen die Bilder teilweise neu verknüft werden. Das ist der Grund, warum wir nicht pauschal alle Bilder für den ganzen Blog neu generiert haben. Unten eine Ansicht aus dem Backend, einmal visuell und einmal als Code. Hier sehen wir viel zu grosse Bilder in einer 2er-Galerie und ein fehlendes Einzelbild. Manche Bilder sind real da, mache nur vermeintlich weil auch der Browsercache wirkt. Ggf. die Seite neu laden (strg+R). Wir müssen dazu sagen, das wir nach wie vor den Classic Editor verweden, der macht es etwas komplizierter, aber mit Gutenberg ist es auch nicht perfekt.

Die Bilder erscheinen falsch oder gar nicht, weil wir nun andere Bilder generiert hatten. Die nötigen Änderungen können varieren, das hängt vom Design und von der Vorgeschichte des Blogs ab. Bei uns erscheinen die Galerien weil das Bild von Typ large tatsächlich existiert. Auch wenn hier etwas anderes steht, z.B. eine altes privates Format welches nicht mehr existiert, dann wird automatisch auf large im Backend und im Frontend gesprungen.

Oben im Screeshot sind das

gallery link="none" columns="2" size="large" ids="23048,23050"
gallery link="none" columns="2" size="large" ids="23058,23061"

Galerien lassen sich einfach adapieren indem man in der der Code-Ansicht  alle size="large", oder was auch immer dort steht, duch size="medium" ersetzt. Das geht ggf. besser wenn man die Code-Ansicht in einen brauchbaren Texteditor kopiert und am Ende wieder zurückkopiert.

Einzelbilder (breit) sind schwieriger weil sowohl der Dateiname als auch die Attribute width und height geändert werden müssen. Man kennt zwar die Breite dieser Bilder, da sie der Breite der grossen Bilder unter Einstellungen > Medien entspricht, man kennt aber nicht immer die Höhe. Man kann sie nicht von den vorliegenden Werten berechnen, das es bei vollen Pixel zu Pundungsfehlern kommt. Man kann daher nur diese Dateien einzeln im Backend anwählen und das Format gross auswählen. Es ist dabei egal ob ein Bild zuvor noch sichtbar war oder nur ein leerer Platzhalter da war. Das Bild war sowieso weg nachdem man Vorschaubilder regenerieren angeworfen hat.

Man kann in der Code-Ansicht unter Umständen folgendes Suchen/Ersetzen machen, wenn man sicher ist, dass alle Bilder das selbe 40/30- oder 45/30-Verhältnis haben. Bei mir war die Ausgangslage:

-794x529.jpg" alt="" width="794" height="529" />

Und ich kann es en bloc durch:

-900x600.jpg" alt="" width="900" height="600" />

ersetzen. Es bleiben dann unter Umständen einige Dateien mit abweichenden Höhen übrig, die man händisch ändern muss. In der Regel unter “visuell” das Bild anwählen, meist erscheint es dann schon und gross auswählen.

 Andere Änderungen

Damit all dies Sinn macht, muss man auch unterbinden, dass adaptiver Inhalt ausgeliefert wird wo pro Bild alle Versionen dem Browser übergeben werden. Da dieser aber durch schlechtes Design-Layout nicht die Gesamtbreite der Seite kennt, lädt der er immer die grössten Dateien, also die Originaldatei. Wenn man den adaptiven Content unterbindet, wird die Bildgrösse ausgliefert, die im Backend angegeben wurde, in dem Fall unsere Grössen 400px Breite für hochkant und 900px Breite für quer. Und eben nur diese.

Auf diese Art und weise wird auch die Grösse der Wasserzeichen einheitlicher weil nicht mehr riesige Bilder in kleine Rahmen reduziert werden.

Auch dies wurd unter Design/Thema-Datei-Editor/functions.php bewerkstelligt. Unten anfügen:

// On cherche les images qui ont des classes de tailles WordPress (ex: size-medium, size-large)
if (preg_match_all('/<img[^>]+class="[^"]*size-([^"\s]+)[^"]*"[^>]+src="([^"]+)"/i', $content, $matches, PREG_SET_ORDER)) {
  foreach ($matches as $match) {
    $taille_choisie = $match[1]; // 'medium', 'large', etc.
    $url_actuelle = $match[2];

    // Si l'URL actuelle est l'image d'origine (pas de -400x533 dans le nom)
    if (!preg_match('/-\d+x\d+\.(jpg|jpeg|png|webp|gif)$/i', $url_actuelle)) {
      $attachment_id = attachment_url_to_postid($url_actuelle);

      if ($attachment_id) {
        // On force l'URL de la taille spécifiée par la classe du backend
      $image_exacte = wp_get_attachment_image_src($attachment_id, $taille_choisie);
        if ($image_exacte) {
          $content = str_replace($url_actuelle, $image_exacte[0], $content);
        }
      }
    }
  }
}
return $content;
}
add_filter('the_content', 'corriger_url_image_frontend_classique', 999);