Es difícil imaginar un sitio web sin imágenes, ¿verdad? ¡Las imágenes ocupan un lugar importante en la web y por varias razones! En términos de contenido, por ejemplo, le permiten representar con éxito la marca y crear más compromiso con los usuarios.

También es una forma eficaz de crear una atmósfera especial y hacer que tu sitio web sea más atractivo. Después de todo, ¡lo visual cuenta mucho!

Además la velocidad de carga es una de las principales herramientas de ajuste en el contexto de optimización de sitios web desde hace algún tiempo.

El tiempo perdido al acceder a una página es un criterio de evaluación fundamental tanto para los visitantes como para los buscadores, como Google.

Por lo tanto, el código más corto y comprimido o el uso de mecanismos de almacenamiento en caché también son parte de los enfoques de la solución probada para una presencia online rápida.

En este contexto, por ejemplo, el uso de imágenes comprimidas también es muy válido. Como elementos de design y de fondo, se incorporan en grandes cantidades en muchos proyectos, y a menudo se subestima su influencia en el tiempo de carga.

El gigante de los mecanismos de búsqueda, Google, se enfrentó a este problema en particular. Por eso, en 2010, presentó WebP, su propio formato de imagen libre de royalties para sitios más rápidos.

Pero, ¿qué es exactamente este formato web que nació del codec de video VP8? ¿Y cómo funciona esto en comparación con formatos establecidos como JPEG?

¿Qué es WebP?

El 30 de septiembre de 2010, Google anunció el lanzamiento de un nuevo estándar de código abierto para la compresión con la pérdida de imágenes de 24 bits en la web. Ese mismo año, adquirió On2 Technologies, la compañía detrás del formato de video VP8, que sirvió de modelo para el nuevo formato WebP.

Posteriormente, Google implementó el formato WebP con características como compresión sin pérdidas, transparencia (canal alfa) y animaciones. Este formato de compresión ha sido compatible con Chrome desde finales de 2010, pero también con Opera.

Estos dos navegadores se oponen, por tanto, a una multitud de otros navegadores que, hasta ahora, solo admiten WebP de forma experimental (como Safari y Firefox, cuyas versiones normales no lo admiten).

Todo el software para procesar y mostrar WebP está disponible de forma predeterminada bajo la licencia BSD. Google usa el formato, por ejemplo, en Chrome Web Store y en las aplicaciones móviles de Google +.

¿Qué ventajas ofrece el formato WebP?

Desde el principio, el objetivo del formato WebP ha sido reducir las imágenes al tamaño de archivo más pequeño posible en la web. Según Google, las imágenes y gráficos en formato WebP son aproximadamente 30% más pequeñas que los archivos PNG o JPEG con la misma calidad de imagen.

Si bien estos dos formatos web clásicos dependen de métodos de compresión diferentes (PNG sin pérdidas, JPEG con pérdidas), el formato WebP ofrece ambas posibilidades.

Esta flexibilidad hace que el formato sea adecuado para fotografías e imágenes y gráficos pequeños. Las características de compresión, así como otras propiedades centrales del formato WebP se pueden resumir de la siguiente manera:

• Compresión (con pérdida): la compresión con pérdida que utiliza el formato WebP se basa en la codificación de fotogramas clave VP8.
• Compresión (sin pérdidas): la compresión sin pérdidas mediante WebP depende de varias técnicas que transforman los parámetros y datos de la imagen.
• Transparencia: el formato WebP ofrece un canal alfa de 8 bits que también se puede utilizar para la compresión RGB con pérdida.
• Metadatos: el formato WebP puede contener metadatos EXIF y XMP que normalmente son generados por cámaras.
• Perfil de color: el formato de Google puede contener perfiles ICC incrustados (un conjunto de datos que describe el espacio de color).
• Animaciones: el formato WebP permite la grabación de secuencias de imágenes.

¿Cómo funciona la compresión WebP con pérdida?

La compresión con pérdida mediante WebP utiliza el mismo método que codec VP8 basado en bloques para predecir fotogramas, es decir, fotogramas individuales. Por tanto, cada trama se divide en segmentos más pequeños, también denominados macrobloques. En estos macrobloques, el codificador puede predecir el movimiento redundante y la información de color y restarla del bloque.

El resultado de esta compresión predictiva consiste en la información del bloque restante y la información redundante separada (que generalmente contiene muchos valores cero).

Cómo funciona la compresión sin pérdida con WebP

En el caso de la compresión WebP sin pérdida, el primer paso es transformar la imagen. Las siguientes técnicas se pueden utilizar en particular en el marco de esta transformación:

