New action: Compress images

September 27, 2019

New action: Compress images

Unless you're an assassin on a government contract, if you run a business, you need to be on Google. This doesn't mean just indexing your website: it means getting on the first page of search results. An important factor affecting the search engine position is how fast your website is loading. In other words, the better it's optimized, the higher it displays on Google.

One of the basic optimization tips is compressing website images with third-party tools, a thing developers often do in their pipelines with Gulp/Grunt/npm scripts before the deployment. We're excited to announce that Buddy now has a dedicated action allowing you to compress images without scripts and external libraries.

Action locationAction location

Compressing images

Here's an example pipeline for a website running on WordPress:

  1. Run tests
  2. Compress images
  3. Upload files to server (FTP/SFTP/S3 etc.)
  4. Invalidate cache

Example pipelineExample pipeline

In the action you can set the following details:

  1. The path to the images (Buddy will look for images recurrently in every subfolder)
  2. Output directory for compressed images in the pipeline filesystem
  3. Level of compression: low, medium, or high
  4. Type of iamges to process: jpg, png, gif or svg

Action detailsAction details

Once you configure the action and execute the pipeline, Buddy will compress all selected file types and produce them in the output directory.

Buddy will retain file naming and folder structure in the output directory. This means that the relative path to the compressed image will be the same as to the image before the compression.
At the moment, the files are indicated by their extension: jpg, png, gif and svg. In the future, we are going to add detection based on the MIME type.

Deployment

If you want to deploy the application together with compressed images, you need to add two deployment actions:

  1. The first should deploy application files without images (use the file ignore option to specify the extensions, e.g. *jpg)
  2. The second should deploy the compressed images from the folder that you defined as the output directory in the compress action
Both actions should deploy to the same path on the remote server to make sure the application is deployed in full.

Speed

The action only compresses files that have changed since the last deployment. This allows deployment actions to use changeset mechanisms (i.e. only deploy changed files, not all images at once), which significantly improves the speed of upload.

Open source

The action is based on a dedicated application which is available in our public repository on GitHub on MIT License: https://github.com/buddy-works/imgcmp. You can also download it as a Docker image or an npm package

If you tips or suggestions on improving the action, feel free to share them in the comments or on our live-chat.

Share:

Alexander Kus

Alexander Kus

Customer Success Manager

A story-teller and conversation-lover, Alexander decided to invest his skills to help his friends at Buddy transform the cold language of patch notes into exciting narratives. Also: an avid gamer, hip-hop DJ, Liverpool FC fan, absentminded husband, and the father of two.