0xb4lint/vscode-responsive-images

JavaScript

Responsive images

Requirements - macOS

brew install imagemagick jpegoptim pngquant webp

Requirements - Linux

sudo apt install imagemagick jpegoptim pngquant webp

Usage

Right click on the 2x image (*@2x.jpg, *@2x.png, *@2x.webp)
Select Responsive images from @2x
Set optimization quality (used by jpegoptim and cwebp, default: 90)
The following files will be generated (overwritten if exists) and optimized:
- jpg file selected (sample@2x.jpg)
  - sample@2x.jpg
  - sample.jpg
  - sample@2x.webp
  - sample.webp
  - sample@lqip.jpg
- png file selected (sample@2x.png)
  - sample@2x.png
  - sample.png
  - sample@2x.webp
  - sample.webp
  - sample@lqip.jpg
- webp file selected (sample@2x.webp)
  - sample@2x.jpg
  - sample.jpg
  - sample@2x.webp
  - sample.webp
  - sample@lqip.jpg

Screenshots

Right click menu

Set quality

Results