Optimización de imágenes para la Web: una guía práctica

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 un producto, dependen en gran medida de las imágenes para comprender el color, la calidad y la historia del producto.

Por lo tanto, no hace falta decir que sus imágenes deben ser nítidas y de alta resolución. Pero esto tiene un precio. Las imágenes grandes y de alta definición pueden tener archivos de gran tamaño. Ponga algunos de estos en su sitio y esa experiencia ágil de navegar por su tienda en línea puede terminar sintiéndose más como nadar a través de la melaza. Esto no solo hará que los visitantes reboten, sino que, con el tiempo, Google también lo notará, y esto puede afectar su SEO.

En el comercio electrónico, es fundamental encontrar un buen equilibrio entre la calidad de la imagen y el tamaño del archivo de imagen cuando guarda una imagen para su sitio. Te mostraremos cómo hacerlo en esta publicación.

Si se sabe que ha tomado una foto de un producto y la ha subido directamente a su tienda, este tutorial es para usted. Si no tiene un conocimiento formal o un proceso para guardar imágenes con el tamaño del archivo en mente, este tutorial es para usted. Si su sitio tiene toneladas de imágenes y las cosas se sienten lentas, este tutorial es para usted. Si aún no ha comenzado a construir su tienda en línea, este tutorial es especialmente para usted.

¿Listo para optimizar tus 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 JPG

Los JPG (también conocidos como JPEG) son el tipo de archivo más popular para 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 JPG manejan bien este tipo de imágenes porque los JPG tienen una paleta de colores enorme para trabajar.

Los JPG 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 PNG

Los PNG son otro formato de archivo popular en línea. En Adobe Photoshop, tendrá la opción de guardar PNG como PNG-8 o PNG-24.

• PNG-8 tiene una paleta de colores muy limitada de 256 colores. Si bien el tamaño de la imagen es más pequeño, esta no será una buena opción para imágenes y fotografías complejas.
• PNG-24 proporciona una imagen de calidad mucho mayor, pero tiene el costo de un tamaño de archivo mayor.

Lo más importante es que los PNG pueden manejar la transparencia. Este es uno de los mayores puntos de diferenciación entre PNG y JPEG.

Trabajar con GIF

Los GIF eran más populares hace muchos años, pero siguen siendo una opción para tamaños de imagen pequeños donde solo se necesitan unos pocos colores. Al igual que PNG-8, los archivos GIF están restringidos a solo 256 colores. Debido a esto, los GIF nunca deben usarse para fotos de productos.

Guardar imágenes correctamente

Como es de esperar, las imágenes grandes tardan más en cargarse. Cuando decimos grande, nos referimos al tamaño del archivo en lugar de las dimensiones de una imagen, es decir, el valor en KB, MB, GB, etc. Viendo que el 47% de los usuarios espera que una página web se cargue en menos de 2 segundos, y 40 % abandonará una página que tarda más de 3 segundos en cargarse, es importante que sus imágenes sean lo suficientemente pequeñas para garantizar un sitio rápido.

Hay tres cosas que puede hacer para optimizar adecuadamente sus imágenes para su tienda en línea:

Guarde las dimensiones correctas

Debes abrir la imagen en Photoshop y visualizarla al 100%. Esto le permite ver la imagen en el tamaño exacto que se mostrará en un monitor de computadora cuando guarde la imagen para la web.

Guardar imágenes para la web

Es posible reducir el tamaño del archivo sin reducir significativamente la calidad de sus imágenes. Nuestro 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 vaya a Archivo> Exportar> Guardar para Web (heredado)…. Aparecerá una ventana que le permitirá elegir su calidad de exportación. Descubrimos que una calidad de 60 funciona mejor porque reduce el tamaño del archivo a menos de un megabyte y no hay una diferencia notable en la calidad.

Comprimir imágenes para la web

Las aplicaciones de compresión de imágenes son la forma más sencilla de reducir el tamaño de archivo de las imágenes. Este tipo de herramientas eliminan datos ocultos en el archivo de imagen, como perfiles de color y metadatos adicionales (como la ubicación geográfica del lugar donde se tomó la fotografía) que no son necesarios. Estas herramientas proporcionan una forma rápida y sencilla de reducir el tamaño de los archivos sin perder calidad de imagen.

Aplicaciones y servicios de compresión de imágenes

• ImageOptim
• ShortPixel
• TinyJPG
• TinyPNG
• Compressor.io
• Kraken
• ImageOptimizer
• Crush Pics (aplicación de Shopify)
• Minifier (aplicación de Shopify)

Guardar una imagen para la Web: ejemplo de recorrido

Para empezar, imaginemos que somos Stiff Salt (en realidad, propiedad de un amigo y desarrollador de Shopify) y queríamos cambiar la imagen de la función en nuestra tienda en línea.

Montamos una escena, hacemos que nuestra sal se vea absolutamente increíble y tomamos una foto con una cámara DSLR. Genial tenemos nuestra foto. ¡Que belleza!

