• ¿Cómo utilizar imágenes en Bsale?
  • 1. Imágenes cómo Archivos
  • 2. Imágenes relacionadas a contenido
• ¿De que tamaño deben ser las imágenes?
  • Dimensiones
  • Filtros de dimensiones de imagen
  • Peso
  • Formato de imagen
• Imagen Responsiva
• Mejora de carga Lazyload

Hay diferentes 2 formas de utilizar imágenes en Bsale:

Puedes utilizar cualquier imagen cargada desde el menú archivos en cualquier componente de tu sitio web.

"Si quiero poner en mi pie de página (footer) la imagen del logo de Sercotec y un logotipo de compra segura"

Para poder utilizar imágenes debes seguir los siguientes pasos:

1. Subir tus imágenes dentro del menú

   Tienda en línea > Diseño > Archivos

   

   Hacer clic en el signo +

   Puedes cambiar el nombre de la imagen que estas subiendo, pero recuerdo siempre agregar la extesión del archivo.

   Si es png el nombre debe ir como mi-imagen.png

   

2. Llamar a esta imagen dentro de un componente o plantilla mediante el filtro liquid image_url

   <img src="{{ "nombre-de-tu-image.png" | image_url }}">

   • El nombre de la imagen debe ir entre comillas "nombre-de-tu-imagen.png"

Son imágenes que cargas mediante configuraciones relacionadas a contenido de tu sitio como:

• productos
• artículos
• colecciones
• medios de pago
• sliders

Estas utilizan variables que son cargadas desde donde se crea este contenido.

Para llamar a una imagen de producto:

• Sebe cargar la imagen desde la "Descripción web"
• Ir a un componente que se cargue en la plantilla del producto
• Llamar a la imagen utilizando su variable.

 <img src="{{ product.defaultImage | image_url }}">

En los templates de Bsale no hay tamaños predefinidos. Sin embargo es bueno considerar 3 aspectos para aprovechar mejor el desempeño de las imágenes en tu sitio.

Se refiere al ancho y alto de una imagen, no hay dimensiones predefinidas. Pero es bueno considerar estos formatos sugeridos para aprovechar mejor la pantalla del dispositivo que visite tu sitio.

Trata siempre de subir imágenes de tamaño similar. Bsale no va a restringir que si quieres subir una imagen de 2000px para un producto y una de 100px para otro, sin embargo esto puede causar que la imagen más pequeña se pixele. Si usas también es bueno que subas imágenes de tamaños similares para mantener la uniformidad.

Puede que en ocasiones tengas que utilizar imágenes en diferentes pantallas. Por ejemplo la imagen del producto dentro de su "descripción web" y la misma imagen dentro de la colección a la que fue publicado el producto.

Para optimizar mejor la carga de tu sitio Bsale tiene un filtro de tamaño de imagen el cualquier te permite cargar una imagen a un tamaño menor del que fue cargado

• En la descripción web del producto la imagen carga en un tamaño de 1080 x 1080 px
• Pero la colección utiliza una grilla de 4 columnas, si consideramos que una pantalla estándar es de 1366px de ancho lo que da que cada columna mide 341.5 de ancho. Por esta razón cargar imágenes de 1080px hace que tu sitio sea más lento.
• Para mejorar la velocidad de carga es mejor cargar una imagen del tamaño adecuado, para esto utilizamos un filtro de imagen

   <img src="{{ "imagen.jpg" | image_url: "M" }}">

• Se indica utilizando dos puntos image_url:
• El valor debe ir en Mayúscula y entre comillas image_url: "M"

El filtro toma la dimensión más grande, ya sea el ancho o el alto, y según esa dimensión achica la imagen proporcionalmente

* Dimensión más grande
** Si la imagen es de dimensiones menor al tamaño del filtro se mantiene el tamaño original

Una Imagen para web no debería pesar más de 4mb, si una pesa más de ello puede ser por falta de compresión o formato erróneo. Esto se puede solucionar comprimiendo la imagen en sitio como este: Comprimir Imagen

El formato también puede afectar el peso

Una Imagen resposiva (responsive image /ing) se refiere a una imagen que se adecua al tamaño de la pantalla. Todos los templates de Bsale son en base a Bootstrap por lo que transformar una imagen en responsive se debe usar la clase .img-fluid

<img class="img-fluid" src="{{ "image.png" | image_url }}" alt="…" title="...">

Desde HTML5 se implemento la etiqueta <source> que permite informar al navegador web cual imagen cargar según el tamaño de la pantalla que esta usando el usuario.

<picture>
   <source media="(min-width: 1200px)" srcset="{{"image.png" | image_url: "O" }}">
   <source media="(min-width: 800px)" srcset="{{"image.png" | image_url: "X" }}">
   <source media="(min-width: 400px)" srcset="{{"image.png" | image_url: "L" }}">
   <source media="(min-width: 240px)" srcset="{{"image.png" | image_url: "M" }}">
   <source media="(min-width: 100px)" srcset="{{"image.png" | image_url: "S" }}">
   <img src="{{ "imageMobile.png" | image_url: "T" }}" loading="lazy" alt="…">
</picture>

Esto resulta en la siguiente tabla

* ancho de pantalla

Los Slider en Bsale te permiten subir 2 imágenes por cada diapositiva, una para imagen de escritorio(desktop) y otra para moviles(mobile) Si estas utilizando new_get_slider para llamar al slider en la plantilla puedes usar estas variables

Más información aquí

Lazyload es un patrón de diseño que permite distribuir el peso de la carga de imágenes de tu sitio web cargándolas sólo cuando van a ser visibles. Esto hace que tu sitio sea más ligero para los navegadores y por tanto más rápido.

Los navegadores más modernos reconocen la propiedad loading de una imagen

<img src="{{ "image.png" | image_url }}" loading="lazy" alt="…">

<picture>
   <source media="(min-width: 800px)" srcset="{{"image.png" | image_url: "L" }}">
   <img src="{{ "imageMobile.png" | image_url: "M" }}" loading="lazy" alt="…">
</picture>

Los templates en Bsale cargan por defecto una libreria para los navegadores que no soportan native lazyload

<img class="lazy" src="{{ "image.png" | image_url: "T" }}" data-src="{{ "image.png" | image_url: "M" }}"  alt="…">

• cargara primero la imagen T
• cuando la imagen sea visible para el usuario cargara la imagen M

<picture>
   <source media="(min-width: 800px)" data-srcset="{{"image.png" | image_url: "L" }}">
   <img class="lazy" data-srcset="{{ "imageMobile.png" | image_url: "M" }}" loading="lazy" alt="…">
</picture>

más información sobre la libreria en: vanilla-lazyload

Los slider tiene su propio sistema de lazyload que ya esta estructurado en los componente.

• Slider Carrusel

• filtros de imagen
• cómo obtener imagenes cuadradas