Google Lens y búsqueda IA multimodal: cómo optimizar imágenes en WordPress y WooCommerce

El paradigma operativo de la búsqueda digital contemporánea está transitando con rapidez de las consultas estrictamente textuales hacia experiencias visuales y multimodales. Compradores profesionales y particulares enfocan a diario las cámaras de sus dispositivos móviles hacia piezas mecánicas industriales, componentes de recambio o muestras de materiales con el propósito de identificar artículos, cotejar presupuestos y encontrar proveedores mediante Google Lens, ChatGPT Vision o Bing Visual Search. En paralelo, los agentes autónomos de adquisición y los motores de búsqueda inteligentes analizan las fotografías de comercio electrónico no como meros complementos estéticos, sino como fuentes primordiales de información cuantitativa sobre cotas, esquemas técnicos y certificaciones industriales.

Para los ingenieros de software y responsables de infraestructura que mantienen plataformas sustentadas en WordPress y WooCommerce, este escenario exige un rediseño integral de los flujos de ingesta, conversión y distribución multimedia. Los planteamientos tradicionales que se limitaban a subir archivos JPEG genéricos y rellenar someramente el atributo alt resultan del todo insuficientes para competir en los ecosistemas de compra automatizados.

#La creciente importancia de la búsqueda visual y los modelos multimodales

La consolidación de modelos multimodales de última generación, tales como Google Gemini y OpenAI GPT-4o, ha redefinido radicalmente la forma en que los rastreadores analizan los contenidos en la web. Antaño, un buscador dependía casi en exclusiva del texto circundante, la nomenclatura del archivo y los metadatos básicos. Hoy en día, las redes neuronales de visión artificial ejecutan análisis a nivel de píxel en tiempo real:

• Vectores de características visuales (Visual Embeddings): Los modelos codifican geometrías, siluetas y microtexturas en espacios vectoriales multidimensionales, ejecutando comparaciones casi instantáneas contra catálogos masivos con miles de millones de referencias de producto.
• Reconocimiento óptico de caracteres integrado (OCR): Textos impresos en placas metálicas de maquinaria, sellos de homologación, manuales esquemáticos y códigos de barras se extraen con precisión e ingresan de inmediato en el índice de atributos del producto.
• Coherencia entre imagen y texto: Las directrices de Google para fichas de comerciante exigen que las imágenes representen el contenido marcado, así que una foto que contradice los datos del producto es un problema de políticas además de un problema de coincidencia.

Si una tienda digital distribuye recambios técnicos o bienes de consumo sin imágenes limpias, con iluminación calibrada y resolución suficiente, los sistemas de inteligencia artificial tienen poco con lo que comparar la consulta visual del usuario.

#Qué hace Google Lens con la foto de un producto

Google presenta Lens como una forma de buscar con la cámara, una imagen o una captura de pantalla cuando algo es difícil de describir con palabras (Google Lens). Para compras, la misma página indica que Lens averigua quién fabrica un artículo, cuánto cuesta y dónde comprarlo, y enumera unos 35 países donde esos resultados de compra están disponibles. Lens también traduce texto desde la cámara en más de 100 idiomas, la misma lectura de texto que capta etiquetas y placas en las fotos de producto.

En octubre de 2024 Google informó de que Lens gestiona casi 20 000 millones de búsquedas visuales al mes y presentó una página de resultados de producto con reseñas, precios de varios comercios y lugares de compra (Google, 3 de octubre de 2024). Según la publicación, Lens identifica el artículo fotografiado con modelos de IA y el Shopping Graph, que abarca más de 45 000 millones de productos. No existe un envío específico a Lens para una tienda: un producto llega a esa página de resultados a través de los datos que Google ya tiene sobre él, es decir, el feed de Merchant Center y la propia ficha de producto. Google no publica una guía de Lens para propietarios de sitios, así que las palancas prácticas son las documentadas: las directrices de Google Imágenes, los datos estructurados de producto y los requisitos de imagen de Merchant Center que se tratan más abajo.

#Cómo lee Google una imagen en una página de WordPress

