TUTORIAL

📌¿Formato de imagen WEBP Imagify No funciona?🏅

Aprenderás a instalar y configurar plugin de Imagify en WordPress. Con video paso a paso.

 

IMAGIFY

WORDPRESS

May 01, 2024

Montoya A.

20min de lectura

Hola amigos de Marieú Technology Corporation, ¡convertir en formato WebP con Imagify! En efecto, en esta guía, paso a paso, aprenderás a realizar ajustes generales en Imagify, aplicar optimización de imagen con Imagify, redimensionar imágenes grandes en Imagify, optimización de archivos Imagify, carpetas personalizadas, opciones de visualización, optimizar imagen en Imagify y brindar la solución al error de imagen WEBP en Imagify.📌🏅

Imagify es una herramienta de optimización de imágenes, ofrecida por la empresa francesa WP Media. Entre algunas características, ofrece compresión sin pérdida, crear versiones AVIF, imágenes de próxima generación o WebP, redimensionar imágenes, generar tamaños de diferentes imágenes, entre otras. Este complemento es ofrecido en tres planes, en periodos mensual o anual, donde puedes tener una cantidad de MB limitada o libre.

¿Cómo corregir error del Formato de imagen WEBP Imagify en WordPress?

Con este plugin de optimización de imágenes, vamos a crear una cuenta dentro de su página oficial. Luego de ello, cuando ya tenemos el archivo punto ZIP, lo vamos a instalar dentro de WordPress. Cuando ya tengamos toda la configuración lista, vamos a ir a verificar si es que está generando en formato WebP en Imagify; en el caso que no, vamos a aplicar la solución para este error.

¿Formato de imagen WEBP Imagify no funciona?

Diagrama: ¿Formato de imagen WEBP Imagify no funciona?
Fuente: Elaboración Propia.

Nos vamos a ir a crear una cuenta, para eso vamos a colocar Imagify y entramos al primer SERP. Vamos a irnos a la sección de pricing y tenemos los siguientes planes. De hecho, para poder realizar este test, hace falta solo instalar la versión gratuita. Tenemos un límite hasta 20 MB por mes. Una vez que termine ese periodo, vuelves a tener esa cantidad de MB. Entonces, lo que nos interesa aquí, dentro de nuestra cuenta, principalmente es la integración de la Api: seleccionamos y aquí tenemos nuestro token. Todo este código, nosotros tenemos que tenerlo mano porque lo vamos a incluir, dentro de la configuración del plugin.

Ya estamos en WordPress, aquí, en la sección izquierda, tenemos plugins, añadir nuevo plugin y aquí nosotros vamos a colocar Imagify. Entonces, aquí lo tenemos, es la primera opción, recuerden instalarlo y después lo activamos.

Vamos a irnos a la configuración, ajustes y nos vamos a Imagify. Aquí, dentro de ajustes generales, nosotros recomendamos desactivar la primera opción, dado que, a veces, cuando incluimos varias imágenes a nuestro WordPress, se nos va a gastar la cantidad de MB, por ende, nosotros lo desactivamos.

Por el contrario, sí recomendamos realizar un Backup de las imágenes originales, por si de repente tenemos algún problema en la optimización, seleccionamos el checklist. Además, esta compresión sin pérdida en cuanto a la optimización de tus imágenes, es decir, lo va a estar reduciendo, lo va a estar comprimiendo pero no va a realizar alguna pérdida en cuanto a la calidad.

Ahora, dentro de la sección de optimización, tenemos lo que es formato de imagen de Nueva Generación. Imagify te ofrece dos versiones, la que es la versión AVIF y también la versión WebP. De los dos, nosotros recomendamos la segunda, ¿por qué?, porque el formato AVIF hemos hecho un comparativo y, lamentablemente, tiene un poco más de peso, es mucho más ligero optimizar la imagen en formato WebP. Entonces, lo dejamos desactivado y, para la segunda, lo activamos. Y, de las dos opciones, de las reglas rewrite versus las etiquetas pictures, recomendamos la segunda, ¿por qué? porque recuerden que la segunda opción no altera el código de tus páginas.

Luego de eso, nosotros tenemos aquí ya para generar esas versiones de imágenes en formato WebP, es decir, en formato de nueva generación. Esta parte, recomendamos hacerlo al final, ya cuando entremos a la sección de medias de WordPress, para poder ahorrar un poco nuestro plan.

Biblioteca de medios, en este caso, va a redimensionar las imágenes más grandes, es decir, si tenemos imágenes que superan a este 2048 píxeles de ancho, lo que va a hacer Imagify es reducirlo por lo menos hasta 2048. Debajo de este rango, no se va a alterar la imagen, se queda tal cual, seleccionamos el checklist.

Imagen WebP en Imagify

Imagen WebP en Imagify.
Fuente: Elaboración Propia.

Optimización de archivos, en esta sección, por ejemplo, por defecto te vienen todos los checklist marcados. Aquí no recomendamos ello, dado que en el administrador de archivos te va a generar toda una secuencia de esta imagen con esas dimensiones. Por ejemplo, si nosotros entramos al administrador de archivos, seleccionamos aquí y ya tenemos aquí todas las imágenes en nuestro Hosting. Si nosotros aterrizamos en esta imagen, vemos como está generando todas las versiones de Imagify, ¡ahí está!, desde 2048, 1536 de 100×100. La imagen original es la de aquí, la de punto JPG, ¡ahí está!

