Cómo optimizar imágenes en su aplicación Laravel

Uno de los principales aspectos de la optimización de su aplicación o sitio web para los motores de búsqueda es el uso de imágenes de tamaño adecuado para su uso práctico.

Por ejemplo, si su blog muestra imágenes en formato 300 × 200 y el artículo solo muestra la imagen en formato 1200 × 500, los motores de búsqueda esperan que las imágenes físicas estén en estos formatos, así es en parte como estas imágenes se consideran optimizadas (el tamaño en relación al formato de archivo también influye).

Sin embargo, cuando su aplicación muestra imágenes proporcionadas por los usuarios, puede resultar complicado crear procesos para cambiar el tamaño y optimizar estos archivos, por lo que puede ser conveniente llamar a un servicio de procesamiento de datos externo.

En 2020, creamos un servicio de procesamiento de archivos de imágenes en línea que puede permitirle realizar operaciones normalmente complejas de una manera simplificada, analizaremos cómo integrar este servicio en su aplicación Laravel.

ZMD es un servicio de procesamiento de imágenes en línea bajo demanda, al integrar algunas instrucciones en su código HTML, puede realizar operaciones como:

Cambiar el tamaño
Rotación
Cultivo
Corrección de contraste
+ 18 operaciones disponibles

Consulte la lista de operaciones disponibles: https://zmd.io.

Crear una cuenta

Empiece por crear una cuenta gratis por 10 días sin tarjeta de crédito y sin compromiso: https://app.zmd.io/register

Agregar un dominio

Para utilizar el servicio ZMD debes ingresar desde qué nombre de dominio vas a trabajar, este dominio debe ser físicamente accesible para poder funcionar, registra tus dominios aquí: https://app.zmd.io/domains

Compositor de paquetes

Hemos creado un paquete composer para simplificar el uso del servicio zmd.io, para eso simplemente instala el paquete con el siguiente comando:

compositor requiere superlativo / zmd-laravel

La instalación de este paquete te da acceso a una directiva blade que te permite integrar los elementos javascript necesarios para el correcto funcionamiento del servicio ZMD, así como para la configuración de tu clave de dominio.

Integración HTML / Blade

En su plantilla HTML/Blade, inserte el siguiente código justo antes de la etiqueta de cierre </body>.

<html>
    <body>
    
        ... @zmdInit
    </body>
</html>

Configurar la clave de dominio

Cuando haya agregado su nombre de dominio, se le proporcionará un código especial, este código hará el enlace entre su sitio y ZMD, para agregar su clave de dominio, simplemente agregue la siguiente clave en su archivo de configuración .env:

ZMD_DOMAIN_KEY = your_domain_key

Optimización de tus imágenes

Todo lo que queda es adaptar el código de las imágenes que desea optimizar, puede guardar las operaciones a realizar directamente en el código HTML, por ejemplo un archivo img generalmente se ve así:

...
<img src="https://example.com/myimage.jpg" alt="descripción de mi imagen"/>
...

Ahora reemplace el atributo src de su etiqueta y agregue el atributo que contiene las operaciones, su código se verá así:

...
<img src="" data-zmd-src="https://example.com/myimage.jpg" data-zmd-op="w:800;h:550" alt="descripción de mi imagen"/>
...

Tenga en cuenta que el atributo src ya no es necesario, el script ZMD lo agregará automáticamente para que siga siendo válido para el navegador.

La lista completa de operaciones disponibles está disponible aquí:

https://zmd.io/documentation/operations/

Listo, sus imágenes ahora se optimizan automáticamente para adaptarse a las necesidades de su aplicación.

Cree una cuenta ZMD gratuita ahora

Cómo optimizar las imágenes de tu aplicación Laravel