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

wordpress con imagenes webp

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.

optimizar imagenes photoshop

¿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.

optimizacion imagen webp

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.

comparativa optimizado webp

¿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, allí donde los acuerdos comerciales son difíciles de cerrar.

El primer objetivo lo estamos cumpliendo. A aquellos que se han decidido a aportar algo tengo maneras de devolverles el favor:

  • Con más análisis semanales: Estoy publicando en la intranet de mecenas dos artículos extra semanales. En total, y si mis cálculos no me fallan, 335 artículos (ES) extra publicados. Sin olvidarnos de la newsletter exclusiva de ciberseguridad, en donde analizo las últimas novedades en materia de seguridad y privacidad que deberían interesarle a profesionales y empresas del siglo XXI. La idea, como dejé claro en su momento, era que esto no fuera un impedimento ni tanto para los lectores de esta página, ni para los miembros de la Comunidad. Más bien todo lo contrario. Se trata por tanto de un añadido que me he comprometido a realizar aparte de la labor que ya hago públicamente para el resto.
  • Con mayor contacto entre nosotros: Para ello tenemos nuestro propio espacio (ES) y el grupo privado de Telegram, que se presta bastante a que no sea un canal puramente unidireccional, y que quien quiera, lo aproveche para informarnos al resto o realizar preguntas sobre aquellos temas que le preocupan.
  • Con un formato de box tecnológico: Además, existe la opción de que el mecenas reciba periódicamente un regalo tecnológico en su domicilio con una periodicidad fijada de antemano.
  • Con consultorías privadas: E incluso ofrezco consultoría mensual y personal a precio de saldo. Para un limitado número de mecenas, tienen cada mes media hora para que me pregunten sobre lo que quieran. Y para los más exigentes, una cobertura y asesoramiento total de su negocio. Por facilidades que no sea.
  • Con patrocinio de marca: enfocado a empresas, existe la opción de ofrecer para hasta cinco trabajadores de la compañía acceso a mis cursos y el contenido que publico de forma privada semanalmente, así como artículos en el blog que vienen acompañados del patrocinio de esta marca. Lo que les permite posicionarse como referentes del sector (visibilidad, posicionamiento, y por tanto negocio).

Además, estos ejercicios de transparencia, con una periodicidad mensual, se los envío primero a los miembros de la Comunidad, con algunos puntos extra que por aquí no comparto, y pueden ser consultados en la etiqueta #TransparenciaPY.

Dos formas de participar

Hay dos maneras de convertirse en mecenas de este proyecto:

Básicamente, Patreon (ES) como modelo que me permite a mi como creador devolver parte de esas donaciones con todo lo anterior, que sirve además de pasarela de crowdfunding mensual y PayPal.Me (ES), por ser el modelo de donación puntual más conocido y universal.

Cubrimos por tanto tanto donaciones periódicas (lo más adecuado para proyectos de este tipo) como donaciones puntuales.

En todo este tiempo he ido evolucionando el sistema de beneficios que obtienen los mecenas, quedando actualmente de la siguiente manera:

  • Todos: Solo por haber sido mecenas en algún momento tienen acceso al grupo privado de Telegram, donde hablamos de nuestras cosas a diario. Temas profesionales, claro, pero también mucho frikismo y en definitiva todo lo que nos interesa. Además, los mecenas pasan a una lista privada que generalmente utilizo para lanzar las ideas locas que se me van ocurriendo primero con ellos. Un ejemplo fue el lanzamiento de los Conoce a los Miembros, esa sección cuyos primeros participantes eran mecenas, o los sorteos exclusivos para mecenas, que intento hacer de vez en cuando.
  • Nivel INICIADO: Desde 3 dólares al mes todos los mecenas que lo hagan mediante la plataforma de Patreon tienen acceso además a la intranet de mecenas. Un espacio/foro en el que publico entre 4 y 8 piezas mensuales exclusivamente para ellos sobre actualidad tecnológica y ciberseguridad.
  • Nivel PROFESIONAL: Desde 5 dólares al mes, además de lo anterior estos mecenas obtienen acceso a la newsletter semanal exclusiva. La mejor manera de estar al tanto de todos los riesgos y ataques que afectan a tu empresa o tu presencia digital.
  • Nivel PITAGORÍN: Además de todo lo anterior, el mecenas obtiene acceso prioritario y de forma totalmente gratuita, o bajo un descuento exclusivo, a todos los cursos que vaya diseñando, así como la posibilidad de participar en nuestras videollamadas mensuales, el envío de un ejemplar firmado de mi libro “25+1 Relatos Distópicos” y el acceso completo a mi curso sobre “Fundamentos de la Presencia Digital Sana” pasados unos meses.
  • Nivel BOX TECNOLÓGICO: Con este nivel (15 o más dólares mensuales), se accede al derecho a recibir lo que yo llamo “el detalle tecnológico”, que no es más que un regalo físico que envío periódicamente. En anteriores ocasiones hemos regalado unas gafas de realidad virtual, un mini-drone y un pack antiestres, por ejemplo.
  • Nivel EMPRENDEDOR: Gracias a él el mecenas accede a una consultoría de media hora mensual personalizada a precio de saldo (75 dólares o más). Puesto que no es algo escalable, solo ofrezco seis plazas, y hoy en día tenemos 5 ya cubiertas.
  • Nivel CONSULTORÍA DE NEGOCIO: Desde 250 dólares ofrezco solo a un máximo de tres mecenas la posibilidad de que un servidor le haga seguimiento del proyecto que tiene entre manos. Es decir, acceder a mis trabajos de consultoría de marca y negocio a un precio muy inferior a lo que suelen ser mis honorarios. Trabajaremos codo con codo y de forma personalizada en sacar adelante la idea o el proyecto que el mecenas esté llevando a cabo. Le asesoraré sobre aspectos fundamentales como puede ser la estrategia de contenido para impulsar su marca personal o la marca de su empresa, el SEO/SEM, RRSS, las tecnologías y herramientas a utilizar, el modelo de negocio… Lo que necesite y en lo que crea que por experiencia puedo serle de ayuda. Además, obtendrá acceso completo a mi curso sobre “Fundamentos de la Presencia Digital Sana”, valorado en 100 euros.
  • Nivel ESPECIAL EMPRESA: Desde 350 dólares ofrezco solo a un máximo de cuatro mecenas la posibilidad de realizar patrocinio de marca periódico. Es decir, la creación de artículos (o el formato de contenido que veamos) mensuales junto con la marca mecenas del proyecto. Por supuesto, habrá que hablar del formato y del tipo de contenido previamente. Y además, incluyo el envío vía email a hasta 5 miembros de la organización de la newsletter exclusiva de mecenas y los dos artículos semanales de la intranet, así como acceso a mi curso completo sobre “Fundamentos de la Presencia Digital Sana” para cada miembro del equipo.

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.

hazme mecenas pabloyglesias