{"id":554,"date":"2019-05-16T12:42:04","date_gmt":"2019-05-16T17:42:04","guid":{"rendered":"http:\/\/anevi.com\/blog\/?p=554"},"modified":"2019-05-16T12:42:04","modified_gmt":"2019-05-16T17:42:04","slug":"como-optimizar-imagenes-para-mejorar-el-seo-de-mi-negocio-online","status":"publish","type":"post","link":"https:\/\/sprintmexico.com\/go\/2019\/05\/16\/como-optimizar-imagenes-para-mejorar-el-seo-de-mi-negocio-online\/","title":{"rendered":"\u00bfC\u00f3mo optimizar im\u00e1genes para mejorar el SEO de mi negocio online?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/styles\/blog_750x320\/public\/blog\/2019\/02\/optimizar_imagenes.png?itok=sbK_P37d\" alt=\"\u00bfC\u00f3mo optimizar im\u00e1genes para mejorar el SEO de mi negocio online?\"\/><\/figure>\n\n\n\n<p>Tanto si tienes un negocio online, como un blog o cualquier sitio web en general,&nbsp;<strong>optimizar im\u00e1genes dentro de tu proyecto<\/strong>&nbsp;es una tarea importante a realizar.<\/p>\n\n\n\n<p>\u00c9sta adem\u00e1s&nbsp;deber\u00edas tenerla en cuenta para mejorar tu SEO, m\u00e1s a\u00fan cuando dicha web es un&nbsp;eCommerce.<\/p>\n\n\n\n<p>El&nbsp;<strong>contenido multimedia<\/strong>&nbsp;suele ser el gran olvidado&nbsp;a la hora de trabajar algunos factores del \u00abSEO On Page\u00bb de un site y, sin duda, es algo que si afecta en el posicionamiento.<\/p>\n\n\n\n<p>En este art\u00edculo te explicar\u00e9 algunas de las ventajas principales que conlleva este proceso de optimizaci\u00f3n, c\u00f3mo realizarlo mediante herramientas online y cu\u00e1les son los mejores m\u00f3dulos de Prestashop que puedes adquirir para ello.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor&nbsp;qu\u00e9 necesito optimizar las im\u00e1genes en mi eCommerce?<\/h2>\n\n\n\n<p>Los motivos por el cual debes optimizar im\u00e1genes en tu tienda online son varios.<\/p>\n\n\n\n<p>Las estad\u00edsticas demuestran que solo&nbsp;<strong>las fotos ya representan m\u00e1s del 50% del peso total<\/strong>&nbsp;de una p\u00e1gina.<\/p>\n\n\n\n<p>Desde un punto de vista de usabilidad, es necesario a\u00f1adir elementos visuales para que al usuario le resulte m\u00e1s c\u00f3moda la lectura.<\/p>\n\n\n\n<p>De lo contrario, es posible que el&nbsp;<strong>porcentaje de rebote aumente<\/strong>&nbsp;y como consecuencia, afecte negativamente a nuestro posicionamiento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pero, \u00bfy qu\u00e9 beneficios tiene para el SEO?<\/h3>\n\n\n\n<p>Desde un punto de vista org\u00e1nico, la otra ventaja a la hora de optimizar las im\u00e1genes que aparecen en nuestra web es que mejoran los tiempos de carga, o lo que es lo mismo, el\u00a0<a href=\"https:\/\/www.prestashop.com\/es\/blog\/que-es-wpo\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">Web Performance Optimization<\/a>\u00a0o \u00abWPO\u00bb.<\/p>\n\n\n\n<p>\u00c9ste es un factor clave y que muchos usuarios pasan por alto a la hora de mejorarlo.<\/p>\n\n\n\n<p>Ahora que ya conoces la importancia de optimizar im\u00e1genes para la web, veamos c\u00f3mo hacerlo para que los motores de b\u00fasqueda puedan clasificarlas de forma correcta y que coincidan exactamente con el resto del contenido.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo optimizar im\u00e1genes de forma correcta en nuestra tienda online?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/wpo-web-performance-optimization.jpg\" alt=\"WPO Web Performance Optimization\"\/><\/figure>\n\n\n\n<p>El primer paso antes de reducir el peso de las fotos es saber qu\u00e9 cu\u00e1l va a ser el&nbsp;<strong>formato o extensi\u00f3n<\/strong>.<\/p>\n\n\n\n<p>De entre todos los que existen en la actualidad, los m\u00e1s usados son:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>JPG<\/strong>: Formato m\u00e1s reconocido y usado para guardar fotos. Debido a su compresi\u00f3n, se trata de un formato que pierde calidad cada vez que reduces su tama\u00f1o.<\/li><li><strong>PNG<\/strong>: Con \u00e9l puedes a\u00f1adir transparencias y, a diferencia del JPG, es un formato de compresi\u00f3n sin p\u00e9rdidas ideal para usarlo con todos los elementos que componen nuestro sitio web.<\/li><li><strong>GIF<\/strong>: Formato que cada vez usa menos, ya que sirve \u00fanicamente para crear animaciones.<\/li><li><strong>TIFF<\/strong>: Se trata de un formato muy pesado y que no es apto para usar en sitios web, sino para obtener fotograf\u00edas de alta calidad y detalles.<\/li><\/ul>\n\n\n\n<p>En conclusi\u00f3n, la gran mayor\u00eda de fotos que se vayamos a usar en nuestro sitio web ser\u00e1n con formato PNG, ya que podemos optimizarlas en funci\u00f3n de la resoluci\u00f3n,&nbsp;<strong>sin que estas pierdan calidad<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Como segundo paso, es importante definir una resoluci\u00f3n para reducir su peso al m\u00e1ximo.&nbsp;<\/p>\n\n\n\n<p>Por ejemplo, de nada sirve crear una imagen de 500px de ancho, si el espacio donde vamos a colocar la imagen es de 250px.<\/p>\n\n\n\n<p>Lo \u00fanico que conseguimos con esto es desaprovechar el espacio, as\u00ed como aumentar el peso de nuestra p\u00e1gina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Herramientas online que podemos usar para optimizar im\u00e1genes<\/h2>\n\n\n\n<p>Estoy seguro de que a d\u00eda de hoy existen m\u00e1s de 20 herramientas diferentes, desde las cuales puedas mejorarlas de forma sencilla y r\u00e1pida.<\/p>\n\n\n\n<p>En base a mi experiencia, te voy a indicar 4 que he usado y los resultados son muy buenos.<\/p>\n\n\n\n<p>Por orden de preferencia:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Kraken.io<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/kraken-io-image-optimizer.jpg\" alt=\"Kraker\"\/><\/figure>\n\n\n\n<p>Sin duda es la herramienta m\u00e1s potente que he encontrado hasta la fecha.<\/p>\n\n\n\n<p><a href=\"https:\/\/kraken.io\/web-interface\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">Kraken.io<\/a>\u00a0te permite optimizar im\u00e1genes de forma notable, reduciendo el peso sin apenas perder calidad en imagen.<\/p>\n\n\n\n<p>Su versi\u00f3n gratuita permite subir elementos de forma masiva, con tan solo arrastrarlas a su herramienta online, siempre y cuando no superen las 100mb de peso.<\/p>\n\n\n\n<p>Para obtener m\u00e1s espacio, deber\u00e1s adquirir un plan de pago.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. TinyPNG<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/tinypng.jpg\" alt=\"TinyPNG\"\/><\/figure>\n\n\n\n<p>La siguiente herramienta totalmente gratuita se trata del conocido\u00a0<a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">TinyPNG<\/a>, capaz de comprimir fotos en formato tanto JPG como PNG.<\/p>\n\n\n\n<p>El resultado de la compresi\u00f3n tambi\u00e9n es bastante notable, sin apenas apreciar p\u00e9rdida de calidad.<\/p>\n\n\n\n<p>El funcionamiento es el mismo que en la mayor\u00eda de ellas, con tan solo arrastrar las fotos hacia su p\u00e1gina web, empieza el proceso de optimizaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.&nbsp;iLoveIMG<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/iloveimg.jpg\" alt=\"I love IMG\"\/><\/figure>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.iloveimg.com\/es\" rel=\"noreferrer noopener\">iLoveIMG<\/a>&nbsp;es otra herramienta que he usado y te permite obtener resultados bastante avanzados.<\/p>\n\n\n\n<p>Desde su plataforma tendremos la posibilidad de realizar varias tareas b\u00e1sicas de edici\u00f3n y optimizaci\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Comprimir im\u00e1genes en formato JPG, PNG e incluso GIF, casi sin p\u00e9rdida de calidad.<\/li><li>Redimensionarlas en funci\u00f3n del porcentaje o los p\u00edxeles que le asignes.<\/li><li>Recortarlas.<\/li><li>Convertir fotos de los formatos m\u00e1s usados a JPG.<\/li><li>Convertirlas a extensi\u00f3n JPG a otros formatos compatibles.<\/li><\/ul>\n\n\n\n<p>Adem\u00e1s, la herramienta ha a\u00f1adido recientemente nuevas funcionalidades interesantes, como por ejemplo la posibilidad de a\u00f1adir&nbsp;<strong>marca de agua<\/strong>&nbsp;a las fotos mediante texto o fotos, as\u00ed como crear&nbsp;<strong>memes<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.&nbsp;Compressor.io<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/compressor-io.jpg\" alt=\"Compressor IO\"\/><\/figure>\n\n\n\n<p>Esta \u00faltima herramienta llamada\u00a0<a href=\"https:\/\/compressor.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">Compressor.io<\/a>\u00a0sirve perfectamente para conseguir optimizaci\u00f3n\u00a0de im\u00e1genes y tambi\u00e9n es otra de las que mayor porcentaje de reducci\u00f3n consigue.<\/p>\n\n\n\n<p>Su interfaz tambi\u00e9n es muy sencilla de utilizar y el proceso es el mismo que en el resto: \u201carrastrar y soltar\u201d.<\/p>\n\n\n\n<p>Aunque tiene una limitaci\u00f3n con un tama\u00f1o m\u00e1ximo de 10MB&nbsp;en su versi\u00f3n gratuita.<\/p>\n\n\n\n<p>Los formatos permitidos para esta herramienta son 4:&nbsp;<strong>JPG; PNG GIF y SVG<\/strong>.<\/p>\n\n\n\n<p>La particularidad de esta App&nbsp;es que puedes elegir hasta 2 tipos de compresi\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Lossless (compresi\u00f3n sin p\u00e9rdida)<\/li><li>Lossy (compresi\u00f3n con p\u00e9rdida)<\/li><\/ul>\n\n\n\n<p>Siendo la primera opci\u00f3n poco eficaz, ya que apenas consigue reducir el peso de las mismas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4 Mejores m\u00f3dulos de Prestashop para optimizar&nbsp;im\u00e1genes en nuestro eCommerce<\/h2>\n\n\n\n<p>Como sabr\u00e1s, Prestashop tiene su propio Marketplace de m\u00f3dulos y plantillas en el cu\u00e1l puedes adquirir todo tipo de funcionalidades para tu tienda online.<\/p>\n\n\n\n<p>Aqu\u00ed puedes encontrar desde m\u00f3dulos para aumentar el tr\u00e1fico y mejorar el\u00a0<a href=\"https:\/\/sergioescriba.com\/seo-prestashop\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">SEO en este CMS<\/a>, hasta m\u00f3dulos para el dise\u00f1o y la navegaci\u00f3n.<\/p>\n\n\n\n<p>Por ello, ahora veremos cu\u00e1les son los m\u00f3dulos m\u00e1s destacados para llevar a cabo la misma tarea, pero con fotos que ya est\u00e1n subidas a nuestro sitio web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. M\u00f3dulo Compresor de Im\u00e1gen con TinyPNG<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/modulo-compresor-tiny-png.jpg\" alt=\"M\u00f3dulo compresor\"\/><\/figure>\n\n\n\n<p>Adem\u00e1s de en forma de herramienta online, tambi\u00e9n tenemos a disposici\u00f3n el m\u00f3dulo de compresi\u00f3n de fotos desde el\u00a0<a href=\"https:\/\/www.prestashop.com\/es\/blog\/que-son-los-marketplaces-y-como-sacar-el-maximo-partido-de-ellos\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">marketplace<\/a>\u00a0de Prestashop.<\/p>\n\n\n\n<p>Con las mismas prestaciones que la web oficial, el\u00a0<a href=\"https:\/\/addons.prestashop.com\/es\/rendimiento-sitio-web\/22488-compresor-de-imagen-con-tinypng.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">Compresor de imagen con TINYPNG<\/a>\u00a0trae algunas funcionalidades extra para tu tienda online como por ejemplo, la posibilidad ver el\u00a0<strong>historial<\/strong>\u00a0de cada compresi\u00f3n para ver las mejoras.<\/p>\n\n\n\n<p>As\u00ed como la posibilidad de guardar el proceso de cada optimizaci\u00f3n para posteriormente, no repetir esta compresi\u00f3n con las mismas fotos que la anterior vez.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. M\u00f3dulo Compresor de Im\u00e1genes &#8211; Maximiza tu velocidad<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/compresor-imagenes-linea-grafica.jpg\" alt=\"Compresor de im\u00e1genes\"\/><\/figure>\n\n\n\n<p>Otro m\u00f3dulo bastante completo es el de L\u00ednea Gr\u00e1fica, una agencia especializada en el desarrollo de m\u00f3dulos de Prestashop.<\/p>\n\n\n\n<p>Este\u00a0<a href=\"https:\/\/addons.prestashop.com\/es\/seo-posicionamiento-buscadores\/29110-compresor-de-imagenes-maximiza-tu-velocidad.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">addon\u00a0compresor de im\u00e1genes<\/a>\u00a0tambi\u00e9n cuenta con servicios interesantes, como la opci\u00f3n de elegir el porcentaje de reducci\u00f3n tanto del formato JPG como PNG.<\/p>\n\n\n\n<p>Tambi\u00e9n te permite seleccionar qu\u00e9 fotos quieres comprimir y cu\u00e1les no.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. M\u00f3dulo Image Toolbox: Compress, Regenerate &amp; More<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/modulo-image-toolbox.jpg\" alt=\"Toolbox\"\/><\/figure>\n\n\n\n<p>Disponible solo en el idioma ingl\u00e9s, el m\u00f3dulo\u00a0<a href=\"https:\/\/addons.prestashop.com\/en\/visual-products\/27669-image-toolbox-compress-regenerate-more.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">Image Toolbox<\/a>\u00a0es otro gran addon de compresi\u00f3n de elementos visuales\u00a0y del cual me han hablado muy bien de \u00e9l.<\/p>\n\n\n\n<p>Las funcionalidades de este m\u00f3dulo tambi\u00e9n son varias, entre ellas destacamos la posibilidad de eliminar fotos antiguas que ya no sirven y utilizar un&nbsp;<strong>CRON<\/strong>&nbsp;para programar esa compresi\u00f3n de forma autom\u00e1tica.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. M\u00f3dulo ReSmush Image Compression<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets.prestashop2.com\/sites\/default\/files\/resmush-image-compression.jpg\" alt=\"Resmush\"\/><\/figure>\n\n\n\n<p>C\u00f3mo ultimo addon de esta lista, tenemos el llamado&nbsp;<a target=\"_blank\" href=\"https:\/\/addons.prestashop.com\/en\/website-performance\/27443-resmush-image-compression-for-large-catalogs.html\" rel=\"noreferrer noopener\">ReSmush Imagen Compression<\/a>, que&nbsp;es el sucesor del complemento que acabamos de mencionar (Image Toolbox).<\/p>\n\n\n\n<p>Su precio es algo m\u00e1s econ\u00f3mico, y permite comprimir y optimizar im\u00e1genes que quieras sin l\u00edmite, adem\u00e1s de ver un historial o registro para comparar los cambios en el peso de \u00e9stas antes y despu\u00e9s de mejorarlas.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Conclusi\u00f3n<\/strong><\/h4>\n\n\n\n<p>Ahora que ya conoces las principales ventajas, as\u00ed como los formatos y herramientas para optimizar im\u00e1genes, estoy seguro de que vas a aprovechar hasta el m\u00e1s m\u00ednimo kilobyte para mejorar el SEO de tu negocio online.<\/p>\n\n\n\n<p>El rendimiento de tu tienda online depende de ti, y con ello el posicionamiento org\u00e1nico en los motores de b\u00fasqueda.<\/p>\n\n\n\n<p><strong><em>Fuentes: <\/em><\/strong><br>prestashop.com<br>Fotos principales (<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/www.freepik.com\/\">pikisuperstar<\/a>) By\u00a0Freepik.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tanto si tienes un negocio online, como un blog o cualquier sitio web en general,&nbsp;optimizar im\u00e1genes dentro de tu proyecto&nbsp;es una tarea importante a realizar. &hellip;<\/p>\n","protected":false},"author":1,"featured_media":555,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,58,44,26,2],"tags":[95,96,97],"class_list":["post-554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-contenido","category-manuales","category-navegadores","category-prestashop","category-software","tag-imagenes","tag-optimizacion","tag-seo"],"_links":{"self":[{"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/posts\/554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/comments?post=554"}],"version-history":[{"count":0,"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/posts\/554\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sprintmexico.com\/go\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/media?parent=554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/categories?post=554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sprintmexico.com\/go\/wp-json\/wp\/v2\/tags?post=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}