octubre 25, 2018


¿Qué es la optimización de imágenes y por qué es tan importante para tu e-commerce?

La optimización de imágenes significa reducir el peso del archivo sin que la calidad de este baje considerablemente, esto es muy importante para que tu página se vea bien y para que no se demore en cargar.

También tiene relación con nombrar correctamente tus imágenes para que aparezcan mejor posicionadas en Google y otros buscadores – SEO.

¿Qué aprenderemos de optimización?

  1. ¿Qué imágenes usamos en un e-commerce?
  2. ¿Cómo debemos nombrar y guardar los archivos?
  3. ¿Qué tipo de archivo debemos utilizar?
  4. ¿Cómo trabajar los archivos?
  5. Programas que recomendamos
  6. Recursos gratuitos que recomendamos

Photo by <a href="https://unsplash.com/photos/ubIWo074QlU?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" style="color: #cccccc;">NordWood Themes</a> on <a href="https://unsplash.com/search/photos/web-design?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" style="color: #cccccc;">Unsplash</a>


Antes de seguir... algunos conceptos que debes conocer:


Peso del archivo

Cuánto pesa el archivo que cargarás en tu página, para web recomendamos trabajar con archivos que no pasen de los 1MB.

Tamaño de la imagen

Cuánto mide tu imagen, en web usamos la medida en pixeles.

Tipo de archivo

En qué formato guardarás tu archivo y con qué perfil de color, para web se trabaja en rgb. Los tipos de archivo que generalmente usamos son: jpg, png y gif.

 

1. ¿Qué imágenes usamos en un e-commerce?

Según nuestra experiencia en Haciendola, trabajamos con las siguientes categorías de imágenes:

Imágenes de productos

Gráficas para el Home

Gráficas para páginas de colecciones*

Gráficas para páginas de contenido*

*Estas son categorías opcionales según estilo y contenido de cada e-commerce.

Photo by Thought Catalog on Unsplash

Imágenes de productos

Son las imágenes que mostrarán qué productos o servicios vendes, las puedes trabajar en 3 formatos: horizontal, vertical o cuadrada. El tamaño mínimo que recomendamos usar es de 1000px, lo que se aplicaría así:

Horizontal: ancho (valor mayor de 1000 px) x alto (1000px)

Vertical: alto (valor mayor de 1000 px) x ancho (1000 px)

Cuadrada: alto (1000 px) x ancho (1000 px)

Gráficas para el Home

Son las imágenes que usarás en tu página de inicio (home), aquí además de mostrar productos la idea es mostrar conceptos relacionados con tu marca, con su discurso, y sobretodo, estructurar esta página para que la navegación de los usuarios sea la adecuada y lo más dirigida posible.

Las imágenes ayudarán a destacar contenidos y a dirigir a cada persona en su recorrido por tu e-commerce.

Gráficas para páginas de colecciones y para páginas de contenido

Estas son imágenes que puedes usar para potenciar cada una de estas secciones, dependerá de la plantilla que estés usando cómo puedes integrarlas. En el caso de las imágenes de colecciones son útiles para mostrar el producto en uso o la experiencia del servicio, mientras que las de contenido ayudan a mostrar de una manera amigable contenido que de otra manera tendrías que escribir (y todos sabemos que casi nadie lee!)

 

2.Cómo debemos nombrar y guardar los archivos

Cómo nombremos las imágenes nos ayudará con el SEO, pero también a ordenarnos y facilitarnos los procesos de búsqueda tanto de los usuarios en la página, así como los nuestros en nuestras carpetas y archivos (el final o final02 aquí no sirven mucho)

Imágenes de productos

Si tienes sku

Sku_nombredeproducto_marca.jpg

Sku_nombredeproducto_variante_marca.jpg

Si no tienes sku

Nombredeproducto_marca.jpg

Nombredeproducto_variante_marca.jpg

 

Lo importante es que el nombre de producto coincida con el que usarás al cargar el producto en Shopify.

 

Gráficas para el home

Recomendamos que el nombre de la imagen haga referencia a la marca y la sección en la cual está siendo usada.

Bannerslidehome_nombremarca.jpg

Bannercoleccionmujerhome_marca.jpg

Backgroundnewsletterhome_marca.jpg

Logo_marca.jpg

Y así según la sección que estén utilizando

 

 

3. Qué tipo de archivo debemos utilizar

Como lo explicamos antes, cuando diseñamos o creamos las imágenes de los e-commerce en general trabajamos con los siguientes formatos: jpg, png y gif.

Para saber con cuál de ellos trabajar recomendamos según nuestra experiencia con las distintas plantillas con las que hemos trabajado en Shopify lo siguiente:

JPG

Imágenes fotográficas sin texto

PNG

Imágenes fotográficas con texto

Imágenes vectoriales

Imágenes con fondo transparente

GIF

Imágenes animadas

VIDEOS

Recomendamos subirlos a Youtube o Vimeo y desde esa plataforma linkear a tu web en Shopify. Recuerda que el autoplay ya no funciona si tienes un video con audio.

 

4. Cómo trabajar los archivos

En general recomendamos trabajar en programas de edición de imágenes los archivos que usarás en tu web, como Photoshop o Illustrator. 

Imágenes JPG Y PNG

Paso 1

Para crear un nuevo archivo en Photoshop, debes ir a la ventana Archivo>Nuevo

Paso 2

Defines las medidas de tu archivo, resolución y lo más relevante que esté en Modo de Color RGB

Paso 3

Una vez que tu imagen ya está lista debes exportarla para web  Archivo> exportar> Guardar para web

Paso 4

En las opciones del lado derecho eliges el tipo de archivo, en este caso JPG, luego la calidad, además de activar la casilla de optimizado. En la parte inferior izquierda podrás ver el peso del archivo y en la inferior derecha el tamaño. Lo más importante aquí es que esté activada la casilla de convertir en sRGB, con lo que el perfil de color se adaptará a los colores de la pantalla. 

Paso 5

Guardas con el nombre indicado según archivo para SEO  

Para archivo PNG

Como lo explicamos antes, si la gráfica tiene algún elemento tipográfico o vectorial, es mejor guardar el archivo como PNG, para eso debes seguir los mismos pasos anteriores (hasta el 4), pero en vez de seleccionar JPG, seleccionas PNG.

Para archivo PNG con fondo transparente

Para conservar el fondo transparente de tu archivo debes guardar tu gráfica como PNG, la única diferencia con el paso anterior  es que esta vez debes seleccionar el casillero de Transparencia.

 

GIF

Puedes en el siguiente video nuestro tutorial 

 

5. Programas que recomendamos

Edición de imágenes

Photoshop / Lightroom / Illustrator

 

6. Recursos gratuitos que recomendamos

Editores de imágenes en línea

https://www.picmonkey.com/

https://pixlr.com/

https://www.canva.com/photo-editor/

Banco de imágenes fotográficas

Unsplash 

Pexels

 

Imágenes de Google para uso comercial

 

Banco de imágenes vectoriales, íconos y fotográficas

Freepik

The Noun Project

Flaticon


Dejar un comentario