{"id":6252,"date":"2022-08-24T11:38:00","date_gmt":"2022-08-24T09:38:00","guid":{"rendered":"https:\/\/www.loading.es\/blog\/?p=6252"},"modified":"2022-08-26T13:06:44","modified_gmt":"2022-08-26T11:06:44","slug":"5-tips-para-optimizar-las-imagenes-de-tu-web","status":"publish","type":"post","link":"https:\/\/www.loading.es\/blog\/5-tips-para-optimizar-las-imagenes-de-tu-web\/","title":{"rendered":"#5 Tips para optimizar las im\u00e1genes de tu web"},"content":{"rendered":"\n<p>Las im\u00e1genes de tu web son un elemento fundamental, pero <strong>si no las optimizas de forma adecuada pueden perjudicar al funcionamiento y posicionamiento<\/strong> de esta.<\/p>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" style=\"color:#df922f\">#1 Exporta en el formato adecuado<\/h3>\n\n\n\n<p>Una de las claves a la hora de optimizar im\u00e1genes, es elegir bien el formato. <br>En funci\u00f3n del tipo de imagen es recomendable optar por una extensi\u00f3n u otra, para as\u00ed obtener el mejor equilibrio entre calidad y tama\u00f1o. <strong>Los formatos m\u00e1s utilizados son JPG, PNG y GIF<\/strong>, aunque, cada vez m\u00e1s, nos vamos encontrando con el nuevo <strong>formato WebP,<\/strong> que parece que ha venido para quedarse \ud83d\ude09<\/p>\n\n\n\n<p>Aqu\u00ed tienes un breve resumen sobre los tipos de formato de imagen:<\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background\" style=\"background-color:#d1dfea\">.<strong>jpg<\/strong>: Formato habitual para fotograf\u00edas, permite ajustar la calidad.<br><br><strong>.png<\/strong>: Ideal para im\u00e1genes de logotipos y vectores. Mantienen las transparencias y pesan algo m\u00e1s que los JPG.<br><br><strong>.gif<\/strong>: Para im\u00e1genes en movimiento o animaciones.<br><br><strong>.webp: <\/strong>Nuevo formato de imagen para web. Permite reducir el tama\u00f1o de estas hasta un 30% con respecto a los formatos habituales y sin p\u00e9rdida de calidad.<\/p>\n\n\n\n<p>Si quieres ampliar informaci\u00f3n acerca de los tipos de formato de imagen, echa un ojo a la entrada <a href=\"https:\/\/www.loading.es\/blog\/2021\/09\/21\/cuando-usar-jpg-png-y-gif\/\" target=\"_blank\" rel=\"noopener\"><strong>\u00bfCu\u00e1ndo usar JPG, PNG y GIF?<\/strong><\/a> Tambi\u00e9n te ser\u00e1 \u00fatil nuestro post sobre <a href=\"https:\/\/www.loading.es\/blog\/2022\/03\/07\/convertir-imagenes-de-prestashop-a-webp\/\" target=\"_blank\" rel=\"noopener\"><strong>C\u00f3mo convertir im\u00e1genes a WebP<\/strong><\/a> en el que te explicamos con m\u00e1s detalle todas las caracter\u00edsticas de este formato.<\/p>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" style=\"color:#df922f\">#2 Encuentra el equilibrio entre calidad y peso<\/h3>\n\n\n\n<p>A veces, se comete el error de subir las im\u00e1genes a la web tal cual, sin tener en cuenta ni el tama\u00f1o, ni la resoluci\u00f3n, ni el peso. <strong>Estos son 3 aspectos fundamentales que debes cuidar<\/strong> para que no ocupen ni m\u00e1s, ni menos de lo que deben:<\/p>\n\n\n\n<ul><li><strong>Tama\u00f1o en p\u00edxeles.<\/strong> Seg\u00fan el espacio que vayan a ocupar en la web, las im\u00e1genes deber\u00e1n tener un tama\u00f1o concreto. Si el hueco es, por ejemplo, de 400x400px, de nada sirve que subamos una imagen de 800x800px. <br>No pensemos que tendr\u00e1 \u00abm\u00e1s calidad\u00bb por subirla de mayor tama\u00f1o, lo \u00fanico que ocurrir\u00e1 es que ocupar\u00e1 m\u00e1s espacio en disco innecesariamente, ya que la imagen se va a adaptar visualmente a esos 400&#215;400 p\u00edxeles pesando lo mismo. Al igual que tampoco debemos subirla de menor tama\u00f1o, porque ah\u00ed s\u00ed que va a afectar a la calidad, puesto que la imagen va a tender a \u00abestirarse\u00bb para ocupar el espacio asignado en la p\u00e1gina.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul><li><strong>Resoluci\u00f3n.<\/strong> Los PPP (p\u00edxeles por pulgada) o DPI (dots per inch). Aqu\u00ed es donde entra en juego la calidad de las im\u00e1genes. A mayor resoluci\u00f3n, mayor calidad, para impresiones se suelen utilizar m\u00ednimo 300dpi pero <strong>para web con 72dpi es suficiente<\/strong>.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul><li><strong>Peso o tama\u00f1o en kb.<\/strong> El peso en kilobytes viene determinado por el formato, el tama\u00f1o en p\u00edxeles y la resoluci\u00f3n. <strong>Una imagen para web no deber\u00eda ocupar m\u00e1s de 200kb<\/strong> y lo ideal es que <strong>el total todas las im\u00e1genes de tu p\u00e1gina no supere 1mb.<\/strong><\/li><\/ul>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" style=\"color:#df922f\">#3 Ajusta tus im\u00e1genes antes de subirlas<\/h3>\n\n\n\n<p>Como hemos comentado en el punto anterior, <strong>es importante que ajustes el tama\u00f1o y la resoluci\u00f3n.<\/strong> Para ello, puedes usar programas como Adobe Photoshop o incluso el propio Paint.<br>Despu\u00e9s,<strong> te recomendamos que pases<\/strong> <strong>las im\u00e1genes tambi\u00e9n por un compresor de im\u00e1genes online<\/strong> como por ejemplo <a href=\"https:\/\/tinyjpg.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Tinyjpg<\/a> o <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Tinypng.<\/a><\/p>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" style=\"color:#df922f\">#4 Si tienes ya muchas im\u00e1genes subidas&#8230;<\/h3>\n\n\n\n<p>En el caso de que ya hayas creado tu p\u00e1gina y tengas muchas im\u00e1genes subidas, <strong>si est\u00e1 hecha con WordPress,<\/strong> para ahorrarte el trabajo de modificarlas y volverlas a subir de 1 en 1,<strong> puedes usar el plugin <\/strong><a href=\"https:\/\/es.wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener nofollow\"><strong>WP Smush.<\/strong> <\/a>Con esta herramienta <strong>podr\u00e1s optimizar hasta 50 im\u00e1genes con un solo clic.  <\/strong><\/p>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" style=\"color:#df922f\">#5 Adapta las im\u00e1genes para la versi\u00f3n responsive<\/h3>\n\n\n\n<p><strong>En la versi\u00f3n responsive, evita mostrar im\u00e1genes innecesarias.<\/strong> Redimensiona y ad\u00e1ptalas para su visualizaci\u00f3n en cada dispositivo. Ya sabes que no necesitas el mismo tama\u00f1o para pantallas de pc que para m\u00f3viles o tablets \ud83d\ude09<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#df922f\">\u00bfPor qu\u00e9 optimizar las im\u00e1genes para web?<\/h2>\n\n\n\n<p><strong>1<\/strong> <strong>Mejorar\u00e1 la velocidad<\/strong> de carga.<\/p>\n\n\n\n<p><strong>2<\/strong> Por lo tanto, los buscadores lo valorar\u00e1n positivamente y <strong>tu posicionamiento SEO tambi\u00e9n mejorar\u00e1.<\/strong><\/p>\n\n\n\n<p><strong>3<\/strong> Lo que <strong>aumentar\u00e1 las posibilidades de conversi\u00f3n<\/strong> de tu negocio.<\/p>\n\n\n\n<p><strong>4<\/strong> Dar\u00e1s una <strong>imagen m\u00e1s profesional.<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Para ver si has optimizado de forma correcta las im\u00e1genes de tu web, <strong>puedes utilizar la herramienta <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=es.\" target=\"_blank\" rel=\"noopener nofollow\">Google Pagespeed.<\/a><\/strong> Solo tienes que escribir la URL y hacer clic en Analizar. <\/p>\n\n\n\n<p>Entre todos los apartados, hay algunos referentes a la optimizaci\u00f3n de im\u00e1genes, comprueba que est\u00e9n en verde. Si hay algo que no es correcto, la herramienta te indicar\u00e1 qu\u00e9 es lo que debes corregir.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>S\u00edguenos en:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-social-links aligncenter is-layout-flex wp-block-social-links-is-layout-flex\"><li class=\"wp-social-link wp-social-link-facebook  wp-block-social-link\"><a href=\"https:\/\/www.facebook.com\/loading.hosting\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Facebook<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-instagram  wp-block-social-link\"><a href=\"https:\/\/www.instagram.com\/loading.es\/\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Instagram<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-twitter  wp-block-social-link\"><a href=\"https:\/\/twitter.com\/loading_es\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Twitter<\/span><\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Las im\u00e1genes de tu web son un elemento fundamental, pero si no las optimizas de forma adecuada pueden perjudicar al funcionamiento y posicionamiento de esta.<\/p>\n","protected":false},"author":1,"featured_media":6329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,66],"tags":[254,326,72],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/6252"}],"collection":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/comments?post=6252"}],"version-history":[{"count":55,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/6252\/revisions"}],"predecessor-version":[{"id":6478,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/6252\/revisions\/6478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media\/6329"}],"wp:attachment":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media?parent=6252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/categories?post=6252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/tags?post=6252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}