La fotografía de producto es una rama de actividad en la que el viejo dicho “Más es mejor” no necesariamente establece todas las reglas. Más píxeles, o una mayor resolución, significan directamente un archivo más pesado y un desafío para la conexión a Internet.
Tabla de contenidos
La fotografía de producto es una rama de actividad en la que el viejo dicho “Más es mejor” no necesariamente establece todas las reglas. Más píxeles, o una mayor resolución, significan directamente un archivo más pesado y un desafío para la conexión a Internet. Piensa en los tiempos de carga de algunas imágenes de producto cuando intentaste comprar en línea desde un dispositivo móvil, desde tu refugio vacacional en la montaña. ¿La red 3G simplemente no podía cargarlas? ¿O quizá el sitio web estaba adaptado para verse en pantallas más grandes?
En nuestra guía definitiva te daremos consejos sobre cómo optimizar las imágenes de producto para la presencia en línea, para que nunca les ocurra a tus clientes. Aprenderás a eliminar los tediosos tiempos de carga y las situaciones en las que la foto del producto simplemente no se ve adecuada para el dispositivo.
Comenzamos planteando la simple pregunta: “¿por qué optimizar?” y luego te guiamos por los entresijos de la optimización de la resolución y la gestión del tamaño de archivo. Por último, tendrás la oportunidad de aprender los principios básicos de la optimización SEO de imágenes, que es una parte integral de una tienda en línea que funciona sin problemas.
Un negocio en línea siempre considerará el tiempo y el dinero como activos. Aprender a gestionarlos de forma eficaz forma parte del éxito y no va sin agilizar los procesos de fotografía de producto. Querrás producir imágenes que vendan e imágenes que guíen suavemente al cliente por el sitio web en lugar de crear obstáculos.
Estas imágenes de producto deberán estar optimizadas en cuanto a su visibilidad, tamaño de descarga y posicionamiento en los motores de búsqueda. No hay escapatoria a abordar estos parámetros si apuntas a reducir costes y valoras la experiencia de tus usuarios.
Teniendo en cuenta la optimización de imágenes, conseguirás un sitio web más rápido y ligero, lo que contribuirá al ahorro en tarifas de servidor. También obtendrás una mejor posición en los motores de búsqueda, lo que genera tráfico a tu sitio web y aumenta las conversiones.
La forma más sencilla de pensar en la optimización es considerar el uso de resoluciones más pequeñas, introducir compresión de imágenes y etiquetar correctamente las imágenes. Esto implicará elegir formatos de imagen, cierto posprocesado de la resolución y una determinada cantidad de trabajo de webmaster.
Te guiaremos por todo ello.
Para empezar, echemos un vistazo rápido a qué es la resolución. En una definición básica, es el número de píxeles de los que consta una imagen. Suele expresarse mediante los números vertical y horizontal: el ancho y el alto de una imagen en píxeles, por ejemplo 1920×1080.
Cuantos más píxeles tenga una imagen, mejor podrán representarse los detalles para el espectador. El siguiente ejemplo ilustra esta situación.
Alta resolución
Baja resolución
Cuando se trata de optimizar la resolución, no existe una solución única y sencilla. Para elegir la resolución óptima para tu imagen de producto, tendrás en cuenta las siguientes características:
Buscar la mayor resolución posible no será una estrategia recomendable, aunque pueda parecer que “más píxeles significan más detalles”. En el caso de las tiendas online, esto más bien se traduciría en “más tiempo de carga” y “visualización incorrecta”. Tu técnico web y tu analista SEO lo saben muy bien…
Los requisitos del sitio web son la primera razón por la que necesitas hacer que tus imágenes y tu sistema funcionen juntos sin problemas. Entre las preguntas que tu webmaster te ayudará a responder pueden incluirse:
Conocer estas respuestas te guiará en las primeras decisiones de resolución que tomes. Al planificar una tienda en línea, trabaja en estrecha colaboración con tu equipo web. El conocimiento que te aporten te ahorrará tiempo en la creación y el posprocesado de imágenes de producto. Y, sobre todo, será el primer paso hacia una visualización fluida de las imágenes para tus clientes.
Escucha atentamente a los diseñadores web y elige las resoluciones que proponen para miniaturas, primeros planos, imágenes principales de listados, etc. Será mucho más eficaz conocerlas de antemano y luego establecer estándares óptimos para la generación de fotografías en tu empresa.
La diversidad de dispositivos digitales disponibles jugará un papel importante al establecer las directrices de resolución para tus imágenes de producto. Para ver tus productos, los clientes pueden usar smartphones o tablets de diferentes tamaños, así como pantallas de escritorio multiformato. ¿Cómo adaptarlos a todos?
Esta gran pregunta no tiene una sola respuesta. Esto se debe a que habrá decenas de resoluciones posibles que tu usuario podría elegir. Algunas serán más comunes, otras menos. Puedes medir las resoluciones de tus clientes con la mayoría de las herramientas básicas de gestión del tráfico web y sacar conclusiones a partir de las estadísticas. Junto con webmasters y diseñadores gráficos, deberás decidir adaptarte a la mayoría en lugar de a la totalidad de este grupo.
Para entender el fenómeno de las pantallas de distintas resoluciones, veamos cómo se comporta una pantalla cuando cambiamos su resolución.
Según la resolución, la pantalla puede mostrar menos o más. En pantallas de portátil o de escritorio, el lado más largo de la resolución será horizontal. En pantallas de teléfonos móviles, el lado vertical será más largo. Ya esta simple diferencia genera requisitos para las imágenes de tu e-shop: por ejemplo, ¿deberías meter más contenido vertical u horizontalmente?
Conviene señalar que, en el caso de pantallas HiDPI (High Dots Per Inch) o Retina, comunes en smartphones y portátiles modernos, es necesario diferenciar entre los llamados píxeles CSS usados por las aplicaciones (incluidos los navegadores web) y los píxeles físicos determinados por el fabricante del dispositivo. En este caso, para 1 píxel CSS se pueden contar más píxeles físicos. El parámetro que lo define es DPR: Device Pixel Ratio.
Las pantallas High Dots Per Inch permiten a los diseñadores web mostrar imágenes en varias resoluciones según lo que admita la pantalla. Normalmente, se prepararán diferentes versiones de la misma imagen, cada una en una resolución distinta. Se colocarán en el sitio web usando el atributo <img scrset>, que será leído por los navegadores para mostrar la imagen de la manera más conveniente. Aprende más sobre el tema en un sitio web dedicado a las resoluciones de pantalla.
Las pantallas con resoluciones como 4K y superiores están ganando popularidad; sin embargo, todavía es (2021) la resolución fullHD la más utilizada, ya sea en portátil o en smartphone. Nuestra foto, vista con un zoom del 100 %, se comportará de forma diferente en pantallas verticales y horizontales:
En una resolución mayor
Horizontal y ajustada a la pantalla
Vertical y sin ajustarse a la pantalla
Ten en cuenta que en un smartphone los 1920 píxeles de fullHD serán el lado más largo (vertical) de la pantalla. Por lo tanto, nuestra foto se mostrará más pequeña que la superficie de la pantalla.
Los ejemplos anteriores ilustran un caso de estudio para la resolución fullHD. Como no es la única resolución que usan los clientes, deberías considerar ajustar la resolución “para que encaje en más pantallas”.
Esto significaría introducir varias resoluciones de imagen para distintas resoluciones de pantalla y cargarlas de forma responsive. Una solución que puede implementarse en la mayoría de los sistemas de gestión de sitios web.
Asegúrate de preparar archivos separados para las imágenes en miniatura de los productos, ya que cargarán más rápido que una imagen grande reducida por el navegador web. Simplemente requieren menos procesamiento y tiempo de descarga, lo que cobra importancia cuando muchas miniaturas de productos se cargan en una pantalla en una cuadrícula o una fila.
Además, el tamaño real de la miniatura y el tamaño indicado en HTML en su etiqueta <image> pueden influir en los parámetros que Google tiene en cuenta al posicionar tu sitio web. La regla para mejorar el rendimiento del sitio web y el SEO es mostrar exactamente la resolución que tiene el archivo en el servidor, sin operaciones del navegador.
Una resolución extremadamente baja significará un tamaño de archivo cómodamente mínimo. Lo contrario ocurre con una resolución exquisitamente alta. El optimizador tendrá que encontrar un punto intermedio para mantener un tamaño de archivo razonable sin perder nivel de detalle al reducir la resolución. Mira abajo ejemplos de tamaños de archivo.
Calcular el tamaño de archivo óptimo puede guiarse por parámetros como el número de imágenes que deben cargarse simultáneamente en un sitio web. Imagina una cuadrícula de productos con cientos de productos donde las imágenes se cargan en resolución completa y luego el navegador las reduce. Esto supondría una carga seria para la conexión a Internet del usuario final y haría que navegar fuera prácticamente imposible en redes de menor velocidad.
Sabiendo lo difícil que es compartimentar el conocimiento sobre optimización de imágenes y cuántas facetas y enfoques presenta, decidimos prepararte una lista breve de consejos. Sigue leyendo.
1) Elige el formato adecuado para tus gráficos. Para imágenes de formas geométricas simples y rangos tonales sencillos, se recomienda sustituir gráficos raster por gráficos vectoriales. Así podrás lograr la mejor relación calidad:tamaño y obtener una escalabilidad increíble. Los gráficos vectoriales (por ejemplo, formato SVG) se muestran igual de bien en resoluciones altas y bajas. Se recomiendan para logotipos, iconos e ilustraciones.
Los gráficos raster (tipos de archivo como PNG, JPG) funcionarán para visuales complejos y fotografía. Un plus para su optimización web puede lograrse con el formato WebP; véase el punto 6.
2) Usa el nivel de compresión adecuado al crear el archivo.
El software de edición fotográfica ofrece compresión en el momento de guardar el archivo, según el tipo de archivo. El control deslizante puede ajustarse para maximizar la compresión y obtener un archivo pequeño o para reducir la compresión y optar por archivos más grandes.
La regla de oro debe encontrarla cada usuario personalmente, con la sugerencia general de mantener la compresión por encima del 92 por ciento. Debes encontrar un punto en el que, sin sacrificar calidad, el tamaño de la imagen sea satisfactorio.
3) Usa un compresor de imágenes avanzado.
Los archivos de imagen grandes pueden comprimirse adicionalmente con un minimizador de imágenes en línea, que ofrece algoritmos avanzados para reducir el tamaño del archivo y mantener intacta la impresión de calidad. Estas herramientas suelen funcionar con los tipos de archivo más comunes.
Usarlas es tan fácil como arrastrar y soltar un archivo y descargar el resultado. Convierte los compresores de imágenes en tus herramientas para guardar para la web. Entre los servicios en línea que recomendamos se incluyen Tiny JPG e ImageOptim. Encontrarás muchos rankings en línea de compresores de imágenes, ya que estos sitios son muy populares.
4) Sustituye GIF por vídeos cuando sea relevante.
Los archivos GIF tienden a ser pesados, especialmente si incluyen secuencias de vídeo más largas. Puede ser mucho más conveniente usar distintos tipos de archivos de vídeo comprimidos para ahorrar tiempo de carga de la página e introducir optimización de la visualización.
Incluso podrías considerar usar vídeos incrustados de YouTube u otros vídeos en la nube, lo que impedirá que el navegador descargue los clips de vídeo directamente desde tu servidor y todos a la vez.
5) Sirve las imágenes de forma responsive.
Ya hemos tocado este tema. Para la optimización del sitio web, asegúrate de que tu CMS sirva distintas versiones de imagen para diferentes resoluciones de pantalla y dispositivos.
6) Usa WebP, JPEG2000 y otros.
Usar el formato WebP, que apareció en el mercado ya en 2010, supone un impulso para el SEO de tu sitio web y, naturalmente, ahorra tiempo de carga. Este formato ofrece buena calidad de imagen y un tamaño de archivo reducido. Sin embargo, el uso de este tipo de archivo puede estar limitado por la compatibilidad del navegador. También hay muchos más formatos web disponibles, aunque no han alcanzado tanta popularidad (HEIC, AVIF, JPEG XL). ¡Y Google ya está pensando en WebP2!
Varios servicios en la nube, como Orbitvu SUN, sirven imágenes en formato WebP de forma condicional: si el navegador no lo admite, se usa JPG o PNG en su lugar.
7) Usa CDN para la carga de imágenes.
Las Content Delivery Networks (CDN) pueden entenderse como APIs que definen cómo usar la imagen cargada en tu sitio web. Pueden ser autogestionadas o proporcionadas por un servicio externo. Su uso se aplica mediante URL especiales de imágenes que condicionan cómo se muestra la imagen en el navegador y puede suponer un ahorro del 40-80 % en el tamaño de la imagen.
Lee más sobre las CDN en un artículo dedicado en web.dev.
8) Haz caché de las imágenes que no cambian.
La caché funciona almacenando en la unidad del usuario las imágenes que no cambian y cargándolas directamente desde allí cuando se necesitan. Normalmente los navegadores se encargan de la caché, pero la construcción del sitio web puede fomentar esta solución y así acortar el tiempo de carga de la página para los usuarios recurrentes.
Estas son nuestras 8 reglas. Empieza por ellas y construye tu propio conjunto de consejos basados en la experiencia. ¡Nos encantaría saber de ti!
Para la compatibilidad entre formatos de imagen y navegadores web, recomendamos consultar el sitio web sencillo y efectivo: https://caniuse.com/
Una imagen se codifica en un formato de archivo usando uno de varios espacios de color. Con mayor frecuencia, será sRGB o Adobe RGB.
El tema de los espacios de color es uno de los más complejos y desarrollados de la fotografía: lee más sobre los espacios de color RGB en el artículo de Wikipedia.
Para uso web, tendrás poca elección en cuanto al espacio de color. El estándar ampliamente asumido es sRGB y solo este espacio es gestionado por los navegadores de Internet.
Asegúrate de preparar tus imágenes desde el principio en el espacio de color sRGB y evitarás pérdidas por conversión. Esto puede configurarse en los ajustes de la cámara o gestionarse en software de edición de imágenes como Adobe Photoshop.
La optimización de imágenes con fines SEO (image SEO) se centrará en la visibilidad de tus imágenes en el motor de búsqueda de Google Images y, de forma más amplia, de tu sitio web en cualquier resultado de búsqueda.
Las imágenes pueden contribuir seriamente a tu posición en los resultados de búsqueda de Google y situarse favorablemente en Google Images si se asimilan y mantienen algunas reglas en el diseño del sitio web.
Para posicionar bien una imagen en un motor de búsqueda, necesitas saber qué se está buscando. Planifica con antelación las descripciones de tus imágenes de acuerdo con la investigación SEO, que puede apoyarse en numerosas plataformas como Semrush, Semstorm o Ahrefs. ¡Haz que encuentren tus imágenes donde las buscan!
Un consejo inteligente que puedes usar es añadir palabras clave especiales a las descripciones de tus imágenes. “Opinión”, “Opinión de expertos”, “top 10”, “reseña”, “precio”, “comparación”, “ranking”, “test” son las palabras clave más comunes que se añaden a una categoría o producto para buscar información. ¡Responde a esa necesidad y añádelas a tu imagen! Si vendes teléfonos, haz que aparezca algo como: “Samsung s10 test” o “Ranking rápido de smartphones”. La regla es simple.
Al igual que con la optimización de la resolución y el tamaño, Google observa el formato de una imagen para evaluar su idoneidad como resultado de búsqueda. El formato muy a menudo definirá el tamaño y la velocidad de carga, influyendo así en la decisión de Google. Nuestro consejo rápido es: siempre que sea posible, usa WebP o sus sucesores.
La buena calidad se traduce en mayor visibilidad en Google. No uses muchas imágenes de stock, ya que bajarán de inmediato en el ranking. Intenta introducir tantas imágenes bien tomadas de tus productos como sea posible, sin pixelación, sin desenfoque, con gran atractivo. Google te recompensará.
La resolución y el tamaño de la foto juegan un papel importante para Google. No adoptes el enfoque de “cuanto más grande, mejor” al que podrías sentirte tentado. Intenta mantener tus imágenes por debajo de 5 MB, para permitir una carga rápida, mejorar la experiencia del usuario y potenciar tu posición en los motores de búsqueda. ¡Incluidas las imágenes de producto!
Para que el sitio web posicione mejor y sus imágenes sean más apreciadas por Google, puedes usar la técnica de lazy loading. Carga las imágenes gradualmente a medida que el usuario avanza por el sitio, lo que permite una navegación más fluida y tiempos de carga de página más cortos. También mejorará la experiencia del usuario, ya que contribuye a un acceso más rápido a los contenidos.
Subir un mapa de imágenes del sitio web a Google Search Console facilitará al motor de búsqueda la comprensión de la arquitectura y la ubicación de las imágenes en tu sitio web. Más información equivale aquí a más crédito: espera que esto mejore tu clasificación.
La clave de una buena etiqueta alt de imagen (el texto descriptivo que asignas en el HTML de tu sitio web a una imagen mediante el atributo “alt”) es la colocación inteligente de palabras clave. No sobresatures el texto alt con palabras clave populares; es mejor mantenerlo relevante al contenido de la imagen e incluir una o dos de forma intuitiva. En sitios multilingües, gestiona tus etiquetas alt para todos los idiomas relevantes: implica más trabajo de localización, pero sin duda merece la pena.
Es importante que la foto que quieres que posicione alto en Google esté colocada correctamente dentro del texto del sitio web. Ponla cerca del texto que contiene las palabras clave deseadas y que ilustra. El motor de búsqueda extraerá información de esta proximidad. A los sitios de e-commerce les conviene construir una estructura en la que la descripción del producto y la imagen estén muy cerca entre sí.
Google es un motor de búsqueda de contenido. Asegúrate de que tus contenidos textuales y visuales sean de alta calidad. Escribe con inteligencia teniendo en cuenta las sugerencias SEO e ilustra tus buenos textos con imágenes relevantes. Paso a paso, esto dará resultado como estrategia general para un negocio de e-commerce. ¡Esto es image SEO llevado un paso más allá!
Todavía le resulta más difícil a Google extraer contenido y significado de las imágenes. Si pretendes transmitir información importante a tus clientes/lectores, evita ponerla solo en la imagen. Por útiles que sean las infografías, será beneficioso para el SEO mantenerlas descritas en el texto.
No solo las etiquetas alt bien diseñadas, sino también las imágenes claramente nombradas serán favorecidas por Google. Usa guiones y nombres descriptivos. Soluciones como DSC123123_a.jpg no dicen nada sobre el contenido de la imagen ni al usuario ni al motor de búsqueda.
Google designa fragmentos de contenido para modos especiales de presentación que son más destacados que un resultado de búsqueda típico. Piensa en recetas culinarias, biografías breves, fichas de producto. Si diseñas tu sitio web para indicar claramente qué contenido merece ser tratado como datos estructurados (incluidas las imágenes), puedes obtener beneficios de una posición destacada en la lista de resultados de búsqueda. ¡Tenlo especialmente en cuenta para los productos!
Con nuestras listas de directrices, te hemos guiado a través de la optimización de imágenes. Ahora es el momento de poner en práctica tus conocimientos.
Tanto si estás creando un nuevo sitio web de e-commerce como si piensas mejorar el rendimiento del que ya tienes, deberás optimizar las imágenes en las siguientes áreas:
Resolución
Todo se trata de entender el uso mayoritario de tu sitio web y ajustar las imágenes para que funcionen en línea con ese hallazgo. La entrega responsive de las imágenes también será clave. Quieres que tus usuarios puedan navegar en dispositivos móviles, tabletas y ordenadores de escritorio.
Tamaño del archivo
Encuentra el formato adecuado para tus imágenes, uno que sea compatible con el navegador y acelere el tiempo de carga. No dudes en usar minimizadores de imágenes potentes (y gratuitos) que pueden reducir el tamaño del archivo hasta en un 70 %.
Espacio de color
Aquí solo hay una opción: el espacio de color sRGB. Está optimizado para navegadores web y se sirve ampliamente en la Web.
SEO
Nuestra lista de consejos ofrece un esquema básico sobre cómo mejorar el SEO de tus imágenes. Investiga las palabras clave, estructura el sitio web y evita poner demasiada información solo en la imagen. Piensa en URLs correctas y en la indicación de datos estructurados. Esto, y más, debería llevarte lo suficientemente lejos en la optimización SEO de imágenes.
¿Listo para empezar? Te deseamos mucha suerte.
Utiliza el formulario para contarnos qué estás planificando y qué tipo de flujo de trabajo de contenido de producto necesitas.
14 de julio de 2025
Domina la fotografía de productos para e-commerce en 2025 con consejos de expertos sobre iluminación, ajustes de cámara, estudios impulsados por IA y postproducción. Impulsa las ventas con imágenes que generan confianza y convierten.
11 de julio de 2025
Descubre cómo la fotografía de producto automatizada puede impulsar tu tienda de e-commerce. Aprende técnicas clave para el éxito y mejora tu presencia en línea. ¡Lee más!
25 de junio de 2025
Descubre 5 beneficios clave de automatizar la fotografía de producto ecommerce: desde un menor time-to-market hasta una mejor consistencia, precisión y ROI a gran escala.