Tanto JPG como PNG ofrec\u00edan una relaci\u00f3n calidad-tama\u00f1o mucho mejor que otros formatos de esa misma \u00e9poca, como BMP o TIF, y esto ayud\u00f3 mucho a su r\u00e1pida adopci\u00f3n. Sin embargo, 25 a\u00f1os despu\u00e9s el uso de la web ha cambiado, y los usuarios ahora tienen pantallas de super alta resoluci\u00f3n<\/strong> (desde Retina Display<\/em> hasta 4K) en sus PCs, smartphones y smartTVs, aunque el ancho de banda no ha crecido en la misma proporci\u00f3n ni al mismo ritmo<\/strong>.<\/p>\n\n\n\n Sabemos que el tiempo de carga de un sitio afecta su experiencia de usuario y reduce la tasa de conversiones<\/a> en \u00e9l. Al mismo tiempo, sitios con im\u00e1genes de mala calidad o de baja resoluci\u00f3n tambi\u00e9n son percibidos de manera negativa por sus usuarios. \u00bfC\u00f3mo crear sitios con im\u00e1genes de buena calidad sin aumentar el tiempo de carga?<\/strong><\/p>\n\n\n\n En el a\u00f1o 2010, la empresa On2 Technologies<\/strong><\/a> <\/strong>estaba trabajando en un nuevo codec <\/em>de video llamado WebM <\/strong>(<\/a>Web Multimedia<\/a><\/em>)<\/a> como una opci\u00f3n m\u00e1s abierta para la distribuci\u00f3n de video en la web, en contraste con otros codecs <\/em>de video que tienen restricciones legales por uso de patentes para migrarlas a m\u00faltiples plataformas.<\/p>\n\n\n\n Uno de los trabajos derivados del grupo de trabajo de WebM <\/strong>fue WebP<\/a><\/strong>, anunciado por primera vez el 30 de septiembre de 2010 como un nuevo est\u00e1ndar abierto para gr\u00e1ficos de color (true color<\/em>) con compresi\u00f3n para la web, capaz de producir archivos m\u00e1s peque\u00f1os con una calidad de imagen similar al esquema JPEG. <\/p>\n\n\n\n En 2010 Google <\/strong>adquiri\u00f3 a On2 Technologies<\/strong> y a finales de 2011 anunci\u00f3 el soporte de WebP <\/strong>para im\u00e1genes animadas (como hace el formato GIF), transparencia (canal alfa<\/em>), perfil ICC<\/strong>, soporta para metadatos en est\u00e1ndar XMP <\/strong>y soporte para creaci\u00f3n de im\u00e1genes de mosaico (teselado<\/em>) de hasta 16384\u00d716384 unidades.<\/p>\n\n\n\n De acuerdo a Google<\/strong>, las im\u00e1genes WebP <\/a>lossless <\/a><\/em>son 26% m\u00e1s peque\u00f1as en tama\u00f1os comparadas con su equivalente en PNGs<\/a>. Las im\u00e1genes WebP lossy <\/em>son entre 25 y 34% m\u00e1s peque\u00f1as que im\u00e1genes JPEG<\/a> con la misma calidad.<\/p>\n\n\n\n Las im\u00e1genes WebP lossless<\/em> tienen soporte para transparencia (tambi\u00e9n conocido como canal alfa<\/em>) al costo de solo 22% bytes adicionales<\/a>. Para los casos en que la compresi\u00f3n RGB es aceptable, las im\u00e1genes WebP lossy <\/em> tambi\u00e9n soportan transparencia, proveyendo archivos hasta tres veces m\u00e1s peque\u00f1os comparados con im\u00e1genes PNG de la misma calidad.<\/p>\n\n\n\n A pesar de que WebP ya tiene casi 10 a\u00f1os de publicado, no hab\u00eda sido una alternativa viable para sustituir archivos JPG o PNG debido a la falta de soporte en los navegadores web<\/a>, aunque eso est\u00e1 cambiando r\u00e1pidamente. <\/p>\n\n\n\n WebP es soportado actualmente por Google Chrome <\/strong>para desktop y mobile, Firefox<\/strong>, Opera <\/strong>y Edge<\/strong>; solo Internet Explorer <\/strong>y Safari <\/strong>no ofrecen soporte nativo para WebP todav\u00eda.<\/p>\n\n\n\n Una opci\u00f3n para dar soporte a navegadores que no soportan WebP nativamente, es utilizar la etiqueta HTML picture<\/strong>, con un respaldo de la imagen en JPG o PNG:<\/p>\n\n\n\n Los navegadores m\u00e1s antiguos que no soporten la etiqueta picture<\/strong> usar\u00e1n la referencia de la etiqueta img<\/strong>. <\/p>\n\n\n\n Muchas aplicaciones de dise\u00f1o gr\u00e1fico ya soportan el formato WebP <\/strong>tanto para edici\u00f3n como para exportaci\u00f3n. Sketch <\/strong>tiene soporte nativo para Web; en <\/a>Adobe Photoshop <\/a><\/strong>a\u00fan es necesario instalar un <\/a>plug-in<\/a> <\/em>para esta funcionalidad.<\/p>\n\n\n\n WebP es un formato para im\u00e1genes digitales de c\u00f3digo abierto<\/a>, lo que facilita la creaci\u00f3n de herramientas para crear im\u00e1genes en este formato. <\/p>\n\n\n\n La principal herramienta para conversi\u00f3n de im\u00e1genes JPG o PNG a WebP o viceversa es la herramienta de l\u00ednea de comando cwebp<\/strong>, disponible sin costo para Windows, Mac o Linux precompiladas<\/a>, usando Git<\/a> o un gestor de paquetes como Chocolatey <\/strong>(Windows<\/em>) o HomeBrew <\/strong>(Mac<\/em>)<\/p>\n\n\n\n Por ejemplo, para convertir todas las im\u00e1genes en una carpeta a WebP, se hace con este comando:<\/p>\n\n\n\n Tambi\u00e9n es posible hacer conversi\u00f3n de im\u00e1genes por lotes usando node.js<\/strong>, instalando antes los m\u00f3dulos imagemin <\/em>y imagemin-webp:<\/em><\/p>\n\n\n\n El script <\/em>en node.js<\/strong> ser\u00eda algo as\u00ed:<\/p>\n\n\n\n Para Safari <\/strong>en Mac o en iOS, o para los usuarios de Internet Explorer<\/strong>, se pueden utilizar servicios en la Nube como Cloudinary<\/a><\/strong>, que ofrece conversi\u00f3n de im\u00e1genes con un <\/a>API REST <\/a><\/strong>que autom\u00e1ticamente ofrece una imagen en formato WebP<\/a> si el navegador del usuario la soporta, o la cambia a JPG\/PNG si el navegador no la soporta, conservando la extensi\u00f3n de los archivos.<\/p>\n\n\n\n Adem\u00e1s de la documentaci\u00f3n oficial en el sitio de WebP<\/a>, el libro \u00abThe WebP Manual\u00bb de <\/a>Jeremy Wagner<\/a><\/strong> ofrece muchas t\u00e9cnicas para crear, convertir e implementar el formato WebP en sitios web y apps <\/em>m\u00f3viles.<\/p>\n","protected":false},"excerpt":{"rendered":" El formato WebP es una alternativa a JPG y PNG para im\u00e1genes digitales con la misma calidad y hasta 30% m\u00e1s ligeras<\/p>\n","protected":false},"author":1,"featured_media":339,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[70],"tags":[111,110,108,112,106,4],"class_list":["post-332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia","tag-formatos","tag-fotografia","tag-imagenes","tag-navegadores-web","tag-optimizacion","tag-web","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/guardar-webp-como-ong-jpeg.jpg?fit=1010%2C537&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":5,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/332\/revisions\/428"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/339"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}WebP, un nuevo formato para im\u00e1genes digitales<\/h3>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/Webp-logo-wordmark.svg-1.png?resize=150%2C150&ssl=1\"){kind=logo}
<\/a><\/figure><\/div>\n\n\n\nCaracter\u00edsticas y ventajas de WebP<\/h4>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/5.png?fit=640%2C470&ssl=1\")
Cr\u00e9dito: <\/strong>Luc Viatour<\/strong><\/a><\/figcaption><\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/comparacion-webp-con-transparencia.png?resize=640%2C184&ssl=1\"){kind=spacer}
Fuente:Galer\u00eda WebP de Google<\/a><\/figcaption><\/figure><\/div>\n\n\n\nSoporte de WebP<\/h4>\n\n\n\n
<picture>
<source srcset=\"img\/tesseractspace.webp\" type=\"image\/webp\">
<source srcset=\"img\/tesseractspace-old.jpg\" type=\"image\/jpeg\">
<img src=\"img\/tesseractspace-old.jpg\" alt=\"Texto Alt de la imagen\">
<\/picture> <\/pre>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/01-converting-images-to-webp-chapter.png?resize=430%2C222&ssl=1\")
Herramientas para conversi\u00f3n a WebP<\/h3>\n\n\n\n
> for \/R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )<\/code>
<\/pre>\n\n\n\n$ for F in *.jpg; do cwebp $F -o
basename ${F%.jpg}<\/code>.webp; done<\/pre>\n\n\n\nnpm install imagemin imagemin-webp<\/code><\/pre>\n\n\n\nconst imagemin = require(\"imagemin\");
const webp = require(\"imagemin-webp\");
imagemin([\"originales\/*.png\"], \"imagenes\", {
use: [
webp({
quality: 75
})
]
}).then(function() {
console.log(\"Todas la im\u00e1genes fueron convertidas\");
});
<\/pre>\n\n\n\nhttps:\/\/res.cloudinary.com\/drp9iwjqz\/image\/upload\/f_auto,q_auto\/v1508291830\/jeremywagner.me\/using-webp-images\/tacos-2x.jpg<\/pre>\n\n\n\n
Referencias<\/h3>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/webp-manual-ipad-small-opt.png?resize=150%2C150&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n