06/01/2016

WebP: construyendo el futuro de las imágenes en la Web

WebP: construyendo el futuro de las imágenes en la Web

Los formatos de imagen más habituales en las páginas web tienen una larga historia detrás. Las primeras versiones oficiales de GIF, JPEG, PNG y SVG nacieron entre 1987 y 2001. Pero dentro de poco podríamos estar integrando un nuevo jugador a esta lista: WebP, un formato de imagen desarrollado por Google con soporte para transparencia y animación, y orientado a generar archivos de bajo peso.

Casi exclusivamente, las imágenes en WebP son resultado de la conversión desde otro formato (como los antes mencionados), y solo pueden consumirse de forma nativa a través de browsers compatibles (mayormente, Chrome y Opera). No existen cámaras de fotos ni editores de imágenes que produzcan gráficos directamente en WebP (sin un proceso de conversión). Y, de manera nativa, Android es el único sistema operativo que puede mostrarlos fuera de un browser, como si se tratara de imágenes en un formato tradicional. Sin embargo, existen funciones de PHP, plugins y codecs que salvan en parte estas falencias. WebP apareció en 2010 y todavía está muy lejos de alcanzar su madurez.

¿Para qué necesitaríamos convertir una imagen en GIF, JPG, PNG o SVG a WebP? Para reducir el tamaño del archivo. En muchas páginas web, las imágenes representan la mayor parte de los bytes que habrán de cargarse. Por lo tanto, reducir su peso mejorará drásticamente la velocidad de carga. WebP ofrece dos tipos de compresión:

  • Compresión sin pérdida (lossless). Se reduce el tamaño del archivo sin generar ninguna pérdida de calidad.
  • Compresión con pérdida (lossy). Se reduce el tamaño del archivo en mayor medida que con lossless, pero a cambio de sacrificar calidad.

De acuerdo con Google, las imágenes WebP con compresión lossless son un 26% más livianas que las PNG, mientras que las imágenes WebP con compresión lossy son entre un 25% y un 34% más livianas que las JPEG. El impacto sobre la velocidad de carga es tan importante, que empresas con altísimos volúmenes de tráfico están utilizando WebP para reducir el consumo de ancho de banda de sus servidores (y, con ello, el gasto de dinero que representa).

Pero no todo son ventajas. En 2013, Facebook empezó a convertir automáticamente las imágenes que subían los usuarios a WebP, mostrando esa versión en los navegadores que fueran compatibles (y JPEG en los otros casos). Las críticas no tardaron en llegar. Muchos usuarios, al descargar fotos de Facebook en su computadora para verlas offline, descubrían que estaban en un formato que no era reconocido por su sistema operativo, por lo que, a diferencia de las imágenes comunes (que pueden verse y editarse fácilmente con aplicaciones de escritorio), solo podían verlas a través del browser. Facebook tuvo que dar marcha atrás con la medida.

En aplicaciones donde los usuarios suben imágenes, la conversión a WebP es un arma de doble filo. Si bien la imagen resultante será más liviana para descargar, el proceso de conversión es complejo y exige un mayor trabajo por parte del servidor. En otras palabras, lo que se gana en ancho de banda se pierde en procesamiento de datos.

Por último, los resultados de la conversión también han sido objeto de crítica. En cuanto al formato JPEG, la conversión lossless a WebP puede generar imágenes incluso más pesadas que las originales, mientras que la conversión lossy puede causar pérdidas de calidad bastante apreciables para el ojo humano.

Conclusión

WebP combina muchas de las ventajas de JPEG, GIF y PNG en un mismo formato, por lo cual podría alcanzar una gran importancia en el futuro de la Web. Sin embargo, todavía tiene un bajo soporte cross-browser y debe resolver los muchos problemas de su algoritmo.

Enlaces externos

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce