Entradas

WebP en WordPress (Nuevo formato de imágenes)

Lo primero que debes saber antes de empezar a leer este artículo es qué es WebP. WebP es un formato gráfico desarrollado por Google lanzado el 30 de septiembre de 2010. Este formato para imágenes es hermano del WebM para vídeos.

Se utiliza para imágenes optimizadas, y no tiene problemas con la pérdida de calidad de imagen en la compresión. La compresión con pérdida, o también conocida como lossless del formato WebP, es algo que se conoce como codificación predictiva y se usa para reducir el tamaño o espacio que ocupa el archivo.

 

¿Qué navegadores web soportan WebP?

Para que se puedan ver bien las imágenes en este formato y funcionen correctamente, es necesario que el navegador tenga la capacidad para soportarlas. Actualmente, no todos los navegadores son compatibles con WebP, por lo que no es todavía universal.

Los navegadores que gozan de mayor popularidad en el usuario medio sí que soportan estas imágenes, como son Chrome, Firefox, Edge y Opera, tanto para escritorio como para teléfono móvil.

Pero uno de los que se sigue resistiendo a este formato es Safari. Ninguna de sus dos versiones son capaces de soportar las imágenes en este formato. Apple hizo algunas pruebas con el soporte del formato WebP para este navegador, por el año 2016, pero hasta ahora no han habido más intentos.

Internet Explorer no puede soportar el formato WebP, pero si lo consigue Edge.

Lo normal es que en torno al 80% de los usuarios de Internet usen un navegador que soporte este formato de imagen. Pese a todo, el otro porcentaje es demasiado grande como para no hacerle caso.

 

Comparación entre los diferentes formatos de imagen

Formatos de imágenes más habituales:

  • JPEG: que realiza una mayor compresión de imagen con la falta de transparencia.
  • PNG: en el que la imagen es más pesada.
  • GIF: con mayor peso de imagen pero con animación y transparencias.

WebP rompe las barreras de los otros formatos. Pues es capaz de soportar transparencias y animación, logrando además una mejor compresión sin pérdidas en la mayor parte de casos.

El tiempo para descomprimir que usa WebP es reducido en comparación con el resto de formatos. Gracias a esta cualidad, la descarga de imágenes de este formato será más rápida y llegará antes al usuario que cuando se trate de JPEG u otros. Para una imagen que ocupa poco espacio, esto apenas se nota. Pero si la resolución es muy amplia, entonces si conviene tener este formato para que no se pierda calidad.

Según las pruebas que ha llevado a cabo Google, las imágenes WebP son alrededor de un 25% más pequeñas que las JPG y hasta un 26% que las del formato PNG.

Las pruebas de Google se basan en un montón de imágenes, más de 11.000, entra las que se incluyen algunas tan conocidas como las de la suite de imágenes true color de la marca Kodak.

 

Instrucciones para usar las imágenes WebP en WordPress

Hay varias maneras de configurar WordPress para que pueda realizar la carga de imágenes en WebP, aunque lo primero será realizar la conversión y después prepararlas de manera eficaz según el navegador con el que se trabaje. Si lo que se desea es acelerar un sitio de WordPress, esta forma de reducción de tamaño en las imágenes va a permitir una buena velocidad de carga en la web.

Debido a que no el 100% de los navegadores del mercado son compatibles con este formato de imagen, no se puede cargar de manera simple un archivo WebP directo a la biblioteca de medios y usarlo en WordPress, tal y como se hacía con los formatos JPEG y PNG.

Son muchos los usuarios de Internet que utilizan navegadores que son incompatibles con el formato de imágenes de WebP. Si lo que hacemos es convertir de manera directa la imagen a WebP y usarla en el contenido del blog, los usuarios que visiten el sitio mediante navegadores no compatibles no podrán ver las imágenes subidas.

Pero para todo hay una solución, y en esto no va a ser menos. En lugar de subir directamente la imagen en este formato, se puede usar un plugin para convertir las imágenes originales al nuevo formato y ofrecer la posibilidad de mostrar la fotografía en su formato original para los que no tengan compatibilidad con WebP. Pongamos un ejemplo para que se entienda mejor:

Al subir un archivo en JPEG a un sitio web WordPress, el plugin hace la conversión del archivo al formato de imagen WebP para aquellos usuarios que utilizan navegadores populares como Chrome o Firefox. Para los que usan Safari u otros navegadores no compatibles, lo que hace es mostrar la imagen en su formato original. Así, todos pueden ver la imagen correctamente independientemente del navegador que usen.

 

