How to Optimize Images in Your Laravel Application

One of the major aspects of optimizing your application or website for search engines is the use of properly sized images for their practical use.

For example, if your blog displays images in 300 × 200 format and the article alone displays the image in 1200 × 500 format, search engines expect the physical images to be in these formats, this is partly how these images are considered optimized (the size in relation to the file format also influences).

However, when your application displays images provided by users, it can be complicated to create processes for resizing and optimizing these files, which is why it may be wise to call on an external data processing service. files.

In 2020, we created an online image file processing service that can allow you to perform normally complex operations in a simplified way, we will analyze how to integrate this service into your Laravel application.

ZMD is an online image processing service on demand, by integrating a few instructions into your HTML code you can perform operations such as:

Resizing
Rotation
Crop
Contrast correction
+ 18 operations available

See the list of available operations: https://zmd.io.

Create an account

Start by creating an account free for 10 days without credit card and without commitment: https://app.zmd.io/register

Add a domain

To use the ZMD service you must enter from which domain name you are going to work, this domain must be physically accessible to be able to function, register your domains here: https://app.zmd.io/domains

Package composer

We have created a composer package to simplify the use of the zmd.io service, for that simply install the package with the following command:

composer require superlative / zmd-laravel

The installation of this package gives you access to a blade directive allowing you to integrate the javascript elements necessary for the proper functioning of the ZMD service, as well as for the configuration of your domain key.

HTML / Blade integration

In your HTML / Blade template, insert the code below just before the closing tag </body>.

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

Configuring the domain key

When you have added your domain name, a special code is provided to you, this code will make the link between your site and ZMD, to add your domain key, simply add the following key in your .env configuration file:

ZMD_DOMAIN_KEY = your_domain_key

Optimization of your images

All that remains is to adapt the code of the images you want to optimize, you can save the operations to be performed directly in the HTML code, for example an img file generally looks like this:

...
<img src="https://example.com/myimage.jpg" alt="My image description"/>
...

Now replace the src attribute of your tag and add the attribute containing the operations, your code will look like this:

...
<img src="" data-zmd-src="https://example.com/myimage.jpg" data-zmd-op="w:800;h:550" alt="My image description"/>
...

Note that the src attribute is no longer necessary, it will be added automatically by the ZMD script to remain valid for the browser.

The complete list of available operations is accessible here:

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

Voila, your images are now automatically optimized to match the needs of your application.

Create a free ZMD account now

How to optimize the images of your Laravel application