In this article we’ll see how to optimize pictures in two clicks, directly from Vscode:

Optimize images from the right-click menu of Vscode

This article was written for Debian and should work with other Linux flavors, like Ubuntu, Arch Linux, Mint, etc

You are using Windows or Mac? See the documentation of “Optimize Images”, other configurations are available.

Installation

Overview

We need to install two things:

  • the package imgp, a powerful image editor only available from the command line
  • the Vscode extension “Optimize Images”, which makes imgp available from the right-click menu of Vscode.

Installation of imgp

The package imgp is available in most Linux distributions, like Debian, Ubuntu, Arch Linux, CentOS, and Fedora.

You’re using Debian? A package is available from the repositories:

sudo apt install imgp

Installation of the extension ‘Optimize Images’

The extension "Optimize Images" can be installed in Vscode this way:

  • Open the command palette with Ctrl+Shift+P
  • paste the following instructions: ext install fabiospampinato.vscode-optimize-images

Hit enter and you’re done.

Settings

Last step, paste the following lines in settings.json :

 // Optimize images
    // ref: https://roneo.org/en/vscode-optimize-images-with-imgp
    "optimizeImages.app": "imgp",
    "optimizeImages.appOptions": [
        "--optimize", 
        "--convert", // Convert png to JPG
        "-x 1024x768", // Max size
        "--quality 95", // Quality factor
        "[filepath]"
    ],
    "optimizeImages.imageRegex": ".*\\.(png|gif|jpe?g)$", // Regex used for matching images. Requires double escaping
    "optimizeImages.searchDepth": 10, // Maximum depth to look at when searching images
    "optimizeImages.searchStartingPath": ".", // Path relative to the root where to start searching images
    "optimizeImages.searchIgnoreFolders": [".git"], // Ignore these folders when searching images

Each line in the section “appOptions” corresponds to an argument of imgp. See the official documentation for more options.

That’s it!

Open the sidebar in Vscode and right-click on a picture.

You should see the following entry in the menu:

Optimize images from the right-click menu of Vscode