La guía de SEO de imágenes de Google enumera las señales que toma de la página (Google Search Central, prácticas recomendadas de SEO para imágenes). Los formatos admitidos son BMP, GIF, JPEG, PNG, WebP, SVG y AVIF, y la extensión del archivo debe coincidir con su tipo. El texto alternativo figura como el atributo más importante para los metadatos de una imagen, y la guía advierte contra rellenarlo de palabras clave. El ejemplo de Google va de no tener alt, a alt="puppy", a alt="Dalmatian puppy playing fetch". Los nombres de archivo deben ser cortos y descriptivos, de modo que my-new-black-kitten.jpg es mejor que IMG00023.JPG; conviene fijar una regla de renombrado en el flujo de subida, porque los archivos de cámaras y proveedores rara vez llegan con nombres útiles.

El contexto cuenta tanto como el archivo. Google extrae información sobre el tema de una imagen a partir del contenido de la página, incluidos pies de foto y títulos de imagen, y recomienda colocar las imágenes cerca del texto relevante. Las imágenes definidas mediante CSS no se indexan, lo que descarta fotos de producto inyectadas como background-image por maquetadores o plugins de carrusel. Con marcado adaptable, Google recomienda mantener siempre una URL de respaldo en el atributo src junto a srcset o <picture>; WordPress ya añade srcset y sizes a las imágenes del contenido sin quitar src (wp_image_add_srcset_and_sizes). Los sitemaps de imágenes pueden incluir URLs <image:loc> de otros dominios, algo relevante cuando la biblioteca de medios se sirve desde un nombre de host de CDN. Para indicar qué imagen representa una página, la guía remite a primaryImageOfPage, mainEntityOfPage o la etiqueta meta og:image.

#Arquitectura moderna de procesamiento gráfico en WordPress: libvips y AVIF

Durante más de una década, la arquitectura estándar de WordPress se apoyó en la biblioteca GD (Graphics Draw) de PHP para la creación de miniaturas y versiones escaladas. En tiendas WooCommerce con decenas de miles de referencias y múltiples variaciones de galería, GD genera cuellos de botella severos de memoria RAM y tiempos de ejecución excesivos, lo que históricamente disuadió a muchos administradores de adoptar formatos modernos de alta eficiencia.

Una infraestructura preparada para grandes volúmenes puede adoptar la biblioteca libvips (a través del binding php-vips o mediante servicios desacoplados en Node.js con Sharp). El proyecto describe libvips como una biblioteca de procesamiento bajo demanda y con hilos en paralelo que funciona rápido y usa poca memoria en comparación con bibliotecas similares (libvips), lo que hace viable la conversión masiva de un catálogo grande a AVIF:

<?php
/**
 * Conversion de imagenes bajo demanda a formato AVIF con libvips en WordPress
 */
declare(strict_types=1);

namespace WPPoland\MediaArchitectureES;

final class HighPerformanceMediaPipeline
{
    private const TARGET_AVIF_QUALITY = 78;
    private const TARGET_EFFORT = 4; // Equilibrio optimo entre compresion y tiempo de CPU

    public function __construct()
    {
        add_filter('wp_handle_upload', [$this, 'processUploadedImageStream'], 10, 2);
        add_filter('image_editor_output_format', [$this, 'enforceNextGenOutputFormats']);
    }

    public function enforceNextGenOutputFormats(array $formats): array
    {
        $formats['image/jpeg'] = 'image/avif';
        $formats['image/png']  = 'image/avif';
        $formats['image/webp'] = 'image/avif';

        return $formats;
    }

    public function processUploadedImageStream(array $upload, string $context): array
    {
        if (!class_exists(\Jcupitt\Vips\Image::class)) {
            return $upload;
        }

        $sourcePath = (string) ($upload['file'] ?? '');
        $mimeType = (string) ($upload['type'] ?? '');

        if (!in_array($mimeType, ['image/jpeg', 'image/png', 'image/webp'], true)) {
            return $upload;
        }

        $avifPath = preg_replace('/\.(jpe?g|png|webp)$/i', '.avif', $sourcePath);
        if ($avifPath === null || $avifPath === $sourcePath) {
            return $upload;
        }

        try {
            // Lectura secuencial de bajo impacto en RAM mediante libvips
            $vipsImage = \Jcupitt\Vips\Image::newFromFile($sourcePath, ['access' => 'sequential']);

            // Validacion de espacio de color sRGB estandar para modelos de vision
            if ($vipsImage->interpretation !== 'srgb') {
                $vipsImage = $vipsImage->colourspace('srgb');
            }

            $vipsImage->writeToFile($avifPath, [
                'Q' => self::TARGET_AVIF_QUALITY,
                'effort' => self::TARGET_EFFORT,
                'strip' => false // Preserva los metadatos IPTC seleccionados
            ]);

            // Reemplazo del archivo original por la version optimizada AVIF
            $upload['file'] = $avifPath;
            $upload['type'] = 'image/avif';
            $upload['url'] = preg_replace('/\.(jpe?g|png|webp)$/i', '.avif', (string) $upload['url']);

            if (file_exists($sourcePath) && $sourcePath !== $avifPath) {
                unlink($sourcePath);
            }
        } catch (\Throwable $e) {
            error_log('[WPPoland Media Pipeline] Error en libvips: ' . $e->getMessage());
        }

        return $upload;
    }
}

