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:
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
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
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:
Voila, your images are now automatically optimized to match the needs of your application.