Webs y herramientas que convierten imágenes a WebP

Para la optimización y conversión de una imagen a WebP, uno de los plugins más utilizados es Imagify, perfecto para optimizar imágenes para WordPress. Es realmente potente, lo desarrolló y lo mantiene WP Media, señal de garantía, pues son desarrolladores, por ejemplo, de WP Rocket.

imagify webp

También existen páginas webs que realizan la conversión de imagen a formato WebP. Una de ellas es convertio.co. Con este tipo de programas, la calidad del formato es casi automática. En otros, como Photoshop, podrás escoger alguna variable, como la de cuánto reducir y el cómo hacerlo antes de pasarlo a WebP.

convertio webp

Los pasos para realizar la conversión en esta web de manera segura son los siguientes:

  1. Subir los archivos en otro formato, ya sea desde tu unidad de memoria o desde Google Drive.
  2. Escoger la conversión a WebP como formato de salida.
  3. Realizar la descarga de manera inmediata y guardar el archivo.

Otra herramienta muy útil con la que se puede seleccionar el formato WebP para la reducción de imágenes es “Light Image Resizer“. Es una herramienta perfecta para guardar imágenes digitales en el disco duro, gracias a la posibilidad de reducción, compresión y conversión al formato WebP.

light image resizer webp

 

El mejor plugin de WordPress para WebP

ShortPixel es uno de los plugins más conocidos para optimizar las imágenes de WordPress. Muy útil para redimensionar y comprimir de manera automática los archivos de imagen que se suben a la galería de medios. Además, ShortPixel también sirve para la conversión automática de imágenes al formato WebP.

Shortpixel WebP

Con este plugin se pueden optimizar hasta un centenar de imágenes al mes de manera gratuita. Tras este plan gratuito, lo normal es continuar pagando según las necesidades de imágenes que necesite cada cliente, por paquetes de 5.000 imágenes y hasta las 10.000. Todo esto funciona por créditos más que por cantidad de imágenes. Por lo que cada tamaño de imágenes de WordPress que se optimiza va a contar como un solo crédito. Por lo que si lo que se desea es la optimización de varios tamaños de miniaturas de imágenes, una sola foto puede usar más de un crédito. No existen limitaciones de tamaño de archivo para la imagen. Se pueden repartir los créditos de este plugin por todos los sitios webs de los que disponga cada usuario.

Para poder usar el plugin y servir las imágenes en formato WebP en WordPress, lo que hay que hacer es instalar el plugin e incorporar la clave personal API, que se consigue con el registro en ShortPixel.

Una vez instalado, lo primero es ir a la pestaña “avanzado” y pulsar sobre la pestaña de WebP, marcando esta casilla para entregar las distintas versiones de WebP. Hay que marcar sobre la parte de radio y así poder usar la sintaxis de la etiqueta picture, para después dejar el valor predeterminado mediante la selección de ganchos de WordPress. Lo último será guardar los cambios.

Cómo optimizar imágenes en WordPress + 12 herramientas gratis

Antes de empezar a optimizar imágenes WordPress es necesario tener algunos conocimientos básicos sobre los formatos de imagen y saber qué es optimizar una imagen. Los dos formatos más comunes en Internet son PNG con extensión .png y JPG con extensión .jpg. JPEG es el mejor formato para fotos, imágenes con degradados e imágenes con millones de colores. Por otro lado, PNG es mejor para imágenes de color limitadas, como logotipos e imágenes con transparencia.

La optimización de un archivo es el proceso de disminuir el tamaño para acelerar el tiempo de carga. Esta compresión puede ser con o sin pérdida.

ejemplo optimizar imágenes wordpress

El siguiente ejemplo te mostrará lo importante que es elegir el formato de imagen correcto para optimizar imágenes sin perder calidad. Vamos a guardar la imagen que ves arriba en ambos formatos. La imagen PNG tiene un tamaño de 967KB, al cambiar la extensión a .jpg el tamaño se reduce en más de un 80%. No hay una forma más sencilla de ahorrar tanto espacio con tan poco esfuerzo. Abajo tienes la comparativa de ambas imágenes.

comparación formatos