AVIF suele producir archivos más pequeños que JPEG con una calidad visual comparable y mantiene limpios los contornos y el texto impreso con una compresión moderada. Mida el ahorro en su propio catálogo antes de decidir: las fotos de producto sobre fondo blanco se comprimen de forma muy distinta a las fotos de ambiente, y las etiquetas que deben seguir siendo legibles necesitan una calidad más alta que un fondo liso.

#Cómo gestiona WordPress 6.5 la subida de imágenes AVIF

La compatibilidad con AVIF llegó al núcleo de WordPress en la versión 6.5 y depende de la biblioteca de imágenes del servidor: Imagick o GD tienen que admitir el formato (anuncio del núcleo de WordPress). El anuncio explica cómo comprobar en el panel de WordPress si el servidor incluye AVIF entre los formatos admitidos. En ese caso, los archivos AVIF se suben y generan tamaños intermedios como un JPEG o un PNG. Convertir otros formatos es opcional mediante el filtro image_editor_output_format, el mismo que usa el pipeline anterior; el ejemplo del anuncio asigna image/jpeg a image/avif.

Hay un límite que todo plan AVIF de una tienda debe tener en cuenta. El atributo de imagen de Merchant Center acepta JPEG, WebP, PNG, GIF, BMP y TIFF (enlace de imagen de Merchant Center), y AVIF no está en la lista. Una tienda que convierte cada subida a AVIF y borra los originales, como hace el ejemplo anterior, se queda sin archivo para el feed. Conserve un original JPEG o WebP de cada imagen de producto, o genere uno para el feed, y sirva AVIF a los navegadores mediante <picture>.

#Marcado semántico Schema.org con ImageObject y representativeOfPage

Para que los sistemas de indexación asocien una imagen a una entidad comercial específica sin ambigüedades, el marcado estructurado debe ir más allá de indicar una simple URL en el campo image del esquema Product. Resulta indispensable estructurar cada activo fotográfico como un nodo completo de tipo ImageObject, vinculándolo con la propiedad representativeOfPage y detallando sus dimensiones y licencias de uso.

En un entorno WooCommerce de alto nivel, el generador JSON-LD debe integrarse con el ciclo de renderizado de la plantilla para inyectar metadatos exhaustivos:

<?php
/**
 * Inyeccion de datos estructurados ImageObject para Google Lens y comercio electronico
 */
declare(strict_types=1);

namespace WPPoland\StructuredMediaES;

final class SemanticVisualSchemaManager
{
    public function __construct()
    {
        add_filter('woocommerce_structured_data_product', [$this, 'enrichProductVisualGraph'], 20, 2);
    }

    public function enrichProductVisualGraph(array $markup, \WC_Product $product): array
    {
        $mainImageId = $product->get_image_id();
        $galleryImageIds = $product->get_gallery_image_ids();

        $visualNodes = [];

        if ($mainImageId > 0) {
            $visualNodes[] = $this->buildImageObjectNode($mainImageId, true, $product);
        }

        foreach ($galleryImageIds as $attachmentId) {
            if ($attachmentId > 0 && $attachmentId !== $mainImageId) {
                $visualNodes[] = $this->buildImageObjectNode($attachmentId, false, $product);
            }
        }

        if (!empty($visualNodes)) {
            $markup['image'] = $visualNodes;
        }

        return $markup;
    }

    private function buildImageObjectNode(int $attachmentId, bool $isPrimary, \WC_Product $product): array
    {
        $url = wp_get_attachment_url($attachmentId);
        $metadata = wp_get_attachment_metadata($attachmentId) ?: [];
        $width = (int) ($metadata['width'] ?? 1600);
        $height = (int) ($metadata['height'] ?? 1600);
        $altText = (string) get_post_meta($attachmentId, '_wp_attachment_image_alt', true);
        $caption = wp_get_attachment_caption($attachmentId);

        $node = [
            '@type' => 'ImageObject',
            '@id' => (string) $url . '#primaryimage',
            'url' => (string) $url,
            'contentUrl' => (string) $url,
            'width' => [
                '@type' => 'QuantitativeValue',
                'value' => $width,
                'unitCode' => 'E37' // Unidad de medida de pixeles
            ],
            'height' => [
                '@type' => 'QuantitativeValue',
                'value' => $height,
                'unitCode' => 'E37'
            ],
            'name' => $altText !== '' ? $altText : $product->get_name(),
            'caption' => $caption !== '' ? $caption : $product->get_short_description(),
            'inLanguage' => 'es-ES',
            'acquireLicensePage' => home_url('/es/contacto/'),
            'license' => home_url('/es/aviso-legal/')
        ];

        if ($isPrimary) {
            $node['representativeOfPage'] = 'https://schema.org/True';
        }

        return $node;
    }
}

representativeOfPage es una propiedad de schema.org que marca la imagen principal del producto. La guía de imágenes de Google cita primaryImageOfPage, mainEntityOfPage y og:image como formas de indicar la imagen preferida, y para las fichas de comerciante exige image y recomienda varios archivos de alta resolución (al menos 50 000 píxeles, ancho por alto) en proporciones 16x9, 4x3 y 1x1 (Google Search Central, fichas de comerciante). Google no documenta que Lens dé más peso a ninguna de estas propiedades, así que conviene tratarlas como un etiquetado claro. Si su infraestructura requiere sincronizar catálogos masivos con sistemas de planificación de recursos empresariales, consulte nuestra arquitectura técnica en /es/integracion-woocommerce-erp/.

#Elementos picture adaptativos y optimización de Largest Contentful Paint

Uno de los principales retos en la ingeniería web para comercio electrónico radica en armonizar fotografías de producto con resolución suficiente para el reconocimiento visual de IA con una velocidad de carga que mantenga la métrica Largest Contentful Paint (LCP) en la zona verde (2,5 segundos o menos).

Una práctica deficiente habitual consiste en cargar una imagen de baja resolución para acelerar la página y cargar dinámicamente una versión ampliada mediante bibliotecas de zoom en JavaScript. Los rastreadores de motores de búsqueda a menudo no ejecutan los scripts de zoom o no descargan los activos secundarios, con lo cual el modelo multimodal únicamente inspecciona la miniatura comprimida y con pérdida de detalle.

La solución arquitectónica correcta reside en el uso de etiquetas nativas HTML5 <picture>, ofreciendo alternativas de formato y resoluciones precisas mediante atributos srcset y sizes:

<picture class="woocommerce-main-product-stage">
    <!-- Fuente principal para navegadores modernos en formato AVIF -->
    <source
        type="image/avif"
        srcset="
            https://cdn.wppoland.com/media/motor-induccion-400w.avif 400w,
            https://cdn.wppoland.com/media/motor-induccion-800w.avif 800w,
            https://cdn.wppoland.com/media/motor-induccion-1600w.avif 1600w,
            https://cdn.wppoland.com/media/motor-induccion-2400w.avif 2400w
        "
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
    />
    <!-- Alternativa en formato WebP para compatibilidad extendida -->
    <source
        type="image/webp"
        srcset="
            https://cdn.wppoland.com/media/motor-induccion-800w.webp 800w,
            https://cdn.wppoland.com/media/motor-induccion-1600w.webp 1600w
        "
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
    />
    <!-- Elemento base con dimensiones explicitas para evitar cambios de diseño (CLS) -->
    <img
        src="https://cdn.wppoland.com/media/motor-induccion-800w.jpg"
        alt="Motor de induccion trifasico 400V 5kW serie industrial con placa de bornes abierta"
        width="1600"
        height="1600"
        loading="eager"
        fetchpriority="high"
        decoding="async"
        class="product-hero-visual"
    />
</picture>

