¿Cómo optimizar imágenes de productos fácil y rápido?

No hay lugar a dudas sobre la importancia que revisten las imágenes de productos para cualquier comercio, especialmente en la actualidad, cuando están en auge las tiendas en línea, y el factor visual es determinante para la decisión de compra. Por ello, son estratégicas como impulsores para vender o no, ya que además de representar los productos per se, resaltan sus atributos y dejan saber otros detalles inherentes a estos. Por ello, hoy te invitamos a conocer las distintas formas de usar este valioso recurso.

Imágenes de productos

Cómo optimizar las imágenes de productos de WooCommerce

Las imágenes de productos comerciales, han alcanzado mucho valor hoy día, especialmente en el comercio en línea, donde las personas están obligadas a ser más visuales, y revisan todos los detalles posibles, porque no es igual a lo que ocurre en una tienda física, donde se revisa hasta la textura del producto. Esto se evidencia especialmente en el comercio de prendas de vestir, calzado y demás accesorios, donde no se compra necesariamente por lo señale la pestaña del precio, sino por el mensaje que transmite visualmente un determinado producto.

Por ello, toma especial interés usar mecanismos optimizadores de imágenes de productos, como WooCommerce, para proporcionar una visual más atractiva, y se puedan vender más rápido. Y es que está probado, que la imagen de un determinado rubro, puede influenciar la intención de compra en más de un 55%; por lo que se afirma, que la imagen es estratégica para la venta, y a pesar de estar asociada, difiere de las imágenes de productos publicitarios. Pues hace referencia expresa al producto de una tienda online en vivo.

Por todo ello, en aquellos casos de tiendas en la web, diseñadas con la ayuda de WooCommerce se sabe de antemano, que no basta con colocar sólo fotos con precios, sino, que hay toda una labor tras bastidores de mucho esfuerzo, que en analogía con una tienda física, correspondería a aquella tarea de exhibir con estilo y elegancia los productos en las vidrieras, percheros y otros espacios atractivos de  la tienda.

Donde optar por imágenes de mala calidad de los productos, colgadas con tamaños y formatos inadecuados, son capaces de lograr el efecto contrario al que se busca para vender, y no por ser ventas en línea, los potenciales clientes son ingenuos, es decir, saben de calidad.

De tal manera, que dentro de conjunto de aspectos cuando se determina montar una tienda en línea, es apoyarse con imágenes de productos de alta gama. Además, es importante tener presente el sector donde se ubica el propio, así como el diseño general de la tienda online, a fin de que estas imágenes de productos respondan al estilo que se pretende abordar y exhibir. Por todo ello, el post de hoy, abordará este encantador tema, e inspirar a quienes desean incursionar en la competitivos mundo online.

Factores a considerar en las imágenes de productos

El solo hecho de pensar en elaborar unas pocas imágenes de productos para la venta, colgarlas en la plataforma donde se desea posicionar dicho producto, partiendo de la ficha de productos, y exhibirla en la vista de productos destacados, o individuales, van a generar que las ventas alcance el éxito esperado, es un claro error, y no es  la labor que la tienda demanda para hacer las cosas bien.

Imágenes de productos

Al contrario, siempre hay que estar optimizando estas imágenes, para ofrecer a los potenciales clientes lo mejor; y para lo cual se deben  considerar por lo menos 4 elementos para que estas imágenes logren las ansiadas ventas, además de que sean referencia para clientes y competencia en general, volviéndose memorables para el sector:

  • Ser de excelente calidad, sin tener que acudir al tema de iluminación, ángulo, entre otros.
  • Estar debidamente optimizadas, y no impactar los tiempos de carga de la tienda.
  • Mostrar el producto desde todos los ángulos posibles, pues el comprador desea visualizar los detalles de lo que compra, con una perspectiva holística.
  • Que sean inéditas, de ser posible, propias, facilitadas por el mayorista y no sacadas de Internet.

Con relación a este último aspecto, pese a que numerosas las tiendas online que se esfuerzan en proteger sus marcas, entre algunos componentes visuales de sus tiendas, es frecuente conseguirse con tiendas que rastrean imágenes de productos en los megabuscadores, siendo posible ubicar la procedencia. Ahora, el hecho de usar imágenes ajenas, puede eventualmente conllevar inconvenientes de índole legal, siendo posible incluso, infringir el copyright de cierta empresa o marca.

Mientras que en lo atinente a la calidad, hay que saber que al usar imágenes de poca calidad, con las dimensiones inadecuadas, con seguridad mostrarán estas deficiencias en la web, viéndose borrosas, desenfocadas o con mala iluminación, lo cual supone problemas para la vista por parte del comprador, perjudicando  así las ventas.

