Aller au contenu

Comment WP-ImmoMakler traite les images immobilières

Lorsque WP-ImmoMakler importe des biens — par exemple depuis ImmoScout24 — les images originales sont transférées en pleine résolution, soit environ 4032×3024 pixels directement depuis l’appareil photo. Comme de telles grandes images ne conviennent pas à chaque vue du site web, WP-ImmoMakler redimensionne automatiquement chaque image en quatre tailles plus petites, optimisées pour la vue liste, les miniatures de galerie, les images du slider de galerie et les représentations de liste plus grandes.

Vous définissez la qualité de compression des tailles d’image JPG/PNG générées lors de l’import dans le backend de votre site (wp-admin) sous WP-ImmoMakler → Paramètres → Import → « Qualité d’image lors de l’import ». La valeur par défaut de 82 correspond à la valeur par défaut de WordPress et offre un bon compromis entre qualité d’image, taille de fichier et vitesse d’import. Des valeurs plus basses produisent des fichiers plus petits et accélèrent l’import ; des valeurs très élevées (supérieures à 90) ralentissent sensiblement l’import et augmentent considérablement la taille des fichiers sans gain de qualité visible. Ce paramètre ne s’applique qu’aux imports futurs — les images déjà importées restent inchangées.

Pour la conversion AVIF optionnelle, il existe un paramètre séparé, « Qualité d’image de la conversion AVIF », juste en dessous. L’échelle de qualité AVIF ne correspond pas à celle du JPEG : AVIF atteint déjà un très bon rendu à des valeurs nettement plus basses. La valeur par défaut de 60 offre une qualité d’image élevée pour une taille de fichier réduite d’environ moitié par rapport à la valeur 82 — ce qui réduit le volume de données transférées et améliore le score PageSpeed Insights de votre site. Des valeurs plus élevées augmentent nettement la taille des fichiers AVIF sans gain de qualité visible.

Pour la conversion WebP optionnelle, il existe le paramètre correspondant, « Qualité d’image de la conversion WebP ». L’échelle de qualité WebP correspond à peu près à celle du JPEG, c’est pourquoi la valeur par défaut de WordPress, 82, est préconfigurée ici — à valeur égale, les fichiers WebP restent malgré tout nettement plus petits que les JPG.

AVIF ou WebP : lequel est le mieux pour les photos immobilières ?

Section intitulée « AVIF ou WebP : lequel est le mieux pour les photos immobilières ? »

WP-ImmoMakler peut convertir vos photos immobilières vers un format d’image moderne et plus léger lors de l’import. WordPress s’en charge lui-même, il n’y a donc aucune dépendance à des plugins payants. Vous choisissez le format cible dans le backend de votre site (wp-admin) sous WP-ImmoMakler → Paramètres → Import → « Convertir les photos de biens en » :

  • WebP — le réglage par défaut. Généralement 25 à 35 % plus léger qu’en JPG et avec davantage de netteté que l’AVIF. Pour les photos immobilières, c’est généralement le meilleur compromis. Nécessite WordPress 5.8 ou plus récent.
  • AVIF — les fichiers les plus légers (jusqu’à 70 % de moins), mais avec un peu moins de netteté. Convient bien aux éléments de design ou aux photos d’entreprise, et constitue le bon choix lorsque la taille du fichier compte plus que la netteté. Nécessite WordPress 6.5 ou plus récent.
  • Aucune conversion — les tailles d’image restent en JPG ou PNG.

La conversion ne concerne que les photos immobilières au format JPG/JPEG et PNG et ne s’applique qu’aux imports futurs — les images déjà importées restent inchangées. Vous pilotez la netteté via le paramètre de qualité correspondant au format — « Qualité d’image de la conversion WebP » ou « Qualité d’image de la conversion AVIF » (voir ci-dessus) : des valeurs plus élevées offrent davantage de netteté au prix de fichiers plus volumineux.

Il faut également que votre serveur puisse écrire le format choisi (ImageMagick ou GD avec la prise en charge correspondante). Un format que votre serveur ne peut pas écrire n’apparaît pas du tout dans la sélection — juste en dessous de la sélection, le motif est alors indiqué.

Les photos des personnes de contact sont normalement ignorées lors d’un nouvel import tant que le fichier image n’a pas changé. Si vous réactivez la conversion ou changez de format, WP-ImmoMakler détecte qu’une photo de contact existante est encore dans l’ancien format d’image et la réimporte une seule fois lors du prochain import — ainsi, les photos de contact et les photos immobilières se retrouvent dans le même format. Cela ne se produit qu’une seule fois par photo, pas à chaque import.

