Guía completa para usar el formato de imagen WebP

WebP, o no oficialmente pronunciado como Weppy, Es un formato de imagen introducido por los desarrolladores de Google hace aproximadamente 5 años. Si usted es un diseñador web o un desarrollador que se esfuerza por reducir y optimizar el tamaño de su archivo de imagen, lo que WebP es capaz de hacer es poner una sonrisa en su cara.

En resumen, aquí están algunas de las cosas importantes que necesita saber sobre este formato de imagen no tan nuevo, pero que sigue siendo genial:

WebP pasa por la extensión de archivo de .webp.
WebP adopta compresión tanto con pérdida como sin pérdida..
Las imágenes perdidas de WebP son potencialmente 25-34% más pequeño que JPEG.
Las imágenes sin pérdida de WebP son potencialmente 25% más pequeño en comparación con PNG.
WebP admite transparencia sin pérdida, es decir, PNG con canal alfa.
WebP soporta animación. es decir, GIF animados.

En pocas palabras, WebP es capaz de reducir significativamente el tamaño de los archivos de imagen JPEG, GIF, PNG. Aquí hay una actualización sobre WebP que deberías revisar antes de que entremos en las cosas divertidas..

Un experimento

Lo mejor de los reclamos en la Web es que siempre podemos realizar experimentos para verificar la veracidad y la autenticidad. Aquí hay algunos experimentos que hice para descubrir ¿Qué tan pequeña puede llegar a ser una imagen? después de que se conviertan desde varios formatos de imagen (JPEG, PNG y GIF) a WebP.

1. JPEG - Imagen con pérdida

Aquí hay una imagen JPEG al azar que tomé de Pexels. Tamaño de archivo original - 165kb. ↓

La imagen está optimizada con JpegMini.. Nuevo tamaño de archivo - 101kb. ↓

Finalmente, la misma imagen se convierte a formato WebP.. Tamaño de archivo final - 70kb. ↓

En otros comentarios: Aquí están los diferentes tamaños de archivo si la misma imagen se convirtió a los siguientes formatos:

GIF - 285kb
PNG 8 - 241.2kb
Png 24 - 657.6kb

2. PNG - Imagen sin pérdida

Ahora, probemos con PNG con transparencia. (Fuente). Tamaño de archivo original - 587kb. ↓

Aquí está la imagen optimizada con tinypng. Nuevo tamaño de archivo - 278kb. ↓

Y por último, la imagen convertida al formato WebP.. Tamaño de archivo final - 112kb. ↓

3. GIF animado

Cuando se convirtió a WebP, una imagen JPEG pasó de 165kb a 70kb, mientras que una imagen PNG pasó de 587kb a 112kb.

Veamos cómo le va a un GIF animado:

Tamaño de archivo original - 6.8mb
Tamaño de archivo WebP - 6.3mb

Resumen:

Aquí hay una tabla para resumir todo el experimento:

	Con pérdida (JPG)	Sin pérdida (PNG)	GIF animado
Original	165kb	587kb	6.8mb
Optimizado con herramientas.	101kb	278kb	-
Formato webp	70kb	112kb	6,3 mb

Sin pensar mucho en los cálculos matemáticos, esas cifras indican una reducción sustancial del tamaño de los archivos y, a juzgar por las imágenes, realmente no se puede distinguir la diferencia en términos de claridad y resolución. Tamaño de archivo más pequeño y ligero con el mismo nivel de calidad de imagen, WebP definitivamente vale la pena analizarlo..

Convertir a WebP con herramientas

Si ya está a bordo y desea comenzar a publicar imágenes en formato WebP, analicemos cómo puede convertir sus imágenes fácilmente a este formato. Todos los métodos mencionados a continuación varían en términos de controles, facilidad de uso y conveniencia. Elige tu veneno.

WebPonizar para Mac

WebPonize es probablemente la forma más sencilla y rápida de convertir imágenes a formato WebP en Mac. Todo lo que necesita hacer es simplemente arrastrar y soltar sus imágenes en WebPonize y hará la conversión. Recibirá la salida, el tamaño anterior, el tamaño posterior y el% de reducción del archivo original. [Descargar WebPonize]

Webpconv para Windows

Si está ejecutando Windows, Webpconv es la aplicación que debe instalar. También viene en versión portátil para que pueda ejecutarlo de forma independiente en su unidad flash. [Descargar Webconv]

Convertir con líneas de comando