Ahora que sabes algo más sobre optimizar fotos WordPress, veamos cómo puedes mejorar tus fotos. Puedes encontrar numerosos programas para reducir el tamaño de las imágenes, aplicaciones e incluso plugin wordpress para optimizar imágenes, que reducirán el tamaño de tus imágenes. Tras probar muchas de ellas, te dejamos a continuación una selección de las mejores.

Plugins para optimizar imágenes WordPress

1. Smush Image Compression and Optimization

wp smush

Comencemos esta lista con el conocido WP Smush, el plugin para comprimir imágenes wordpress más rápido, más fácil de usar y de mejor rendimiento para WordPress.

WP Smush te permite comprimir tamaño imagen JPEG, GIF y PNG de hasta 32MB individualmente o en bloque, hasta 50 archivos en su versión gratuita. El plugin funciona eliminando metadatos de archivos JPEG, optimizando la compresión JPEG, convirtiendo ciertos GIF en PNG indexados y eliminando los colores no utilizados de las imágenes indexadas. También puedes configurar la optimización automática para que todas las imágenes nuevas se compriman automáticamente cuando se suban a tu sitio.

Por defecto, WP Smush usa técnicas de optimización sin pérdida, pero su versión pro incluye una opción Super Smush que optimiza cada imagen varias veces utilizando técnicas de compresión con pérdida. Este método puede reducir los tamaños de archivos casi a la mitad con una pérdida mínima de calidad.

2. EWWW Image Optimizer

EWWW optimizer

El plugin EWWW Image Optimizer optimiza de manera automática y sin pérdidas tus imágenes a medida que las subes a tu sitio. También puedes optimizar imágenes WordPress que hayas subido previamente.

Una de las ventajas de EWWW Image Optimizer es que el proceso de reducir el peso de las fotos se lleva a cabo en sus propios servidores de forma predeterminada, en lugar de conectarse a un servicio externo. Esto significa que las tareas de optimización requerirán menos tiempo, lo que puede ser útil cuando se abordan bibliotecas de medios grandes, ya que los archivos de tamaño medios (<1 MB) deberían tardar unos segundos como máximo.

Este proceso de bajar la calidad de las fotos local es posible al incluir varios archivos binarios precompilados, que deben instalarse desde tu carpeta local de WordPress. EWWW Image Optimizer también ofrece una función de optimiza imágenes WordPress en la nube, que aunque demora un poco más, te permite omitir este proceso de configuración.

Otra buena característica de este plugin es la capacidad de convertir tus imágenes al formato de archivo que produce el tamaño de imagen más pequeño. También puedes aplicar opcionalmente reducciones con pérdidas para imágenes PNG.

3. ShortPixel Image Optimizer

shortpixel

ShortPixel no solo tiene buenas puntuaciones en lo que respecta optimizar imágenes online, sino que también incluye una interfaz agradable, que nunca está de más. Después de instalar y activar el plugin, cada JPG, PNG y GIF que cargues se optimizará automáticamente. Este plugin, a diferencia de los anteriores, no te permite desactivar esta opción.

Incluye una herramienta de optimización de fotos masiva, y las imágenes individuales se pueden comprimir abriendo tu Biblioteca multimedia en el formato de vista de lista, donde cada archivo aparecerá con un botón individual “Optimizar ahora” junto a él.

Este compresor de imágenes para web te permite elegir entre métodos de compresión con pérdida y sin pérdida, utilizando el primero de manera predeterminada. Optimiza todas las miniaturas de imágenes creadas por WordPress durante el proceso de carga, es capaz de eliminar datos EXIF ​​(o conservarlos, como prefieras), puedes establecer una resolución máxima para tus imágenes y, lo mejor de todo, guarda automáticamente una copia de seguridad de cada imagen que cargues en una nueva carpeta.

Para configurar el plugin wordpress para optimizar imágenes, ShortPixel, se te pedirá que ingreses una clave API durante el proceso de activación, que se te proporciona de forma gratuita al registrarte con tu correo electrónico a su lista de suscripción y no requiere ninguna información adicional. Un registro gratuito te da derecho a 100 compresiones de imágenes por mes.

Aplicaciones para reducir el tamaño de tus fotos

4. Light Image Resizer

Ya te hablamos en detalle en otro post sobre esta herramienta. Simplemente haz clic aquí para verlo y acceder a toda la información sobre cómo utilizar Light Image Resizer para optimizar imágenes WordPress.

light image resizer

5. Photoshop

Photoshop es el editor de gráficos por excelencia. Obviamente, podrás reducir el tamaño de tus fotos muy fácil. Nosotros te enseñaremos cómo reducir una imagen en Photoshop.

