In this article we’ll see how to optimize pictures in two clicks, directly from 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.
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
- 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: