DEV Community

Cover image for vscode extension to optimize images and improve performance.
Ivan
Ivan

Posted on

4

vscode extension to optimize images and improve performance.

redim

logoredim

Redim is a simple vs code extension to optimize images using commands.

💻 Features

  • Optimize the images in your local folder by using one command
  • redim converts your images to webp
  • Improve the performance of your web site by optimizing the size of your images.

💻 New Features version 0.2.0

  • Added 6 new Commands to automatically download the optimized file to your folder.

🔥 Motivation

This project was created to participate in @midudev hackathon: Cloudinary CloudCreate, in collaboration with Cloudinary. Using the amazing cloudinary service, I made the extension with the nodejs SDK provided by cloudinary and you will be impressed how useful and clear it is to use.

🛠️ Installation

Go to https://marketplace.visualstudio.com/items?itemName=Redimvs.redim or install from vs code

💻 How to use

It's very simple and easy to use.

1. Copy the entire path of the image from your folder
2. Go to the command palette and type 'redim', then you can choose to get a link to the optimized file in the cloud or download the optimized file. You will see different quality values, select the one you want to try.
3. Next, paste the path into the input and an info box will show you the link to the optimized image or the downloaded image in your folder as 'filename-optimized.webp' 
Enter fullscreen mode Exit fullscreen mode

Tip: Using redim quality : 90 reduces the size of your image without losing quality.

You can save the link and use it inside your html tags instead of uploading the image from your local, and the image is hosted on cloudinary.

The performance is improving by reduce size image

Comparison of the size value of the original image with the size value of optimized images setting different image qualities:

Original Image size = 6.64 MB

img_original img_ori_sb

Optimized Image quality 100% size = 4.45 MB

optimizedimg optimg

Optimized image quality 60% size = 334.15 KB

opt60 opt60s

Upcoming Features

- Select the file to optimize using quickpick function
- Option to optimize all files
- Optimize the file by right clicking and selecting the option.
Enter fullscreen mode Exit fullscreen mode

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay