Processing images using Imglx

Image processing is an essential part of any web interface development. Poor quality of UI graphics will scare off users, and a large number of high-resolution images will make the page really heavy and will render the application hardly usable. Such problems can usually be solved using content delivery networks (CDN’s), but what if you need to process an image directly before displaying it on the page?

For example, you want to show an animation that will shift the user’s attention to the most important areas of the page, but will do it discreetly and delicately. Such transformations can be made in Photoshop, but such an approach increases the overall cost of the solution and becomes the designer’s pain in the neck.

There is a solution – it’s called ImgIx. This is an add-on for CDN (Amazon CloudFront) that enables you to process images in real time before adding them to cache. Imglx offers plenty of functionality for working with images without compromising on quality, as well as a number of other optimization features, for example Monochrome, Blur, Halftone and others.

As of now, all files uploaded to ImgIx are processed by servers based on the OS X graphics framework. It offers high performance, which is important for storing data in a cloud (SSD-based CDN).

Getting started with ImgIx. Selecting a data source

First of all, you need to create a data source and deploy it. There are several types of sources that connect ImgIx with an image storage. Let’s take a look at the 3 main ones:

1. Amazon S3: Connection to an existing Amazon S3 bucket using your credentials. Amazon Simple Storage Service is a file hosting service offering high data transmission speed coupled with secure and reliable storage of your files. The key advantage of Amazon S3 is its cost-efficiency – we only pay for the storage size, no extra costs are charged.
2. Web Folder: an Internet data transmission protocol. In this case, the source connects to existing file folders on our site. There is no need to connect to external storages and download the materials again.
3. Web Proxy: a proxy service for downloading any available image. This source can connect to any image on the web using a specified URL address. This method seems to be the easiest one, but here’s where ImgIx developers recommend checking the safety of those files and specifying the source of images used.

There are special requirements for each source that can work with ImgIx. Each of them has additional parameters that must be set before the service is used for the first time.

An example using a Java service

Let’s learn to use the ImgIx service for your own purposes. To do this, we will need to understand how we can change images by specifying parameters. Let’s read a corresponding paragraph in the documentation to learn the following:

To process images, you need to add the necessary attribute to the URL as explained on the main page of the site. Therefore, we suggest using DSL for working with ImgIx, because we think that it’s a good solution for this task.

Let’s create an IImgIxBuilder interface and its implementation with the necessary methods (each method in this case will be changed in ImgIx). For instance, to set the target Width, Height, you need to set the w=PARAM&h=PARAM parameters in our path (to an image in the S3 bucket).

Therefore, we create an enum of the available attributes:

    
      public enum ImgIxParams {
        WIDTH("w"),
        HEIGHT("h")
		    ...
      }
    
  

and methods:

    
      public IImgIxBuilder setWidth(String width) {
        this.width = width;
        return this;
      }

      public IImgIxBuilder setHeight(String height) {
          this.height = height;
          return this;
      }
    
  

You also need to specify mandatory parameters in the constructor: imgIx domain (that we specified while configuring the source) and the original source to the image in S3.

And the resulting method: public String makeLink(), which will generate the final link to the imgIx service.

As the result, we can use the construct below for various types of image transformations

    
      builder.setWidth("480")
      .setHeight("300")
      .setTrim("auto", "black", "9", "8", "")
      .setAuto("enhance")
      .setMonochrome("f00")
      .setExtension("jpg");
    
  

    
      IImgIxBuilder builder = new CImgIxBuilder(domain, "amazonImgPath");
        builder.setWidth("480")
        .setHeight("300")
        .setExtension(ext)
        .setQuality("75")
        .setTrim("auto", "black", "9", "8", "")
        .setAuto("enhance")
        .setFit("crop")
        .setPalette("json");
      CPaletteJson paletteJson = CImgIxDownloader.downloadPaletteJson(builder.makeLink());
    
  

        
          @Test
          public void builderShouldChangeAuto() throws Exception {
              IImgIxBuilder builder = new CImgIxBuilder(domain, "amazonImgPath");
              builder.setAuto("enhance");
              assertTrue(StringUtils.equals(getParamByName(builder.makeLink(), CImgIxBuilder.ImgIxParams.AUTO.getParamName()).getValue(), "enhance"));
          }

          @Test
          public void builderShouldChangeFit() throws Exception {
              IImgIxBuilder builder = new CImgIxBuilder(domain, "amazonImgPath");
              builder.setFit("crop");
              assertTrue(StringUtils.equals(getParamByName(builder.makeLink(), CImgIxBuilder.ImgIxParams.FIT.getParamName()).getValue(), "crop"));
          }