Si te sientes geek, es probable que desees suprimir la conversión usando líneas de comando.. cwebp convierte sus imágenes JPEG, PNG o TIFF en formato WebP y dwebp Los convierte de nuevo al formato PNG. Veamos como funciona esto..

Nota: La siguiente guía lo guía para Mac OS X. Para usuarios de Windows y Linux, haga clic aquí.

Configurando MacPorts en Mac OSX

Primero, asegúrese de tener instalado Xcode, luego siga estos pasos:

Descarga e instala MacPorts. Si ya tiene MacPorts instalados en su Mac, continúe con el paso 2.
Lanzamiento Terminal.
Tipo "sudo port selfupdate"y pulsa enter. Esto actualizará tus MacPorts a la última versión.
A continuación, escriba "puerto sudo instalar webp"y pulsa enter. Esto instalará libwebp (Biblioteca WebP).

Eso es. Ahora echemos un vistazo a Cómo convertir imágenes a WebP usando la línea de comandos..

Comandos para convertir / revertir

Aquí están los comandos para:

I - Convertir archivos de imagen JPEG / PNG a formato WebP

Formato: cwebp -q [calidad de imagen] [JPEG / PNG_filename] -o [WebP_filename]

Ejemplo:

cwebp -q 80 example.png -o example.webp

II - Covertir archivos de imagen WebP de nuevo a PNG

Formato: dwebp [nombre de archivo WebP] -o [nombre de archivo PNG]

Ejemplo:

dwebp image.webp -o image.png

Más: Si prefiere la conversión a través de otros medios, aquí hay instrucciones para usar las tareas Grunt y Gulp para convertir archivos JPG / PNG a WebP.

Convertir con herramientas en línea

Si no está pensando en instalar ninguna aplicación en su sistema operativo para realizar esta tarea, opte por estas herramientas en línea. Aquí hay algunos que he llegado a conocer:

Online-converter.com
Webp-convertor.com
Zamzar

Propina: Si google convertir webp en línea , probablemente encontrarás más opciones.

Plugin de Photoshop

Le agradará saber que también hay un complemento de Photoshop que le permite guardar imágenes en formato WebP a través de Photoshop. Este complemento es compatible con Mac OS X (CS 2- CS 6) y Windows (32 bits y 64 bits). [Descarga el plugin aquí.]

Nota: Pensé que deberías saber que lo probé en Photoshop CC. No funciono alli.

Soporte WebP Browser

Por último, vamos a hablar de compatibilidad. Actualmente, puede ver imágenes de formato WebP en los siguientes navegadores (ref):

Chrome / Chrome para iOS
Opera / Opera Mini

No tanta suerte para FireFox y Safari, que todavía no son compatibles con el formato WebP de forma nativa. Sin embargo, puede utilizar la biblioteca de Javascript WebPJS para convertir imágenes WebP en cadena dataURI en el sitio del cliente.

Volver a otros formatos de imagen.

Siempre es una buena idea usar un respaldo para evitar mostrar errores de imagen debido a navegadores no compatibles. En este caso, el respaldo será a la imagen en formato JPG o PNG. Así es como lo haces..

  source srcset = "example.webp 1x" type = "image / webp">

Para este codigo, images / complete-guide-to-using-webp-image-format_13.jpg se cargará si el usuario utiliza Firefox o Safari.

Vista previa de imágenes WebP

Puedes previsualizar las imágenes de WebP en los navegadores Chrome y Opera. Pero si desea hacerlo localmente en su máquina, necesitará algunas herramientas.

Los usuarios de Mac pueden usar WebPQuickLook para obtener una vista previa de las imágenes en formato WebP usando la función Vista rápida (con la imagen seleccionada o resaltada, presione la barra espaciadora).

Para los usuarios de Windows, WebPCodec mostrará una vista previa en miniatura de las imágenes de WebP en el Explorador de archivos. Se mostrarán los equivalentes de WebP y JPEG. En ciertos sistemas operativos con Windows (Vista, 7, 8), la imagen de WebP también se puede mostrar en el Visor de fotos de Windows.

Más: ReSCR.it entrega imágenes en formato WeBP automáticamente y está disponible si almacena sus imágenes con MaxCDN. (Lee mas)

Referencias adicionales

Convertir GIF animado a WebP
Cómo funciona WebP
Implementación de WebP mediante la negociación de contenido de aceptación
Más rápido, más pequeño y más hermoso web con WebP.
Implementar nuevos formatos de imagen en la Web
Documentación API WebP