Cómo optimizar las imágenes de los productos de WooCommerce para tiempos de carga más rápidos

Según el archivo HTTP, aproximadamente el 50% del tamaño de la página web mediana en Internet proviene de las imágenes. Para una tienda de WooCommerce con muchas imágenes de productos, es cierto que este número podría ser aún más grande. Las imágenes son una parte importante de cualquier tienda electrónica de comercio. Desea brindar a los compradores imágenes detalladas del producto para ayudarlos a tomar decisiones. Pero al mismo tiempo, no puede permitirse dejar las enormes dimensiones de las imágenes para frenar su sitio, porque cada aumento de los tiempos de carga de la página tiene un efecto negativo en las tasas de conversión de su tienda.
Sin embargo, hay un camino medio feliz. Al optimizar las imágenes de los productos de su tienda WooCommerce, puede continuar proporcionando muchas imágenes detalladas de productos, pero sin ralentizar la carga de su tienda (o al menos hacer que el impacto sea lo más pequeño posible). En esta publicación, estamos aquí para ayudarlo con algunos consejos útiles para optimizar las imágenes de WooCommerce. Seis formas de optimizar las imágenes de WooCommerce 1. Comprima las imágenes de su producto, una de las mejores maneras de optimizar las imágenes de su tienda WooCommerce es por compresión, lo que reduce el tamaño de sus imágenes sin cambiar las dimensiones en sí.
Hay dos tipos principales de compresión:
Sin pérdida: una pequeña reducción en el tamaño del archivo con un cambio de calidad cero.
Con pérdidas: una mayor reducción en el tamaño del archivo, pero a veces puede haber un pequeño cambio en la calidad.
A menudo, el ojo humano ni siquiera puede entender la diferencia en la compresión con pérdidas, especialmente si elige un algoritmo menos agresivo. Independientemente de qué, siempre debe usar un cierto tipo de compresión en las imágenes de sus productos de WooCommerce, porque es una manera fácil de reducir el tamaño del archivo sin cambiar nada más. Si ya usa Photoshop como parte de la creación de imágenes de productos, usted, usted, usted, usted puede usar la opción de salvación de Photoshop para la web. O bien, también puede usar el complemento Imagify WordPress para poner la compresión de la imagen en el piloto automático. Imagify proviene del equipo de cohetes WP y lo ayudará a comprimir automáticamente sus imágenes a medida que las sube en WordPress utilizando su nivel de compresión favorito (sin pérdida más dos niveles de pérdidas):
También puede encontrar herramientas en la nube en línea que puede usar antes de cargar imágenes en su tienda WooCommerce. Dos buenas opciones son TinyJPG y Kraken.

2. Cambie el tamaño del tamaño de la imagen Además de comprimir las imágenes, también querrá cambiar el tamaño real de la imagen para reducir sus dimensiones. Todos los demás son iguales, las dimensiones más pequeñas (altura y ancho) son iguales a un tamaño más pequeño del archivo. WooCommerce lo hará automáticamente para ciertas áreas de su tienda (más sobre esto a continuación), pero no lo hará para la imagen principal de su producto único. Entonces, ¿cuánto debe cambiar el tamaño de las imágenes? Bueno, muchos de esto dependen de lo que vendas. Si vende un producto simple como una simple camisa blanca, puede hacer 800-1,000 PX, porque no hay muchos detalles allí. Para aumentar los pequeños detalles, es posible que desee alcanzar más de 2,000 píxeles. En cualquier caso, no desea cargar imágenes masivas de 5,000 PX que salgan de su habitación y siempre debe tratar de hacer lo más pequeño posible, sin afectar negativamente la experiencia de compra. Puede cambiar el tamaño de sus imágenes antes de cargarlas. O bien, el complemento de compresión de Imagify puede cambiar el tamaño automáticamente de sus imágenes a un tamaño de conjunto máximo cuando las carga en WordPress:
3. Preste atención a las dimensiones de sus miniaturas de WooCommerce al cargar una imagen en WordPress, WordPress cambiará automáticamente esa imagen a diferentes tamaños, también conocidos como miniaturas. Estas dimensiones generalmente están controladas por su tema, pero WooCommerce también viene con sus propias dimensiones en miniatura que controlan el tamaño de las imágenes utilizadas en su página de catálogo y en otras áreas. Puede controlar el tamaño de estas miniaturas accediendo a la personalización →. Luego, en WordPress Customizer, vaya a WooCommerce → Imágenes del producto:
Idealmente, desea hacer que estos valores sean lo más bajos posible, sin sacrificar la capacidad de usar.

