Las im¨¢genes del producto ayudan a cerrar el trato cuando los clientes visitan su sitio web. Para mantener su inter¨¦s, debe tener fotos atractivas que se carguen r¨¢pidamente. En otras palabras, necesitas optimizar las im¨¢genes de tus productos.
Quiz¨¢s se pregunte c¨®mo encontrar el tama?o de imagen ¨®ptimo, c¨®mo comprimir im¨¢genes y c¨®mo optimizar im¨¢genes sin perder calidad.
Lo tenemos cubierto. En este art¨ªculo, profundizamos en los
?Por qu¨¦ necesita optimizar las im¨¢genes?
Las im¨¢genes son una parte importante de cada sitio web. Esto es especialmente cierto para un sitio de comercio electr¨®nico. Las im¨¢genes influyen en los clientes cuando est¨¢n considerando comprar algo. Se suman al dise?o general de la p¨¢gina web, ayudan a los clientes a elegir un producto y mejoran el SEO de su sitio.
Por ejemplo, desea evitar cargar archivos grandes. Pueden ralentizar su p¨¢gina, lo que afecta su clasificaci¨®n en los motores de b¨²squeda y aleja a los clientes potenciales. Nadie quiere esperar a que se cargue una p¨¢gina mientras compra en l¨ªnea. Por eso debes optimizar las im¨¢genes de tus productos.
Comprender las dimensiones y proporciones de la imagen
Averig¨¹emos a qu¨¦ debe prestar atenci¨®n al optimizar sus im¨¢genes.
El tama?o y las dimensiones de una imagen son realmente importantes. Estos par¨¢metros afectan el tama?o del archivo y la apariencia de la imagen en diferentes dispositivos.
Tama?o
Ahora es la era de
Sin embargo, cuando las im¨¢genes son demasiado grandes, no son adecuadas para Internet. Disminuyen la velocidad de carga, especialmente en un tel¨¦fono. Si no desea que sus visitantes se impacienten y abandonen su tienda, debe reducir el tama?o de sus im¨¢genes.
Una imagen tiene dos tama?os:
- Tama?o de la imagen es el espacio que ocupa un gr¨¢fico en la pantalla. Este tama?o se mide en p¨ªxeles (px), que son los puntos individuales que componen la pantalla. Puede cargar im¨¢genes de cualquier tama?o en la tienda 51ÊÓƵ. Luego se optimizan para adaptarse al ancho de la ventana del navegador. Aun as¨ª, es mejor reducir las im¨¢genes de tus productos a aproximadamente 1000 x 1000 px. Ese tama?o es lo suficientemente grande para mostrar el producto y lo suficientemente peque?o para cargarlo r¨¢pidamente.
- Tama?o del archivo es el espacio de memoria que ocupa la imagen. Este tama?o se mide en bytes, normalmente
Kilo- (Kb),Mega- (Mb) y Gigabytes (Gb). Cuanto mayor sea el tama?o del archivo de la imagen, m¨¢s espacio de almacenamiento necesitar¨¢.
El tama?o de la imagen de este producto es de 1920 ¡Á 1920 y el tama?o del archivo es de 272 kB
Los archivos m¨¢s grandes tardan m¨¢s en cargarse. El software de compresi¨®n de archivos fue desarrollado para combatir este problema. Normalmente, una imagen se comprime optimizando los datos de color.
Sin embargo, una compresi¨®n fuerte degrada la ¡°calidad¡± de las im¨¢genes, ya que provoca ruido o una transici¨®n de color abrupta.
Para un tama?o de archivo de aproximadamente 1000 px, una buena compresi¨®n ocupar¨¢ alrededor de 200 kB.
Ahora aprendamos m¨¢s sobre c¨®mo elegir las proporciones correctas para sus im¨¢genes.
Dimensiones
Las proporciones de una imagen indican la
Algunas proporciones son m¨¢s agradables a la vista que otras. El conjunto est¨¢ndar de proporciones siempre se ve bien. Estos son 1:1, 4:3, 3:2 y 16:9.
??Las proporciones son importantes ya que ayudan a definir el aspecto de su sitio. Esfu¨¦rcese por las mismas proporciones para todas las im¨¢genes de sus productos para darle a su escaparate un aspecto estructurado y profesional.
C¨®mo seleccionar el formato de imagen
Otra cosa a tener en cuenta para obtener im¨¢genes ¨®ptimas es el formato de imagen. Es el tipo de archivo en el que se guarda una imagen.
Hay muchos tipos de formatos de imagen. Cada uno tiene sus ventajas y desventajas en t¨¦rminos de calidad, compresi¨®n y soporte. Debe seleccionar el formato que proporcione la mayor calidad con el tama?o m¨¢s peque?o.
Los tres formatos m¨¢s comunes en la web son JPEG, PNG y GIF. Cada uno debe usarse de una manera espec¨ªfica.
Desglosemos los formatos:
- GIF (Graphics Interchange Format) es capaz de almacenar datos comprimidos sin p¨¦rdida de calidad usando no m¨¢s de 256 colores. El formato normalmente admite animaciones. Durante mucho tiempo, los GIF fueron el formato m¨¢s com¨²n en Internet¡ hasta que apareci¨® PNG.
- PNG (Portable Network Graphics) usa compresi¨®n sin p¨¦rdidas y almacena una cantidad ilimitada de colores.
- JPEG (Joint Photographic Experts Group, el nombre del desarrollador) es el formato m¨¢s t¨ªpico para almacenar fotos y otras im¨¢genes. El algoritmo JPEG puede usar compresi¨®n con p¨¦rdida y sin p¨¦rdida (m¨¢s sobre esto m¨¢s adelante). Cuanto mayor sea el tama?o del archivo, menor ser¨¢ la p¨¦rdida.
?Qu¨¦ formato deber¨ªas elegir? Si tienes una imagen animada, es
Los archivos JPEG y PNG son similares, pero tambi¨¦n tienen diferencias cruciales. Los archivos JPEG tienen un tama?o m¨¢s peque?o porque utilizan un proceso de compresi¨®n que elimina algunos datos. Los PNG, por otro lado, admiten fondos transparentes y son mejores para el dise?o gr¨¢fico.
La regla general es utilizar JPG para fotograf¨ªas e im¨¢genes que no tengan un fondo transparente. En cuanto a PNG, es mejor usarlos para gr¨¢ficos, archivos con fondos transparentes y otras im¨¢genes donde la claridad y la vitalidad del color son importantes. Entonces, para las fotos de productos, tiene sentido preferir JPEG a PNG.
La foto de este producto est¨¢ en formato JPEG.
C¨®mo comprimir im¨¢genes sin perder calidad
La compresi¨®n ayuda a reducir el tama?o de una imagen. Cuanto menor sea la calidad, mayor ser¨¢ la compresi¨®n y menor ser¨¢ el tama?o del archivo.
Hay dos tipos de compresi¨®n:
- Compresi¨®n con p¨¦rdida reduce el tama?o de un archivo mediante la eliminaci¨®n de datos redundantes. Sin embargo, cuando comprime un archivo de esta manera, puede degradar significativamente la calidad de la imagen.
- Compresi¨®n sin perdidas Es una t¨¦cnica que mantiene alta la calidad de un archivo. Sin embargo, no reducir¨¢ el tama?o del archivo tanto como la compresi¨®n con p¨¦rdida. Si necesita reducir el tama?o del archivo sin afectar notablemente la calidad, es mejor elegir la compresi¨®n sin p¨¦rdida.
Siga leyendo para conocer las herramientas en l¨ªnea que puede usar para comprimir una imagen sin p¨¦rdida de calidad.
C¨®mo optimizar im¨¢genes para la web: Resumen de herramientas
?Quieres descubrir c¨®mo optimizar im¨¢genes para un sitio web? Por suerte para usted, utiliza herramientas en l¨ªnea para optimizar sus im¨¢genes autom¨¢ticamente sin pasar horas viendo tutoriales de Photoshop.
Los siguientes sitios pueden automatizar la optimizaci¨®n para usted:
C¨®mo optimizar el tama?o de la imagen: 4 herramientas simples
Si est¨¢ buscando un reductor de tama?o de archivo, consulte uno de los siguientes servicios. Son gratuitos o tienen pruebas gratuitas:
- : reduce el tama?o de archivo de las im¨¢genes JPEG. Seg¨²n su sitio, ?puede reducirlo en m¨¢s del 70%!
- : el mismo compresor de im¨¢genes pero para archivos PNG.
- : una aplicaci¨®n web de compresor de im¨¢genes que reduce el tama?o de las im¨¢genes a trav¨¦s de numerosos formatos.
- : un compresor de fotos para archivos JPEG. Tiene funciones m¨¢s avanzadas que son ¨²tiles para los fot¨®grafos, incluida la exportaci¨®n de fotos directamente desde Lightroom y Photoshop.
- : un optimizador de im¨¢genes para dispositivos Mac. Necesitas descargarlo para usarlo.
Optimizaci¨®n de im¨¢genes con JPEGmini
Si tienes una tienda 51ÊÓƵ, puedes utilizar el Optimizador de im¨¢genes y velocidad SEO aplicaci¨®n del mercado de aplicaciones de 51ÊÓƵ. La aplicaci¨®n permite
C¨®mo optimizar im¨¢genes para WordPress
Si tiene un sitio web de WordPress, puede usar un optimizador de im¨¢genes y complementos de compresi¨®n. Lo ayudan a optimizar autom¨¢ticamente las im¨¢genes en los sitios de WordPress, lo que permite una mejor velocidad y rendimiento.
Por cierto, si est¨¢ buscando un complemento de comercio electr¨®nico para su sitio web de WordPress, consulte este . Le permite agregar f¨¢cilmente una tienda en l¨ªnea a su sitio de WordPress. Una vez instalado, el complemento crea autom¨¢ticamente una p¨¢gina de tienda donde sus clientes pueden comprar en su sitio web.
EWWW Image Optimizador
es uno de los mejores complementos de WordPress para comprimir fotos y optimizar im¨¢genes en su sitio web. Todo el proceso de optimizaci¨®n de im¨¢genes est¨¢ automatizado. Esto incluye la compresi¨®n de im¨¢genes y el escalado para que se ajusten al tama?o correcto de la p¨¢gina y el dispositivo. El complemento es
Comprimir JPEG y PNG
es un complemento creado por el equipo detr¨¢s de los servicios que ya hemos
reSmush.it
es un complemento gratuito de compresi¨®n de im¨¢genes de WordPress para archivos de hasta 5 MB. Puede optimizar autom¨¢ticamente las im¨¢genes al cargarlas, optimizar en masa las im¨¢genes m¨¢s antiguas y excluir algunas im¨¢genes del optimizador.
M¨¢s herramientas de optimizaci¨®n de im¨¢genes automatizadas
Pero, ?qu¨¦ pasa si no tienes un sitio web de WordPress? Optimizar manualmente una gran cantidad de fotos es definitivamente una tarea complicada.
ImageRecycle
admite varios formatos de imagen, como JPEG, PNG, GIF e incluso archivos PDF.
La herramienta puede determinar qu¨¦ im¨¢genes de su sitio web deben optimizarse seg¨²n el tama?o y la dimensi¨®n de la imagen. Simplemente ingrese la direcci¨®n de su sitio web e ImageRecycle le enviar¨¢ un informe gratuito por correo electr¨®nico. Tambi¨¦n tienen una prueba gratuita para que puedas ver su herramienta de optimizaci¨®n en acci¨®n.
ImagenKit.io
no es un compresor de im¨¢genes normal, sino una CDN de im¨¢genes (red de entrega de contenido). Optimiza, redimensiona y env¨ªa im¨¢genes a trav¨¦s de su red global de servidores. Puedes suscribirte a un plan gratuito para siempre.
Herramientas para editar im¨¢genes de productos
Si no le importa editar im¨¢genes usted mismo y no tiene miedo de un poco de bricolaje, puede encontrar ¨²tiles las herramientas para la edici¨®n de fotos. ?stos son algunos de ellos:
Photoshop
Photoshop ofrece una para la manipulaci¨®n b¨¢sica de im¨¢genes (como recortar o cambiar el tama?o de las im¨¢genes). Tambi¨¦n le permite eliminar el fondo de las im¨¢genes y ajustar sus fotos con diferentes configuraciones, como contraste, brillo, saturaci¨®n, calidez o nitidez.
El editor de Photoshop en l¨ªnea tiene plantillas de dise?o que puede usar
GIMP
es un programa gratuito adecuado para Windows, Mac y Linux. Ofrece todo lo que necesita para gr¨¢ficos y fotograf¨ªas profesionales, incluidas herramientas para capas y m¨¢scaras, correcci¨®n de color, retoque y pintura. GIMP admite todos los principales formatos de archivo de imagen.
PicMonkey
es un editor en l¨ªnea con una interfaz sencilla y todas las funciones b¨¢sicas, como recortar, rotar, controlar la nitidez, trabajar con el color y elegir la resoluci¨®n de las fotos. Proporciona plantillas para crear im¨¢genes para anuncios, publicaciones en redes sociales, logotipos, infograf¨ªas y m¨¢s. Tiene una
Pixlr
ofrece un editor en l¨ªnea gratuito y recursos de dise?o para principiantes y profesionales. Tiene herramientas para colorear, dibujar y editar fotograf¨ªas. Con Pixlr, trabajas con capas y utilizas diferentes efectos y filtros. Si te interesa, puedes
M¨¢s sobre la optimizaci¨®n de im¨¢genes
Las im¨¢genes grandes pueden ralentizar su sitio web, por lo que es importante optimizarlas para la web. Encontrar el formato de imagen adecuado para sus im¨¢genes mediante el cambio de tama?o y la compresi¨®n puede hacer maravillas para la velocidad de carga de su sitio web.
Y ahora conoce las buenas noticias: ?la optimizaci¨®n es muy f¨¢cil de hacer! Tambi¨¦n puede regresar y hacer referencia a este art¨ªculo cuando lo necesite.
Si eres un usuario m¨¢s avanzado y est¨¢s ansioso por aprender m¨¢s sobre c¨®mo optimizar im¨¢genes para SEO, te recomendamos ver este video de Google. Pasa por algunos consejos avanzados sobre c¨®mo optimizar sus im¨¢genes para un sitio web. M¨ªralo aqu¨ª:
No importa la experiencia que tenga como propietario de un comercio electr¨®nico, nunca se olvide de la optimizaci¨®n de im¨¢genes. Incluso las herramientas m¨¢s simples pueden hacer que sus im¨¢genes sean adecuadas para la web. Al optimizar sus im¨¢genes, puede influir dr¨¢sticamente en la experiencia de compra de sus clientes. ?Aseg¨²rese de que las im¨¢genes de sus productos sean hermosas y r¨¢pidas de cargar!
Si reci¨¦n est¨¢ comenzando su viaje de comercio electr¨®nico y necesita crear una tienda en l¨ªnea, consulte 51ÊÓƵ de LightspeedTe permite crear tu propia tienda online, sin necesidad de conocimientos de programaci¨®n ni dise?o. ?Ideal si necesitas empezar a vender online cuanto antes!
