vscode extension to optimize images and improve performance.
Tags: vscode, typescript, cloudinary, programming
Published: 2023-03-10 18:00:09

## redim 
<p align="center"><img width="115" alt="logoredim" src="https://user-images.githubusercontent.com/111618970/223301921-ff9234ed-1103-4a2c-a5fe-7bd1769a54bc.PNG"> 

<p align="center" > Redim is a simple vs code extension to optimize images using commands.

<p align="center" > <img src="https://img.shields.io/badge/powered%20by-Cloudinary-blue" >
</p>

## 💻 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](https://www.github.com/midudev) hackathon: [Cloudinary CloudCreate](https://cloudinary.com/blog/cloudinary-cloudcreate-tech-products-hackathon?utm_source=twitter&utm_medium=social-company&utm_campaign=1307&utm_term=194&utm_content=blog_cloudcreate_hackathon), in collaboration with [Cloudinary](https://cloudinary.com/). 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' 
    

**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.

<p align="center" ><img src="https://user-images.githubusercontent.com/111618970/223537128-b39cf7f2-9446-473b-8c4b-74c2d8b88b6f.gif" >


<p align="center" ><img src="https://user-images.githubusercontent.com/111618970/223536011-0995e9a2-e455-4d89-8399-9efd2f05c03a.gif" >

The performance is improving by reduce size image

<p align="center" ><img src="https://user-images.githubusercontent.com/111618970/223301110-3362515c-a06d-43c8-8795-6b6baf039cfe.gif" >


<h3 align="center">Comparison of the size value of the original image with the size value of optimized images setting different image qualities:</h3>

Original Image size = 6.64 MB 
  
<p float="left">
<img width="600" alt="img_original" src="https://user-images.githubusercontent.com/111618970/224313118-1dee7fc7-4821-451c-9c77-e667b1a3131a.PNG">
<img width="335" alt="img_ori_sb" src="https://user-images.githubusercontent.com/111618970/224313150-03571b0d-9a03-4352-9ac7-f8e7b3900b22.PNG">
</p>

**Optimized Image quality 100% size = 4.45 MB**   
<p float="left">
<img width="606" alt="optimizedimg" src="https://user-images.githubusercontent.com/111618970/224313189-feca831b-d2a1-4323-899b-8bdad22da475.PNG">
<img width="330" alt="optimg" src="https://user-images.githubusercontent.com/111618970/224313199-6c9d3b52-99a0-4616-bf67-3c0a48ffd668.PNG">
</P>

**Optimized image quality 60% size = 334.15 KB**
<p float="left">
<img width="606" alt="opt60" src="https://user-images.githubusercontent.com/111618970/224315563-e24b1240-82f7-45c1-815e-f4ad67428f65.PNG">
<img width="335" alt="opt60s" src="https://user-images.githubusercontent.com/111618970/224315619-9117c518-4a34-4b82-8679-6cae02ad34c8.PNG">

</P>


## 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.