• Transformación basada en predicciones espaciales: WebP utiliza 13 modos de predicción diferentes que aprovechan el hecho de que los píxeles vecinos a menudo se relacionan entre sí. Por lo tanto, el valor del píxel actual se predice a partir de píxeles ya decodificados y solo se codifica el valor residual.
• Transformación de color: el propósito de la transformación de color es descorrelacionaar los vaores RGB de cada píxel individual. Para ello, la imagen se divide en bloques antes de que el rojo (R) se transforme en la base del verde (G) y el azul (B) en la base del verde y el rojo. Se mantiene el valor verde.
• Transformación por sustracción de verde: además de la transformación general de color general, es posible utilizar una variante en la que el valor de verde se resta de los valores de rojo y azul para cada píxel.
• Transformación basada en la indexación de colores: si se dispone de pocos valores de píxeles definidos, el formato WebP también ofrece la posibilidad de una transformación basada en la indexación de colores.
• Codificación de caché de color: la compresión sin pérdida de WebP puede usar fragmentos de imágenes vistos anteriormente para reconstruir nuevos píxeles. Si no hay fragmentos adecuados disponibles para este propósito, un caché de color local con los últimos 32 colores utilizados sirve como punto de partida.

¿Cómo usar WebP en WordPress?

Un gran obstáculo para usar WebP es que no es compatible con WordPress, que sigue siendo el CMS más utilizado en el mundo. Admite los formatos de imagen más comunes, como PNG, JEPG, ICO y GIF. Sin embargo, aún no ha integrado el formato WebP.

Por esta razón, si intentas hacer un upload de una imagen WebP en la biblioteca de medios de WordPress, el CMS mostrará un mensaje de error. Afortunadamente, las soluciones ya están disponibles para usuarios de WordPress que desean utilizar el formato WebP para optimizar el rendimiento de tu sitio web.

Para cada problema existe una posible solución. Uno es el uso de un plug-in. Existen plug-ins gratuitos, como el plug-in de WebP Express, que permite utilizar imágenes en el formato WebP en navegadores de Internet que no los admiten.

Además, también continúa ofreciendo imágenes en formatos estándar de otros navegadores (como Safari). Esta función es compatible con todas las imágenes del sitio, incluidos temas, galerías y biblioteca multimedia.

WebP para GIFs

Con soporte para imágenes en movimiento, WebP es una alternativa atractiva para los formatos GIF o APNG. Tiene ventajas como profundidad de color de 24 bits y canal alfa de 8 bits, además de una alta tasa de compresión. A diferencia de los formatos de la competencia, el formato WebP también permite la compresión de animación sin pérdida y con pérdida.

El WebP animado también funciona bien en términos de decodificación: dado que registra metadatos, ya sea que cada cuadro contenga o no valores alfas, el decodificador no necesita convertir individualmente para obtener esta información.

WebP o JPEG

Si Google es líder en la industria de mecanismos de búsqueda, JPEG o JPG es sin duda el líder cuando se trata de visualizar fotografías e imágenes de gran tamaño en la World Wide Web. Más de un cuarto de siglo después de su publicación, este formato de imagen es una parte esencial de la web.

Su principal ventaja frente a formatos como PNG, que también es habitual, pero que se utiliza principalmente para imágenes e ilustraciones más pequeñas, como logotipos, íconos, etc., es sin duda que JPEG ahorra espacio. Unidad de disco considerable debido a la compresión con pérdida.

Con respecto a este punto decisivo, WebP es aún más eficiente y flexible: por un lado, el formato de Google ofrece un método de compresión con o sin pérdidas.

Por otro lado, el ahorro de espacio en disco para imágenes de formato WebP supera al de las imágenes JPEG.

Las ventajas que se ven en la comparación de WebP sobre JPEG también se encuentran en la comparación entre WebP sobre GIF, donde el formato de Google también ofrece atractivas ventajas en términos de calidad y compresión.

El problema con WebP, es que no es compatible con navegadores como Firefox o Microsoft Edge. Hasta el momento, los usuarios de estos navegadores no ven imágenes y animaciones en el formato WebP, razón por la cual pocos operadores de sitios web eligen este formato.

¿Cómo abrir y convertir archivos WebP?

Actualmente, los archivos en formato WebP no se pueden abrir con los visores de imágenes tradicionales de Windows, Linux y macOS. Pero, si deseas ver animaciones o imágenes codificadas con WebP, ¡hay varias posibilidades disponibles!

Si tienes Chrome u Opera instalado en tu sistema, puedes arrastrar y soltar fácilmente el archivo afectado en una ventana abierta desde cualquiera de estos navegadores. Dado que ofrecen soporte nativo para WebP, podrás ver el contenido sin necesidad de ningún otro software.

Sin embargo, esta solución no es la más cómoda, especialmente cuando deseas ver múltiples imágenes o animaciones.

En el área del desarrollador WebP, Google también ofrece una gama completa de soluciones limpias para trabajar con WebP; cabe destacar que la biblioteca libwebp, que puedes utilizar para implementar la codificación y decodificación de WebP en sus propios programas.

Hasta el momento, WebP es el único formato que permite obtener imágenes claras con una calidad ideal. Por eso es tan importante considerarlo. ¡Esperamos que este contenido te ayude a aclarar tus dudas!

¡Continúa acompañando el blog de HostGator para obtener más contenidos sobre tecnología, negocios y marketing!