En primer lugar, después de cargar tu fotografía, dirígete a la opción del menú superior Imagen > Tamaño de Imagen.

ajustes tamaño photoshop

Modifica las dimensiones de tu imagen y la resolución. Te recomendamos, al igual que en Light Image Resizer, dejar la resolución en 72 píxeles/pulgada. Aplica los cambios. Por último, guarda tu imagen con Archivo>Exportar>Guardar para Web, esta opción reducirá aún más el peso de tu imagen. Con solo hacer estos pequeños ajustes conseguirás optimizar fotos WordPress en un 50%.

Si no puedes comprimir imágenes para web online en Photoshop, por que no tienes licencia, puedes utilizar Paint. Inserta la imagen y selecciona la opción Cambiar tamaño. El nivel de reducción no es tan elevado, pero menos es nada.

imagen paint

Herramientas online de compresión

6. TinyPNG

tinypng

TinyPNG es una de las herramientas de compresión de imágenes más utilizada y la más sencillas de usar. No hay opciones que puedan marearte, solo sube las imágenes y se comprimirán. Con esta herramienta online, puedes cargar hasta 20 imágenes con un tamaño de 5 MB.

7. Web Resizer

web resizer

Con WebResizer, puedes reducir el tamaño de la foto hasta un 60-70% en la mayoría de los casos. Lo mejor de esta herramienta es que acepta casi todos los formatos de imagen, puedes optimizar archivos jpg, png o incluso gif. También puedes recortar o aplicar bordes a la imagen, elegir las dimensiones y establecer valores de calidad, exposición, saturación, contraste, etc.

8. Compressor.io

compressor

Compressor.io tiene el potencial de convertirse en uno de los mejores programas para reducir el tamaño de las imágenes, pero tiene un gran defecto: actualmente no hay ninguna opción para carga masiva, lo que significa que solo puedes comprimir 1 imagen cada vez. Aparte de eso, es gratis, fácil de usar y con dos opciones de compresión: con pérdidas o sin ellas.

9. Optimizilla

optimizilla

Optimizilla es otro reductor de fotos online simple pero poderosa. Es de uso gratuito y tiene la opción de subir de forma masiva hasta 20 imágenes. Para obtener la mejor relación de compresión/calidad, deja la configuración de calidad en 90, tal como está de forma predeterminada. Si quieres incrementar la compresión aún más, simplemente modifica esta configuración y verás cambios en la calidad de inmediato.

10. ImageSmaller

imagesmaller

ImageSmaller tiene el mismo defecto que Compressor.io, no tiene opción para la carga masiva. Sin embargo, tiene uno de los límites de carga más grandes, hasta 50 MB. Si tienes archivos muy grandes que quieres optimizar, ImageSmaller podría ser el programa para bajar resolución a las fotos perfecto para ti.

11. ImageOptim

ImageOptim

Compresor de fotos tanto para Windows como para Linux, es un reductor de imágenes excelente para publicar fotos en web. Es un optimizador de imágenes wordpress ideal para evitar exponer información privada. Ya que elimina la posición del GPS y el número de serie de la cámara. Con este compresor se pueden optimizar carpetas de imágenes completas solo arrastrando, y cuando se finaliza el proceso de optimización, ImageOptim  indica cuánto se ha reducido el archivo.

12. Iloveimg

iloveImg

Por último, puedes comprimir imágenes para web online con Iloveimg que proporciona el máximo nivel de compresión sin bajar la calidad de las imágenes. Una vez que tus imágenes han sido reducidas, te muestra el porcentaje de compresión.

quitar peso a imágenes

Ventajas de optimizar las imágenes de tu sitio web

  • Tu sitio web será más rápido.
  • Tu puntuación en Google PageSpeed mejorará.
  • A Google le gustan las páginas web que cargan rápido, por lo que obtendrás mejor posición en motores de búsqueda.
  • Tu porcentaje de rebote será más pequeño y atraerás más visitantes a tu página.
  • Necesitarás menos capacidad de almacenamiento en tus servidores y gastarás menos recursos.
  • Ahorrarás dinero de la tarifa de datos móviles de los usuarios que te visiten.

Todas estas herramientas son muy útiles si te dedicas al Diseño Gráfico profesional. Si nos hemos dejado alguna que utilices habitualmente, háznoslo saber en los comentarios.