Guía simple para usar imágenes webp en WordPress: guía de paso completo -by -pte

¿Luchas por hacer tu sitio de WordPress bajo ese umbral mágico de dos segundos? Si sospecha que las imágenes pesadas son culpables, puede intentar usar imágenes webp en lugar de imágenes PNG regulares. Las imágenes de WebP son un formato de imagen moderno ingresado y recomendado por Google para mejorar las velocidades de carga. En esta guía, le mostraremos cómo usarlos en WordPress. La velocidad de carga de la página siempre ha sido algo que a Google y otros motores de búsqueda les importa, pero ahora, más que nunca, no puede permitirse tener un sitio web de carga lenta. En primer lugar, se ha demostrado que los sitios web de carga lenta llevan a los usuarios de su sitio (especialmente para dispositivos móviles).
Más importante aún, el algoritmo de experiencia de Google Page se actualizará en junio de 2021. Cuando lo hará, enviará muy poco tráfico a sitios web de carga lenta. Las imágenes suelen ser solo una pequeña parte del contenido en la mayoría de las páginas web. Sin embargo, representan la parte del león del tamaño del archivo. Entonces, si intenta aumentar la velocidad de carga de su sitio, preste atención a sus imágenes, entonces, ¿cómo lo ayudan exactamente los archivos WebP? Los archivos WEBP son un formato de imagen muy fácil y pueden reducir las dimensiones del archivo hasta en un 25-34% en comparación con otros formatos de archivo, como PNG y JPG.
contenido
WebP vs. JPG vs PNG para Web – Comparación
Algunas ventajas y desventajas de los archivos webp
Cómo agregar imágenes webp a WordPress – 3 métodos
Método 1: use un CDN
Método 2: use un complemento de optimización de imágenes
Método 3: Agregue imágenes WebP manualmente a WordPress
Nociones introductorias con webp WebP vs. JPG vs PNG Para la comparación web para ayudarlo a comprender lo que hacen esas imágenes web especiales, pasaremos por una comparación detallada de las imágenes webp en comparación con las imágenes PNG y JPG. Primero, pasemos por una pequeña jerga. Cuando los archivos de imagen son tabletas, no tienen pérdidas ni pérdidas.
La compresión libre de pérdida produce imágenes que no pierden poco o en absoluto de su calidad en comparación con las pérdidas. También pueden descomponerse y devolverse a su estado original. La razón por la cual esto es posible es el proceso de compresión para imágenes sin pérdidas al eliminar solo las picaduras de datos codificadas irrelevantes en las imágenes. Los archivos PNG generalmente son archivos sin pérdidas. Las imágenes con pérdidas se modifican fundamentalmente y tienen fragmentos de información básica eliminadas de forma permanente. Esto da como resultado archivos más pequeños de archivos que imágenes sin pérdidas, pero con una reducción visible en la calidad cuando intenta aumentarlos.
Un buen ejemplo de pérdidas son los archivos JPG/JPEG. Luego hay imágenes webp. Las imágenes de WebP son una excelente opción porque pueden someterse a pérdidas o pérdidas. En ambos casos, ofrece una mayor compresión, pero sin una pérdida proporcional de calidad en comparación con los archivos PNG y JPG.
Un estudio de Google ha demostrado que las imágenes WebP de pérdidas pueden ser hasta un 26% más bajas que las tabletas PNG. Las imágenes WebP con pérdidas generalmente aparecen 25-34% más bajas que los archivos JPG. Cuando considera que estas ganancias masivas vienen sin ningún compromiso en la calidad de la imagen, es lógico usar imágenes web en cualquier lugar. Antes de mostrarle cómo usar imágenes webp, debe saber algo más sobre ellas. Algunas Ventajas y desventajas de los archivos WebP Como ya hemos mencionado, los archivos WebP tienden a ser mucho más livianos y, por lo tanto, se cargan más rápido que los archivos JPG o PNG. Para el sitio promedio con pocas imágenes, el crecimiento de los tiempos de carga será marginal. Sin embargo, estos efectos se multiplican en sitios web de imágenes pesadas, como las tiendas de comercio electrónico. Las imágenes de WebP tienen algunos desafíos. Le presentaremos algunas soluciones simples, pero debe considerarlas antes de comenzar.

