<rss version="2.0"
     xmlns:atom="http://www.w3.org/2005/Atom"
     xmlns:dc="http://purl.org/dc/elements/1.1/">
        <channel>
        <title>Magazine - jpeg</title>
        <link>https://www.genbeta.com</link>
        <description>Publicación de noticias sobre gadgets y tecnología. Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc</description>
        <pubDate>Tue, 09 Jun 2026 12:56:33 +0000</pubDate>
        <generator>https://www.genbeta.com</generator>
        <atom:link href="https://www.genbeta.com/tag/jpeg/rss2.xml" rel="self" type="application/rss+xml" />
                                        <item>
                <title><![CDATA[Cómo reducir el tamaño de tus imágenes un 35% usando el último algoritmo de Google]]></title>
                <link>https://www.genbeta.com/paso-a-paso/como-reducir-el-tamano-de-tus-imagenes-un-35-usando-el-ultimo-algoritmo-de-google</link>
                <guid>https://www.genbeta.com/paso-a-paso/como-reducir-el-tamano-de-tus-imagenes-un-35-usando-el-ultimo-algoritmo-de-google</guid>
                <pubDate>Tue, 28 Mar 2017 18:01:32 +0000</pubDate>
                                         <dc:creator>Sergio Agudo</dc:creator>
                                       <description>
                    <![CDATA[
                              <p>
      <img src="https://i.blogs.es/3f567a/photo-351528_1280/1024_2000.jpg" alt="C&#x00F3;mo&#x20;reducir&#x20;el&#x20;tama&#x00F1;o&#x20;de&#x20;tus&#x20;im&#x00E1;genes&#x20;un&#x20;35&#x25;&#x20;usando&#x20;el&#x20;&#x00FA;ltimo&#x20;algoritmo&#x20;de&#x20;Google">
    </p>
    <p>Hace algunas semanas hablábamos de <a class="text-outboundlink" href="https://www.genbeta.com/web/google-libera-el-codigo-de-su-algoritmo-para-reducir-el-tamano-de-los-jpeg-hasta-en-un-35" data-vars-post-title="Google libera el código de su algoritmo para reducir el tamaño de los JPEG hasta en un 35% " data-vars-post-url="https://www.genbeta.com/web/google-libera-el-codigo-de-su-algoritmo-para-reducir-el-tamano-de-los-jpeg-hasta-en-un-35">Guetzli</a>, el último algoritmo de compresión de imágenes cuyo código fuente Google había liberado y que prometía imágenes un 35% más pequeñas con la <strong>menor pérdida de calidad</strong> posible. Sobre el papel suena fantástico pero, ¿cómo se podía tener esta maravilla técnica en el propio PC?</p>
<!-- BREAK 1 -->
<p>Hasta ahora siempre podías acudir a <a rel="noopener, noreferrer" href="https://github.com/google/guetzli/">GitHub</a>, descargar el código fuente y compilarlo tú mismo, pero eso no es algo que esté al alcance de todo el mundo. Es por eso que sólo podemos agradecer al desarrollador Javier Gutiérrez Chamorro que exista <a rel="noopener, noreferrer" href="https://sourceforge.net/projects/nikkhokkho/?source=typ_redirect">FileOptimizer</a>, con el que <strong>podrás usar Guetzli en tu PC</strong> sin problemas y sin volverte loco compilando.</p>
<!-- BREAK 2 -->
<p>FileOptimizer en este caso nos servirá para trabajar con imágenes, pero funciona con una <a rel="noopener, noreferrer" href="http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer">enorme variedad de archivos</a>. Su optimización funciona por defecto como una <strong>compresión sin pérdida de calidad</strong> para cualquiera de los formatos soportados.</p>
<!-- BREAK 3 -->
<h2>Cómo usar Guetzli en FileOptimizer</h2>
<div class="article-asset-image article-asset-normal article-asset-center">
 <div class="asset-content">
                   <img class="centro_sinmarco" height=499 width=783 loading="lazy" decoding="async" sizes="100vw" fetchpriority="high" srcset="https://i.blogs.es/704340/captura/450_1000.webp 450w, https://i.blogs.es/704340/captura/650_1200.webp 681w,https://i.blogs.es/704340/captura/1024_2000.webp 1024w, https://i.blogs.es/704340/captura/1366_2000.webp 1366w" src="https://i.blogs.es/704340/captura/450_1000.webp" alt="Captura" onerror="this.src='https://i.blogs.es/704340/captura/450_1000.png';this.srcset='https://i.blogs.es/704340/captura/450_1000.png 450w, https://i.blogs.es/704340/captura/650_1200.png 681w,https://i.blogs.es/704340/captura/1024_2000.png 1024w, https://i.blogs.es/704340/captura/1366_2000.png 1366w';return false;">
   <img alt="Captura" class="centro_sinmarco" src="https://i.blogs.es/704340/captura/450_1000.webp">
   
      </div>
</div>
<p>Antes de continuar, vale la pena señalar que <strong>Guetzli no está activado por defecto</strong> en este programa, tenemos que activarlo a mano. Para ello tenemos que seguir varios pasos:</p>
<!-- BREAK 4 -->
<ul>
<li>Abrir FileOptimizer y cerrarlo en cuanto esté abierto. Al hacer esto se crea un archivo llamado <code>fileoptimizer.ini</code>.</li>
<li>Ir a la ruta C:\Usuarios\Tu_Usuario\ y localizar <code>fileoptimizer.ini</code>. Cuando lo hayas hecho, haz doble clic en él para editarlo con el bloc de notas.</li>
<li>Con el archivo abierto y listo para editar, localiza la línea <code>JPEGAllowLossy</code> y cambia el parámetro <code>false</code> por <code>true</code>, de forma que quede de la siguiente manera:</li>
</ul>

<p><code>JPEGAllowLossy=true</code></p>

<p>Si ahora vuelves a abrir el programa, <strong>Guetzli ya estará funcionando</strong>. Y la manera de usar el programa no puede ser más fácil: arrastra el archivo o los archivos que quieras a la ventana del software para colocarlos, y después haz clic con el botón derecho encima de los archivos para seleccionar _Optimize all files_. Ten en cuenta que, dependiendo del tamaño de los archivos a procesar, la operación le puede llevar un buen rato.</p>
<!-- BREAK 5 -->
<p>Recordamos que este algoritmo de compresión funciona con <strong>navegadores y herramientas de imagen ya existentes</strong>. Desde Google se comenta que permitirá generar imágenes de un tamaño no excesivamente grande, sin por ello comprometer la calidad de la imagen.</p>
<!-- BREAK 6 -->
<p>En Genbeta | <a class="text-outboundlink" href="https://www.genbeta.com/multimedia/raisr-la-tecnica-de-google-que-crea-imagenes-de-alta-resolucion-con-inteligencia-artificial" data-vars-post-title="RAISR, la técnica de Google que crea imágenes de alta resolución con inteligencia artificial " data-vars-post-url="https://www.genbeta.com/multimedia/raisr-la-tecnica-de-google-que-crea-imagenes-de-alta-resolucion-con-inteligencia-artificial">RAISR, la técnica de Google que crea imágenes de alta resolución con inteligencia artificial</a></p>
<script>
 (function() {
  window._JS_MODULES = window._JS_MODULES || {};
  var headElement = document.getElementsByTagName('head')[0];
  if (_JS_MODULES.instagram) {
   var instagramScript = document.createElement('script');
   instagramScript.src = 'https://platform.instagram.com/en_US/embeds.js';
   instagramScript.async = true;
   instagramScript.defer = true;
   headElement.appendChild(instagramScript);
  }
 })();
</script>

                    ]]>
                </description>
            </item>
                                <item>
                <title><![CDATA[Google libera el código de su algoritmo para reducir el tamaño de los JPEG hasta en un 35% ]]></title>
                <link>https://www.genbeta.com/web/google-libera-el-codigo-de-su-algoritmo-para-reducir-el-tamano-de-los-jpeg-hasta-en-un-35</link>
                <guid>https://www.genbeta.com/web/google-libera-el-codigo-de-su-algoritmo-para-reducir-el-tamano-de-los-jpeg-hasta-en-un-35</guid>
                <pubDate>Fri, 17 Mar 2017 11:42:09 +0000</pubDate>
                                         <dc:creator>Sergio Agudo</dc:creator>
                                       <description>
                    <![CDATA[
                              <p>
      <img src="https://i.blogs.es/e72d19/1366_2000/1024_2000.jpg" alt="Google&#x20;libera&#x20;el&#x20;c&#x00F3;digo&#x20;de&#x20;su&#x20;algoritmo&#x20;para&#x20;reducir&#x20;el&#x20;tama&#x00F1;o&#x20;de&#x20;los&#x20;JPEG&#x20;hasta&#x20;en&#x20;un&#x20;35&#x25;&#x20;">
    </p>
    <p>Google sigue trabajando en mejorar su procesado de imagen. Si hace unos meses habábamos de <a class="text-outboundlink" href="https://www.genbeta.com/multimedia/raisr-la-tecnica-de-google-que-crea-imagenes-de-alta-resolucion-con-inteligencia-artificial" data-vars-post-title="RAISR, la técnica de Google que crea imágenes de alta resolución con inteligencia artificial " data-vars-post-url="https://www.genbeta.com/multimedia/raisr-la-tecnica-de-google-que-crea-imagenes-de-alta-resolucion-con-inteligencia-artificial">RAISR</a>, la técnica con la que la Gran G pensaba <strong>crear imágenes de alta resolución</strong> a partir de muestras de mucha menor calidad, hoy la empresa de Mountain View vuelve a ofrecernos novedades en este campo.</p>
<!-- BREAK 1 -->
<p>Según han publicado a través del <a rel="noopener, noreferrer" href="https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html">Google Research Blog</a> están trabajando con un nuevo <strong>codificador para archivos JPEG llamado Guetzli</strong>, con el que pretenden reducir el tamaño de estos ficheros un 35% con respecto a los archivos de este formato que se generan actualmente.</p>
<!-- BREAK 2 --><!--more--><p>Pero quizá lo que más interesante puede resultar de cara a desarrolladores es que <strong>Google ha abierto el código de Guetzli</strong>, tal y como se ha publicado en <a rel="noopener, noreferrer" href="https://thenextweb.com/google/2017/03/17/google-open-sources-jpeg-compression-that-reduces-file-sizes-by-35/#.tnw_9hhM6ufc">The Next Web</a>. Si eres desarrollador y te interesa implementar este algoritmo de compresión, puedes consultar la documentación y descargarlo todo desde <a rel="noopener, noreferrer" href="https://github.com/google/guetzli/">GitHub</a>.</p>
<!-- BREAK 3 --><div class="article-asset-image article-asset-normal article-asset-center">
 <div class="asset-content">
                   <img class="centro_sinmarco" height=240 width=570 loading="lazy" decoding="async" sizes="100vw" fetchpriority="high" srcset="https://i.blogs.es/24d22b/image01/450_1000.webp 450w, https://i.blogs.es/24d22b/image01/650_1200.webp 681w,https://i.blogs.es/24d22b/image01/1024_2000.webp 1024w, https://i.blogs.es/24d22b/image01/1366_2000.webp 1366w" src="https://i.blogs.es/24d22b/image01/450_1000.webp" alt="Image01" onerror="this.src='https://i.blogs.es/24d22b/image01/450_1000.png';this.srcset='https://i.blogs.es/24d22b/image01/450_1000.png 450w, https://i.blogs.es/24d22b/image01/650_1200.png 681w,https://i.blogs.es/24d22b/image01/1024_2000.png 1024w, https://i.blogs.es/24d22b/image01/1366_2000.png 1366w';return false;">
   <img alt="Image01" class="centro_sinmarco" src="https://i.blogs.es/24d22b/image01/450_1000.webp">
   
      </div>
</div>
<p>En los ejemplos que se ven sobre estas líneas, en la parte izquierda de la imagen está el original sin comprimir, la misma imagen tras pasar por el algoritmo <a class="text-outboundlink" href="https://www.genbeta.com/windows/betabits-crujientes-sabrosos-y-a-punto-de-caramelo" data-vars-post-title="Betabits, crujientes, sabrosos y a punto de caramelo" data-vars-post-url="https://www.genbeta.com/windows/betabits-crujientes-sabrosos-y-a-punto-de-caramelo">libjpeg</a> y la última <strong>es el resultado de Guetzli</strong>.</p>
<!-- BREAK 4 -->
<p>Este algoritmo de compresión <strong>funciona con navegadores y herramientas de imagen ya existentes</strong>. Desde Google se comenta que permitirá generar imágenes de un tamaño no excesivamente grande, sin por ello comprometer la calidad de la imagen.</p>
<!-- BREAK 5 -->
<p>Para ello se centrarán en lo que se conoce como <strong>"fase de cuantización"</strong> y en el proceso de compresión en sí. Es aquí donde los algoritmos pueden reducir mucho las imágenes, pero también se pueden lograr calidades muy bajas si no se trabaja con cuidado.</p>
<!-- BREAK 6 -->
<p>Tal y como apunta la propia empresa, este método de reducción es similar a otro algoritmo de compresión que ya anunciaron hace un tiempo, llamado <a rel="noopener, noreferrer" href="https://github.com/google/zopfli/blob/master/README.zopflipng">Zofli</a>. En él se reducía el tamaño de los archivos PNG y GZIP <strong>sin necesidad de crear un nuevo formato</strong>. Ahora bien, hay que tener en cuenta que Guetzli es más lento que otros algoritmos de compresión.</p>
<!-- BREAK 7 -->
<p>Vía | <a rel="noopener, noreferrer" href="https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html">Google Research Blog</a>, <a rel="noopener, noreferrer" href="https://thenextweb.com/google/2017/03/17/google-open-sources-jpeg-compression-that-reduces-file-sizes-by-35/#.tnw_9hhM6ufc">The Next Web</a><br />
En Genbeta | <a class="text-outboundlink" href="https://www.genbeta.com/multimedia/google-brain-hace-realidad-los-zooms-imposibles-de-csi" data-vars-post-title="Google Brain hace realidad los zooms imposibles de CSI " data-vars-post-url="https://www.genbeta.com/multimedia/google-brain-hace-realidad-los-zooms-imposibles-de-csi">Google Brain hace realidad los zooms imposibles de CSI</a></p>
<script>
 (function() {
  window._JS_MODULES = window._JS_MODULES || {};
  var headElement = document.getElementsByTagName('head')[0];
  if (_JS_MODULES.instagram) {
   var instagramScript = document.createElement('script');
   instagramScript.src = 'https://platform.instagram.com/en_US/embeds.js';
   instagramScript.async = true;
   instagramScript.defer = true;
   headElement.appendChild(instagramScript);
  }
 })();
</script>

                    ]]>
                </description>
            </item>
                                <item>
                <title><![CDATA[Cómo funcionan los formatos de imagen y en qué los mejora WebP]]></title>
                <link>https://www.genbeta.com/imagen-digital/como-funcionan-los-formatos-de-imagen-y-en-que-los-mejora-webp</link>
                <guid>https://www.genbeta.com/imagen-digital/como-funcionan-los-formatos-de-imagen-y-en-que-los-mejora-webp</guid>
                <pubDate>Fri, 17 May 2013 17:46:34 +0000</pubDate>
                                         <dc:creator>Guillermo Julián</dc:creator>
                                       <description>
                    <![CDATA[
                              <p>
      <img src="https://i.blogs.es/92ee84/webp/1024_2000.jpg" alt="C&#x00F3;mo&#x20;funcionan&#x20;los&#x20;formatos&#x20;de&#x20;imagen&#x20;y&#x20;en&#x20;qu&#x00E9;&#x20;los&#x20;mejora&#x20;WebP">
    </p>
    <p>Todavía nos quedan algunas cosas en el tintero del Google I/O. Una de ellas es el "nuevo" códec de imagen para la Web: <em>WebP</em> (Web - Picture, no se han roto la cabeza con el nombre). Digo "nuevo" porque ya existía de bastante antes, pero no está de más darle un repaso.</p>
<!-- BREAK 1 -->
<p>Lo primero es entender por qué Google está llevando a cabo este esfuerzo. Tenemos tres códecs o formatos mayoritarios: JPEG, PNG y GIF, que datan del 1991, 1996 y 1987 respectivamente. Han cambiado muchas cosas desde entonces, pero aun así estos códecs siguen sirviendo... <em>más o menos</em>.</p>
<!-- BREAK 2 --><!--more--><style>.sumario_derecha {
    color: rgb(74, 116, 168);
} .sumario_izquierda {
    color: rgb(74, 116, 168) !important;<strong></strong>
}
</style>

<p><em>JPEG</em> es el más usado no sólo en Internet sino también fuera de él. La mayor ventaja que tiene es su capacidad de compresión, que puede llegar a valores tan altos como 100:1 (una imagen de 100KB almacenada en un archivo de 1KB). Pero claro, esa compresión tan potente tiene sus desventajas: pérdida de calidad. Veremos más adelante por qué ocurre esto, pero estoy seguro que a todos nos suenan los _artefactos_, la distorsión de los JPG. </p>
<!-- BREAK 3 -->
<p>Después tenemos al formato <em>GIF</em>. Realmente el formato es bastante malo: aunque la compresión no tiene pérdidas, tenemos un problema, y es que sólo podemos representar 256 colores. Para que os hagáis una idea, una pantalla normal representa millones de colores. El resultado es que GIF no es un formato de buena calidad, y de hecho sólo se usa para logos simples y para animaciones (es el único que las permite).</p>
<!-- BREAK 4 -->
<p>Por último, está <em>PNG</em>. Es un formato sin pérdida y que admite transparencia. El problema es que no alcanza una compresión tan alta como JPEG, así que sólo se usa con imágenes pequeñas y con pocos colores. </p>
<!-- BREAK 5 --><div class="article-asset-summary">
 <div class="asset-content">
     <div class="sumario">WebP unifica las ventajas de PNG, GIF y JPEG en un único formato.</div>
   </div>
</div>
<p>Al final, tenemos tres formatos distintos, y cada uno destaca en un campo en el que los demás no tienen nada que hacer: JPEG para archivos pequeños, PNG para alta calidad y transparencia, y GIF para animaciones. </p>
<!-- BREAK 6 -->
<p>WebP pretende <em>unificar todas esas ventajas en un único archivo</em>. Tiene compresión con pérdidas para reducir el tamaño de archivo, sin pérdidas para mantener la calidad (y aun así resultan archivos más pequeños que en PNG), soporta transparencia y animaciones. El formato definitivo, vamos. ¿Cómo lo logran en Google?</p>
<!-- BREAK 7 -->
<h2>¿Cómo funcionan los códecs de imagen?</h2>

<p>Para entender un poco el porqué de la necesidad de WebP, tenemos que ver <em>cómo funcionan los códecs de imagen</em>. Aviso que haré varias simplificaciones para que se entienda mejor.</p>
<!-- BREAK 8 -->
<p>Antes de nada, recordemos que una imagen no es más que una serie de puntos o píxeles, donde cada posición tiene las cantidades de color rojo, verde y azul que componen el color del píxel.</p>
<!-- BREAK 9 -->
<p>La compresión de imágenes con pérdida de calidad se basa en dos principios (los más importantes, hay muchos más). El principal es que <em>el ojo humano no es capaz de distinguir muchos cambios ligeros de color</em>. Y el segundo, que es más corto guardar una serie de puntos como una función. Por ejemplo, ¿qué es más corto de guardar, cincuenta puntos de una recta o su función (<i>y = ax + b</i> por si alguno no se acuerda)?</p>
<!-- BREAK 10 -->
<p class="sumario_izquierda">No podemos detectar los pequeños cambios de color, así que, ¿para qué guardarlos?</p>

<p>Parece que lo que he dicho no tiene relación, pero en realidad sí. Decíamos que una imagen no es más que una serie de puntos, así que podemos representar esos puntos en una gráfica, y después construir una función que se aproxime a esos puntos. </p>
<!-- BREAK 11 -->
<p>Esa función nos sale con muchos picos muy pequeños. Espera, ¿no habíamos dicho que esos cambios tan pequeños no los detecta el ojo? Pues lo tenemos fácil: deshagámonos de esos picos. "Aplanemos" la función. Así será más corta, y la guardaremos más fácilmente. Podéis ver un esquema de lo que ocurre en la siguiente imagen.</p>
<!-- BREAK 12 --><div class="article-asset-image article-asset-normal article-asset-center">
 <div class="asset-content">
                   <img class="centro_sinmarco" height=551 width=650 loading="lazy" decoding="async" sizes="100vw" fetchpriority="high" srcset="https://i.blogs.es/0debf8/compresionperdidas/450_1000.webp 450w, https://i.blogs.es/0debf8/compresionperdidas/650_1200.webp 681w,https://i.blogs.es/0debf8/compresionperdidas/1024_2000.webp 1024w, https://i.blogs.es/0debf8/compresionperdidas/1366_2000.webp 1366w" src="https://i.blogs.es/0debf8/compresionperdidas/450_1000.webp" alt="Compresion sin perdidas" onerror="this.src='https://i.blogs.es/0debf8/compresionperdidas/450_1000.png';this.srcset='https://i.blogs.es/0debf8/compresionperdidas/450_1000.png 450w, https://i.blogs.es/0debf8/compresionperdidas/650_1200.png 681w,https://i.blogs.es/0debf8/compresionperdidas/1024_2000.png 1024w, https://i.blogs.es/0debf8/compresionperdidas/1366_2000.png 1366w';return false;">
   <img alt="Compresion sin perdidas" class="centro_sinmarco" src="https://i.blogs.es/0debf8/compresionperdidas/450_1000.webp">
   
      </div>
</div>
<p>En JPEG, esto (más o menos) es lo que se llama el proceso de _cuantización_. La cuestión es, ¿qué pasa si nos pasamos al "aplanar" la función? Que perdemos detalle. Los colores se quedan, literalmente, más planos: <em>perdemos contraste</em>. Cada píxel se parece mucho más al resto, y por eso aparecen los artefactos. Exagerando mucho, esto es lo pasa en una imagen real si nos pasamos de compresión:</p>
<!-- BREAK 13 -->
<p><div class="caption-img"> </p>
<div class="article-asset-image article-asset-normal article-asset-center">
 <div class="asset-content">
                   <img class="centro_sinmarco" height=234 width=650 loading="lazy" decoding="async" sizes="100vw" fetchpriority="high" srcset="https://i.blogs.es/db5610/jpgartifacts/450_1000.webp 450w, https://i.blogs.es/db5610/jpgartifacts/650_1200.webp 681w,https://i.blogs.es/db5610/jpgartifacts/1024_2000.webp 1024w, https://i.blogs.es/db5610/jpgartifacts/1366_2000.webp 1366w" src="https://i.blogs.es/db5610/jpgartifacts/450_1000.webp" alt="Artefactoss JPG" onerror="this.src='https://i.blogs.es/db5610/jpgartifacts/450_1000.png';this.srcset='https://i.blogs.es/db5610/jpgartifacts/450_1000.png 450w, https://i.blogs.es/db5610/jpgartifacts/650_1200.png 681w,https://i.blogs.es/db5610/jpgartifacts/1024_2000.png 1024w, https://i.blogs.es/db5610/jpgartifacts/1366_2000.png 1366w';return false;">
   <img alt="Artefactoss JPG" class="centro_sinmarco" src="https://i.blogs.es/db5610/jpgartifacts/450_1000.webp">
   
      </div>
</div>
<p><span>A la izquierda, imagen JPEG sin comprimir, a la derecha comprimida demasiado.</span> </div></p>

<p>Este método es bastante eficiente en cuanto al ratio de compresión de la imagen. Lo malo es lo que comentábamos: es irreversible. Perdemos calidad y no la podemos recuperar.</p>
<!-- BREAK 14 -->
<p>Por suerte, hay otros algoritmos para <em>reducir el tamaño de imagen sin perder la calidad</em>, que se basan en cambiar la forma de expresar la imagen para que se pueda comprimir mejor.</p>
<!-- BREAK 15 -->
<p>¿Cómo se comprime mejor una imagen (o cualquier archivo)? Ahorrándonos los datos repetidos. Por ejemplo, en lugar de guardar 20 ceros seguidos, simplemente guardamos dos números: 20 (el número de repeticiones) y 0 (el elemento que se repite). El objetivo de los algoritmos con compresión es encontrar otras formas de expresar la imagen de tal forma que haya el <em>mayor número de datos repetidos posible</em> (el nombre técnico es reducir la entropía de información del archivo).</p>
<!-- BREAK 16 -->
<p>La técnica principal que usan los códecs PNG y GIF para esto es la siguiente. Cogemos un píxel. Sacamos una predicción de cómo será este píxel en función de los de su alrededor. Por ejemplo, si un píxel está rodeado de píxeles rojos, será rojo también; o si está entre uno rojo y otro amarillo, probablemente será naranja.</p>
<!-- BREAK 17 -->
<p>El truco está en guardar no el valor del píxel, ni la predicción, sino <em>cuánto se desvía la predicción del píxel real</em>. Como en general no hay muchos cambios bruscos en una imagen, habrá muchas diferencias que sean 0 o pequeñas, así que tendremos bastantes datos repetidos. Además, este proceso es reversible, así que no perdemos calidad.</p>
<!-- BREAK 18 -->
<p>Como hay varios métodos para predecir el valor de un píxel, el codificador escoge el que mejor predice para cada "bloque" de la imagen (esto es, el que saca las predicciones más exactas y el que deja números más pequeños).</p>
<!-- BREAK 19 -->
<h2>¿En qué mejora WebP lo ya existente?</h2>

<p>Y después de esta "introducción", podemos ver <em>qué hace WebP para ser mejor que sus antecesores</em>. Recordemos que reduce en un 25% aproximadamente el peso de los archivos con respecto a PNG y JPEG manteniendo la calidad (esto también depende del codificador que se use).</p>
<!-- BREAK 20 --><div class="article-asset-summary">
 <div class="asset-content">
     <div class="sumario">La principal mejora de WebP es dar más opciones para comprimir la imagen sin pérdida.</div>
   </div>
</div>
<p>Frente a PNG, WebP lo mejora por tener un <em>mayor abanico de filtros sin pérdida</em>. El filtro de predicción tiene más modos (cada modo valora de forma distinta los píxeles adyacentes al que queremos calcular su valor teórico), lo que permite un mejor ajuste y por lo tanto se pueden comprimir mejor los datos. Además, hay otros dos filtros adicionales: transformación de color e indexación de colores.</p>
<!-- BREAK 21 -->
<p>Estos filtros se pueden aplicar al mismo tiempo sobre una imagen, de forma que el formato WebP ofrece una compresión máxima mayor usando técnicas que PNG no permite.</p>
<!-- BREAK 22 -->
<p>Por otro lado, frente a JPEG, WebP destaca por la posibilidad de añadir los filtros sin pérdida que acabo de comentar. Es cierto que JPEG tiene métodos de compresión sin pérdida, pero no son tan efectivos como los de WebP (y son menos usados). </p>
<!-- BREAK 23 -->
<p>Otra ventaja de WebP es que incluye <em>métodos de compresión mejorados</em>. Al igual que PNG, usa DEFLATE, pero además añade una caché de los colores más usados. En este sentido es el más avanzado de los cuatro formatos.</p>
<!-- BREAK 24 -->
<h2>¿Y todo eso, para qué?</h2>

<p>Bien, una vez que hemos visto la teoría, veamos la práctica. Exploremos las imágenes que Google tiene de muestra para comparar qué ofrece, a nivel de calidad, WebP.</p>
<!-- BREAK 25 -->
<p>Frente a PNG (<a rel="noopener, noreferrer" href="https://developers.google.com/speed/webp/gallery2">galería completa</a>), el cambio es impresionante. La calidad de WebP es del 90%, y la imagen en PNG es unas 4-5 veces más grande que la de WebP. Las diferencias en calidad apenas se notan (yo ya me he dejado los ojos y no he visto prácticamente nada).</p>
<!-- BREAK 26 -->
<p><div class="caption-img"> </p>
<div class="article-asset-image article-asset-normal article-asset-center">
 <div class="asset-content">
                   <img class="centro_sinmarco" height=366 width=650 loading="lazy" decoding="async" sizes="100vw" fetchpriority="high" srcset="https://i.blogs.es/3c8b7a/webp-png/450_1000.webp 450w, https://i.blogs.es/3c8b7a/webp-png/650_1200.webp 681w,https://i.blogs.es/3c8b7a/webp-png/1024_2000.webp 1024w, https://i.blogs.es/3c8b7a/webp-png/1366_2000.webp 1366w" src="https://i.blogs.es/3c8b7a/webp-png/450_1000.webp" alt="WebP + PNG" onerror="this.src='https://i.blogs.es/3c8b7a/webp-png/450_1000.png';this.srcset='https://i.blogs.es/3c8b7a/webp-png/450_1000.png 450w, https://i.blogs.es/3c8b7a/webp-png/650_1200.png 681w,https://i.blogs.es/3c8b7a/webp-png/1024_2000.png 1024w, https://i.blogs.es/3c8b7a/webp-png/1366_2000.png 1366w';return false;">
   <img alt="WebP + PNG" class="centro_sinmarco" src="https://i.blogs.es/3c8b7a/webp-png/450_1000.webp">
   
      </div>
</div>
<p><span>Aumento del 200%. Originales: <a rel="noopener, noreferrer" href="https://www.gstatic.com/webp/gallery3/1_webp_a.webp">WebP</a>, <a rel="noopener, noreferrer" href="https://www.gstatic.com/webp/gallery3/1.png">PNG</a>.</span> </div></p>

<p>Con JPEG (<a rel="noopener, noreferrer" href="https://developers.google.com/speed/webp/gallery1">galería completa</a>), las cosas están un poco más dispares. De lejos no hay mucha diferencia, pero si pasamos a ampliar vemos que, mientras que en WebP se notan más los bloques de imagen, en JPEG los artefactos en los bordes son mucho más destacados. </p>
<!-- BREAK 27 -->
<p><div class="caption-img"> </p>
<div class="article-asset-image article-asset-normal article-asset-center">
 <div class="asset-content">
                   <img class="centro_sinmarco" height=366 width=650 loading="lazy" decoding="async" sizes="100vw" fetchpriority="high" srcset="https://i.blogs.es/44a93f/webp-jpg-400/450_1000.webp 450w, https://i.blogs.es/44a93f/webp-jpg-400/650_1200.webp 681w,https://i.blogs.es/44a93f/webp-jpg-400/1024_2000.webp 1024w, https://i.blogs.es/44a93f/webp-jpg-400/1366_2000.webp 1366w" src="https://i.blogs.es/44a93f/webp-jpg-400/450_1000.webp" alt="WebP y JPG" onerror="this.src='https://i.blogs.es/44a93f/webp-jpg-400/450_1000.png';this.srcset='https://i.blogs.es/44a93f/webp-jpg-400/450_1000.png 450w, https://i.blogs.es/44a93f/webp-jpg-400/650_1200.png 681w,https://i.blogs.es/44a93f/webp-jpg-400/1024_2000.png 1024w, https://i.blogs.es/44a93f/webp-jpg-400/1366_2000.png 1366w';return false;">
   <img alt="WebP y JPG" class="centro_sinmarco" src="https://i.blogs.es/44a93f/webp-jpg-400/450_1000.webp">
   
      </div>
</div>
<p><span>Ampliación 400%. Izquierda: WebP, 29 KB, <a rel="noopener, noreferrer" href="http://www.gstatic.com/webp/gallery/1.webp">original</a>. Derecha: JPEG, 44KB, <a rel="noopener, noreferrer" href="http://www.gstatic.com/webp/gallery/1.jpg">original</a>.</span> </div></p>

<p>Por ejemplo, en imágenes del cielo, si nos fijamos, WebP se queda un poco atrás al darle un patrón más cuadriculado. Sin embargo, la <em>ausencia de artefactos</em> en los bordes de los objetos le da muchos puntos.</p>
<!-- BREAK 28 -->
<p><div class="caption-img"> </p>
<div class="article-asset-image article-asset-normal article-asset-center">
 <div class="asset-content">
                   <img class="centro_sinmarco" height=366 width=650 loading="lazy" decoding="async" sizes="100vw" fetchpriority="high" srcset="https://i.blogs.es/555997/wepp-jpg-artifacts/450_1000.webp 450w, https://i.blogs.es/555997/wepp-jpg-artifacts/650_1200.webp 681w,https://i.blogs.es/555997/wepp-jpg-artifacts/1024_2000.webp 1024w, https://i.blogs.es/555997/wepp-jpg-artifacts/1366_2000.webp 1366w" src="https://i.blogs.es/555997/wepp-jpg-artifacts/450_1000.webp" alt="WebP y JPG- artefactos" onerror="this.src='https://i.blogs.es/555997/wepp-jpg-artifacts/450_1000.png';this.srcset='https://i.blogs.es/555997/wepp-jpg-artifacts/450_1000.png 450w, https://i.blogs.es/555997/wepp-jpg-artifacts/650_1200.png 681w,https://i.blogs.es/555997/wepp-jpg-artifacts/1024_2000.png 1024w, https://i.blogs.es/555997/wepp-jpg-artifacts/1366_2000.png 1366w';return false;">
   <img alt="WebP y JPG- artefactos" class="centro_sinmarco" src="https://i.blogs.es/555997/wepp-jpg-artifacts/450_1000.webp">
   
      </div>
</div>
<p><span>Ampliación 300%. Izquierda: WebP, 172 KB, <a rel="noopener, noreferrer" href="http://www.gstatic.com/webp/gallery/4.webp">original</a>. Derecha: JPEG, 251 KB, <a rel="noopener, noreferrer" href="http://www.gstatic.com/webp/gallery/4.jpg">original</a>.</span> </div></p>

<p>Hay que tener en cuenta que al redimensionar las imágenes se pueden haber introducido nuevas distorsiones (o correciones), así que lo más recomendable para apreciar totalmente las diferencias es <em>ir a las galerías que enlazo</em> con Opera o Chrome y ampliar las imágenes.</p>
<!-- BREAK 29 -->
<h2>Conclusiones</h2>

<p>Teniendo en cuenta que WebP está orientado a la web más que nada, que las pérdidas en calidad no son demasiado grandes y que la reducción de tamaño es considerable, parece que <em>es la mejor alternativa</em>. Más aún cuando es la que más características tiene de los tres formatos (transparencia, imagen con y sin pérdidas, animaciones).</p>
<!-- BREAK 30 -->
<p>El problema es el de siempre: la <em>compatibilidad</em>. Hasta que todos los navegadores lo soporten nativamente WebP no es una alternativa razonable al resto de formatos. Y aún en ese momento su adopción será lenta: el resto de programas de imagen (desde Paint hasta Photoshop) tendrán que soportarlo para que los usuarios empiecen a poder usarlo. </p>
<!-- BREAK 31 -->
<p>Además, esto no es como SPDY: este cambio <em>no es transparente a los usuarios</em>. No es algo entre desarrolladores web y de navegadores. Entran en juego muchos más actores, incluidos los usuarios normales, a los que habrá que cambiarles el chip de "WebP para imágenes en Internet". Y además habrá que contar con las aplicaciones que manejen algo de imágenes (no sólo las especializadas sino también aplicaciones móviles estilo Instagram o cualquiera que permita guardar/subir imágenes) para que cuenten con WebP como el formato por defecto.</p>
<!-- BREAK 32 -->
<p>Lo que Google está intentando hacer es muy loable, pero le va a costar muchos años plantear WebP como el estándar de imágenes por Internet.</p>

<p>Más información | <a rel="noopener, noreferrer" href="https://developers.google.com/speed/webp/">Especificación de WebP</a></p>
<script>
 (function() {
  window._JS_MODULES = window._JS_MODULES || {};
  var headElement = document.getElementsByTagName('head')[0];
  if (_JS_MODULES.instagram) {
   var instagramScript = document.createElement('script');
   instagramScript.src = 'https://platform.instagram.com/en_US/embeds.js';
   instagramScript.async = true;
   instagramScript.defer = true;
   headElement.appendChild(instagramScript);
  }
 })();
</script>

                    ]]>
                </description>
            </item>
                                <item>
                <title><![CDATA[JPEG XR, estandarizando HD Photo]]></title>
                <link>https://www.genbeta.com/multimedia/jpeg-xr-estandarizando-hd-photo</link>
                <guid>https://www.genbeta.com/multimedia/jpeg-xr-estandarizando-hd-photo</guid>
                <pubDate>Sun, 04 Nov 2007 19:49:34 +0000</pubDate>
                                         <dc:creator>Sacha Fuentes</dc:creator>
                                       <description>
                    <![CDATA[
                              <p>
      <img src="https://i.blogs.es/dea0c1/imagen-203/1024_2000.png" alt="JPEG&#x20;XR,&#x20;estandarizando&#x20;HD&#x20;Photo">
    </p>
    <p>Windows Media Photo, HD Photo y <strong>JPEG XR</strong>. Son los nombres que ha tenido el que se espera sea el próximo estándar en imágenes digitales, sucediendo al ubicuo JPEG. Llegará con la aprobación del mismo comité que estandarizó el anterior y de la mano de Microsoft, empresa creadora del formato.</p>
<!-- BREAK 1 -->
<p>Las ventajas de este formato serán un paleta de colores más amplia, capaz de capturar más detalles de los diferentes tonos y gradaciones, una mejor compresión que el JPEG actual y soporte para tratamiento de imágenes desde las cámaras de fotos.</p>
<!-- BREAK 2 -->
<p>Lo bueno de convertirse en un estándar será precisamente eso, el ser una estándar que cualquiera podrá implementar y no solamente un producto que Microsoft intenta imponer frente a sus competidores. Claro que habrá que esperar para su aprobación, ya que este es un proceso largo que podría durar más de un año.</p>
<!-- BREAK 3 -->
<p>¿Tendrá éxito este nuevo formato o le sucederá como a JPEG-2000? De momento, en Vista ya hay soporte para él y Microsoft ofrece un SDK para usarlo en otras aplicaciones de forma gratuita.</p>
<!-- BREAK 4 -->
<p>Vía | <a rel="noopener, noreferrer" href="http://www.news.com/8301-13580_3-9810024-39.html?part=rss&subj=news&tag=2547-1_3-0-20">News.com</a>.
En Genbeta | <a href="https://www.genbeta.com/2007/03/10-hd-photo-el-nuevo-formato-de-imagen-de-microsoft">HD Photo, el nuevo formato de imagen de Microsoft</a>.</p>
<script>
 (function() {
  window._JS_MODULES = window._JS_MODULES || {};
  var headElement = document.getElementsByTagName('head')[0];
  if (_JS_MODULES.instagram) {
   var instagramScript = document.createElement('script');
   instagramScript.src = 'https://platform.instagram.com/en_US/embeds.js';
   instagramScript.async = true;
   instagramScript.defer = true;
   headElement.appendChild(instagramScript);
  }
 })();
</script>

                    ]]>
                </description>
            </item>
            </channel>
</rss>