Pour l’optimisation réelle des images — c’est-à-dire la réduction de la taille des fichiers — WP-ImmoMakler s’appuie sur les standards WordPress. Cela signifie que tous les plugins d’optimisation d’images courants fonctionnent parfaitement avec WP-ImmoMakler et peuvent générer des formats supplémentaires tels que WebP ou AVIF.

Dès que vous avez sélectionné une conversion ci-dessus, vos photos immobilières sont déjà converties lors de l’import. Si un plugin d’optimisation d’images s’exécute ensuite également sur les mêmes fichiers, cela n’apporte aucun gain supplémentaire : il comprime une seconde fois des images déjà compressées avec perte (ce qui dégrade visiblement la qualité d’image) et consomme inutilement du crédit sur des services payants comme Imagify ou ShortPixel — avec plusieurs centaines de biens et sept tailles d’image générées chacun, cela représente rapidement des milliers d’images par import complet.

C’est pourquoi WP-ImmoMakler exclut automatiquement vos photos immobilières des plugins suivants, tant qu’une conversion est sélectionnée : EWWW Image Optimizer, Imagify, Smush, Converter for Media et ShortPixel Image Optimizer. Cela peut être contrôlé via l’option « Exclure les photos de biens des plugins d’optimisation » (par défaut : active) — désactivez-la si vous souhaitez que votre plugin d’optimisation traite malgré tout les photos immobilières.

Les optimisations groupées manuelles (« bulk ») que vous lancez vous-même dans le plugin d’optimisation ne peuvent pas être couvertes par du code : Imagify et ShortPixel, par exemple, ne respectent cette exception que lors de l’optimisation automatique des nouvelles images.

Pour les couvrir, ajoutez le répertoire /wp-content/uploads/immomakler/ à la liste d’exceptions ou d’exclusion du plugin d’optimisation. Toutes les photos immobilières importées s’y trouvent ; le reste de vos médias dans la médiathèque n’est pas concerné et continue d’être optimisé.

Certains plugins d’optimisation fournissent des formats d’image modernes via un élément <picture> qui propose au navigateur un format moderne et un JPG en secours. L’exclusion ne vous prive de rien ici, car une balise <picture> a toujours besoin de deux fichiers : l’image moderne et un original de secours. La conversion de WP-ImmoMakler remplace directement les tailles d’image — il ne reste donc aucun JPG auquel une balise <picture> pourrait faire référence. Les plugins d’optimisation ne génèrent donc de toute façon aucun élément <picture> pour ces images, avec ou sans exclusion.

Ce n’est pas non plus un inconvénient : le WebP et l’AVIF s’affichent directement dans tous les navigateurs actuels. Une solution de secours ne serait pertinente que pour des navigateurs très obsolètes.

Si vous souhaitez explicitement une telle solution de secours, le bon réglage est « Aucune conversion » — vos photos immobilières restent alors en JPG/PNG, et votre plugin d’optimisation se charge de la conversion ainsi que de la diffusion via <picture>. Ce n’est qu’ainsi qu’un original existe réellement comme solution de secours. Les deux à la fois — notre conversion et une solution de secours — n’est techniquement pas possible.

Les images converties apparaissent inchangées dans le PDF-Exposé. WP-ImmoMakler génère automatiquement en interne une version JPG à cet effet et la stocke dans le cache PDF — nécessaire car l’AVIF et le WebP ne peuvent pas être intégrés directement dans un PDF. Vous n’avez rien à configurer pour cela.

Les tailles d’image par défaut s’appuient sur les zones d’affichage réellement mesurées sur les sites web clients. Elles forment une échelle de 200, puis 400, 475, 800 et 900, jusqu’à 1200 pixels de large (plus l’image originale). Entre deux paliers, le facteur n’est jamais supérieur à 2 — ainsi, le navigateur trouve une taille adaptée pour chaque largeur d’écran et densité de pixels, et ne charge pas inutilement une image nettement plus grande.

Deux particularités de cette échelle :

  • La hauteur correspond toujours à 1,5 fois la largeur. Ces valeurs sont de pures limites supérieures, rien n’est recadré. Grâce à cette limite supérieure plus élevée, les photos au format portrait et les plans atteignent eux aussi la largeur indiquée ; avec des proportions carrées, ils seraient plus étroits et agrandis de façon floue à l’affichage.
  • immomakler-archive-thumb-2x et immomakler-gallery-xl ne sont pas des tailles d’affichage sélectionnables, mais des candidats srcset supplémentaires : ils permettent aux appareils à haute densité de pixels de charger une taille intermédiaire adaptée au lieu de l’image originale, nettement plus grande. immomakler-gallery-xl (1200 px) sert en outre d’image de prévisualisation pour les réseaux sociaux (voir ci-dessous).

