Cómo procesa WP-ImmoMakler las imágenes de inmuebles

Cuando WP-ImmoMakler importa inmuebles, por ejemplo desde ImmoScout24, las imágenes originales se transfieren en resolución completa, con aproximadamente 4032×3024 píxeles directamente de la cámara. Como estas imágenes de gran tamaño no son adecuadas para todas las vistas del sitio web, WP-ImmoMakler escala automáticamente cada imagen a cuatro tamaños más pequeños, optimizados para la vista de lista, las miniaturas de galería, las imágenes del slider de galería y las representaciones de lista más grandes.

Calidad de imagen al importar

La calidad de compresión de los tamaños de imagen JPG/PNG generados durante la importación se configura en el backend de su sitio web (wp-admin) en WP-ImmoMakler → Ajustes → Importación → “Calidad de imagen al importar”. El valor por defecto 82 corresponde al valor por defecto de WordPress y ofrece un buen equilibrio entre calidad de imagen, tamaño de archivo y velocidad de importación. Los valores más bajos generan archivos más pequeños y aceleran la importación; valores muy altos (por encima de 90) ralentizan notablemente la importación y aumentan considerablemente el tamaño de los archivos sin una ganancia de calidad visible. El ajuste solo afecta a futuras importaciones: las imágenes ya importadas permanecen sin cambios.

Para la conversión opcional a AVIF existe un ajuste propio, “Calidad de imagen de la conversión a AVIF”, justo debajo. La escala de calidad de AVIF no se corresponde con la de JPEG: AVIF logra ya una muy buena representación con valores considerablemente más bajos. El valor por defecto 60 ofrece una alta calidad de imagen con aproximadamente la mitad del tamaño de archivo respecto al valor 82, lo que reduce el volumen de datos transferido y mejora la puntuación de PageSpeed Insights de su sitio web. Los valores más altos aumentan notablemente el tamaño de los archivos AVIF sin una ganancia de calidad visible.

Para la conversión opcional a WebP existe el ajuste correspondiente, “Calidad de imagen de la conversión a WebP”. La escala de calidad de WebP se corresponde aproximadamente con la de JPEG, por lo que aquí se ha preconfigurado el valor por defecto de WordPress, 82; aun así, con el mismo valor los archivos WebP son notablemente más pequeños que los JPG.

AVIF o WebP: ¿cuál es mejor para las fotos de inmuebles?

WP-ImmoMakler puede convertir sus fotos de inmuebles a un formato de imagen moderno y más pequeño durante la importación. WordPress se encarga de ello por sí mismo, por lo que no existe ninguna dependencia de plugins de pago. Elige el formato de destino en el backend de su sitio web (wp-admin) en WP-ImmoMakler → Ajustes → Importación → “Convertir fotos de inmuebles a”:

WebP — la opción predeterminada. Normalmente entre un 25 % y un 35 % más pequeño que el JPG y con más nitidez de detalle que AVIF. Para fotos de inmuebles, suele ser el mejor compromiso. Requiere WordPress 5.8 o superior.
AVIF — los archivos más pequeños (hasta un 70 % menos), aunque con algo menos de nitidez de detalle. Adecuado para elementos de diseño o fotos corporativas, y la mejor opción cuando el tamaño del archivo importa más que la nitidez de detalle. Requiere WordPress 6.5 o superior.
Sin conversión — los tamaños de imagen permanecen en JPG o PNG.

La conversión afecta exclusivamente a las fotos de inmuebles en JPG/JPEG y PNG, y solo se aplica a futuras importaciones: las imágenes ya importadas permanecen sin cambios. La nitidez de detalle se controla mediante el ajuste de calidad correspondiente al formato — “Calidad de imagen de la conversión a WebP” o “Calidad de imagen de la conversión a AVIF” (véase más arriba): valores más altos ofrecen mayor nitidez de detalle con archivos más grandes.

Además, es necesario que su servidor pueda escribir el formato elegido (ImageMagick o GD con el soporte correspondiente). Un formato que su servidor no pueda escribir no aparece en la selección; justo debajo de la selección se indica entonces el motivo.

Fotos de contacto al cambiar de formato

Las fotos de las personas de contacto normalmente se omiten en una nueva importación mientras el archivo de imagen no haya cambiado. Si vuelve a activar la conversión o cambia de formato, WP-ImmoMakler detecta que una foto de contacto existente todavía está en el formato de imagen anterior y la reimporta una única vez en la siguiente importación, de modo que las fotos de contacto y las de inmuebles queden en el mismo formato. Esto ocurre exactamente una vez por foto, no en cada importación.

Optimización de imágenes mediante plugins

Para la optimización real de las imágenes, es decir, la reducción del tamaño de los archivos, WP-ImmoMakler se basa en los estándares de WordPress. Esto significa que todos los plugins de optimización de imágenes más comunes funcionan perfectamente con WP-ImmoMakler y pueden generar formatos adicionales como WebP o AVIF.

Evitar la doble conversión

En cuanto haya seleccionado una conversión arriba, sus fotos de inmuebles ya se convierten durante la importación. Si después un plugin de optimización de imágenes se ejecuta también sobre los mismos archivos, eso no aporta ninguna ventaja adicional: comprime por segunda vez imágenes ya comprimidas con pérdida (lo que empeora visiblemente la calidad de imagen) y consume innecesariamente saldo en servicios de pago como Imagify o ShortPixel; con varios cientos de inmuebles y siete tamaños de imagen generados cada uno, eso supone rápidamente miles de imágenes por importación completa.