En primer lugar, todos los archivos WebP no son aceptados universalmente por todos los navegadores. Con una penetración del 91% del mercado de los navegadores, este no es un gran problema. La mayoría de los principales navegadores como Chrome, Firefox, Edge y Opera proporcionan imágenes WebP predeterminadas. Otros navegadores, como Safari, no.
Esto no significa que tenga que elegir entre un sitio web más rápido o transmitir contenido poco atractivo para los lectores que usan navegadores no acentuados. Todo lo que tiene que hacer es mantener las versiones PNG/JPG y WebP de sus imágenes y proporcionar diferentes versiones para diferentes grupos de usuarios, dependiendo del navegador que usen.
Por ejemplo, al usar un complemento de WordPress, su sitio web podría mostrar una versión webp de un navegador que los acepta, mientras que muestra automáticamente las versiones PNG o JPG de la misma imagen a aquellos que no lo hacen. En el pasado, WordPress no proporcionó soporte nativo para las imágenes WebP, por lo que tenía que usar un complemento o escribir un código para que funcionen en WordPress. Esto ya no es cierto, porque la última actualización de WordPress, WordPress 5.8 incluye soporte nativo para imágenes webp. Sin embargo, necesitará una forma de tratar con los navegadores que aún no han tomado este desarrollo. Hay varias formas de evitar esto, como verá pronto. Ahora que WordPress permite cargas de webp nativas, esta es la mejor manera de comenzar. Pero, como mencioné, aún tendrá que tener en cuenta los navegadores que aún no aceptan imágenes webp. Los métodos que cubriremos a continuación lo ayudarán a hacerlo. Vale la pena señalar que ningún método es necesariamente mejor que el otro, por lo que puede elegir el que mejor le convenga. Son: Método 1: Use una red de entrega de contenido de CDN (CDN) son una forma efectiva de usar imágenes webp en WordPress. Los CDN son una red de servidores que ayuda a redistribuir la tarea de entregar contenido en los servidores de su sitio web.

En general, si usa un CDN, almacenará el contenido de su sitio en caché y lo transmitirá más rápido y de manera más eficiente. Un CDN se puede usar fácilmente para convertir sus archivos PNG/JPG en archivos WebP y para proporcionar audiencias seleccionadas dependiendo del tipo de navegador. Algunos CDN populares para usar incluyen Max CDN, Juices, StackPath, Cloudflare y KeyCDN. Cargue sus imágenes en formato webp. De hecho, creemos que es mejor cargar las primeras imágenes en formato PNG/JPG y luego convertirlas en la webp. Esto es porque, como dije, no todos los navegadores actualmente aceptan imágenes webp. Para que esto funcione, deberá tener las mismas imágenes disponibles en formato PNG/JPG para mostrarlas en navegadores que no aceptan archivos webp. Hay complementos que le permitirán hacerlo con bastante facilidad. Aquí hay algunos complementos populares que puede considerar: 1. Imagínese
Imagify es un complemento de optimización de imágenes gratuitas y recomendamos convertir sus imágenes en WebP. Aunque Imagify es libre de comenzar, tiene un límite para la mayor optimización posible. Actualmente, los usuarios pueden usar hasta 20 MB de optimización mensual de forma gratuita. Para comenzar, primero instale el complemento en el almacén de WordPress y activelo. Se le pedirá que cree una cuenta (todo lo que tiene que hacer es proporcionar su correo electrónico), después de lo cual se le enviará una clave API. Ingrese la API y continúe configurando el complemento. predeterminado, la mayoría de las opciones que necesita ya están configuradas para usted. Verá que el complemento tiene dos formas de hacer esto. En primer lugar, permitiéndole crear reglas de reescritura y, en segundo lugar, usar etiquetas en lugar de etiquetas . En la mayoría de los casos, el segundo método es el preferido, pero no funcionará con todos los temas. Imagify es gratuito, simple de usar y eficiente, lo que hace un complemento que recomendamos.
Sin embargo, continúe leyendo para ver algunos complementos alternativos de optimización de imágenes, así como otras formas de hacer el trabajo.
Comience con la imagen
2. Smush

Smush es un complemento multifuncional de optimización de imágenes para WordPress. Puede usar Smush para comprimir archivos PNG y JPG o convertirlos en archivos WebP. Smush tiene muchas otras funciones útiles, como la carga perezosa, así como una imagen de 45 puntos CDN, todos ayudan a sobrecargar la velocidad de su sitio. Aunque muchas de estas características sorprendentes están disponibles gratis. Solo disponible en la versión Pro. Dependiendo de cuántos sitios web trabajará, los paquetes Smush Pro tienen precios de $ 6, $ 14 y $ 29, respectivamente. Comience con Smush

3. Optimole