Para asegurar que el navegador descargue este recurso prioritario de inmediato sin esperar al análisis completo del árbol DOM o de las hojas de estilo CSS, se debe inyectar una cabecera de enlace o etiqueta de precarga en el <head>:

<link
    rel="preload"
    as="image"
    type="image/avif"
    href="https://cdn.wppoland.com/media/motor-induccion-800w.avif"
    imagesrcset="
        https://cdn.wppoland.com/media/motor-induccion-400w.avif 400w,
        https://cdn.wppoland.com/media/motor-induccion-800w.avif 800w,
        https://cdn.wppoland.com/media/motor-induccion-1600w.avif 1600w
    "
    imagesizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
    fetchpriority="high"
/>

Gracias a este esquema, la imagen principal de la ficha se procesa en el primer milisegundo de la conexión, logrando calificaciones LCP impecables mientras se pone a disposición del motor de indexación una variante nítida de 2400 píxeles a través del conjunto de orígenes srcset.

#Metadatos IPTC frente a sanitización y privacidad

Muchos módulos de optimización y plugins populares de WordPress incorporan por defecto la opción de eliminar la totalidad de los metadatos EXIF e IPTC para ahorrar algunos kilobytes de transferencia. Suprimir las coordenadas GPS y los números de serie de las cámaras es una práctica aconsejable de privacidad y seguridad, pero borrar también los campos IPTC elimina la autoría y el copyright de la imagen.

Google Imágenes puede mostrar el autor, el crédito y los datos de licencia a partir de estos campos, como se detalla más abajo. Google no afirma que los datos IPTC influyan en el posicionamiento, así que el motivo para conservarlos es la atribución y los derechos. Merchant Center añade una regla propia: las imágenes creadas con IA generativa deben llevar metadatos que lo indiquen, y no se deben eliminar etiquetas como IPTC DigitalSourceType.

En WordPress, podemos filtrar los metadatos de las imágenes durante el proceso de guardado para conservar selectivamente la información relevante:

<?php
/**
 * Sanitizacion selectiva de metadatos de imagen preservando la titularidad IPTC
 */
declare(strict_types=1);

namespace WPPoland\MediaGovernanceES;

final class SelectiveMetadataPurifier
{
    private const ALLOWED_IPTC_KEYS = [
        '2#080' => 'byline',       // Autor / Fotografo
        '2#116' => 'copyright',    // Titular de derechos de autor
        '2#110' => 'credit',       // Credito comercial
        '2#105' => 'headline',     // Titulo de la pieza
        '2#120' => 'caption'       // Descripcion tecnica
    ];

    public function sanitizeExifRetainingIptc(string $filePath): void
    {
        if (!file_exists($filePath)) {
            return;
        }

        // Extraccion de la informacion IPTC existente antes de la sanitizacion
        $info = [];
        getimagesize($filePath, $info);
        $iptcRaw = $info['APP13'] ?? null;

        // Si existen metadatos IPTC, se extraen y reconstruyen con las claves autorizadas
        $cleanIptc = [];
        if ($iptcRaw !== null) {
            $parsed = iptcparse($iptcRaw);
            if (is_array($parsed)) {
                foreach (self::ALLOWED_IPTC_KEYS as $tag => $name) {
                    if (!empty($parsed[$tag][0])) {
                        $cleanIptc[$tag] = (string) $parsed[$tag][0];
                    }
                }
            }
        }

        // iptcembed() solo reescribe el bloque IPTC (APP13); el GPS de EXIF
        // necesita un paso aparte, por ejemplo con exiftool
        $this->writeSanitizedIptcPayload($filePath, $cleanIptc);
    }

    private function writeSanitizedIptcPayload(string $filePath, array $iptcData): void
    {
        if (empty($iptcData)) {
            return;
        }

        $data = '';
        foreach ($iptcData as $tag => $string) {
            $tagParts = explode('#', $tag);
            $rec = (int) ($tagParts[0] ?? 2);
            $field = (int) ($tagParts[1] ?? 0);
            $length = strlen($string);

            $data .= chr(0x1C) . chr($rec) . chr($field) .
                     chr($length >> 8) . chr($length & 0xFF) . $string;
        }

        $content = iptcembed($data, $filePath);
        if ($content !== false && is_string($content)) {
            file_put_contents($filePath, $content);
        }
    }
}

