Optimizando WordPress mediante el uso de imágenes en formato webp

Este es un ejemplo de los artículos que semanalmente escribo de forma exclusiva para los mecenas de la Comunidad.

Si quieres recibir contenido exclusivo como éste directamente en tu bandeja de correo, revisa las opciones de mecenazgo de esta página.

*******

Un nuevo mes, y por tanto, un resumen de todo lo que hemos estado haciendo en este proyecto.

Por resumir, ha sido un mes bastante paradito en cuanto a mecenazgo. Dos nuevos mecenas y uno que se nos ha ido. Además, y ya como viene siendo habitual, dos mecenas han tenido problemas a la hora de realizar el pago, por lo que no aparecerán reflejados por aquí. Todo hace por tanto que queden unos beneficios ligeramente por debajo de los del mes pasado. Las gráficas con los datos en bruto, como viene siendo normal, se las he enviado esta mañana a todos los miembros de la Comunidad.

Pero quería aprovechar el informe de transparencia de este mes para contarte cómo y por qué he decidido migrar al formato de imagen webp en la web, en vez de usar, como hasta ahora, los ya tradicionales jpg y png.

Un cambio que, como verás, nos permite arañar unas décimas de segundo más en la carga de la página.

Vamos al lío.

Sobre el impacto de las imágenes en el rendimiento de la web

Si te fijas, en entornos digitales históricamente las fotos e imágenes han tenido siempre el formato JPG, JPEG o PNG.

Cada uno tiene sus particularidades, y a nivel de optimización pasa exactamente lo mismo (por resumirlo mucho, el JPG suele ser más óptimo en cuanto a peso a no ser que la imagen tenga muy pocos colores, donde el PNG suele acabar ganándole).

Y el peso en una página web es crítico. Es más, basta simplemente con fijarse en los datos de httparchive.org (EN) para darse cuenta que:

• Las imágenes y los vídeos son, de lejos, los elementos de una página web que más ralentizan la carga de un servicio online.
• De media el 63% de los datos que descargamos al entrar en una web vienen dados por estos elementos. Más de la mitad, que se dice pronto.
• Este porcentaje ha ido sistemáticamente creciendo en estos últimos años.

Por esa razón, de cara a ofrecer una mejor navegación, los administradores de servicios digitales tenemos que dedicar los recursos necesarios para, en la medida de lo posible, optimizar la carga de nuestras páginas.

Ya he explicado hace tiempo por aquí cómo podemos optimizar la web cargando las imágenes en paralelo con diferentes subdominios (algo que, por cierto, con HTTPs ya se ha quedado obsoleto), utilizando un CDN, apostando por hostings y servidores con los últimos protocolos, y por supuesto, con el cacheado.

Hoy vengo con un tutorial sobre cómo migrar a webp.

¿Por qué he pasado todas las imágenes de mi web a webp?

Con esto en mente, tenía ya desde hace tiempo ganas de tantear una migración completa del JPG habitual a WebP, un formato de reciente creación (apenas lleva unos añitos con nosotros, y fue creado por Google tras el aprendizaje que obtuvieron al diseñar el formato de compresión para vídeo WebM (EN)) que incluye compresión con y sin pérdida además de un canal alpha de 8-bits para las transparencias.

Esto significa que recoge lo mejor del JPG (la compresión) y del PNG (las transparencias), pero además ocupa menos. Según los datos de la propia Google (EN), en torno a un 26% menos que un PNG y entre un 25 y un 34% menos que un JPG.

Como todo no podía ser perfecto, tiene un pero, y es que aunque el soporte a día de hoy es prácticamente absoluto, todavía hay navegadores (sobre todo los de usuarios que llevan años sin actualizarlos) en los que este formato no es compatible.

Pero vaya, que como veremos a continuación, es posible utilizar webp y dejar por código un sistema para que si algún usuario con un navegador obsoleto entra en nuestra página siga viendo las antiguas fotos JPG y PNG.

Y ahora te preguntarás.

¿Se nota tanto el cambio?

Pues para que te hagas una idea, del PNG original que obtuve sacando una screen a mi pantalla para ponerlo de imagen destacada en este artículo, pasándolo por el sistema de conversión de Photoshop (la opción de Exportar > Guardar para web) que siempre realizo antes de subir una imagen a mi página, pasé de un peso de 1,76MB a 119,2Kbs (puedes verlo en la imagen superior).

Pero es que al pasar el JPG YA OPTIMIZADO a WebP he ganado, además, otro 59% más, quedándome el peso total en 14Kbs.

De una imagen de 1,76MBs, a otra de 14Kbs que al ojo humano es directamente la misma.

Esto ahora multiplícalo por el número de imágenes que puede contener una página. Y ya no solo por las imágenes incrustadas dentro del propio contenido de la web, sino también por todos los iconos y demás elementos gráficos que tenga la plantilla de WordPress, por los banners que hayas puesto…

En total he ahorrado de peso de la web con el cambio a WebP 337MBs. Y recalco que yo ya hacía optimización antes de subir la imagen, y luego le pasaba automáticamente otra optimización dentro de WordPress.

Imagínate si como la mayoría de administradores subiera las imágenes en bruto.

¿Cómo puedo pasar a utilizar WebP en WordPress?

Pues aquí empieza la chicha, y es que hasta nuevo aviso el sistema de medios de WordPress no reconoce WebP como formato admisible, y por tanto, si intentamos nosotros a mano subir una imagen en formato WebP nos dirá que no es posible.

Para solucionarlo basta con incluir dentro del archivo functions.php de nuestro tema el siguiente código:

 //poder agregar fotos webp
    add_filter('upload_mimes','webp_mime_type');

    function webp_mime_type($mimes){
    return array_merge($mimes, array(
        'webp' => 'image/webp'
    )); 
    } 

Hecho esto, ya podemos subir a mano imágenes WebP.

Y para crearlas podemos utilizar servicios online como Online-Convert.com (ES).

Esto te va a servir seguramente para algún caso en particular (una imagen, por ejemplo, que tengas tú incrustada en CSS o en algún fichero y que por tanto no pase directamente por la galería de WordPress), pero la idea es que nosotros no tengamos que hacer nada más que subir nuestro JPG o PNG a WordPress y un plugin se encargue automáticamente de hacer el cambio.

En mi caso para ello he utilizado Imagify (EN), que tiene una versión gratuita que es capaz de migrar y optimizar al nivel que le hayamos parametrizado de antemano las imágenes a WebP automáticamente, teniendo en cuenta que tenemos una cuota máxima de 25MBs por mes.

Puesto que yo ya tenía cerca de un giga de imágenes subidas, he preferido directamente pagar una versión de pago único (10 dólares, aunque hay versiones periódicas si tenemos un volumen muy alto de subida de fotografías) que me incluía un giga de imágenes para que fuera optimizando también todas las imágenes de mi galería.

En los ajustes del plugin elegí la versión de optimizado Ultra, que es la que más optimización realiza (tienes otras dos para elegir, y también puedes definir una serie de variables extra según queramos más o menos optimización, pudiéndonos hacer una idea del resultado final en un ejemplo que nos ponen), y realmente la diferencia visual es prácticamente nula (si tuviera una página de fotografía todavía…).

Durante el proceso de cambio tienes que tener abierta la página para que el plugin realice su trabajo. Conmigo se tiró casi un día entero (ten en cuenta que tengo casi 4.000 imágenes subidas a esta web). Al término borré el caché de mi página y voilà, todas las imágenes de la web ya cargan en un formato webp.

Y lo mejor de todo es que a ojos del usuario no hubo cambio alguno, pero a nivel de recursos pesan bastante menos (ergo la web carga más rápido), y también el formato de invocación de HTML de las imágenes ha cambiado al siguiente:

<picture>
   <source srcset=“URL DE LA IMAGEN WEBP" type="image/webp">
   <img src=“URL DE LA IMAGEN EN JPG O PNG" alt="DESCRIPCIÓN DE LA IMAGEN"> 
</picture> 

Así matamos dos pájaros de un tiro: Por un lado cargamos la imagen WebP, y por otro nos aseguramos de que si alguien con un navegador obsoleto no puede reproducir el formato WebP, podrá cargar la imagen en el formato antiguo invocando a <img>.

Así que lo dicho, por aquí mi recomendación para todos los que tenéis proyectos online.

Hace unos años era un cambio un poco arriesgado (Firefox, por ejemplo, ha tardado bastante en compatibilizar este formato en su sistema), pero a día de hoy es ya un estándar de facto, así que hay pocas excusas para no implementarlo en tu WordPress o en el proyecto que te traigas en mano, utilices la tecnología que utilices.

Y si este artículo te ha servido para llevar tu proyecto al siguiente nivel te dejo, como siempre hago con cada informe mensual, con la descripción de mi sistema de micromecenazgo. La mejor manera de asegurarte de que pueda seguir generando este tipo de contenidos.

¡Muchas gracias por el apoyo, y nos seguimos leyendo!

Un resumen de la iniciativa

Esta parte va dirigida a aquellos que después de haber leído lo anterior quieren saber más del asunto, con las razones y la manera de apoyar este proyecto, y que se resumen en:

• Por un lado, ofrecer más a los que estuvieran más sedientos de información de valor, en una intranet, con una newsletter exclusiva de ciberseguridad, y con un grupo privado de Telegram en el que estar en contacto directo.
• Por otro, buscar esa ansiada independencia analítica que sigue siendo pilar de mi manera de entender este medio, y que lamentablemente, cierra aún hoy en día más puertas de las que abre.
• Y por último, encontrar esa financiación, aunque sea baja, que permitiera mantener el proyecto convenientemente suministrado de buen contenido, indistintamente de mis ingresos como consultor.

Además, estos ejercicios de transparencia, con una periodicidad mensual, se los envío primero a los miembros de la Comunidad, y pueden ser consultados en la etiqueta #TransparenciaPY.

El mecenazgo por niveles

En PabloYglesias gestionamos todo el sistema de mecenazgo mediante la plataforma Patreon, que es probablemente la más conocida, y que opera en todo el mundo.