Por tanto y según lo anterior, lo prudente es editar las imágenes usando algún software, como PhotoShop, Adobe Photoshop Lightroom o similares, o libres como GIMP. Con el propósito de mejora el brillo, contraste, tamaño y otros componentes para realzar la calidad, lo que debe hacerse previo a subirlas a las tienda.

Además, lo mejor es usar imágenes de productos propias, siempre que sea posible, a pesar de que el trabajo inicial sea supremo, con seguridad, el premio también será supremo, pues los compradores percibirán dicho esmero y dedicación cuando visualicen los productos, impactando de buena manera la elección de los productos por sobre otras tiendas similares.

Imágenes de productos

Otro de los factores, es la diferencia, lo exclusivo, y aunque esto supone un coste, también es cierto, que se puede asumir, especialmente, cuando se toma tiempo e imaginación, porque al final, se observarán esas fotos excelentes, aunque sean domésticas, con unos focos de luz LED, un trípode para que no salgan movidas, fondos inertes, como el total blanco, chroma key, seguida de una edición adecuada, al fina se lograrán magistrales resultados, una vez se exhiban en la tienda; y se pueda afirmar con orgullo, ¡qué belleza, y son mías!

Antes de subir imágenes de productos

En sintonía con lo anterior, se sugiere revisar el formato de las imágenes de productos, con el objetivos de comprobar que las imágenes se adecuen a las dimensiones adecuadas, así como la calidad para aparecer en la pantalla; a lo que se debe agregar, que actualmente, los dispositivos móviles son las nuevas PC de los potenciales clientes.

Por lo que el aspecto de la imagen afectará su presentación, distorsionando el producto y las alternativas de recorte automático. Por lo que siempre se deben editar y adaptar a la relación estipulada antes de subirlas. Asimismo, se puede ajustar el foco de atención de una imagen recortada antes de subirla, usando un punto focal. Además de probar  para verificar cómo lucen, experimentando con las opciones de estilo, todo ello antes de subirse definitivamente.

Página de productos Vs páginas de detalles del producto

Antes de continuar con las imágenes de productos, es conveniente saber cómo algunos herramientas estructuran los productos en todos los sitios. Teniendo al respecto, que los productos se organizan de 2 maneras a saber:

Las Páginas de productos corresponden a páginas de aterrizaje para diversos productos. Donde según la versión 7.1, se les llama páginas de tienda. Mientras que las páginas de detalles, justamente aluden los detalles para un determinado producto. Donde al pinchar en cualquiera de los productos manda al visitante al sitio a la página de detalles de ese producto, para ver más fotos y datos del mismo.

Tipos de imágenes de productos

Al agregar o editar algún tipo de  productos, se pueden adicionar algunos tipos de imágenes, donde cada una responderá a la versión del sitio al que pertenezca; generalmente en estos espacios se manejan 2 versiones, la 7.1 y 7.0 respectivamente. Pero además están las que a continuación se detallan:




Imágenes en miniatura

Este tipo de imágenes se usan para representar un producto en casi todas las áreas del sitio, siendo mejor por tanto, usar la que se desea que los clientes visualicen en primer plano; la cual se muestra en las siguientes áreas:

  • Páginas de Productos: donde los clientes pinchan en la imagen mini del producto e ingresar a los detalles del producto.
    Bloques de resumen.
  • Página de productos y paneles del Inventario.

Como alternativa preconsebida, se tiene como primera imagen agregada a la pestaña elemento del editor del producto, pasa a ser la imagen en miniatura. Si se desea seleccionar otra imagen en mini se puede hacer en:

  • El editor de productos, pinchando en opciones.
  • En la casilla de Imagen en mini, pinchando en el icono de la papelera.
  • Agregar la imagen en miniatura y guardar.
  • En caso de borrar la imagen en miniatura, sin haber seleccionado su sustituta, se mostrará la imagen principal.

Imagen principal

Esta imagen principal, se relaciona directamente con el producto en la mayor parte de las áreas del sitio. Por tal razón, lo ideal es usar una imagen que se desea que la mayoría de los clientes visualicen en primer plano; y se muestra en:

  • Las páginas de productos Classic o Unique.
  • En la vista de la primera imagen de la página detalles del producto.
  • En el panel de página de productos, o en el panel de inventario.
  • La imagen principal está en el margen superior de la pestaña llamada elemento del editor del producto.

Additional images

Estas páginas de imágenes de productos, son como una complementarias que ofrecen a los compradores una visual amplia de sus productos. Por ello, conviene usar otras imágenes, a fin de dar a conocer algunos detalles del producto desde diversos ángulos o fotos escenográficas; este tipo de recursos aparecen en:

  • Páginas de detalles del producto.
  • La segunda imagen, se puede mostrar al posicionar el cursor sobre ella en las páginas avanzadas de productos.
  • En elemento del editor del producto, vale acotar, que todas las imágenes luego de la primera, son adicionales, que adicionan otros detalles del producto.

Imágenes de las variantes

Por su parte, en las páginas de detalles del producto, estos recursos variantes muestran a los usuarios cómo luce cada producto. Como puede ser, usar estas fotos de las variantes para presentar los productos en diversas tallas y tonos; donde por defecto, la imagen miniatura se reflejará hasta que los compradores seleccionen otra variante en el menú desplegable. Para lograr esta imagen de las variantes se debe:

  • En el editor de productos, pulsando precios y variantes.
  • En la columna final izquierda, al pulsar el campo de la imagen para editarla.
  • En la versión 7.0, aunque el modo como se ven las imágenes dependerá del tipo de página de productos de la plantilla que se está usando.

Tamaños de imágenes

En cuanto a al tamaño de las imágenes de productos usando WooCommerce, como versión vigente aplicable, se configuran a partir del personalizador, es decir:

  • De su apariencia  personalizar, WooCommerce.
  • En imágenes de producto, donde es posible fijar: tamaño 1:1, donde la imágenes se recortan cuadradas; personalizado, se recortan e formato automático de 4:3, 16:9, entre otros; sin recortar, donde se respeta el tamaño y aspecto con que se subió a los medios.
  • Dicha configuración impacta el ancho de la imagen principal del producto, el de la miniatura, y al recorte de la miniatura.
  • Algunos opcionales distintos de WooCommerce son capaces de influir en el tamaño final de las imágenes de productos, además del tema usado por la Tienda.

No se hace referencia a la altura, porque esta se calcula automáticamente en base a la configuración, no así el ancho. De igual forma, la imagen principal del producto no posee formato alguno de recorte, por lo que siempre se mostrará sin recortar. En caso de aplicar modificaciones en la configuración de las imágenes de productos de WooCommerce, de manera automática se generarán nuevos formatos, ocupando espacio en el hosting, por lo cual se debe estudiar este detalle antes de lanzarse a trastear otros tamaños ideales.

Utiliza más las galerías de imágenes de productos

Son numerosas las tiendas que usan apenas una imagen de portada para su producto exhibido, mientras que otras, suelen adicionar unas 2 vistas de imagen, pese a que se concentran mayormente en las variables del producto, y otras tantas, emplean las galerías de imágenes de productos para exhibir todo su poderío, como debe ser.

Toda vez que las galerías de imágenes de productos, son representativas de una visión global, personal y detallada de los rubros ofrecidos, de manera simulada como en un rubro en una tienda física, y que todo consumidor desea observar, para satisfacer tanto su su demanda de tocar los detalle de lo que comprará, así como centrar su selección de lo específico, basado en los detalles.

Un ejemplo diametral de ello, lo ofrece Amazon, donde el usuario puede ver los productos en su máxima expresión, expresado en los detalles, lo cual además, es parte del éxito en sus ventas. Y es justo lo que se debe adoptar de esta gigante, para hacer más visibles los productos, y los compradores se transformen en fans de la tienda.

Se debe recordar en este sentido, que con WooCommerce, se puede importar una galería desde una carpeta CSV ideal para ubicar diversos rubros de una sola vez, especialmente, cuando se trabajas con marcas o fabricantes que facilitas sus productos en este formato, y agregarlos en el catálogo. Estas imágenes adicionales  se pueden subir a WooCommerce desde: producto galería.

Dichas imágenes permiten mayor visibilidad adicional a cada rubro donde se agreguen, al tiempo de que los compradores tendrán más posibilidades de valorar visualmente el producto, previo a la decisión de compra.

Optimizar las imágenes para reducir la carga

Sin duda, el tema de optimización es clave para la web performance optimization, o la mejora de los lapsos de carga, lo que se logra a través de la optimización de los elementos que conforman la web, además de fundamentales para las imágenes de productos. Mientras más optimizados estén los componentes de la página de la tienda, menor tiempo se requiere para que esta se cargue en el navegador del visitante, o dispositivo móvil, lo que es más significativo aún.

No basta por tanto, centrarse en colocar una bonita foto de portada de la tienda, es decir, en la vitrina de visión analógica de una tienda, también se debe trabajar en los contenidos, especialmente de los productos e imágenes destacadas de cada uno de estos, y obviamente, en las galerías o imágenes complementarias.

La solución no siempre es contar con un VPS para controlar los recursos necesarios para servir las páginas al visitante, o usar un CDN externo para que estos recursos y otros elementos fijos, se carguen a gran velocidad, todo eso se puede ahorrar con una buena optimización, además de un duro trabajo de campo, detrás de bastidores.

Se puede usar un optimizador gratis para WordPress perenne, y dejar que el mismo se encargue de potenciar las imágenes y los tiempos de carga de las páginas de productos o del blog, y además, potenciar la puntuación en Google PageSpeed entre otras herramientas de medición. Luego de subirlo, se instala y activa en WordPress, para después colocar el correo electrónico registrado en la web del plugin, y se activa el API Key para optimizar las imágenes.

Una vez se comience a usar el optimizador.io en la web es tiempo de olvidarse de la pesada tarea de tener que estar optimizando manualmente cada imagen, de cada producto, permitiendo usar ese tiempo que sobrará sin duda, para hacer tareas de WPO de la tienda, o para disfrutar más de la vida analógica.

Y adicional a lo anterior, en caso de tener ya imágenes de productos colgados a la galería de medios, relacionada con productos, pese a  que también se optimizarán otras imágenes del blog, etc., es posible llevar a cabo alguna acción masa, y adicionar el total de las imágenes existentes a la cola de optimización del plugin, para que este las vaya procesando en segundo plano.

Será a partir de entonces, que todas las nuevas imágenes de productos que se vayan colgando a la tienda, se irán optimizando paulatinamente, y en segundo plano, para disponer de un menor peso sin afectar la calidad de las mismas.

Opciones especiales para las imágenes

Ciertas páginas de productos ofrecen muchas funciones especiales, que permiten mostrar imágenes de manera más dinámica. Donde la visual de estas imágenes dependerá de la versión del sitio web, pero en términos generales se podrá disponer de:

  • Vista rápida del producto: donde los clientes pueden pinchar en un simple botón, y ver toda información al detalle de algún producto en una caja de luz, pero sin salirse de la página actual. En la versión 7.1, esta función está disponible sólo en la página detalles del producto.
  • Ampliar la imagen del producto: en este aparte, los clientes pueden ampliar las imágenes del producto para ver más de cerca el material, la textura y detalles más delicados e imperceptibles a simple vista. En la versión 7.1, esta funcionalidad está disponible únicamente en la página detalles del producto.
  • Imagen alternativa cuando se posiciona el cursor: corresponde en gran medida, un método para destacar algún atributo especial, al ofrecer otro ángulo, o un detalle vital para cada producto.

Añadir texto alternativo

Nunca debe desestimarse el texto alternativo de las imágenes de productos, pues esto permite identifica el tema de dichas imágenes, ideales para los navegadores y los motores de búsqueda. Lo cual además contribuye a que las imágenes se muestren en los resultados de búsqueda de imágenes, logrando así, que el sitio sea más visible y accesible para los visitantes que emplean lectores de pantalla.

Al agregar texto alternativo, se deben emplear términos cortos pero que describan la imagen en particular, además del producto en sí mismo. Este puede ser un primer plano de un gancho de bronce, y la espalda de un vestido con flores, por ejemplo.

Conclusiones

Aunque podemos continuar, diciendo y argumentado sobre importancia de las imágenes de productos, así como de optimizar los lapsos de carga de una tienda WooCommerce, potenciar el WPO y, claro está, el valor que representa una buena imagen, entre otros aspectos fundamentales del tema que tratamos hoy, es hora de ir concluyendo este post.

No sin antes, reiterar la importancia de que la intención de compra online depende en buena medida del factor visual, recuerda, más de 50%, de tal manera, que no es el precio que influye en la decisión de compra. Por tanto, se debe invertir tiempo y esfuerzo para lograr que la tienda se convierta en un espacio confortable que invite al cliente, usuario o comprador; hay que lograr que los productos exhiban imágenes que enamoren, que cautiven y convenzan a los potenciales compradores.

Y finalmente, se debe recordar que optimizar las imágenes de productos sin duda es una tarea que demanda de esfuerzo y trabajo arduo, pero no es imposible, y los resultados que se lograrán bien merecen la pena, puesto que la idea no es sólo vender, sino ser los mejores del ramo. Sin más que agregar, sólo basta decir, que el ¡éxito acompaña a quienes perseveran, y la carrera comenzó!

Si te gusto este tema, te pueden ser útiles los siguientes tópicos:

Deja un comentario