Contenido 18 secciones
- ¿Qué es la optimización de imágenes de producto?
- ¿Por qué es tan importante la optimización de imágenes en el comercio electrónico?
- Las 6 capas de la optimización de imágenes de producto
- ¿Qué formato de imagen usar y cuándo?
- ¿De qué tamaño debe ser una imagen de producto?
- Herramienta de tamaño, nombre de archivo y texto alternativo de imágenes de producto
- ¿Cómo debe ser el nombre de archivo de una imagen de producto?
- ¿Cómo se escribe el texto alternativo?
- ¿Cómo deben cargarse las imágenes en la página?
- ¿Cómo debe construirse una galería de producto?
- Flujo de optimización de imágenes para cientos de productos
- Fondo de la imagen: ¿blanco o de estilo de vida?
- ¿Con qué frecuencia deben optimizarse las imágenes?
- ¿Cómo se mide la optimización de imágenes?
- 8 errores frecuentes en la optimización de imágenes
- Lista de verificación de la optimización de imágenes de producto
- Gestión de imágenes de producto con Faprika
- Preguntas frecuentes
En el comercio electrónico el cliente no puede tener el producto en las manos; lo valora solo por la imagen. Por eso las imágenes de producto son a la vez la herramienta de venta más potente y la carga más pesada de la página: una imagen bien fotografiada pero sin optimizar ralentiza la página, consume datos móviles y hace perder al cliente antes de que la página llegue a abrirse. La optimización de imágenes de producto consiste en lograr que una imagen cargue más rápido, se entienda mejor y se encuentre con más facilidad sin renunciar a su calidad.
Este artículo está planteado como una lección. Paso a paso aprenderá de qué capas se compone la optimización de imágenes, cómo elegir el tamaño y el formato correctos, cómo escribir el nombre de archivo y el texto alternativo, las técnicas de carga, un flujo de trabajo masivo y los errores más frecuentes. La herramienta del artículo genera al instante el tamaño objetivo, el nombre de archivo y el texto alternativo para su propio producto.
¿Qué es la optimización de imágenes de producto?
La optimización de imágenes de producto consiste en llevar el tamaño de archivo, el formato, el nombre, el texto alternativo y la forma de carga de una fotografía de producto al estado más favorable para la velocidad de la página, la accesibilidad y los motores de búsqueda, conservando su calidad visual. Hacer la foto es la mitad del trabajo; prepararla para su publicación es la otra mitad.
La optimización no consiste en «estropear» ni desenfocar la imagen. El objetivo es obtener un archivo mucho más pequeño con una pérdida de calidad que el ojo no distingue, y servir la imagen con un tamaño adecuado al lugar donde se usa.
Le recomendamos leer¿Cómo fotografiar productos? Guía de fotografía de producto con el móvil para el comercio electrónico¿Por qué es tan importante la optimización de imágenes en el comercio electrónico?
En las páginas de producto, las imágenes suelen suponer la mayor parte del peso total de la página; por eso la optimización de imágenes es la forma más eficaz y de menor riesgo de mejorar la velocidad de la página. La velocidad, a su vez, está directamente relacionada con la conversión, la experiencia móvil y la visibilidad en las búsquedas.
- Velocidad de la página: Las imágenes más pequeñas se descargan más rápido; la página se vuelve utilizable antes.
- Experiencia móvil: Con datos móviles y conexiones lentas, una imagen grande puede impedir que la página llegue a abrirse.
- Conversión: Cuando la página se abre sin esperas, el cliente se centra en el producto y disminuyen los abandonos.
- Visibilidad en las búsquedas: Un nombre de archivo y un texto alternativo descriptivos ayudan a los motores de búsqueda y a la búsqueda de imágenes a entender la imagen.
- Accesibilidad: El texto alternativo permite que los clientes que usan lectores de pantalla entiendan el producto.
- Coste de infraestructura: Los archivos más pequeños implican menos tráfico y almacenamiento.
Las 6 capas de la optimización de imágenes de producto
La optimización de imágenes consta de seis capas: tamaño (píxeles), peso (kilobytes), formato, nombre de archivo, texto alternativo y forma de carga. Cada capa resuelve un problema distinto y, cuando falta una, se reduce el beneficio de las demás.
| Capa | ¿Qué se hace? | Problema que resuelve |
|---|---|---|
| 1. Tamaño (píxeles) | Ancho y alto adecuados al tamaño con que se muestra | Descarga de una imagen innecesariamente grande |
| 2. Peso (KB) | Compresión sin pérdida de calidad visible | Carga lenta, alto consumo de datos |
| 3. Formato | El formato adecuado para la imagen (WebP, JPEG, PNG, SVG) | Un archivo innecesariamente grande con la misma calidad |
| 4. Nombre de archivo | Un nombre descriptivo, en minúsculas y con guiones | Nombres sin significado como «IMG_2034.jpg» |
| 5. Texto alternativo | Una breve descripción de la imagen | Pérdida de accesibilidad y de búsqueda de imágenes |
| 6. Forma de carga | Cargar más tarde las imágenes fuera de pantalla, indicar las dimensiones | Carga anticipada innecesaria, desplazamiento del diseño |
¿Qué formato de imagen usar y cuándo?
Para las fotografías, la mejor opción suele ser WebP o JPEG; para gráficos que necesitan transparencia, PNG o WebP; y para logotipos e iconos, SVG. La elección del formato cambia directamente el tamaño de archivo de una misma imagen.
| Formato | Uso más adecuado | Ventajas | Atención |
|---|---|---|---|
| WebP | Fotos de producto, imágenes transparentes | Por lo general, un archivo más pequeño que JPEG y PNG; amplia compatibilidad con los navegadores | Puede hacer falta un formato alternativo en dispositivos muy antiguos |
| JPEG | Fotografías | Compatible en todas partes | Sin transparencia; deterioro con una compresión fuerte |
| PNG | Fondo transparente, gráficos nítidos | Sin pérdida, admite transparencia | Archivo muy grande en el caso de las fotografías |
| AVIF | Fotos (nueva generación) | En la mayoría de los casos, un archivo aún más pequeño | Su generación puede ser lenta; puede no ser compatible con todos los sistemas |
| SVG | Logotipo, icono, ilustración | Vectorial; nítido a cualquier tamaño, muy pequeño | No es adecuado para fotografías |
Una regla práctica: publique las fotografías de producto en WebP (o en JPEG como alternativa), use WebP o PNG en las imágenes de producto que necesiten transparencia y convierta los logotipos e iconos a SVG.
¿De qué tamaño debe ser una imagen de producto?
El tamaño de origen de una imagen debe ser aproximadamente el doble del tamaño con que se muestra en la página: así se obtiene una imagen nítida en pantallas de alta resolución (retina) y se evita un archivo innecesariamente grande. Si ofrece zoom, la fuente puede ser algo mayor.
- Averigüe el ancho con que se muestra: Compruebe cuántos píxeles de ancho tiene en pantalla la imagen principal en la página de producto.
- Multiplique por dos: Para pantallas de alta densidad, la fuente debe tener aproximadamente el doble del ancho con que se muestra.
- Auméntelo si hay zoom: Si ofrece zoom, puede subir la fuente hasta el triple; de lo contrario, el zoom se ve borroso.
- Mantenga la proporción fija: Use la misma relación de aspecto (por ejemplo 1:1 o 4:5) en todas las imágenes de producto; las páginas de listado se ven ordenadas.
- Evite las imágenes innecesariamente grandes: Una fotografía de 4000 píxeles tomada con el móvil debe reducirse si se va a mostrar en un área de 600 píxeles.
Herramienta de tamaño, nombre de archivo y texto alternativo de imágenes de producto
La herramienta siguiente genera para su producto el tamaño objetivo de la imagen de origen, un nombre de archivo apto para SEO y una sugerencia de texto alternativo. La herramienta solo ofrece sugerencias; edite el texto alternativo recordando que usted es quien mejor puede describir su producto.
¿Cómo debe ser el nombre de archivo de una imagen de producto?
El nombre de archivo de una imagen debe ser una expresión breve y descriptiva que explique la imagen; debe escribirse en minúsculas, sin caracteres especiales ni espacios, con las palabras separadas por guiones. Nombres como «IMG_2034.jpg», asignados por el móvil o la cámara, no aportan ninguna información sobre la imagen.
| Mal ejemplo | Buen ejemplo | ¿Por qué? |
|---|---|---|
| IMG_2034.jpg | camisa-lino-blanco-vista-frontal.webp | Describe el producto y la vista |
| Camisa Lino Blanco.JPG | camisa-lino-blanco.jpg | Los espacios, las mayúsculas y los caracteres especiales pueden causar problemas |
| camisa_final_final2.png | camisa-lino-detalle.png | Sin añadidos sin sentido ni repeticiones |
| producto1.jpg | cinturon-cuero-negro-uso.jpg | Se ve claramente de qué producto se trata |
Algunos sistemas usan el nombre de archivo para emparejar cuando se suben muchos productos de forma masiva: las imágenes se nombran según el código de barras o el código de stock del producto y se asocian al producto en la carga. En ese caso, no altere el esquema de emparejamiento; rellene por separado los campos importantes para el SEO, como el texto alternativo y el nombre del producto.
¿Cómo se escribe el texto alternativo?
El texto alternativo es una frase breve que describe la imagen a alguien que no puede verla; dice qué es el producto y qué lo distingue. Los lectores de pantalla lo leen en voz alta, los motores de búsqueda lo usan para entender el contenido de la imagen y aparece en su lugar cuando la imagen no se carga.
- Indique el producto y su rasgo: Escriba una frase breve y descriptiva como «Camisa de lino, blanca, vista frontal».
- No diga «imagen» ni «foto»: El lector de pantalla ya anuncia que se trata de una imagen.
- No sature de palabras clave: Un texto alternativo como «camisa camisa hombre camisa lino camisa barata» perjudica tanto la accesibilidad como la búsqueda.
- Escriba uno distinto para cada imagen: Las imágenes frontal, posterior y de detalle de un mismo producto deben llevar textos alternativos diferentes.
- Deje vacíos los de las imágenes decorativas: El texto alternativo debe estar vacío en las imágenes meramente decorativas.
- Sea breve: Normalmente basta con una o dos frases cortas.
| Ejemplo | Revisión | |
|---|---|---|
| Vacío | (sin texto alternativo) | Pérdida de accesibilidad y de búsqueda |
| Saturado de palabras clave | camisa camisa hombre camisa lino barata | Perjudicial, puede considerarse spam |
| Palabra innecesaria | Imagen camisa de lino | «Imagen» es innecesario |
| Bueno | Camisa de lino blanca, vista frontal | Corto, claro, describe el producto |
¿Cómo deben cargarse las imágenes en la página?
La forma en que se carga una imagen importa tanto como la propia imagen: la imagen principal del producto que aparece primero en pantalla debe cargarse de inmediato, mientras que las imágenes situadas fuera de la pantalla deben cargarse cuando el usuario se acerca a ese punto. De lo contrario, la página se vuelve innecesariamente pesada o la imagen importante llega tarde.
- Cargue más tarde las imágenes fuera de pantalla (lazy loading): En una página de listado, las imágenes de los productos situados más abajo se cargan a medida que el usuario se desplaza.
- No retrase la primera imagen: La imagen principal del producto visible al abrir la página no debe cargarse con lazy loading; es el contenido más importante.
- Indique el ancho y el alto: Las dimensiones deben definirse de antemano para que la página no se desplace cuando llegue la imagen.
- Sirva un tamaño adecuado a cada pantalla: Se puede enviar una fuente más pequeña a los móviles y una mayor a los ordenadores de escritorio.
- Use una red de distribución (CDN): Las imágenes se cargan más rápido cuando proceden de un servidor cercano al usuario.
¿Cómo debe construirse una galería de producto?
Como el cliente no puede tener el producto en la mano, la galería lo hace por él: distintos ángulos, detalles e imágenes de uso aumentan la confianza. Al crear la galería, la coherencia importa tanto como el número de imágenes.
- Incluya suficientes imágenes: Procure tener al menos varias imágenes de la parte frontal, trasera, lateral, detalles y uso.
- Elija primero la imagen más nítida: La primera imagen es la que se ve en las páginas de listado y al compartir; que sea una imagen nítida sobre fondo blanco o neutro.
- Mantenga un fondo y una proporción coherentes: Un fondo similar y la misma proporción en todos los productos hacen que la tienda se vea ordenada.
- Muestre el tamaño y la escala: Una imagen de uso que dé idea del tamaño o una tabla de medidas reduce la tasa de devoluciones.
- Añada un vídeo: Un vídeo breve del producto muestra el movimiento y la textura que una imagen no puede transmitir.
Flujo de trabajo de optimización de imágenes para cientos de productos
En una tienda con muchos productos es imposible optimizar las imágenes una por una, por lo que hay que establecer un flujo de trabajo fijo. Los ocho pasos siguientes ofrecen una rutina repetible, desde la sesión de fotos hasta la publicación.
- Fotografíe: Haga el mismo conjunto de ángulos para cada producto, con iluminación y fondo fijos.
- Seleccione: Elija las tomas más nítidas y coherentes.
- Recorte: Lleve todos los productos a la misma relación de aspecto.
- Redimensione: Reduzca al ancho objetivo (aproximadamente el doble del tamaño mostrado).
- Comprima y elija el formato: WebP o JPEG, sin pérdida de calidad visible.
- Nombre: Asigne nombres con sentido o que cumplan la regla de coincidencia de su sistema.
- Suba: Use la carga masiva si está disponible; complete los textos alternativos.
- Mida: Revise las advertencias de imágenes en una herramienta de velocidad de página.
Fondo de la imagen del producto: ¿blanco o de estilo de vida?
Ambas son necesarias y cumplen funciones distintas: una imagen con fondo neutro (normalmente blanco) muestra el producto con claridad y da orden a las páginas de listado, mientras que una imagen de estilo de vida muestra el producto en contexto y despierta la imaginación. Lo más seguro es que la primera imagen de la galería sea la imagen sencilla que mejor describe el producto, y después pasar a las imágenes de estilo de vida y de detalle.
- Imagen sencilla en la página de listado: El mismo fondo y la misma proporción hacen que la tienda se vea ordenada y fiable.
- Contexto en la página de detalle: Una imagen de uso muestra el tamaño del producto y para qué se utiliza.
- Imágenes de detalle: Detalles como costuras, textura, etiquetas y conexiones facilitan la decisión.
¿Con qué frecuencia se debe optimizar las imágenes?
La optimización de imágenes no es un trabajo que se haga una sola vez; se repite a medida que se añaden productos, cambia el diseño y crece el catálogo. Lo más saludable es pasar las imágenes de cada producto nuevo por el mismo flujo de trabajo antes de publicarlas y revisar el catálogo antiguo a intervalos regulares.
- Con cada producto nuevo: Estandarice el flujo de trabajo (tamaño, formato, nombre, texto alternativo).
- Cuando cambie el diseño o la plantilla: Es posible que el tamaño en que se muestran las imágenes haya cambiado; vuelva a comprobar el tamaño de origen.
- Cada tres meses: Vuelva a medir las páginas con más tráfico en una herramienta de velocidad de página.
- Antes de las campañas: Revise las imágenes de las páginas más visitadas antes de que llegue mucho tráfico.
¿Cómo se mide la optimización de imágenes?
Puede comprobar si la optimización ha funcionado mediante las mediciones de velocidad de página y el peso de la página. Realice la medición en dos momentos: antes y después del cambio, en la misma página y en las mismas condiciones.
- Informe de velocidad de página: ¿Han desaparecido advertencias como «Ajustar el tamaño de las imágenes», «Publicar imágenes en formatos de nueva generación» y «Aplazar imágenes fuera de pantalla»?
- Peso total de la página: ¿Ha disminuido el tamaño total de descarga de la página de producto?
- Largest Contentful Paint: ¿Se ha adelantado el momento en que aparece la imagen principal del producto?
- Medición en móvil: Realice la medición especialmente en condiciones de conexión móvil lenta.
8 errores frecuentes en la optimización de imágenes
- Subir las imágenes del teléfono tal cual: Una imagen de miles de píxeles se descarga completa aunque se muestre en un área pequeña.
- Usar PNG en todas partes: PNG genera archivos muy grandes en el caso de las fotografías.
- Comprimir en exceso: La distorsión visible y el desenfoque dañan la confianza.
- Dejar un nombre de archivo sin sentido: Nombres como «IMG_2034» no aportan información.
- Dejar vacío el texto alternativo o llenarlo de palabras clave: Ambos extremos perjudican la accesibilidad y la búsqueda.
- Cargar tarde la imagen principal: Si se aplaza la primera imagen visible en pantalla, la página parece vacía.
- No indicar el tamaño de la imagen: Cuando llega la imagen, la página se desplaza hacia abajo.
- Usar proporciones y fondos incoherentes: La página de listado se ve desordenada.
Lista de verificación para la optimización de imágenes de producto
Antes de publicar las imágenes de sus productos, debería poder responder «sí» a todos los puntos siguientes.
- ¿La imagen tiene aproximadamente el doble de ancho que el tamaño en que se muestra?
- ¿Se han comprimido las fotografías como WebP o JPEG sin pérdida de calidad visible?
- ¿Los logotipos e iconos están en SVG o son de tamaño reducido?
- ¿Los nombres de archivo son significativos, están en minúsculas y no llevan caracteres turcos (o cumplen la regla de coincidencia del sistema)?
- ¿Cada imagen tiene un texto alternativo breve y significativo?
- ¿Los textos alternativos están libres de relleno de palabras clave?
- ¿La galería del producto tiene suficientes ángulos, detalles e imágenes de uso?
- ¿Todas las imágenes de producto tienen la misma relación de aspecto y un fondo coherente?
- ¿Las imágenes situadas bajo la parte visible se cargan más tarde, mientras que la imagen principal se carga de inmediato?
- ¿Están definidos el ancho y el alto de las imágenes?
- ¿Se ha realizado una medición de velocidad de página después del cambio?
Gestión de imágenes de producto con Faprika
Publicar con rapidez imágenes bien preparadas para cientos de productos es la segunda mitad del trabajo. En la infraestructura de comercio electrónico de Faprika, los siguientes elementos cubren esta etapa (puede ver en qué plan comienza cada función en la página de planes de comercio electrónico):
- Arrastrar y soltar y carga de varias imágenes: Al añadir un producto, sube varias imágenes arrastrándolas y soltándolas o seleccionándolas desde un archivo; los pasos están en el tutorial Añadir un nuevo producto.
- Carga masiva de imágenes de producto: Nombra las imágenes según el ID del producto, el código de stock o el código de barras y las sube de una sola vez; como separador de orden se elige guion, guion bajo o asterisco. Los detalles están en el tutorial Carga masiva de imágenes; esta función varía según el plan.
- Función de lienzo de imagen de producto: El lienzo de imagen se define en los ajustes de listado y detalle del producto; está incluido en todos los planes.
- Logotipo durante la carga (lazy logo): Mientras se cargan las imágenes, el logotipo de su marca aparece en el fondo del lienzo del producto; los detalles están en el tutorial Gestión del lazy logo.
- Vídeo automático: La sección de imágenes del producto incluye una opción de vídeo automático; se recomienda usarla junto con varias imágenes.
- Red de distribución de contenido (CDN): Según el plan, se ofrece una CDN que acelera el tráfico de imágenes y archivos.
Preguntas frecuentes
¿Qué es la optimización de imágenes de producto?
La optimización de imágenes de producto consiste en llevar el tamaño de archivo, el formato, el nombre, el texto alternativo y la forma de carga de una fotografía de producto al estado más favorable para la velocidad de la página, la accesibilidad y los motores de búsqueda, conservando su calidad. El objetivo es ofrecer archivos más pequeños y más descriptivos sin pérdida de calidad visible.
¿De qué tamaño debe ser una imagen de producto?
La imagen de origen debe tener aproximadamente el doble de ancho que el tamaño con que se muestra en la página; así se obtiene una imagen nítida en pantallas de alta densidad. Si hay función de zoom, la fuente puede llegar al triple. Por ejemplo, para una imagen que se muestra a 600 píxeles de ancho en la página, un ancho de 1200 píxeles es adecuado.
¿Qué es WebP y por qué se prefiere?
WebP es un formato moderno desarrollado para imágenes; en general ofrece una calidad similar con un archivo más pequeño que JPEG y PNG y admite transparencia. Gracias a su amplia compatibilidad con los navegadores, es una opción habitual para las fotografías de producto; para sistemas antiguos puede considerarse una alternativa en JPEG.
¿Cómo se escribe el texto alternativo?
El texto alternativo debe ser una frase breve que describa la imagen a alguien que no puede verla: diga qué es el producto y qué lo distingue. No diga «imagen» ni «foto», no sature de palabras clave y escriba un texto distinto para cada imagen. En las imágenes meramente decorativas, el texto alternativo se deja vacío.
¿Es importante el nombre de archivo de la imagen para el SEO?
Un nombre de archivo descriptivo es una pequeña pista que ayuda a entender el contenido de la imagen; no es tan determinante como el texto alternativo y el nombre del producto. Escriba el nombre del archivo en minúsculas, sin caracteres especiales ni espacios, separando las palabras con guiones.
¿Es correcto cargar todas las imágenes con lazy loading?
No. Las imágenes que quedan fuera de la pantalla deben cargarse más tarde, pero la imagen principal del producto, visible en cuanto se abre la página, no debe cargarse con lazy loading; de lo contrario, el contenido más importante se retrasa y la página parece vacía.