¿Cómo funciona? Pues tú te “suscribes” a uno de los niveles de mecenazgo de mi página mediante tu cuenta de PayPal o tu tarjeta de crédito, y periódicamente Patreon te cobrará la cuantía del nivel al que perteneces, pudiendo cambiarlo o parándolo cuando quieras desde tu perfil de Patreon.

Puedes revisar todos los niveles de mecenazgo que tengo actualmente en la página de suscripción.

Nivel INICIADO

Este nivel es como su propio nombre indica el inicial, y de hecho es el mejor si lo que buscas es:

• O bien apoyar a este proyecto.
• O bien recibir además algo de contenido extra.

Los miembros del nivel Iniciado tienen acceso al grupo privado de Telegram, en el que prácticamente a diario debatimos sobre temas y solucionamos las dudas que tienen los integrantes. Y además, cada martes te enviaré el contenido exclusivo de mecenas de la semana, que es un artículo de actualidad tecnológica o seguridad que también publico en el blog pero que por razones obvias solo tenéis acceso los mecenas.

Nivel PROFESIONAL

Este nivel incluye, como cabría esperar, todos los beneficios del nivel anterior.

Pero además cada jueves recibirás la newsletter exclusiva de mecenas, que es una newsletter con las cinco o seis noticias de seguridad y privacidad que entiendo le deberían preocupar a un profesional, trabaje por cuenta ajena o por cuenta propia.

Nivel PITAGORÍN

En este nivel además de obtener, por supuesto, todas las ventajas del anterior, incluye dos extras:

• Acceso prioritario y con ofertas exclusivas a mis cursos y talleres.
• Envío de mis nuevos libros dedicados semanas antes del lanzamiento.

Nivel BOX TECNOLÓGICO

Este es, junto con el nivel INICIADO, el que más éxito tiene.

Y la razón es obvia. Además de todo lo anterior, los mecenas de este nivel dos veces al año (en julio y en enero) reciben un regalo de tecnología elegido por mi que les envío a su casa, y que por supuesto es un secreto.

De esta manera hemos llegado a regalar gafas de realidad virtual, mini-drones, condones USBs y un largo etcétera…

Nivel EMPRENDEDOR

Este, como su propio nombre indica, ya está enfocado a los perfiles profesionales.

Siendo mecenas de nivel EMPRENDEDOR recibes todo lo anterior además de una reunión privada mensual vía Hangouts o Skype en la que te resolveré cualquier duda.

Por ejemplo algunos de los mecenas que he tenido de este nivel lo utilizaban para aprender sobre marketing o seguridad, o para que les ayudase a configurar diferentes servicios en sus páginas o perfiles digitales.

Nivel CONSULTORÍA DE NEGOCIO

Este nivel está diseñado para negocios que ya están en funcionamiento o para proyectos que están cerca de nacer y necesitan ese impulso final, y por tanto incluye, además de todo lo de los niveles personales de mecenazgo, dos añadidos:

• Acceso completo a mi curso de Seguridad y Privacidad: Desde el primer día, y “para ti para siempre”.
• Una consultoría de negocio mensual: Que consta de una reunión de una hora mensual para diseñar el futuro del proyecto, y de todo el trabajo vía email y mensajería que necesitemos para materializarlo… a un precio bastante inferior al que cobro a mis clientes corporativos.

Nivel PATROCINIO DE MARCA

Por último, este nivel está enfocado a negocios que ofrezcan algún producto o servicio y quieran darlo a conocer entre mi comunidad y/o para la audiencia de mis talleres y charlas.

Por ponerte un par de ejemplos, estuvimos trabajando así con Ciberprotector, una suite de seguridad de Webempresa, y dimos a conocer el trabajo de la asociación CyberEOP para el fomento de la ciberseguridad en PYMES y organismos públicos.

• ​​Publicaremos una pieza en el blog en la que mencionaremos su producto o servicio.
• ​Una semana al mes será la marca patrocinadora de la newsletter pública, incluyendo su difusión por redes sociales y el enlace directo desde la newsletter que reciben 5ks+ de suscriptores.
• ​Si el producto o servicio encaja (temas relacionados con mi labor formativa), hablaré de él en mis talleres y charlas, y lo agregaremos como servicio extra al Curso de Fundamentos de la Seguridad en Internet.
• ​Incluiremos un banner en el sidebar de la web.

Además incluye el acceso para hasta cinco miembros del equipo al grupo de telegram, al curso y al contenido semanal exclusivo.

Y sobre todo, si crees que esta página merece la pena. Si te gustaría tener un contacto más directo con gente que está también interesada en estos temas. O si simplemente quieres apoyar el proyecto, sabiendo que ese dinero va destinado a mejorar ese trabajo diario, esta es la manera.

________

Este es un ejemplo de los artículos que semanalmente escribo de forma exclusiva para los mecenas de la Comunidad.

Si quieres recibir contenido exclusivo como éste directamente en tu bandeja de correo, revisa las opciones de mecenazgo de esta página.