Para tiendas que gestionan archivos multimedia corporativos con rigurosos requerimientos de cumplimiento normativo y privacidad de datos, recomendamos revisar nuestro protocolo de auditoría técnica en /es/auditoria-seguridad-wordpress/.

#Qué campos de licencia de imagen lee Google Imágenes

Google documenta dos maneras de asociar información de derechos a una imagen: metadatos IPTC incrustados en el archivo o datos estructurados ImageObject en la página (Google Search Central, metadatos de licencia de imágenes). En el archivo, Google lee Web Statement of Rights, Licensor URL, Creator, Credit Line y Copyright Notice. Web Statement of Rights es obligatorio para la insignia «Con licencia» de Google Imágenes, y los otros cuatro son recomendados.

En datos estructurados, contentUrl es obligatorio porque Google lo usa para decidir a qué imagen se aplican los metadatos. Junto a él debe figurar al menos una de las propiedades creator, creditText, copyrightNotice o license, y en cuanto hay una, la prueba de resultados enriquecidos recomienda las otras tres. license es necesaria para la insignia de licencia y acquireLicensePage apunta a una página que explica cómo obtener la licencia de la imagen. Google añade que no garantiza que estos metadatos aparezcan en los resultados de búsqueda, y la página no dice nada sobre el posicionamiento. Rellene estos campos en la fotografía de producto original como medida de derechos y atribución. En la codificación IIM antigua, Credit Line es el campo 2:110 y Copyright Notice el 2:116, los mismos números del código anterior.

#Qué hace el núcleo de WordPress con IPTC y EXIF al subir una imagen

