Resize and Compress Images in HTML CSS & JavaScript

CodingNepal — Tue, 25 Oct 2022 10:38:23 +0000

Did you know that you can resize image dimensions (width & height) and compress their size by reducing the quality on the front end using vanilla JavaScript? If your answer is no then this blog is written for you.

Today, in this blog, you’ll learn How to Resize and Compress Images in HTML CSS & JavaScript from scratch. I believe the codes and logic behind resizing images will not be complicated to understand if you already have basic knowledge of JavaScript.

In my Image Resizer & Compressor tool, users can upload an image and resize its width & height or reduce its size. If they checked the “Lock aspect ratio”, the aspect ratio for an image will be calculated automatically and filled in the field as they start changing width or height.

If the “Reduce quality” is checked, the image quality will be reduced by 40%. And, last users can download their resized images by clicking on the “Download Image” button. Remember downloading images is also done with vanilla JavaScript.

If you’re excited to know what this image resizer looks like, you can click here to view a live demo of it and try to resize your image. But, if you want to see a full video tutorial of this Resize and Compress images project, you can watch the given YouTube video.

Video Tutorial of Resize and Compress Images in JavaScript

I hope you liked the demo of the Image Resizer and understood how I made it using HTML CSS & JavaScript. In the video, you have seen that I didn’t use any external library to resize, compress, and download an image. It’s all done with JavaScript using canvas.

If you didn’t watch the video and want to skip it, you can skip it. But remember this image resizer tool is built using JavaScript canvas and its different methods such as getContext, drawImage, toDataURL, etc. which might be difficult for you to understand if you just copy-paste the codes.

So, I suggest you watch the video and try to understand the codes, methods, and logic of it properly. If you do so, it’ll help you to clear your confusion while recreating this image resizer by yourself or using the codes of it in your other projects. If you want more canvas-based JavaScript projects then you can see my Image Editor, Take Screenshots, Drawing App, etc.

To get source codes or files of this Image Resize and Compress project, you can easily get them from the bottom of this blog post.

Resize and Compress Images in JavaScript [Source Codes]

To create an Image Resizer and Compressor using HTML CSS & JavaScript, follow the given steps line by line:

Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

First, paste the following codes into your index.html file.




  
    
    Image Resizer JavaScript | CodingNepal
    
    
    
  
  
    
      
        
        
        Browse File to Upload
      
      
        
          
            Width
            
          
          
            Height
            
          
        
        
          
            
            Lock aspect ratio
          
          
            
            Reduce quality

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #927DFC;
}
.wrapper{
  width: 450px;
  height: 288px;
  padding: 30px;
  background: #fff;
  border-radius: 9px;
  transition: height 0.2s ease;
}
.wrapper.active{
  height: 537px;
}
.wrapper .upload-box{
  height: 225px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px dashed #afafaf;
}
.wrapper.active .upload-box{
  border: none;
}
.upload-box p{
  font-size: 1.06rem;
  margin-top: 20px;
}
.wrapper.active .upload-box p{
  display: none;
}
.wrapper.active .upload-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.wrapper .content{
  opacity: 0;
  margin-top: 28px;
  pointer-events: none;
}
.wrapper.active .content{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}
.content .row{
  display: flex;
  justify-content: space-between;
}
.content .row .column{
  width: calc(100% / 2 - 15px);
}
.row .column label{
  font-size: 1.06rem;
}
.sizes .column input{
  width: 100%;
  height: 49px;
  outline: none;
  margin-top: 7px;
  padding: 0 15px;
  font-size: 1.06rem;
  border-radius: 4px;
  border: 1px solid #aaa;
}
.sizes .column input:focus{
  padding: 0 14px;
  border: 2px solid #927DFC;
}
.content .checkboxes{
  margin-top: 20px;
}
.checkboxes .column{
  display: flex;
  align-items: center;
}
.checkboxes .column input{
  width: 17px;
  height: 17px;
  margin-right: 9px;
  accent-color: #927DFC;
}
.content .download-btn{
  width: 100%;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 1.06rem;
  border-radius: 5px;
  padding: 15px 0;
  margin: 30px 0 10px;
  background: #927DFC;
  text-transform: uppercase;
}

Last, paste the following codes into your script.js file.

const uploadBox = document.querySelector(".upload-box"),
previewImg = uploadBox.querySelector("img"),
fileInput = uploadBox.querySelector("input"),
widthInput = document.querySelector(".width input"),
heightInput = document.querySelector(".height input"),
ratioInput = document.querySelector(".ratio input"),
qualityInput = document.querySelector(".quality input"),
downloadBtn = document.querySelector(".download-btn");

let ogImageRatio;

const loadFile = (e) => {
    const file = e.target.files[0]; // getting first user selected file
    if(!file) return; // return if user hasn't selected any file
    previewImg.src = URL.createObjectURL(file); // passing selected file url to preview img src
    previewImg.addEventListener("load", () => { // once img loaded
        widthInput.value = previewImg.naturalWidth;
        heightInput.value = previewImg.naturalHeight;
        ogImageRatio = previewImg.naturalWidth / previewImg.naturalHeight;
        document.querySelector(".wrapper").classList.add("active");
    });
}

widthInput.addEventListener("keyup", () => {
    // getting height according to the ratio checkbox status
    const height = ratioInput.checked ? widthInput.value / ogImageRatio : heightInput.value;
    heightInput.value = Math.floor(height);
});

heightInput.addEventListener("keyup", () => {
    // getting width according to the ratio checkbox status
    const width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;
    widthInput.value = Math.floor(width);
});

const resizeAndDownload = () => {
    const canvas = document.createElement("canvas");
    const a = document.createElement("a");
    const ctx = canvas.getContext("2d");

    // if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0
    // 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0
    const imgQuality = qualityInput.checked ? 0.5 : 1.0;

    // setting canvas height & width according to the input values
    canvas.width = widthInput.value;
    canvas.height = heightInput.value;

    // drawing user selected image onto the canvas
    ctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);
    
    // passing canvas data url as href value of  element
    a.href = canvas.toDataURL("image/jpeg", imgQuality);
    a.download = new Date().getTime(); // passing current time as download value
    a.click(); // clicking  element so the file download
}

downloadBtn.addEventListener("click", resizeAndDownload);
fileInput.addEventListener("change", loadFile);
uploadBox.addEventListener("click", () => fileInput.click());

That’s all, now you’ve successfully created a project on Resize and Compress Images in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files.

Compress Image – CodingNepal

Resize and Compress Images in HTML CSS & JavaScript

Video Tutorial of Resize and Compress Images in JavaScript

You may like this:

Resize and Compress Images in JavaScript [Source Codes]