Zum Inhalt springen

Wie WP-ImmoMakler Immobilienbilder verarbeitet

Wenn WP-ImmoMakler Immobilien z.B. von ImmoScout24 importiert, werden die Originalbilder in voller Auflösung übertragen – etwa 4032x3024 Pixel direkt von der Kamera. Da solche großen Bilder nicht für jede Ansicht auf der Website geeignet sind, skaliert WP-ImmoMakler jedes Bild automatisch in vier kleinere Größen, optimiert für Listenansicht, Galerie-Vorschaubilder, Galerie-Slider-Bilder und größere Listendarstellungen.

Die Kompressionsqualität der beim Import erzeugten JPG/PNG-Bildgrößen legen Sie im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Einstellungen → Import → “Bildqualität beim Import” fest. Der Standardwert 82 entspricht dem WordPress-Standard und bietet einen guten Kompromiss aus Bildqualität, Dateigröße und Import-Geschwindigkeit. Niedrigere Werte erzeugen kleinere Dateien und beschleunigen den Import; sehr hohe Werte (über 90) verlangsamen den Import spürbar und vergrößern die Dateien erheblich, ohne sichtbaren Qualitätsgewinn. Die Einstellung wirkt nur auf zukünftige Importe – bereits importierte Bilder bleiben unverändert.

Für die optionale AVIF-Umwandlung gibt es eine eigene Einstellung “Bildqualität der AVIF-Umwandlung” direkt darunter. Die AVIF-Qualitätsskala entspricht nicht der von JPEG: AVIF erreicht bereits bei deutlich niedrigeren Werten eine sehr gute Darstellung. Der Standardwert 60 liefert eine hohe Bildqualität bei etwa halbierter Dateigröße gegenüber dem Wert 82 – das verkleinert die übertragene Datenmenge und verbessert den PageSpeed-Insights-Wert Ihrer Website. Höhere Werte vergrößern die AVIF-Dateien deutlich, ohne sichtbaren Qualitätsgewinn.

Für die optionale WebP-Umwandlung gibt es die entsprechende Einstellung “Bildqualität der WebP-Umwandlung”. Die WebP-Qualitätsskala entspricht in etwa der von JPEG, weshalb hier der WordPress-Standardwert 82 voreingestellt ist – bei gleichem Wert sind WebP-Dateien dennoch deutlich kleiner als JPG.

AVIF oder WebP – was ist besser für Immobilienfotos?

Abschnitt betitelt „AVIF oder WebP – was ist besser für Immobilienfotos?“

WP-ImmoMakler kann Ihre Immobilienfotos beim Import in ein modernes, kleineres Bildformat umwandeln. Das erledigt WordPress selbst, es besteht also keine Abhängigkeit von kostenpflichtigen Plugins. Sie wählen das Zielformat im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Einstellungen → Import → “Immobilien-Fotos umwandeln in”:

  • WebP – die Voreinstellung. Typischerweise 25–35% kleiner als JPG und mit mehr Detailschärfe als AVIF. Für Immobilienfotos meist der bessere Kompromiss. Benötigt WordPress 5.8 oder neuer.
  • AVIF – die kleinsten Dateien (bis zu 70% kleiner), dafür etwas weniger Detailschärfe. Gut geeignet für Designelemente oder Firmenfotos, und dann die richtige Wahl, wenn die Dateigröße wichtiger ist als die Detailschärfe. Benötigt WordPress 6.5 oder neuer.
  • Keine Umwandlung – die Bildgrößen bleiben JPG bzw. PNG.

Die Umwandlung betrifft ausschließlich JPG/JPEG- und PNG-Immobilienfotos und wirkt nur auf zukünftige Importe – bereits importierte Bilder bleiben unverändert. Die Detailschärfe steuern Sie über die zum Format gehörende Qualitätseinstellung – “Bildqualität der WebP-Umwandlung” bzw. “Bildqualität der AVIF-Umwandlung” (siehe oben): Höhere Werte liefern mehr Detailschärfe bei größeren Dateien.

Voraussetzung ist außerdem, dass Ihr Server das gewählte Format schreiben kann (ImageMagick oder GD mit entsprechender Unterstützung). Ein Format, das Ihr Server nicht schreiben kann, steht gar nicht zur Auswahl – direkt unter der Auswahl steht dann, warum es fehlt.

Fotos von Kontaktpersonen werden bei einem erneuten Import normalerweise übersprungen, solange sich die Bilddatei nicht geändert hat. Wenn Sie die Umwandlung neu einschalten oder das Format wechseln, erkennt WP-ImmoMakler, dass ein vorhandenes Kontaktfoto noch im alten Bildformat vorliegt, und importiert es beim nächsten Import einmalig neu – so liegen Kontaktfotos und Immobilienfotos im selben Format vor. Das passiert genau einmal pro Foto, nicht bei jedem Import.

Für die eigentliche Bildoptimierung – also die Reduzierung der Dateigröße – setzt WP-ImmoMakler auf WordPress-Standards. Das bedeutet, dass alle gängigen Bildoptimierungs-Plugins nahtlos mit WP-ImmoMakler funktionieren und zusätzliche Formate wie WebP oder AVIF erstellen können.

