Configuring optimized images in Magento 2

Running a Magento store can be difficult—configuring the server, creating store views, and adding categories and products. Everyone knows that every product needs at least one product image. In some setups, we even have more than one. From this single master image, multiple thumbs are created, such as base image, small image, swatch image, and thumbnail.

By default, images are not optimized for the web when saving them in Photoshop. Images shown on a website are not exactly the same as images for print. The Exchangeable Image File (EXIF) data, for example, is not needed, and by removing this metadata, you can save lots of bytes. The smaller the image, the faster it's shown in the browser of the customer.

Here is an example of EXIF data (not optimized). The current file size is 620,888 bytes:

EXIF Data

File:
  ExifByteOrder: Big-endian (Motorola, MM)
  CurrentIPTCDigest: 50bb6030364fbdfb1842e98de0e81efe
  ImageWidth: 1024
  ImageHeight: 768
  EncodingProcess: Baseline DCT, Huffman coding
  BitsPerSample: 8
  ColorComponents: 3
  YCbCrSubSampling: YCbCr4:4:4 (1 1)

Storing all these images on your Magento server will result in slower pages and slower rendering of them. Almost 70% of all the content from a single page is filled with images:

Configuring optimized images in Magento 2

So, optimizing images is not only important for desktop users, but also for mobile users. The less data they need to download, the better the user experience. Besides this, it's great for your search ranking optimization, battery consumption, and bandwidth/data plan.

Tip

By default, Magento 1 did not optimize the created catalog and CMS images. This could be optimized using software binaries such as jpegtran, jpegoptim, and OptiPNG.

If you don't have the option to install these, you could use Rapido image optimizer (https://www.rapido.nu/), which is a SaaS-based image optimizer for Magento. It is also the only optimizer that checks for the best available optimization per image and tunes all the images in the image cache directory on a daily basis.

Getting ready

For this recipe, we will use a Droplet created in Chapter 1, Magento 2 System Tools, at DigitalOcean, https://www.digitalocean.com/. We will be using NGINX, PHP-FPM, and a Composer-based setup including sample data for image optimization. No other prerequisites are required.

How to do it…

For the purpose of this recipe, let's assume that we need to optimize all Magento 2 images. The following steps will guide you through this:

By default, Magento 2 now uses an optimized GD2 PHP library, which is installed during the installation. The following command should be used during installation:
```
apt-get install php5-gd
```
Instead, we can also use the following command:
```
apt-get install php7.0-gd
```
To make sure that GD is installed correctly, run the following command:
```
php -i |  grep gd
```
Run the following command to test which version of GD you are running:
```
echo '<?php var_dump(gd_info()); ?>' > gd.php
php gd.php
```
The output looks as follows:
```
root@mage2cookbook:/var/www/magento2/pub# php gd.php
array(13) {
  ["GD Version"]=>
  string(9) "2.1.1-dev"
```
Now let's log in to the backend of your Magento 2 control panel and navigate to the Stores | Configuration | Advanced | Developer section.
Here, you will find the following options:
- Template Settings
- JavaScript Settings
- CSS Settings
- Image Processing Settings
- Static Files Settings
We first make sure that our Image Adapter is set to PHP GD2. We don't use the ImageMagick setting here. In the There's more… section of this recipe, you can find more information on this.
Next, we change the CSS Settings, JavaScript Settings, Static Files Settings, and Template Settings. In the Template Settings, adjust Minify HTML to YES.
Next, enable JavaScript Bundling, Merge JavaScript, and Minify JavaScript to YES.
Next, enable Merge CSS and Minify CSS to YES.
Last but not least, enable Static Files to YES. Save all the settings.
Before we have all the optimized code available, we need to recompile all static assets. Let's assume that we are preparing for production. Run the following code on the shell:
```
php bin/magento deploy:mode:set production
```
Before running the code, make sure to change your Apache or NGINX configuration to set $MAGE_MODE production;(Nginx) or SetEnv MAGE_MODE production (Apache). In Managing Magento 2, set mode (MAGE_MODE) recipe of Chapter 1, Magento 2 System Tools, we covered everything in detail.
After running this code, make sure to change your user and group permissions. Run the following command:
```
chown –R www-data:www-data *
```
Congratulations, you just finished configuring optimized images, JavaScript, and CSS with Magento 2. The following image is a screenshot from the Google PageSpeed insight page (https://developers.google.com/speed/pagespeed/insights/), where you can test your own pages:

How it works…

Let's recap and find out what we did throughout this recipe. In steps 1 through 5, we configured the image optimizing technique, which is now by default available in Magento 2.

In step 1, we installed the PHP GD library and tested it. In step 2, we configured the Magento backend to start using the optimization by selecting the GD option and additional merging for JS and CSS.

In step 4, we ran the bin/magento production mode to start optimizing all of the code.

There's more…

Besides the PHP GD2 library, Magento 2 offers the option to switch to the ImageMagick library (http://www.imagemagick.org/). In basis, this library works great for image optimization, but during some tests, we found out that the GD2 had a smaller output. Besides the difference in size, ImageMagick generated files in the baseline (renders top-down) format instead of the progressive (renders from blurry to sharp) format that GD2 does.

Using progressive is the best commonly used format for web pages. It starts as a blurry image and turns sharp when done. It improves the user experience by loading the images incrementally.

If you still want to use ImageMagick, here are some basic commands. Run the following code on your shell. Then, switch to ImageMagick in your Magento configuration backend:

apt-get install -y imagemagick --fix-missing
apt-get install -y php5-imagick
service php-fpm restart
php -i | grep imagick

Previous Chapter

Configuring Magento 2 with CloudFlare

Next Chapter

Configuring Magento 2 with HTTP/2

Table of Contents for Magento 2 - Build World-Class online stores

Configuring optimized images in Magento 2

Tip

Getting ready

How to do it…

How it works…

There's more…

Table of Contents for
Magento 2 - Build World-Class online stores