{"id":3431,"date":"2017-06-13T17:15:56","date_gmt":"2017-06-13T15:15:56","guid":{"rendered":"http:\/\/bluekea.com\/blog\/?p=3431"},"modified":"2021-03-01T17:20:15","modified_gmt":"2021-03-01T16:20:15","slug":"reducir-peso-tus-fotos-web-imageoptim","status":"publish","type":"post","link":"https:\/\/bluekea.com\/blog\/tecnica-digital\/reducir-peso-tus-fotos-web-imageoptim","title":{"rendered":"C\u00f3mo reducir el peso de tus fotos para web con ImageOptim"},"content":{"rendered":"<p>Una de las cuestiones que respondemos con m\u00e1s frecuencia en Bluekea tiene que ver con el peso de las fotos. A muchos fot\u00f3grafos les preocupa que sus im\u00e1genes no se vean con la m\u00e1xima calidad y para ello prefieren subirlas con la m\u00ednima compresi\u00f3n jpg y consecuentemente con un peso muy elevado. Esto conlleva m\u00e1s tiempo para subir las fotos a la web, e inevitablemente una web m\u00e1s lenta en general, con todas las consecuencias negativas que ello implica en un momento en el que todo el mundo busca inmediatez.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3438\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/bosque-3.jpg\" alt=\"\" width=\"900\" height=\"600\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/bosque-3.jpg 900w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/bosque-3-600x400.jpg 600w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/bosque-3-300x200.jpg 300w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/bosque-3-768x512.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<footer style=\"text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; margin-bottom: 35px;\">Oto\u00f1o en los montes Dolomitas, Italia. Imagen de Jesus Rodriguez<\/footer>\n<p>En Bluekea por lo general no redimensionamos las fotos que se suben a la web salvo para crear las miniaturas correspondientes; creemos que hay que respetar el tratamiento de color y enfoque que el fot\u00f3grafo da a sus im\u00e1genes cuando las prepara para web. Aquellos, aunque poco, pueden ser alterados cuando la imagen es redimensionada en un servidor web.<\/p>\n<p>En este contexto el fot\u00f3grafo necesita preparar sus fotos con el menor peso en Kb posible para que su web se mueva con soltura, pero siempre sin renunciar a la nitidez y fidelidad de color. El par\u00e1metro con el que jugamos para balancear ambos extremos es la compresi\u00f3n de la imagen jpg. A mayor compresi\u00f3n, menor peso y calidad. A compresi\u00f3n cero, 100% de calidad, pero las fotos resultan terriblemente pesadas. Como regla general solemos recomendar una compresi\u00f3n en torno al 80 sobre 100, lo que suele resultar en un peso de entre 200 y 400Kb por foto para un tama\u00f1o de 1250px de lado mayor. El peso final var\u00eda enormemente dependiendo del contenido y detalle de la imagen.<\/p>\n<p>Como generalmente no dispone de tiempo para procesar las fotos una a una, el fot\u00f3grafo hace uso de procesado por lotes, estableciendo unos valores de compresi\u00f3n jpg, tama\u00f1o final y enfoque que luego se aplican a un conjunto de im\u00e1genes en bloque. En su momento <a href=\"https:\/\/bluekea.com\/blog\/consejos-para-tu-web\/tutorial-como-preparar-tus-fotografias-para-web-con-adobe-lightroom\" target=\"_blank\" rel=\"noopener\">hablamos en este blog<\/a> de este tipo de procesado en Adobe Lightroom, que por lo general se hace a partir de archivos raw.<\/p>\n<p>Hoy hablamos de otro tipo de procesado m\u00faltiple para preparar fotos para web, que en esta ocasi\u00f3n se aplica a archivos jpg que ya existen y que necesitamos reducir de peso sin perder calidad. Este procesado solamente afecta a la compresi\u00f3n y por tanto al peso del archivo, no modifica su tama\u00f1o.<\/p>\n<p>Existen varias soluciones en este sentido. Hoy hablamos de <a href=\"https:\/\/imageoptim.com\" target=\"_blank\" rel=\"noopener\">ImageOptim<\/a>, disponible para Mac. Para Windows existen alternativas similares como <a href=\"http:\/\/nikkhokkho.sourceforge.net\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener\">FileOptimizer<\/a>.<\/p>\n<p>Queremos destacar que ImageOptim es un proyecto de <strong>software abierto y gratuito<\/strong>. Puedes <a href=\"https:\/\/imageoptim.com\/mac\" target=\"_blank\" rel=\"noopener\">descargarlo aqu\u00ed<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3>Compresi\u00f3n con o sin p\u00e9rdida<\/h3>\n<p>ImageOptim admite ambos procesos. La compresi\u00f3n <strong>con p\u00e9rdida<\/strong> es la que aplicamos a los jpg de siempre, en la que escogemos un nivel de calidad entre 0 y 100% y los p\u00edxeles de la imagen son regenerados para conseguir reducciones significativas en el peso.<\/p>\n<p>La compresi\u00f3n <strong>sin p\u00e9rdida<\/strong> consiste en no tocar la imagen en s\u00ed sino en suprimir una serie de datos que vienen incluidos en el archivo jpg y que generalmente no son relevantes al subir la foto a una web. Estos son los metadatos\u00a0EXIF, miniaturas incrustadas, comentarios o perfiles de color innecesarios. Esto supone por lo general un ahorro en torno al 10% en fotos en jpg sin afectar para nada a la calidad y es una medida interesante antes de subir cualquier foto a la web.<\/p>\n<p>&nbsp;<\/p>\n<h3>La clave: rapidez y facilidad de uso<\/h3>\n<p>Lo que m\u00e1s nos gusta de este software es lo f\u00e1cil e inmediato que es su uso: lanzamos el programa, escogemos las opciones de compresi\u00f3n y le soltamos encima una carpeta con fotos. En cuesti\u00f3n de poco tiempo todas las im\u00e1genes est\u00e1n procesadas y listas. Es importante destacar que <strong>las fotos se sobreescriben<\/strong>, no se crean nuevas versiones, por ello es importante no aplicar la compresi\u00f3n a nuestros originales sino a una copia.<\/p>\n<p>&nbsp;<\/p>\n<h3>Nuestras pruebas<\/h3>\n<p>Aqu\u00ed incluimos varias comparaciones aplicando diferentes niveles de compresi\u00f3n. Dependiendo de la pantalla donde est\u00e9s viendo esto, es probable que tu navegador est\u00e9 redimensionando las fotos respecto a su tama\u00f1o original. Esto es una ventaja en nuestra opini\u00f3n, ya que es as\u00ed como suelen verse muchas de las im\u00e1genes en web.<\/p>\n<style>.embed-container { position: relative; margin-bottom: 30px; padding-bottom: 59.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe loading=\"lazy\" style=\"border: 0;\" src=\"https:\/\/cdn.knightlab.com\/libs\/juxtapose\/latest\/embed\/index.html?uid=bae77a5e-504b-11e7-baf8-0edaf8f81e27\" width=\"300\" height=\"150\"><\/iframe><\/div>\n<div class=\"embed-container\"><iframe loading=\"lazy\" style=\"border: 0;\" src=\"https:\/\/cdn.knightlab.com\/libs\/juxtapose\/latest\/embed\/index.html?uid=59368b28-504c-11e7-baf8-0edaf8f81e27\" width=\"300\" height=\"150\"><\/iframe><\/div>\n<div class=\"embed-container\"><iframe loading=\"lazy\" style=\"border: 0;\" src=\"https:\/\/cdn.knightlab.com\/libs\/juxtapose\/latest\/embed\/index.html?uid=b9702132-5049-11e7-baf8-0edaf8f81e27\" width=\"300\" height=\"150\"><\/iframe><\/div>\n<div class=\"embed-container\"><iframe loading=\"lazy\" style=\"border: 0;\" src=\"https:\/\/cdn.knightlab.com\/libs\/juxtapose\/latest\/embed\/index.html?uid=2a356c96-504b-11e7-baf8-0edaf8f81e27\" width=\"300\" height=\"150\"><\/iframe><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3446 size-full\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/screenshot37.jpg\" alt=\"\" width=\"760\" height=\"431\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/screenshot37.jpg 760w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2017\/06\/screenshot37-300x170.jpg 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/>Resumen de resultados para la misma foto con 4 tipos de compresi\u00f3n: sin p\u00e9rdida, al 95%, al 90% y al 85%.<\/p>\n<p>&nbsp;<\/p>\n<h3><\/h3>\n<h3>Conclusiones<\/h3>\n<ul>\n<li>La compresi\u00f3n sin p\u00e9rdidas supone un ahorro de entrada de unos 90Kb.<\/li>\n<li>Incluso a niveles m\u00ednimos de compresi\u00f3n como el 95% el ahorro en peso es muy importante.<\/li>\n<li>Incluso aplicando el m\u00e1ximo de compresi\u00f3n del 80% en este ejemplo, apenas se aprecian artefactos en los bordes de la monta\u00f1a. Este es un punto muy interesante y es debido al redimensionamiento anteriormente explicado.<\/li>\n<li>El nivel de compresi\u00f3n de la imagen afecta principalmente aunque de forma sutil a la fidelidad del color.<\/li>\n<\/ul>\n<p>Nuestra recomendaci\u00f3n es probar todo esto con tus propias fotos aplicando diferentes niveles de compresi\u00f3n, y revisar los resultados para quedarte con la configuraci\u00f3n que m\u00e1s te interesa.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una de las cuestiones que respondemos con m\u00e1s frecuencia en Bluekea tiene que ver con el peso de las fotos. A muchos fot\u00f3grafos les preocupa que sus im\u00e1genes no se vean con la m\u00e1xima calidad y para ello prefieren subirlas &hellip; <a href=\"https:\/\/bluekea.com\/blog\/tecnica-digital\/reducir-peso-tus-fotos-web-imageoptim\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3438,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnica-digital"],"_links":{"self":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/3431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/comments?post=3431"}],"version-history":[{"count":36,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/3431\/revisions"}],"predecessor-version":[{"id":3476,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/3431\/revisions\/3476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media\/3438"}],"wp:attachment":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media?parent=3431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/categories?post=3431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/tags?post=3431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}