In this article we’ll see how to optimize pictures in two clicks, directly from Vscode
This article is written for Linux and was tested with Debian.
Other Linux flavors like Ubuntu, Arch Linux, Mint or Fedora should work too.
You are using Windows or Mac? See the documentation of “Optimize Images”, other configurations are available.
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#
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
- paste the following instructions:
ext install fabiospampinato.vscode-optimize-images
Hit enter and you’re done.
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.
Open the sidebar in Vscode and right-click on a picture.
You should see the following entry in the menu: