Dicen que una imagen vale más que mil palabras, que es una de las razones por las que las imágenes son tan importantes en el comercio electrónico. Sin que el cliente pueda recoger, tocar e inspeccionar el producto, depende en gran medida de las imágenes para entender el color, la calidad y la historia del producto.
Así que no hace falta decir que tus imágenes deben ser de alta resolución y nítidas. Pero, esto tiene un precio. Las imágenes grandes y de alta definición pueden tener tamaños de archivo enormes. Si utilizas imágenes muy pesadas al final tendrás un site que tarda mucho en cargarse y la experiencia de usuario será nefasta.
Esto no sólo hará que los visitantes reboten, sino que con el tiempo, Google también lo notará, y esto puede afectar tu SEO.
En ecommerce, es crítico encontrar un buen equilibrio entre la calidad de imagen y el tamaño del archivo de imagen cuando tu guardas una imagen para su sitio.
Voy a mostrarte cómo hacer justamente eso en este post.
Si tu sitio tiene muchas imágenes y tu site va lento, este tutorial es para tí.
Si aún no has empezado a construir tu tienda online, este tutorial es especialmente para ti.
¿Listo para optimizar sus imágenes?
Opciones de tipo de archivo de imagen
Hay tres tipos de archivos principales en los que queremos centrarnos para guardar imágenes optimizadas para la web: GIF, JPG y PNG. Cada tipo de archivo tiene sus propias fortalezas y debilidades y es muy importante conocerlas y tenerlas en cuenta al guardar una imagen.
Trabajar con JPGs
Los JPGs (también conocidos como JPEGs) son el tipo de archivo más popular para las imágenes en la web. Los JPG son perfectos para fotografías o imágenes complejas que contienen muchos colores, sombras, degradados o patrones complejos. Los JPGs manejan bien este tipo de imágenes porque los JPGs tienen una gran paleta de colores con la que trabajar.
Los JPGs también se pueden guardar en alta calidad, baja calidad o en cualquier lugar intermedio. Esto le permite ajustar y guardar la imagen exactamente como desee, equilibrando la calidad y el tamaño del archivo.
Trabajar con PNGs
Los PNGs son otro formato de archivo popular en el mundo web. En Adobe Photoshop, tendrá la opción de guardar los PNG como PNG-8 o PNG-24.
PNG-8 tiene una paleta de colores muy limitada de 256 colores. Aunque el tamaño de la imagen es menor, esta no será una buena opción para imágenes y fotografías complejas.
PNG-24 proporciona una imagen de calidad mucho mayor, pero a costa de un tamaño de archivo más grande.
Lo más importante es que los PNG pueden manejar la transparencia. Este es uno de los mayores puntos de diferenciación entre PNGs y JPEGs.
Los PNG se utilizan muchas veces para logotipos porque son de alta calidad y pueden manejar la transparencia. Esto funciona bien para los logotipos porque casi siempre requieren transparencia, es probable que desees que sea de alta calidad, y porque los logotipos son una pequeña parte de su sitio en general, por lo que el tamaño del archivo sigue siendo pequeño.
Trabajar con GIFs
Los GIF eran más populares hace muchos años, pero siguen siendo una opción para los tamaños de imagen pequeños en los que sólo se necesitan unos pocos colores. Al igual que PNG-8, los archivos GIF están restringidos a 256 colores. Por esta razón, los GIFs nunca deben ser usados para fotos de productos.
Cómo guardar imágenes correctamente
Como es de esperar, las imágenes grandes tardan más en cargarse. Cuando digo grande, me refiero al tamaño del archivo más que a las dimensiones de una imagen, es decir, el valor en KB, MB, GB, etc. Dado que el 47% de los usuarios esperan que una página web se cargue en menos de 2 segundos, y el 40% abandonará una página que tarda más de 3 segundos en cargarse, es importante que tus imágenes sean lo suficientemente pequeñas para garantizar un sitio rápido.
Hay tres cosas que usted puede hacer para optimizar adecuadamente sus imágenes para su tienda en línea:
1.- Guardar las imágenes con las dimensiones correctas
Debes abrir la imagen en Photoshop y verla al 100%. Esto le permite ver la imagen en el tamaño exacto que se mostrará en el monitor de un ordenador cuando guarde la imagen para la web.
2.- Guardar las imágenes para web
Es posible reducir el tamaño del archivo sin reducir significativamente la calidad de las imágenes. Mi método favorito para reducir el tamaño del archivo sin reducir significativamente la calidad de la imagen es utilizar la función ‘Guardar para Web‘ de Photoshop. Abra su imagen en Photoshop y vete a Archivo > Exportar > Guardar para Web (Legacy)….. Aparecerá una ventana que te permitirá elegir la calidad de la exportación. Una calidad de 60 funciona mejor porque reduce el tamaño del archivo por debajo de un megabyte y no hay una diferencia notable en la calidad.
3.- Comprimir imagen para web
Las aplicaciones para comprimir las imágenes son la forma más fácil de reducir el tamaño de las imágenes. Estos tipos de herramientas eliminan datos ocultos en el archivo de imagen como perfiles de color y metadatos adicionales (como la geolocalización del lugar donde se tomó la fotografía) que no son necesarios.
Estas herramientas proporcionan una forma rápida y fácil de reducir el tamaño de los archivos sin perder calidad de imagen.
Aquí tienes algunos de los ejemplos que te servirán para comprimir tus imágenes:
TinyJPG | TinyPNG
Kraken
ImageOptimizer
ImageOptim
Crush Pics (Shopify App)
Minifier (Aplicación Shopify)
Para empezar, finjamos que somos usafitness.es (una muy conocida web de suplementos deportivos) y queremos cambiar nuestra imagen en nuestra tienda online.
Creamos una composición con distintas imágenes de tal modo que la web luzca absolutamente increíble y tomamos una foto con una cámara DSLR. Genial, tenemos nuestra foto. ¡Fantástico!
Pero…. el tamaño del archivo es ENORME! 14.6 MB para ser exactos. Y las dimensiones de la foto son de 5184 × 3456 píxeles. Este archivo no es posible utilizarlo. Es literalmente lo suficientemente grande para imprimir un póster del tamaño de una película. Con 14,6 MB, esta imagen tardaría mucho tiempo en cargarse en el ordenador de un usuario de nuestra web y claro, esto no es bueno.
Es hora de ponerse a trabajar y reducir el tamaño de la imagen y el tamaño del archivo de forma significativa.
Recuerda, vamos a hacer tres cosas con la imagen.
- Reducir el tamaño de la imagen (Estas son las dimensiones de la fotografía).
- Guarda la imagen apropiadamente para reducir el tamaño del archivo (Este es el tamaño del archivo y cuánto espacio ocupa en el disco duro de su computadora y/o en su servidor web).
- Comprimir el Archivo de Imagen (Para deshacerse de cualquier dato oculto adicional que ocupe espacio)
Reducir el tamaño de la imagen
Dependiendo del programa que decidas utilizar y de tus preferencias personales, podrás hacerlo:
- Reducir el tamaño de la imagen antes de guardarla
- Reducir el tamaño de la imagen mientras se guarda la imagen
- Guarde la imagen, luego reduzca el tamaño de la imagen
Para simplificar las cosas, primero vamos a reducir el tamaño de la imagen. Para hacer esto, voy a abrir la imagen en Photoshop (Puedes usar cualquier programa de imagen con el que te sientas más cómodo).
Para averiguar qué tamaño, mira el tamaño de imagen sugerido para la página de inicio del tema. Tenía 1600×800 píxeles (Recuerde que el original tenía 5184 × 3456 píxeles).
En Photoshop, voy a seleccionar Imagen -> Tamaño de la imagen.
Reducir el tamaño de la imagen
Ok, hemos reducido el tamaño (dimensiones) de la imagen a algo más apropiado y recomendado por el desarrollador del tema.
Guardar la imagen apropiadamente
En Photoshop, hay un comando específico llamado «Guardar para Web» que optimiza el archivo de imagen para mostrarlo en tu web. Esto es importante ya que el comando «Save» normal puede terminar creando tamaños de archivo 2-3 veces más grandes que el comando «Guardar para Web«.
En la casilla «Guardar para Web«, necesitamos hacer algunas selecciones.
- Tipo de imagen: El tipo de archivo afectará la calidad y el tamaño del archivo de salida.
- Calidad de imagen: Esto es importante y puede afectar en gran medida al tamaño final del archivo.
- Dimensiones: Ya lo hicimos en el primer paso, así que no hay necesidad de hacerlo de nuevo, pero si no lo hicimos en el primer paso, podríamos cambiar las dimensiones de la imagen aquí.
Basándonos en lo que aprendimos al principio de este post, sabemos que JPEG es el mejor tipo de archivo para fotografías, o cualquier imagen con muchos colores y complejidad. Seleccionaremos JPEG.
Guardar para el comando Web
Para la calidad de imagen, tiene una escala que puede seleccionar con 5 preajustes que van de máximo a bajo. Echemos un vistazo al tamaño final del archivo de salida de cada uno de los niveles de calidad (esta información se muestra en la esquina inferior de la ventana de guardado de imágenes):
Máximo – 1.38 MB
Muy Alto – 611 KB
Alto – 339 KB
Medio – 152 KB
Bajo – 86k
Puedes ver que por cada nivel de calidad que baja, el tamaño de la imagen se reduce casi a la mitad. En general, he descubierto que Alto es el mejor ajuste para la mayoría de las imágenes. En este nivel, es casi imposible para el ojo humano ver cualquier degradación en la calidad de la imagen, y el tamaño del archivo es casi 4 veces menor que si sólo seleccionáramos el máximo.
Si la imagen es una imagen extremadamente importante con muchos detalles, puede seleccionar un nivel más alto y guardar en Muy Alto.
Esencialmente, optimizar imágenes para la web es un acto de equilibrio. Debes equilibrar la calidad del gráfico y el tamaño del archivo de los medios de comunicación para satisfacer sus necesidades personales.
Comprimir imágenes para web
Si usaste Adobe Photoshop, ya habrás hecho un gran trabajo en la reducción del tamaño de la imagen, sin embargo, todavía puedes reducir otro 5-10% del tamaño de la imagen mediante el uso de una aplicación de compresión como ImageOptim.
ImageOptim es también la forma más fácil de reducir rápidamente el tamaño del archivo de imagen, si ha utilizado otro programa para guardar sus imágenes que no sea tan bueno como Photoshop.
Arrastrando y soltando cada uno de los archivos del paso anterior en ImageOptim, pude reducir aún más el tamaño de la imagen en otro 5%. En cualquier caso, cada KB cuenta.
Conclusión
Resumiendo, nuestra foto era increíblemente grande cuando empezamos. Sin embargo, con unos pocos pasos sencillos, redujimos el tamaño de la foto de 5184×3456 a 1600×800 para que encaje perfectamente en nuestra página de inicio, y al mismo tiempo, fuimos reduciendo el tamaño del archivo hasta los 336kb, un tamaño mucho más razonable.
Guardar las imágenes apropiadamente para la web es un paso importante para no consumir demasiados recursos de nuestro servidor. Incluso si sólo reduces entre un 10 y un 20% en cada imagen, con el tiempo, a medida que tu tienda y tu sitio web crecen, cada pequeño KB puede sumar algunos ahorros significativos que conducirán a una experiencia general mucho más agradable para tus visitantes, clientes y Google.
- Los Emojis SEO y su Impacto en las Búsquedas - 13 septiembre, 2023
- ¿Qué es el SandBox de Google? - 27 agosto, 2023
- ¿Qué es un elace NoFollow y para qué sirven? - 10 agosto, 2023