Por ello, WP-ImmoMakler excluye automáticamente sus fotos de inmuebles de los siguientes plugins, mientras haya una conversión seleccionada: EWWW Image Optimizer, Imagify, Smush y Converter for Media. Esto se puede controlar mediante la opción “Excluir fotos de inmuebles de los plugins de optimización” (por defecto: activada); desactívela si desea que su plugin de optimización procese igualmente las fotos de inmuebles.

Dos casos no se pueden cubrir por código y requieren una entrada en los ajustes del plugin correspondiente:

ShortPixel no ofrece ninguna interfaz mediante la cual otro plugin pueda registrar excepciones.
Optimizaciones masivas manuales (“bulk”) que usted inicia en el propio plugin de optimización; Imagify, por ejemplo, solo respeta las excepciones en la optimización automática de imágenes nuevas.

En estos casos, añada el directorio /wp-content/uploads/immomakler/ a la lista de excepciones o exclusiones del plugin de optimización. Allí se encuentran todas las fotos de inmuebles importadas; el resto de sus archivos multimedia en la biblioteca no se ven afectados y se siguen optimizando.

¿Qué ocurre con la etiqueta `<picture>`?

Algunos plugins de optimización entregan formatos de imagen modernos mediante un elemento <picture> que ofrece al navegador un formato moderno y un JPG como alternativa de respaldo. La exclusión no le quita nada en este caso, porque una etiqueta <picture> siempre necesita dos archivos: la imagen moderna y un original de respaldo. La conversión de WP-ImmoMakler sustituye directamente los tamaños de imagen, por lo que no queda ningún JPG al que pueda hacer referencia una etiqueta <picture>. Por eso, los plugins de optimización no generan ningún elemento <picture> para estas imágenes, con o sin exclusión.

Esto tampoco supone ninguna desventaja: WebP y AVIF se muestran directamente en todos los navegadores actuales. Una alternativa de respaldo solo sería relevante para navegadores muy obsoletos.

Si desea expresamente una alternativa de respaldo de este tipo, el ajuste correcto es “Sin conversión”: así sus fotos de inmuebles permanecen en JPG/PNG y su plugin de optimización se encarga de la conversión junto con la entrega mediante <picture>. Solo así existe realmente un original como alternativa de respaldo. Ambas cosas a la vez —nuestra conversión y una alternativa de respaldo— no son técnicamente posibles.

Fotos de inmuebles en el dossier PDF

Las imágenes convertidas aparecen sin cambios en el dossier PDF. Para ello, WP-ImmoMakler genera internamente de forma automática una versión JPG y la guarda en la caché de PDF, algo necesario porque AVIF y WebP no se pueden incrustar directamente en un PDF. No necesita configurar nada para esto.

Personalización de los tamaños de imagen

Los tamaños de imagen predeterminados se basan en las áreas de visualización realmente medidas en los sitios web de los clientes. Forman una escala de 200, pasando por 400, 475, 800 y 900, hasta 1200 píxeles de ancho (más la imagen original). Entre dos niveles nunca hay más que un factor 2; de este modo, el navegador encuentra un tamaño adecuado para cada anchura de pantalla y densidad de píxeles, y no carga innecesariamente una imagen mucho más grande.

Dos particularidades de la escala:

La altura es siempre 1,5 veces el ancho. Estos valores son límites máximos puros; no se recorta nada. Gracias a este límite superior más alto, las fotos en formato vertical y los planos también alcanzan el ancho indicado; con proporciones cuadradas resultarían más estrechos y se escalarían hacia arriba de forma borrosa en la visualización.
immomakler-archive-thumb-2x e immomakler-gallery-xl no son tamaños de visualización seleccionables, sino candidatos adicionales de srcset: garantizan que los dispositivos con alta densidad de píxeles carguen un tamaño intermedio adecuado en lugar de la imagen original, mucho más grande. immomakler-gallery-xl (1200 px) sirve además como imagen de vista previa para redes sociales (véase más abajo).

Para ahorrar espacio de almacenamiento, puede ajustar los tamaños:

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

Los tamaños modificados se aplican a las imágenes importadas en el futuro. Las imágenes ya existentes conservan sus tamaños hasta que se vuelvan a importar o se regeneren con una herramienta como “Regenerate Thumbnails”.

Ancho de las miniaturas en la vista de lista

El atributo sizes controla qué tamaño de la escala elige el navegador. Por defecto se utiliza el valor calculado por WordPress que corresponde al tamaño de imagen solicitado; esto suele coincidir bien con el ancho de columna real de la vista de lista.

Si la vista de lista se muestra mediante un Theme Builder en una columna notablemente más estrecha o más ancha, puede definir el valor usted mismo:

add_filter( 'immomakler_archive_image_sizes_attr', function () {
  // Ejemplo: a partir de 992 px de ancho de pantalla, la columna mide 300 px de ancho;
  // por debajo de eso, la tarjeta ocupa el 90 % del ancho de la pantalla.
  return '(min-width: 992px) 300px, 90vw';
} );

Imágenes de vista previa para redes sociales (Google, Facebook, WhatsApp)

Para la vista previa al compartir el enlace de un inmueble (og:image), WP-ImmoMakler utiliza el tamaño immomakler-gallery-xl con 1200 píxeles de ancho, el valor que esperan Google, Facebook y WhatsApp.

El formato de imagen es importante en este caso: WhatsApp no muestra AVIF ni WebP como imagen de vista previa, mientras que Google sí los admite sin problemas. Por ello, WP-ImmoMakler siempre entrega un JPG, PNG o GIF como imagen de vista previa. Si la conversión a AVIF o a WebP está activa en su sitio web, se genera automáticamente una versión JPG una sola vez y se almacena en caché para la imagen de vista previa; no necesita configurar nada para ello.

Puede personalizar qué formatos de imagen se admiten como imagen de vista previa:

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

El tamaño de imagen utilizado también se puede personalizar:

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

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro soporte.