¿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?
- ¿Qué imágenes usamos en un ecommerce?
- ¿Cómo debemos nombrar y guardar los archivos?
- ¿Qué tipo de archivo debemos utilizar?
- ¿Cómo trabajar los archivos?
- Programas que recomendamos
- Recursos gratuitos que recomendamos
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.
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/
- CANVA
- Banco de imágenes fotográficas
- Unsplash
- Pexels
Imágenes de Google para uso comercial