Pour économiser de l’espace de stockage, vous pouvez ajuster les tailles :

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;
}

Les tailles modifiées s’appliquent aux images importées ultérieurement. Les images déjà existantes conservent leurs tailles jusqu’à ce qu’elles soient réimportées ou régénérées avec un outil tel que « Regenerate Thumbnails ».

L’attribut sizes détermine quelle taille de l’échelle le navigateur choisit. Par défaut, la valeur calculée par WordPress est utilisée, correspondant à la taille d’image demandée — cela correspond généralement bien à la largeur de colonne réelle de la vue liste.

Si la vue liste est affichée par un Theme Builder dans une colonne nettement plus étroite ou plus large, vous pouvez définir la valeur vous-même :

add_filter( 'immomakler_archive_image_sizes_attr', function () {
// Exemple : à partir de 992 px de largeur d'écran, la colonne fait 300 px de large,
// en dessous, la carte occupe 90 % de la largeur de l'écran.
return '(min-width: 992px) 300px, 90vw';
} );

Pour la galerie d’images, WordPress calcule également l’attribut sizes à partir de la taille d’image demandée. Pour l’image principale, il s’agit de la taille immomakler-gallery-xl avec 1200 pixels — même si votre thème affiche la galerie plus étroite, par exemple à côté d’une colonne de vignettes. Le navigateur charge alors une image plus grande que nécessaire.

Avec le filtre immomakler_gallery_image_sizes_attr, vous indiquez la largeur réelle. Outre la valeur, le filtre reçoit le rôle de l’image (main pour l’image principale, thumb pour une vignette, tile pour une tuile dans une grille ou une mosaïque), l’ID de la mise en page de la galerie, ainsi que la taille d’image demandée :

add_filter( 'immomakler_gallery_image_sizes_attr', function ( $sizes, $role, $preset ) {
if ( 'main' === $role && 'vertical_thumbs' === $preset ) {
// Exemple : jusqu'à 768 px de largeur d'écran, l'image principale occupe
// presque toute la largeur ; au-delà, une colonne de 200 px de large
// avec les vignettes se trouve à droite, et à partir de 1320 px
// l'image principale fait 1070 px de large.
return '(max-width: 768px) calc(100vw - 40px), (max-width: 1320px) calc(100vw - 250px), 1070px';
}
return $sizes;
}, 10, 3 );

Si vous renvoyez une valeur vide, la valeur calculée par WordPress reste utilisée. Si la largeur réelle se situe entre deux paliers de l’échelle de tailles, le navigateur ne peut choisir que le palier supérieur suivant — dans ce cas, ajoutez un palier adapté avec immomakler_image_sizes (voir ci-dessus).

Images de prévisualisation pour les réseaux sociaux (Google, Facebook, WhatsApp)

Section intitulée « Images de prévisualisation pour les réseaux sociaux (Google, Facebook, WhatsApp) »

Pour l’aperçu lors du partage d’un lien vers un bien immobilier (og:image), WP-ImmoMakler utilise la taille immomakler-gallery-xl avec 1200 pixels de large — la valeur attendue par Google, Facebook et WhatsApp.

Les listes de biens (la vue d’ensemble sous /immobilien/ et les listes d’une localité, d’un type de bien ou d’un type de commercialisation) reçoivent elles aussi une image d’aperçu : la photo du premier bien de la liste. Avec Yoast SEO ou Rank Math, c’est le plugin SEO qui la génère ; sans plugin SEO, WP-ImmoMakler s’en charge lui-même. Si vous avez défini dans le plugin SEO une image propre pour les réseaux sociaux pour cette page, par exemple dans l’onglet Social lors de la modification d’une localité, c’est celle-ci qui est utilisée. La photo du premier bien ne remplace que l’image par défaut générale de votre site web. Pour une localité, vous pouvez aussi utiliser une image personnalisée ou une carte de la localité, voir Image d’aperçu et description des listes de biens.

Le format d’image est ici important : WhatsApp n’affiche ni l’AVIF ni le WebP comme image de prévisualisation, alors que Google les gère sans problème. WP-ImmoMakler fournit donc toujours un JPG, PNG ou GIF comme image de prévisualisation. Si la conversion AVIF ou WebP est active sur votre site, une version JPG est automatiquement générée une fois et mise en cache pour l’image de prévisualisation — vous n’avez rien à configurer pour cela.

Les formats d’image autorisés comme image de prévisualisation peuvent être personnalisés :

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

La taille d’image utilisée peut également être personnalisée :

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

Si vous avez des questions, n’hésitez pas à contacter notre support.