Entonces, por ende, nosotros no tenemos que activar todas, simplemente las necesarias. Algunas recomendadas, 150×150, la dimensión medium también, hasta, por lo menos, 1024. Las que siguen, ya consideramos que son imágenes con una dimensión grande, en cuanto a una página web. Además, si tenemos instalado por ejemplo el plugin de WooCommerce, se vincula rápidamente aquí y te agrega tres dimensiones más, de las cuales, recomendamos aquí desactivar el 300×300 porque ya lo tenemos aquí. En cuanto a los demás, sí lo podemos asignar un checklist.

Por aquí tenemos las carpetas personalizadas, si queremos optimizar ya nuestro tema hijo o Child Theme, por ejemplo, ha detectado en automático que estamos usando un tema hijo o Child Theme de Hello Elementor. Entonces, si queremos también optimizarlo, añadimos las carpetas, seleccionamos y automáticamente se va a agregar la dirección del Child Theme.

Ya finalmente, las opciones de visualización, en el caso, si estamos dentro de una página editándolo, nos va a aparecer aquí, en la sección de arriba, Imagify. En nuestro caso, como ya tenemos un poco saturado la parte de las configuraciones, lo recomendamos desactivar. Si no tenemos muchas, ya lo podemos activar y te aparecería de la siguiente manera: Imagify y adentro los ajustes, también la cantidad de espacio que te quedaría. Ya, finalmente, recuerden guardar cambios.

Ahora, nos vamos a ir a optimizar una imagen. Nos vamos a medios y vamos a seleccionar cualquier imagen, por ejemplo, aquí abrimos y aquí podemos optimizarlo. Este botón de optimización es de Imagify. Una vez que lo hemos optimizado, te va a salir todo el detalle de la optimización. Por ejemplo, la versión original, en este caso, ha sido sin pérdidas y se ha generado el formato WebP parcialmente, por cada una de las dimensiones.

Recuerden que hay varias versiones que hemos visto, las miniaturas optimizadas y el ahorro general. Si colocamos aquí «comparar original versus la imagen optimizada», tenemos lo siguiente. Vemos como el original tenía de 295.38 kB versus la imagen optimizada de 112.02 kB, más o menos está optimizando en un 62.8%.

Vamos a irnos a Marieú Technology Corp. y nos vamos a la parte de contactos. De la imagen que hemos detectado, nosotros vamos a poner clic derecho, inspeccionar y aquí tenemos la dirección, donde se está mostrando. Es decir, si nosotros entramos a esta dirección, dentro del administrador de archivos, vamos a poder detectar cuál es el error, si realmente está optimizado con los formatos WebP. Vamos a ingresar al administrador de archivos, ponemos aquí. Generalmente está dentro de la carpeta WP Content, seguimos la misma ruta WP Content, uploads y 2023: uploads, 2023, 06 y aquí vamos a buscar la imagen cr5. Entonces, aquí lo tenemos pero vemos que no ha generado.

De repente, hemos estado desactivando el plugin, quizás hemos activado otro plugin de optimización y no nos está generando este formato WebP. Entonces, como solución lo que hacemos es: seleccionamos, descargamos y aquí vamos a añadir nuevo a archivo de medios.

Tenemos, entonces, aquí nuestra imagen, seleccionamos, arrastramos y soltamos. Abrimos la imagen y vamos a optimizarlo nuevamente. Entonces, por ejemplo, ya lo hemos optimizado y vamos a verificarlo nuevamente. En este caso, ya estaría en una ruta del 2024, 04: 2024, 04. Esta imagen le hemos cambiado el nombre, está con Contactos-Marieu. Entonces, vamos aquí y ahí lo tenemos: ya está con todas las dimensiones y también con su formato de nueva generación, en formato WebP.

Entonces, estamos dentro de Contactos, vamos a cambiarlo: ponemos editar con Elementor, seleccionamos la imagen y aquí lo vamos a cambiar. En este caso, sería la última imagen, esta es la que ya estaría optimizada, seleccionamos, actualizamos. Entonces, si nos vamos a la imagen, ponemos inspeccionar, vemos, por ejemplo, aquí que ya estaría en formato WebP.

Tamaños de optimización imagen Imagify

Tamaños de optimización imagen Imagify.
Fuente: Elaboración Propia.

Resultados Finales

Ahora, en algunos casos, por ejemplo, hemos notado si nosotros ponemos la resolución de imagen en lleno o full, no reconoce este formato WebP. Entonces, para eso, recomendamos por lo menos colocarle un medium, que este dentro de este recuadro. ¿Cómo medimos ese recuadro?, lo tenemos aquí. Cuando seleccionamos inspeccionar, aquí, en la mano derecha, tenemos más o menos esa dimensión de esa sección. Es decir, más o menos 600 de largo por 400 píxeles de alto. Uno que más o menos se asimile, a esa resolución, es medium large 768×0. Si solamente colocamos 300×300, lo va a reducir bastante, para este caso, sería solamente medium large.

Ahora, si queremos nosotros optimizar bien esta imagen, le recomendamos que lleven el curso de optimización de Marieú, el cual, les vamos a enseñar mucho a precargar esta imagen y ponerlo dentro del Lazy loading. ¡Listo, gracias amigos de Marieú Technology Corporation!

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Marieú Technology Corporation ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros T&C y las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados