Uso de imágenes WebP en WordPress

Publicado: 2021-03-30

Como probablemente ya sepa, cuando se trata de sitios web, ¡la velocidad es importante! Una de las mejores cosas que puede hacer para acelerar su sitio web es reducir el tamaño de la página. Cuanto más pequeño es, menos datos hay que descargar. Cuantos menos datos, más rápido (¡dentro de lo razonable!) probablemente se cargará la página.

Las imágenes constituyen una parte importante del tamaño de archivo de una página web (a veces, más del 50 % de los datos de la página son imágenes). ¡Esto hace que las imágenes sean el objetivo número uno para ponerse a dieta en su búsqueda de tamaños de página más pequeños! Tradicionalmente, la mayoría de las imágenes utilizadas en los sitios web son JPEG o PNG. Ambos son excelentes tipos de archivos que funcionan bien en sitios web. Sin embargo, pueden tener un problema de tamaño. Si bien se recomienda usar una herramienta como TinyPNG (y puede tener un impacto dramático en el tamaño de las imágenes que agrega a su sitio), ¿qué pasaría si hubiera un formato de imagen que fuera más pequeño? Bueno, existe y se llama WebP.

En este artículo vamos a echar un vistazo a las imágenes de WebP con más detalle para descubrir qué son y cómo puedes usarlas en tu sitio web de WordPress. Entonces, si siempre ha querido adelgazar su sitio web, tome un café y un poco de pastel (¡nadie dijo que tenemos que ponernos a dieta tan bien como nuestro sitio web!) ¡Y luego comencemos!

¿Qué son las imágenes WebP?

Entonces, ¿qué son estas imágenes WebP de las que probablemente hayas oído hablar a la gente? Bueno, no hay nada demasiado complejo o misterioso al respecto. Básicamente, es solo otro tipo de archivo. En lugar de guardar las imágenes en formato JPEG o PNG, se guardan como WebP. WebP en realidad fue desarrollado por Google. Describen WebP como "un formato de imagen moderno que proporciona una compresión superior sin pérdidas y con pérdidas para las imágenes en la web". Con WebP, los webmasters y los desarrolladores web pueden crear imágenes más pequeñas y ricas que hacen que la web sea más rápida.'

A Google le encantan los sitios web rápidos, por lo que tiene sentido que lideren el camino al proporcionar un formato de imagen que ayudará a que los sitios web funcionen más rápido. Los archivos WebP suelen ser del 25% al 34% que un JPEG equivalente (según el propio estudio de Google). Teniendo en cuenta que las imágenes pueden constituir la mayor parte de los datos de una página web, se trata de un ahorro significativo.

Y no se preocupe si perderá la calidad de sus imágenes: el objetivo de WebP es poder guardar imágenes en un formato que siga siendo de alta calidad desde una perspectiva visual y, al mismo tiempo, se guarde en un tamaño pequeño. formato de archivo. Un ganar-ganar.

Por lo tanto, si las imágenes WebP son de tamaño pequeño y aún así ofrecen una gran experiencia visual para sus usuarios, es posible que se pregunte por qué no tienen un uso más generalizado. Hay un par de razones clave para esto.

Usabilidad: actualmente, las imágenes WebP no son compatibles con la mayoría de los programas de diseño gráfico, como Photoshop o Illustrator. Cualquiera que trabaje en estos programas estará acostumbrado a abrir archivos de imágenes (de todas las descripciones, JPEG, GIF, PNG, etc.) y simplemente "seguir adelante" con la edición según sea necesario. Además, cuando se trata de guardar esos archivos, normalmente puede exportar a cualquiera de los formatos de imagen comunes. Con WebP, esto no es posible hacerlo directamente. En su lugar, es probable que deba descargar un complemento de WebPShop para usar su software de edición de imágenes "normal". Hasta que las imágenes WebP se vuelvan tan omnipresentes como los archivos JPEG y otros formatos, siempre existirá la reticencia a 'complicar demasiado' las cosas y muchos diseñadores web seguirán utilizando formatos de imagen más tradicionales.
Compatibilidad del navegador : WebP NO es universalmente compatible con todos los navegadores. Esto significa que, aunque la mayoría de sus visitantes que usan navegadores actualizados como Chrome o Mozilla no tendrán problemas para ver estas imágenes, todavía tendrá una minoría considerable que no podrá ver las imágenes guardadas del sitio web. como WebP, que en particular incluye Safari que solo brinda soporte parcial según la versión utilizada (en el momento de escribir este artículo). Necesitará una solución alternativa (que analizaremos a continuación) para asegurarse de que todos sus visitantes puedan ver su sitio web como desea que se vea.

Entonces, la pregunta tiene que ser '¿debería usar WebP?'. Bueno, ciertamente parece que la gente está empezando a prestar más atención a lo que es un formato de archivo increíblemente innovador. Y, si la velocidad realmente te importa y tienes los recursos para crear un sitio web usando imágenes WebP, ¿por qué no lo harías? Al igual que con todas las nuevas tecnologías, a veces puede ser lento salir de la puerta de salida, ¡pero es mejor estar a la vanguardia que correr para alcanzar a la competencia! Con esto en mente, echemos un vistazo a cómo usaríamos imágenes WebP en un sitio web de WordPress.

Cómo usar Imágenes WebP con WordPress

Cualquiera que se haya sumergido directamente e intentado cargar archivos WebP en su sitio web de WordPress antes de julio de 2021 se habría sentido un poco decepcionado. Probablemente esperaría que cualquier imagen WebP cargada a través del Media Center se guardara normalmente. En su lugar, es posible que haya visto una pantalla como esta:

Afortunadamente, desde el lanzamiento de WordPress 5.8, ahora puede cargar imágenes WebP directamente en WordPress, lo que hace que este excelente formato de imagen sea tan fácil de usar como los formatos JPEG, PNG y GIF. Las mejoras constantes como esta son una de las razones por las que tiene sentido actualizar su núcleo de WordPress a la última versión. Por supuesto, si está utilizando un host administrado de WordPress como Pressidium, nos encargamos de esto por usted, ayudándole a garantizar que siempre esté ejecutando la última y mejor versión de WordPress.

Antes del lanzamiento de WordPress 5.8, una de las formas más fáciles de usar imágenes WebP era instalar un complemento que convertiría los formatos de imagen admitidos (por ejemplo, PNG) en archivos WebP y luego los mostraría en su sitio. Hay algunas advertencias sobre el uso de imágenes WebP (las enumeramos arriba) y el uso de un complemento adecuado como Shortpixel puede eliminar estas desventajas, por lo que aún puede ser una solución que vale la pena considerar. ¡Sigue leyendo para saber más!

píxel corto

Shortpixel es un complemento increíble y vale la pena pensar en usarlo, ya sea que elija usar imágenes WebP o no. Shortpixel es un servicio de optimización de imágenes bien establecido. Ejecuta todas las imágenes que carga a través de su excelente servicio de compresión de imágenes, a menudo comprimiendo el tamaño de la imagen en un 50% o más sin pérdida de calidad de imagen. Lo hace automáticamente, lo que significa que no tiene que pensar en comprimir sus imágenes antes de subirlas a su sitio web.

Para aprovechar al máximo Shortpixel, deberá pagar un plan con ellos. Cobran sobre la base de 'imágenes optimizadas/mes' con 5.000 imágenes al mes que cuestan solo $3,99/mes. Para muchos sitios web, este plan será más que suficiente y, dados los beneficios de rendimiento asociados con un sitio web optimizado, tiene un precio económico.

Shortpixel optimiza una amplia gama de formatos de imagen, incluidos JPEG y PNG. Entonces, quizás se pregunte, ¿cómo me ayuda esto a agregar imágenes WebP a mi sitio web de WordPress?

Si recuerda, no todos los navegadores web admiten el formato WebP con solo soporte parcial de WebP en Safari, según la versión utilizada (en el momento de escribir este artículo) y no ofrece soporte para Internet Explorer. Simplemente no es una opción viable crear un sitio web que no atienda a esos visitantes, incluso si aquellos que usan un navegador obsoleto o no compatible pueden ser una minoría.

También puede recordar que una gran cantidad de software de edición de imágenes tampoco admite archivos WebP directamente. Por lo tanto, tenemos una batalla en dos frentes... no solo tenemos que saltar a través de los aros para crear o trabajar con archivos WebP en primera instancia, sino que también tenemos que encontrar una manera de a) agregarlos a nuestro sitio web de WordPress yb) crear una imagen alternativa para aquellos que visitan nuestro sitio utilizando un navegador no compatible con WebP.

Shortpixel al rescate

Shortpixel tiene un enfoque ordenado para usar imágenes WebP en sitios web de WordPress. Al marcar una sola casilla de verificación dentro de su complemento, puede indicarle que cree versiones WebP de cualquier imagen que cargue. Luego puede indicarle al complemento Shortpixel que muestre estas imágenes WebP en navegadores compatibles con WebP.

Si el navegador de los visitantes del sitio web no puede mostrar imágenes WebP, se mostrará automáticamente un formato de imagen alternativo. Esto le brinda lo mejor de todos los mundos... la velocidad que acompaña a un sitio web que usa imágenes de tamaño pequeño gracias a WebP para navegadores que pueden manejarlas o una alternativa bien optimizada para aquellos que no pueden.

WebP es ahora un formato de imagen ampliamente adoptado. Ya sea que elija usar la función de carga nativa ahora disponible en WordPress o generarlos a través de un complemento como ShortPixel, tiene mucho sentido considerar cambiar las imágenes de su sitio web a variantes WebP para que su sitio pueda aprovechar el tamaño de archivo reducido que debería, a su vez, se traduce en un sitio web de carga más rápida.