Por ejemplo, si su tema muestra solo 200 píxeles de ancho en la página del catálogo, es posible que desee hacer que el ancho de miniatura sea igual a 200 píxeles en lugar de 300 píxeles. 4. Use imágenes JPEG (la mayor parte del tiempo) cuando se trata de imágenes en línea, hay varios formatos diferentes que puede usar, las opciones más comunes son PNG, JPEG o GIF. Por lo general, querrá usar JPEG para imágenes de productos, porque los JPEG son excelentes para muchos colores y generalmente son más pequeños que los archivos PNG y más fáciles de comprimir. Es por eso que Amazon, Walmart y la mayoría de otras grandes tiendas de comercio electrónico usan JPEG como formato para las imágenes de sus productos.

La única advertencia es que los jpegs de transparencia no lo aceptan. Entonces, si necesita transparencia para las imágenes de sus productos, es posible que desee usar PNG en su lugar. 5. Mantenga los fondos de las imágenes simples puede ser tentador para ser creativos con las imágenes de sus productos … pero hay una razón por la cual casi todas las tiendas usan un fondo blanco simple (nuevamente, así que las grandes tiendas como Amazon y Walmart). No solo borra claramente su producto, sino que también ayuda a mantener las dimensiones de los archivos de su producto. Al limitar la cantidad de información de una imagen. Prácticamente, menos colores significan un tamaño de archivo más pequeño, y un fondo blanco simple es Una forma de lograr esto sin comprometer la claridad de la imagen. 6. Use un CDN para un valor predeterminado de entrega global más rápido, todas las imágenes de su tienda se cargan desde el servidor de su sitio de WordPress. Está bien si todos sus visitantes viven cerca de su servidor … pero probablemente no sea el caso, especialmente si su tienda se entrega internacionalmente. Vea, la proximidad física aún afecta la rapidez con que se carga el contenido. Por lo tanto, cuantas más personas se encuentren más lejos de su servidor, más lento será el contenido.

Para remediar este problema, puede usar algo llamado Content Delivery Network (CDN). Con un CDN, puede cargar archivos estáticos como sus imágenes, desde una red de servidor global. De esta manera, los visitantes pueden cargar archivos desde el servidor más cercano a ellos y, por lo tanto, pueden acelerar aún más tiempos de descarga. Para un CDN gratuito, puede considerar CloudFlare. O bien, hay muchos servicios de CDN pagados como StackPath, KeyCDN, Amazon Cloudfront y otros. Aprenda sobre la diferencia entre CloudFlags y algo como CloudFront. Independientemente del servicio CDN que utilice, WP Rocket puede ayudarlo a integrar el servicio en su sitio, con una función CDN dedicada y una integración de nubes incorporada. Necesidad para su tienda WooCommerce, pero también desea asegurarse de evitar reducir la velocidad Su tienda de carga con imágenes no optimizadas. Para continuar proporcionando imágenes de alta calidad que se cargan rápidamente, debe:
Use un complemento o herramienta de compresión para disminuir el tamaño del archivo de sus imágenes.
Cambie el tamaño del tamaño de la imagen.
Establezca dimensiones optimizadas para miniaturas de WooCommerce.
Use el formato de imagen JPEG (a menos que necesite transparencia).
Mantenga los antecedentes de su producto simple.
Considere una red de entrega de contenido para acelerar el tiempo global de carga de imágenes.