{"id":63608,"date":"2019-02-06T08:00:19","date_gmt":"2019-02-06T11:00:19","guid":{"rendered":"https:\/\/www.tusclicks.cl\/blog\/?p=63608"},"modified":"2020-07-01T12:21:03","modified_gmt":"2020-07-01T16:21:03","slug":"como-optimizar-tus-imagenes-para-web-y-movil","status":"publish","type":"post","link":"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/","title":{"rendered":"\u00bfC\u00f3mo optimizar tus im\u00e1genes para web y m\u00f3vil?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y <\/span><a href=\"https:\/\/tusclicks.com\/blog\/5-ideas-para-optimizar-la-experiencia-del-usuario\/\"><span style=\"font-weight: 400;\">mejorar la experiencia del usuario<\/span><\/a><span style=\"font-weight: 400;\">. Adem\u00e1s, se considera como un factor que debes trabajar en el SEO para mejorar tu posici\u00f3n en buscadores. De ah\u00ed que en esta oportunidad te contamos c\u00f3mo optimizar im\u00e1genes web.<\/span><\/p>\n<h3><b>1. Definiendo el formato correcto<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Cada imagen es un archivo y tiene una extensi\u00f3n, las m\u00e1s conocidas son .jpg .png .gif y .svg. Es necesario que aprendas para qu\u00e9 funciona cada una y en qu\u00e9 situaciones deber\u00edas usarlas:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">JPG: es el m\u00e1s com\u00fan y liviano de todos. Puedes utilizarlo sin problemas, sobre todo si la imagen es peque\u00f1a y no posee gran cantidad de detalles.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">PNG: el formato preferido para web. Considera este formato si la imagen se mostrar\u00e1 en gran tama\u00f1o y debes conservar nitidez, o en dado caso, tiene una transparencia. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">SVG: es un formato relativamente menos conocido, solo debes usarlo cuando est\u00e9s publicando im\u00e1genes vectoriales como gr\u00e1ficos o logotipos. Su principal ventaja es que no est\u00e1 compuesto por p\u00edxeles, lo que mantiene su calidad aunque se ampl\u00ede la imagen.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">GIF: util\u00edzalo s\u00f3lo si es una secuencia de movimiento.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Por otro lado, el formato determinar\u00e1 el peso y el tiempo que demora la imagen en cargarse en el sitio. Todo esto es clave para establecer par\u00e1metros para mejorar la experiencia de los usuarios y tambi\u00e9n optimizar el SEO. Considera el uso de metadatos y otras caracter\u00edsticas.<\/span><\/p>\n<h3><b>2. Utiliza la resoluci\u00f3n precisa<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">A la hora de crear o dise\u00f1ar una imagen, es recomendable trabajar en alta resoluci\u00f3n, pues no sabemos en qu\u00e9 otro espacio necesitemos dicho gr\u00e1fico. Sin embargo, al momento de guardarla, es recomendable que uses la resoluci\u00f3n precisa que ocupar\u00e1 en tu web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Adem\u00e1s, es probable que no sepas con exactitud el espacio que la imagen necesitar\u00e1 y para ello est\u00e1n las herramientas como <\/span><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/dimensions\/baocaagndhipibgklemoalmkljaimfdj?hl=es-419\"><span style=\"font-weight: 400;\">Dimensions<\/span><\/a><span style=\"font-weight: 400;\">, una extensi\u00f3n de Google Chrome que te permite conocer el tama\u00f1o en p\u00edxeles de cada zona de tu sitio.<\/span><\/p>\n<h3><b>3. \u00bfCu\u00e1ntas im\u00e1genes incluir?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Usar elementos visuales <\/span><a href=\"https:\/\/tusclicks.com\/blog\/mejora-tus-imagenes-aumenta-tus-conversiones\/\"><span style=\"font-weight: 400;\">hace que tu mensaje sea m\u00e1s efectivo<\/span><\/a><span style=\"font-weight: 400;\"> y favorece a la navegaci\u00f3n del usuario. Sin embargo, no debes abusar de las im\u00e1genes. La cantidad a incluir puede variar seg\u00fan la p\u00e1gina que est\u00e9s construyendo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">En la homepage o p\u00e1gina de inicio, no uses demasiadas im\u00e1genes.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Si se trata del blog o sus entradas, a\u00f1ade las que desees, siempre y cuando tengan estrecha relaci\u00f3n con el contenido que all\u00ed se encuentra.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">En p\u00e1ginas secundarias (FAQ, Acerca de, Pol\u00edtica de privacidad) no incluyas im\u00e1genes. Aunque, si se tratase del manejo de una plataforma, las capturas de pantalla resultan \u00fatiles.<\/span><\/li>\n<\/ul>\n<h3><b>4. Aprovecha las herramientas profesionales<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Otra opci\u00f3n para reducir considerablemente el peso de las im\u00e1genes es a trav\u00e9s de las herramientas online y el software profesional. Las primeras son dise\u00f1adas por particulares en donde subes el archivo y autom\u00e1ticamente se ejecuta el proceso de compresi\u00f3n. Cabe destacar que en su mayor\u00eda son gratuitas y dependiendo de la que escojas, tendr\u00e1s mayores opciones para configurar. Encontrarlas es sencillo y basta con realizar una b\u00fasqueda Google para dar con diversos resultados.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por otra parte, est\u00e1 el software profesional, que est\u00e1 compuesto por programas como Photoshop, GIMP o Illustrator. Con ellos puedes conseguir un mejor resultado, pues ser\u00e1 posible trabajar las im\u00e1genes para exportarlas seg\u00fan el formato que desees, ya sea web o m\u00f3viles. Por supuesto, necesitar\u00e1s algunos conocimientos t\u00e9cnicos para manejarlos.<\/span><\/p>\n<h3><b>5. Instala plugins y automatiza<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Para agilizar el proceso, es bueno que elabores un checklist sobre la optimizaci\u00f3n de im\u00e1genes. As\u00ed tienes una gu\u00eda para no perderte, adem\u00e1s que puedes compartirla con otros miembros de tu equipo. Aunque, solo te has enterado de c\u00f3mo optimizar im\u00e1genes que no est\u00e1n en el sitio pero, \u00bfc\u00f3mo optimizar aquellas que ya est\u00e1n publicadas en la web? la mejor soluci\u00f3n es con un plugin o software que se encargue de hacerlo, pues optimizar una a una resulta tedioso. <\/span><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\"><span style=\"font-weight: 400;\">WP Smush<\/span><\/a><span style=\"font-weight: 400;\"> es muy popular y funciona para WordPress, comprime todas las im\u00e1genes y gr\u00e1ficos existentes, al igual que elimina las duplicadas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Estos son algunos pasos para la optimizaci\u00f3n de im\u00e1genes web y m\u00f3vil, sigue cada uno de ellos para reducir el tiempo de carga y mejorar el posicionamiento org\u00e1nico. No olvides que realizar este proceso tiene un impacto significativo en el alcance y efectividad de tu sitio web pues hace que los usuarios accedan m\u00e1s r\u00e1pido a cada p\u00e1gina. \u00a1Ya sabes c\u00f3mo optimizar im\u00e1genes web, comienza ahora mismo!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y mejorar la experiencia del usuario. <\/p>\n","protected":false},"author":1,"featured_media":66143,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[1333],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Imagenes web y m\u00f3vil | TusClicks<\/title>\n<meta name=\"description\" content=\"La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y mejorar la experiencia del usuario.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Imagenes web y m\u00f3vil | TusClicks\" \/>\n<meta property=\"og:description\" content=\"La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y mejorar la experiencia del usuario.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-06T11:00:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-01T16:21:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/2019\/02\/optimizar-imagenes-web.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1300\" \/>\n\t<meta property=\"og:image:height\" content=\"478\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Patricio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Patricio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/\",\"url\":\"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/\",\"name\":\"Imagenes web y m\u00f3vil | TusClicks\",\"isPartOf\":{\"@id\":\"https:\/\/tusclicks.com\/blog\/#website\"},\"datePublished\":\"2019-02-06T11:00:19+00:00\",\"dateModified\":\"2020-07-01T16:21:03+00:00\",\"author\":{\"@id\":\"https:\/\/tusclicks.com\/blog\/#\/schema\/person\/72d67b4aee88b3fd493f67b72ab0cc1f\"},\"description\":\"La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y mejorar la experiencia del usuario.\",\"breadcrumb\":{\"@id\":\"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/tusclicks.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfC\u00f3mo optimizar tus im\u00e1genes para web y m\u00f3vil?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tusclicks.com\/blog\/#website\",\"url\":\"https:\/\/tusclicks.com\/blog\/\",\"name\":\"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.\",\"description\":\"Tusclicks Blog \/ Posicionamiento web \/ Mejoras P\u00e1ginas Web \/ Marketing Internet\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tusclicks.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tusclicks.com\/blog\/#\/schema\/person\/72d67b4aee88b3fd493f67b72ab0cc1f\",\"name\":\"Patricio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/tusclicks.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e21c9bb0dfa22d984a98e678dd1a7656?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e21c9bb0dfa22d984a98e678dd1a7656?s=96&d=mm&r=g\",\"caption\":\"Patricio\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Imagenes web y m\u00f3vil | TusClicks","description":"La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y mejorar la experiencia del usuario.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/","og_locale":"es_ES","og_type":"article","og_title":"Imagenes web y m\u00f3vil | TusClicks","og_description":"La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y mejorar la experiencia del usuario.","og_url":"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/","og_site_name":"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.","article_published_time":"2019-02-06T11:00:19+00:00","article_modified_time":"2020-07-01T16:21:03+00:00","og_image":[{"width":1300,"height":478,"url":"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/2019\/02\/optimizar-imagenes-web.jpg","type":"image\/jpeg"}],"author":"Patricio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Patricio","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/","url":"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/","name":"Imagenes web y m\u00f3vil | TusClicks","isPartOf":{"@id":"https:\/\/tusclicks.com\/blog\/#website"},"datePublished":"2019-02-06T11:00:19+00:00","dateModified":"2020-07-01T16:21:03+00:00","author":{"@id":"https:\/\/tusclicks.com\/blog\/#\/schema\/person\/72d67b4aee88b3fd493f67b72ab0cc1f"},"description":"La optimizaci\u00f3n de im\u00e1genes es un proceso que debes realizar en tu sitio web para reducir el tiempo de carga y mejorar la experiencia del usuario.","breadcrumb":{"@id":"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tusclicks.com\/blog\/como-optimizar-tus-imagenes-para-web-y-movil\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/tusclicks.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00bfC\u00f3mo optimizar tus im\u00e1genes para web y m\u00f3vil?"}]},{"@type":"WebSite","@id":"https:\/\/tusclicks.com\/blog\/#website","url":"https:\/\/tusclicks.com\/blog\/","name":"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.","description":"Tusclicks Blog \/ Posicionamiento web \/ Mejoras P\u00e1ginas Web \/ Marketing Internet","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tusclicks.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/tusclicks.com\/blog\/#\/schema\/person\/72d67b4aee88b3fd493f67b72ab0cc1f","name":"Patricio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/tusclicks.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e21c9bb0dfa22d984a98e678dd1a7656?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e21c9bb0dfa22d984a98e678dd1a7656?s=96&d=mm&r=g","caption":"Patricio"}}]}},"_links":{"self":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/posts\/63608"}],"collection":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/comments?post=63608"}],"version-history":[{"count":0,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/posts\/63608\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/media\/66143"}],"wp:attachment":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/media?parent=63608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/categories?post=63608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/tags?post=63608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}