Optimole es un complemento de compresión de imagen que proporciona conversión de WebP y la capacidad de servirlos dinámicamente utilizando Amazon CloudFront. Además, el complemento ofrece una experiencia de visualización óptima para cada visitante de su sitio al cambiar el tamaño automático de las imágenes para que coincidan con su pantalla. La experiencia del usuario es una parte importante de Google Core Web Vitals, por lo que esta es una característica excelente para usar. Puede comenzar con el plan Optimole gratuito, que le permitirá servir hasta 5,000 visitantes, u optar por un plan pagado que le permita hasta 25,000 visitantes.
Para usar el plan gratuito, simplemente instale y active el complemento. Se le pedirá que abra una cuenta para recibir una clave API. Una vez que haya ingresado la clave API, el resto del proceso se completa para usted de forma predeterminada. Optimole optimizará automáticamente las imágenes y proporcionará soporte WebP predeterminado, junto con otras buenas prácticas de optimización de imágenes.
Comience con Optimole

4. Shortpixel
ShortPixel es un complemento popular de conversión y optimización de imágenes. Al igual que los otros complementos en esta lista, puede configurar ShortPixel para optimizar o convertir las imágenes WebP. También puede proporcionar sus versiones PNG/JPG de sus usuarios de Safari y otros navegadores inaceptados. ShortPixel acepta la conversión a las imágenes WebP en pérdidas y pérdidas y ofrece otros beneficios, como su optimizador de bloque. Una característica notable ofrecida por ShortPixel es su formato de archivo brillante único. Las imágenes brillantes están diseñadas para proporcionar un compromiso entre depreciar la calidad del archivo de calidad con pérdidas y el tamaño más pequeño de las imágenes sin pérdidas. Para comenzar con ShortPixel, descargue y active el complemento y obtenga una clave API creando una cuenta. No necesitará tomar demasiadas medidas más allá de este punto, porque la mayoría de las opciones están configuradas para usted. La conversión de WebP costará un crédito por conversión. ShortPixel ofrece 100 créditos gratuitos una vez que abre una cuenta con otros 100 meses. Si los usa, entonces puede comprar más.
Comience con ShortPixel

Método 3: Agregue imágenes WebP manualmente a WordPress Puede usar un complemento o CDN o una combinación de ambos para completar el trabajo. La tercera opción es evitar cualquiera de los métodos y cargar manualmente las imágenes WebP en WordPress. Estos son los pasos a seguir: convierte sus imágenes en WebP, deberá convertir las imágenes en formato WebP antes de cargar a WordPress. Esto es generalmente fácil de hacer y se puede hacer de varias maneras. 1. Use un convertidor de imagen en línea El primer método es el uso de un convertidor de imagen en línea. Hay varios de estos y no hay muchos que los separen desde el punto de vista de la calidad. Uno de los más populares es en línea-convert.com. Si solo está construyendo su sitio web, primero puede convertir fácilmente sus imágenes y luego cargarlas. Pero, ¿qué sucede si ya tiene un sitio web completo o ya ha poblado su sitio con imágenes? Para evitar esto, puede usar un complemento que ofrezca una función de conversión de bloque. Si desea hacer esto manualmente, tendrá que ensuciarse las manos, entrar en la habitación de los autos y escribir un poco de código.

Presentaremos este proceso en breve, pero primero, aquí hay otra forma de convertir sus imágenes en formato WebP. Es posible que desee guardarlas en el formato WebP de la aplicación en sí. Aunque esto no es implícitamente posible, es fácil de lograr instalando imágenes de Photoshop. Ahora que ha convertido con éxito imágenes en formato webp, es hora de hacer pesas. ¿Cómo se carga con éxito las imágenes webp en WordPress manual? Hay maneras diferentes de hacer esto. Si está familiarizado con el uso del Protocolo seguro de transferencia de archivos (SFTP), simplemente puede cargar sus imágenes directamente en la carpeta de carga, sin tener que pasar por la biblioteca de medios. También puede escribir un poco de código en su sitio de WordPress. Así es cómo:
En el backend de la instalación de WordPress, explore la apariencia> editor de WordPress.
Abra el archivo llamado “Functions.php” e inserte el código a continuación en la parte inferior de la página:

// *** Habilitar la carga para archivos de imagen web.*/Function webp_upload_mimes ($ existe_mimes) {$ existente_mimes [‘webp’] = ‘image/webp’; devolver $ EXIT_MIMES; } add_filter (‘mime_types’, ‘webp_upload_mimes’); ¡Eso es todo! Puede continuar y cargar las imágenes WebP sin ningún dolores de cabeza.