Sobald Sie oben eine Umwandlung ausgewählt haben, sind Ihre Immobilienfotos beim Import bereits umgewandelt. Läuft danach zusätzlich ein Bildoptimierungs-Plugin über dieselben Dateien, bringt das keinen weiteren Gewinn: Es komprimiert bereits verlustbehaftete Bilder ein zweites Mal (das verschlechtert die Bildqualität sichtbar) und verbraucht bei kostenpflichtigen Diensten wie Imagify oder ShortPixel unnötig Guthaben – bei mehreren hundert Immobilien mit je sieben erzeugten Bildgrößen sind das schnell Tausende Bilder pro Vollimport.

Deshalb nimmt WP-ImmoMakler Ihre Immobilienfotos automatisch von den folgenden Plugins aus, solange eine Umwandlung ausgewählt ist: EWWW Image Optimizer, Imagify, Smush und Converter for Media. Steuern lässt sich das über die Option “Immobilien-Fotos von Optimierungs-Plugins ausnehmen” (Standard: aktiviert) – deaktivieren Sie sie, wenn Ihr Optimierungs-Plugin die Immobilienfotos trotzdem bearbeiten soll.

Zwei Fälle lassen sich nicht per Code abdecken und brauchen einen Eintrag in den Einstellungen des jeweiligen Plugins:

  • ShortPixel bietet keine Schnittstelle, über die ein anderes Plugin Ausnahmen anmelden kann.
  • Manuelle Sammel-Optimierungen (“Bulk”), die Sie im Optimierungs-Plugin selbst starten – Imagify etwa berücksichtigt Ausnahmen nur bei der automatischen Optimierung neuer Bilder.

Tragen Sie in diesen Fällen das Verzeichnis /wp-content/uploads/immomakler/ in der Ausnahme- bzw. Exclude-Liste des Optimierungs-Plugins ein. Dort liegen alle importierten Immobilienfotos; Ihre übrigen Medien in der Mediathek sind davon nicht betroffen und werden weiterhin optimiert.

Manche Optimierungs-Plugins liefern moderne Bildformate über ein <picture>-Element aus, das dem Browser ein modernes Format und ein JPG als Rückfallebene anbietet. Die Ausnahme nimmt Ihnen dabei nichts weg, denn ein <picture>-Tag braucht immer zwei Dateien: das moderne Bild und ein Original zum Zurückfallen. Die Umwandlung von WP-ImmoMakler ersetzt die Bildgrößen direkt – es bleibt also kein JPG übrig, auf das ein <picture>-Tag verweisen könnte. Optimierungs-Plugins erzeugen für diese Bilder daher ohnehin kein <picture>-Element, mit oder ohne Ausnahme.

Das ist auch kein Nachteil: WebP und AVIF werden von allen aktuellen Browsern direkt angezeigt. Eine Rückfallebene wäre nur für stark veraltete Browser relevant.

Wenn Sie eine solche Rückfallebene ausdrücklich möchten, ist die richtige Einstellung “Keine Umwandlung” – dann bleiben Ihre Immobilienfotos JPG/PNG, und Ihr Optimierungs-Plugin übernimmt die Umwandlung samt <picture>-Auslieferung. Nur so existiert überhaupt ein Original als Rückfallebene. Beides gleichzeitig – unsere Umwandlung und eine Rückfallebene – ist technisch nicht möglich.

Umgewandelte Bilder erscheinen unverändert im PDF-Exposé. WP-ImmoMakler erzeugt dafür intern automatisch eine JPG-Fassung und legt sie im PDF-Cache ab – nötig, weil sich AVIF und WebP nicht direkt in ein PDF einbetten lassen. Sie müssen dafür nichts einstellen.

Die Standard-Bildgrößen orientieren sich an den tatsächlich gemessenen Anzeigebereichen auf Kundenwebsites. Sie bilden eine Staffel von 200 über 400, 475, 800 und 900 bis 1200 Pixel Breite (plus dem Originalbild). Zwischen zwei Stufen liegt nie mehr als der Faktor 2 – dadurch findet der Browser für jede Bildschirmbreite und Pixeldichte eine passende Größe und lädt nicht unnötig ein deutlich größeres Bild.

Zwei Besonderheiten der Staffel:

  • Die Höhe ist jeweils das 1,5-fache der Breite. Die Angaben sind reine Obergrenzen, es wird nichts beschnitten. Durch die höhere Obergrenze erreichen auch hochformatige Fotos und Grundrisse die angegebene Breite – bei quadratischen Vorgaben fielen sie schmaler aus und wurden in der Darstellung unscharf hochskaliert.
  • immomakler-archive-thumb-2x und immomakler-gallery-xl sind keine auswählbaren Anzeigegrößen, sondern zusätzliche srcset-Kandidaten: Sie sorgen dafür, dass Geräte mit hoher Pixeldichte eine passende Zwischengröße laden statt des deutlich größeren Originalbilds. immomakler-gallery-xl (1200 px) dient zusätzlich als Social-Media-Vorschaubild (siehe unten).