Pero ... ¡el tamaño del archivo es ENORME! 14,6 MB para ser exactos. Y las dimensiones de la foto son 5184 × 3456 píxeles. Esto es completamente inutilizable en este momento. Es literalmente lo suficientemente grande como para imprimir un póster del tamaño de una película. Con 14,6 MB, esta imagen tardaría bastante en cargarse en la computadora de un visitante. Esto no está bien.

Es hora de ponerse manos a la obra y reducir significativamente el tamaño de la imagen y el tamaño del archivo.

Recuerde, haremos tres cosas con la imagen.

• Reducir el tamaño de la imagen: estas son las dimensiones de la fotografía
• Guarde la imagen de forma adecuada 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 su servidor web
• Comprimir archivo de imagen: para deshacerse de cualquier dato oculto adicional que ocupe espacio

Reducir el tamaño de la imagen

Según el programa que decida utilizar y sus preferencias personales, puede:

• Reducir el tamaño de la imagen antes de guardar
• Reduzca el tamaño de la imagen mientras 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, vamos a abrir la imagen en Photoshop (puede usar cualquier programa de imagen con el que se sienta más cómodo).

Para averiguar qué tamaño, miramos el tamaño de imagen sugerido de la página de inicio del tema. Era de 1600 x 800 píxeles (recuerde que el original era de 5184 × 3456 píxeles).

En Photoshop, seleccionaremos Imagen> Tamaño de imagen.

Bien, hemos reducido el tamaño (dimensiones) de la imagen a algo más apropiado y recomendado por el desarrollador del tema.

Guarde la imagen de forma adecuada (Guardar para web)

En Photoshop, hay un comando específico llamado "Guardar para Web" que optimiza el archivo de imagen para mostrarlo en línea. Esto es importante ya que el comando "Guardar" normal puede terminar creando tamaños de archivo de 2 a 3 veces más grandes que el comando "Guardar para Web".

En el cuadro "Guardar para Web", debemos 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 el tamaño del archivo final.
• Dimensiones: ya hicimos esto en el primer paso, por lo que no es necesario volver a hacerlo, pero si no lo hicimos en el primer paso, podríamos cambiar las dimensiones de la imagen aquí.

Según lo que aprendimos al comienzo de esta publicación, sabemos que JPEG es el mejor tipo de archivo para fotografías o cualquier imagen con muchos colores y complejidad. Seleccionaremos JPEG.

Para Calidad de imagen, tiene una escala que puede seleccionar con 5 ajustes preestablecidos que van desde el Máximo hasta el Bajo. Echemos un vistazo al tamaño del archivo de salida final de cada uno de los niveles de calidad (esta información se muestra en la esquina inferior de la ventana para guardar imágenes):

• Máximo: 1,38 MB
• Muy alto: 611 KB
• Alto: 339 KB
• Medio: 152 KB
• Bajo: 86k

Puede ver que por cada nivel de calidad que baja, el tamaño de la imagen se reduce casi a la mitad. En general, hemos descubierto que Alta es la mejor configuración para la mayoría de las imágenes. En este nivel, es casi imposible para el ojo humano ver alguna degradación en la calidad de la imagen, y el tamaño del archivo es casi 4 veces más pequeño que si tuviéramos que seleccionar el máximo.

Si la imagen es una imagen extremadamente importante con muchos detalles, es posible que desee seleccionar un nivel más alto y guardar en Muy alto.

Esencialmente, ahorrar para la web es un acto de equilibrio: debe equilibrar la calidad de los gráficos y el tamaño del archivo de los medios para satisfacer sus necesidades personales.

Comprimir imágenes para la web

Si usó Adobe Photoshop, ya habrá hecho un gran trabajo al reducir el tamaño de la imagen, sin embargo, es probable que aún pueda recortar otro 5-10% del tamaño de la imagen usando una aplicación de compresión como ImageOptim y / o ShortPixel.

ImageOptim también es 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 es tan bueno como Photoshop.

Al colocar cada uno de los archivos del paso anterior en ImageOptim, pudimos reducir aún más el tamaño de la imagen en otro 5%. No es enorme, pero de nuevo, estos ya estaban optimizados con Photoshop. Independientemente, cada KB cuenta.

Conclusión

En resumen, nuestra foto era increíblemente enorme cuando comenzamos, sin embargo, con unos simples pasos, redujimos el tamaño de la foto de 5184 × 3456 a 1600 x 800 para que se ajustara perfectamente a nuestra página de inicio y, al mismo tiempo, tomamos desde 14,4 MB que se estrellan contra la computadora, hasta 336 KB mucho más razonables.

Guardar imágenes de manera adecuada para la web es un paso importante para aprender temprano e implementarlo religiosamente. Incluso si solo ahorra entre un 10 y un 20% en cada imagen, con el tiempo, a medida que su tienda y su sitio web crecen, cada pequeña base de conocimiento puede sumar algunos ahorros significativos que conducirán a una experiencia mucho más agradable en general para sus visitantes, clientes y Google.

Cómo optimizar imágenes para la Web: tutorial en video