WordPress lee por sí mismo los campos IPTC al subir una imagen. wp_read_image_metadata() toma el crédito de IPTC Credit (2#110), con Creator (2#080) como alternativa, el copyright de 2#116, el pie de foto de Description (2#120), el título de Headline (2#105) o Title (2#005) y la fecha de creación de 2#055 y 2#060 (referencia para desarrolladores de WordPress). Desde la versión 4.4 el filtro wp_read_image_metadata recibe el array IPTC sin procesar, y desde la 5.0 también el array EXIF, de modo que un plugin puede asignar un campo adicional, como el número de pieza del fabricante, sin volver a analizar el archivo.

Lo que sobrevive en los tamaños generados depende del editor de imágenes. Con Imagick, thumbnail_image() llama a strip_meta(), que elimina todos los perfiles salvo icc, icm, iptc, exif y xmp (WP_Image_Editor_Imagick::strip_meta). EXIF está en esa lista protegida, así que las coordenadas GPS de una foto hecha con el móvil pueden seguir en las copias redimensionadas. La función iptcembed() del código anterior solo reescribe el bloque IPTC y tampoco toca EXIF. Si los datos de ubicación deben desaparecer, elimínelos antes de subir el archivo o en un paso específico, y compruebe un tamaño generado con exiftool en lugar de fiarse de la casilla de un plugin.

#Especificaciones de imágenes de producto para Google Merchant Center

Google indica que Lens identifica productos con el Shopping Graph, y los datos de Merchant Center forman parte de lo que Google sabe de un producto. Merchant Center toma la imagen principal de image_link y hasta 10 vistas adicionales de additional_image_link (enlace de imagen, enlace de imagen adicional).

Los requisitos documentados, junto a una recomendación práctica para WooCommerce:

Para la imagen principal en los datos estructurados, Google prefiere fotos que muestren el producto con claridad, por ejemplo sobre fondo blanco.

A través de la API REST de WooCommerce o de un generador de fuentes XML/JSON personalizado, conviene entregar la URL correspondiente a la versión de alta definición sin compresión destructiva, garantizando que el rastreador de Google Merchant reciba un archivo nítido:

<?php
/**
 * Filtro de fuentes XML de Google Merchant para entregar imagenes de alta fidelidad
 */
declare(strict_types=1);

namespace WPPoland\MerchantDataES;

final class HighResMerchantFeedProvider
{
    public function getCleanMerchantImageUrl(\WC_Product $product): string
    {
        $attachmentId = $product->get_image_id();
        if ($attachmentId === 0) {
            return '';
        }

        // Obtener la variante de 1600x1600 o el archivo maestro original
        $src = wp_get_attachment_image_src($attachmentId, 'full');
        $url = (string) ($src[0] ?? '');

        // Evitar el envio de parametros de consulta dinamicos que perjudiquen el almacenamiento en cache
        return strtok($url, '?') ?: $url;
    }

    public function getCleanAdditionalImages(\WC_Product $product): array
    {
        $galleryIds = $product->get_gallery_image_ids();
        $urls = [];

        foreach ($galleryIds as $id) {
            $src = wp_get_attachment_image_src($id, 'full');
            if (!empty($src[0])) {
                $urls[] = strtok((string) $src[0], '?') ?: (string) $src[0];
            }
        }

        // Merchant Center admite hasta 10 imagenes adicionales
        return array_slice($urls, 0, 10);
    }
}

#Transformación de imágenes en el borde de red y headless WordPress

En proyectos que adoptan una arquitectura desacoplada o Headless WordPress con frontends construidos sobre Next.js, Astro o Nuxt, delegar la manipulación de imágenes al servidor web que aloja WordPress degrada la capacidad de respuesta de la API REST y satura el hilo de ejecución principal.

La estrategia más escalable y eficiente consiste en trasladar las operaciones de redimensionado, recorte inteligente y compresión AVIF/WebP a un servicio perimetral en la red de distribución de contenidos (Edge CDN), como Cloudflare Images, Fastly Image Optimizer o AWS CloudFront con funciones Lambda@Edge.

+--------------------------+       +------------------------------+       +-----------------------------+
|  Navegador / Rastreador  | ----> |  Cloudflare CDN Edge Worker  | ----> |  Almacen de Medios Objectos |
|  Google Lens / Gemini    |       |  Deteccion AVIF y Escalado   |       |  (S3 / R2 / WordPress API)  |
+--------------------------+       +------------------------------+       +-----------------------------+
              ^                                   |                                      |
              |                                   v                                      |
              +---------------------- Respuesta Cacheada en Borde <----------------------+

Un script de Cloudflare Workers intercepta las peticiones multimedia, evalúa las cabeceras Accept del cliente para determinar si admite AVIF y devuelve una copia transformada desde el nodo perimetral más próximo:

/**
 * Cloudflare Worker para la optimizacion y entrega perimetral de imagenes
 */
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const acceptHeader = request.headers.get('Accept') || '';

    // Determinacion automatica del formato optimo soportado por el cliente
    let targetFormat = 'webp';
    if (acceptHeader.includes('image/avif')) {
      targetFormat = 'avif';
    }

    const width = parseInt(url.searchParams.get('w') || '1200', 10);
    const quality = parseInt(url.searchParams.get('q') || '80', 10);

    // Opciones de transformacion perimetral de Cloudflare Images
    const imageOptions = {
      cf: {
        image: {
          width: width,
          quality: quality,
          format: targetFormat,
          fit: 'contain',
          metadata: 'none' // Solo JPEG conserva metadatos; AVIF y WebP los descartan siempre
        }
      }
    };

    const originUrl = 'https://media-origin.wppoland.com' + url.pathname;
    const cacheKey = new Request(url.toString() + `?fmt=${targetFormat}&w=${width}&q=${quality}`, request);
    const cache = caches.default;

    let response = await cache.match(cacheKey);
    if (!response) {
      response = await fetch(originUrl, imageOptions);
      ctx.waitUntil(cache.put(cacheKey, response.clone()));
    }

    return response;
  }
};

La opción metadata de Cloudflare solo se aplica a la salida JPEG: copyright (el valor por defecto) conserva únicamente la etiqueta EXIF de copyright, keep mantiene casi todo el EXIF, incluida la ubicación GPS, y en cualquier otro formato de salida, WebP y PNG incluidos, se descartan todos los metadatos (Cloudflare Images). Una variante AVIF generada en el borde no lleva crédito IPTC, así que los datos de licencia también deben estar en los datos estructurados de la página.

Si su organización está planificando una transición hacia una arquitectura desacoplada y busca optimizar tanto los tiempos de carga como la visibilidad en buscadores visuales, conozca nuestros servicios especializados en /es/servicios/headless-wordpress/.

#Control de calidad automatizado y gestión del perfil de color

Un aspecto técnico frecuentemente ignorado en el comercio electrónico es la gestión de los perfiles de color (Color Profiles / ICC Profiles). Si un proveedor carga fotografías en el espacio de color Adobe RGB o ProPhoto RGB y el servidor las procesa descartando la información del perfil sin remapear las coordenadas cromáticas, los colores se presentarán apagados o alterados y dejarán de coincidir con el producto real.

Para evitar discrepancias visuales, todo el catálogo debe normalizarse rigurosamente al espacio de color sRGB estándar. Asimismo, un pipeline de integración continua debe ejecutar pruebas automáticas sobre la relación de contraste del fondo y la nitidez de los objetos antes de publicar las imágenes en producción.

<?php
/**
 * Normalizacion obligatoria al espacio de color sRGB en la subida de medios
 */
declare(strict_types=1);

namespace WPPoland\ColorGovernanceES;

final class ProfileNormalizationFilter
{
    public function ensureStandardSrgbProfile(string $imagePath): void
    {
        if (!extension_loaded('imagick')) {
            return;
        }

        try {
            $imagick = new \Imagick($imagePath);
            $colorspace = $imagick->getImageColorspace();

            if ($colorspace === \Imagick::COLORSPACE_CMYK) {
                // Conversion de archivos de imprenta CMYK a RGB digital
                $srgbProfile = file_get_contents(__DIR__ . '/profiles/sRGB.icc');
                $imagick->profileImage('icc', $srgbProfile);
                $imagick->transformImageColorspace(\Imagick::COLORSPACE_SRGB);
            } elseif ($colorspace !== \Imagick::COLORSPACE_SRGB) {
                $imagick->transformImageColorspace(\Imagick::COLORSPACE_SRGB);
            }

            $imagick->writeImage($imagePath);
            $imagick->clear();
            $imagick->destroy();
        } catch (\Throwable $e) {
            error_log('[Color Governance] Error al normalizar perfil de color: ' . $e->getMessage());
        }
    }
}

#Lista de comprobación técnica para Google Lens y SEO visual

Para verificar que su tienda WooCommerce y sus servidores de entrega multimedia satisfacen las exigencias de Google Lens y los motores de búsqueda multimodales, revise minuciosamente los siguientes puntos de control:

1. Infraestructura de formatos y rendimiento

   • Configuración de la compresión AVIF con libvips en un factor de esfuerzo equilibrado (effort 4) y calidad constante de 75 a 80.
   • Entrega de etiquetas <picture> con alternativas en srcset para resoluciones de 400w, 800w, 1600w y 2400w.
   • Inyección de directivas <link rel="preload" as="image" fetchpriority="high"> para la imagen principal de cada ficha de producto.
   • Obtención de un LCP inferior a 1,5 segundos en dispositivos móviles bajo condiciones de red 4G simuladas.

2. Datos estructurados y semántica

   • Definición de cada elemento gráfico como un nodo @type: ImageObject subordinado al esquema Product.
   • Propiedad image presente en Product y contentUrl en cada ImageObject con datos de licencia.
   • Inclusión explícita de campos de dimensiones width y height en unidades cuantitativas normalizadas (unitCode: E37).
   • Enlaces directos a las páginas de licencia y contacto comercial mediante las propiedades license y acquireLicensePage.

3. Gobernanza de metadatos y cumplimiento normativo

   • Supresión verificada de coordenadas GPS y metadatos de privacidad del sensor fotográfico.
   • Preservación intencionada de las cabeceras IPTC de derechos de autor, autoría y códigos de referencia del producto.
   • Normalización automatizada al espacio de color estándar sRGB para evitar discordancias cromáticas en los modelos de visión.

4. Sincronización de canales comerciales

   • Imágenes del feed en JPEG, WebP o PNG, de unos 1500 x 1500 píxeles y de al menos 500 x 500 píxeles antes del requisito del 31 de enero de 2027.
   • Fondo blanco uniforme (#FFFFFF) en la fotografía principal sin logotipos superpuestos, marcas de agua ni bordes publicitarios.
   • El producto ocupa entre el 75% y el 90% del encuadre visual con iluminación homogénea y sin sombras deformantes.

La búsqueda visual premia el mismo trabajo de base que el SEO de imágenes: archivos rastreables en formatos admitidos, marcado claro y un feed limpio. Para diseñar una estrategia integral adaptada a su plataforma, póngase en contacto con nuestro equipo técnico a través de /es/contacto/.