Um Speicherplatz zu sparen, können Sie die Größen anpassen:

add_filter( 'immomakler_image_sizes', 'custom_immomakler_image_sizes' );
function custom_immomakler_image_sizes( $images_sizes ) {
$images_sizes = [
'immomakler-gallery-big' => [
'width' => 900,
'height' => 1350,
'crop' => false,
],
'immomakler-gallery-xl' => [
'width' => 1200,
'height' => 1800,
'crop' => false,
],
'immomakler-gallery-thumb' => [
'width' => 200,
'height' => 300,
'crop' => false,
],
'immomakler-archive-thumb' => [
'width' => 400,
'height' => 600,
'crop' => false,
],
'immomakler-archive-thumb-2x' => [
'width' => 800,
'height' => 1200,
'crop' => false,
],
'immomakler-archive-thumb-big' => [
'width' => 475,
'height' => 713,
'crop' => false,
],
'immomakler-person-thumb' => [
'width' => 400,
'height' => 600,
'crop' => false,
],
];
return $images_sizes;
}

Geänderte Größen gelten für zukünftig importierte Bilder. Bereits vorhandene Bilder behalten ihre Größen, bis sie erneut importiert oder mit einem Werkzeug wie “Regenerate Thumbnails” neu erzeugt werden.

Welche Größe der Browser aus der Staffel wählt, steuert das sizes-Attribut. Standardmäßig wird der von WordPress berechnete Wert verwendet, der zur angeforderten Bildgröße passt – das trifft die tatsächliche Spaltenbreite der Listenansicht in aller Regel gut.

Wird die Listenansicht per Theme Builder in einer deutlich schmaleren oder breiteren Spalte ausgegeben, können Sie den Wert selbst bestimmen:

add_filter( 'immomakler_archive_image_sizes_attr', function () {
// Beispiel: ab 992px Bildschirmbreite ist die Spalte 300px breit,
// darunter nimmt die Karte 90% der Bildschirmbreite ein.
return '(min-width: 992px) 300px, 90vw';
} );

Für die Bildergalerie berechnet WordPress das sizes-Attribut ebenfalls aus der angeforderten Bildgröße. Für das Hauptbild ist das die Größe immomakler-gallery-xl mit 1200 Pixeln – auch dann, wenn Ihr Theme die Galerie schmaler darstellt, etwa neben einer Spalte mit Vorschaubildern. Der Browser lädt dann ein größeres Bild als nötig.

Mit dem Filter immomakler_gallery_image_sizes_attr geben Sie die tatsächliche Breite an. Der Filter erhält neben dem Wert die Rolle des Bildes (main für das Hauptbild, thumb für ein Vorschaubild, tile für eine Kachel im Raster oder Mosaik), die ID des Galerie-Layouts und die angeforderte Bildgröße:

add_filter( 'immomakler_gallery_image_sizes_attr', function ( $sizes, $role, $preset ) {
if ( 'main' === $role && 'vertical_thumbs' === $preset ) {
// Beispiel: bis 768px Bildschirmbreite nimmt das Hauptbild fast die
// ganze Breite ein, darüber steht rechts die 200px breite Spalte mit
// den Vorschaubildern, und ab 1320px ist das Hauptbild 1070px breit.
return '(max-width: 768px) calc(100vw - 40px), (max-width: 1320px) calc(100vw - 250px), 1070px';
}
return $sizes;
}, 10, 3 );

Geben Sie einen leeren Wert zurück, bleibt es beim von WordPress berechneten Wert. Liegt die tatsächliche Breite zwischen zwei Stufen der Größenstaffel, kann der Browser nur die nächstgrößere wählen – ergänzen Sie in diesem Fall mit immomakler_image_sizes eine passende Stufe (siehe oben).

Social-Media-Vorschaubilder (Google, Facebook, WhatsApp)

Abschnitt betitelt „Social-Media-Vorschaubilder (Google, Facebook, WhatsApp)“

Für die Vorschau beim Teilen eines Immobilien-Links (og:image) verwendet WP-ImmoMakler die Größe immomakler-gallery-xl mit 1200 Pixeln Breite – der Wert, den Google, Facebook und WhatsApp erwarten.

Wichtig ist dabei das Bildformat: AVIF und WebP werden von WhatsApp nicht als Vorschaubild dargestellt, Google kommt damit zurecht. WP-ImmoMakler liefert als Vorschaubild deshalb immer ein JPG, PNG oder GIF aus. Ist auf Ihrer Website die AVIF- oder die WebP-Umwandlung aktiv, wird für das Vorschaubild automatisch einmalig eine JPG-Fassung erzeugt und zwischengespeichert – Sie müssen dafür nichts einstellen.

Welche Bildformate als Vorschaubild zulässig sind, lässt sich anpassen:

add_filter( 'immomakler_opengraph_compatible_image_types', function ( $types ) {
return [ 'image/jpeg', 'image/png' ];
} );

Auch die verwendete Bildgröße ist anpassbar:

add_filter( 'immomakler_opengraph_image_size', function () {
return 'immomakler-gallery-big';
} );

Bei Fragen wenden Sie sich gerne an unseren Support.