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.
You may like this:
- Easy Image Editor in JavaScript
- Random Password Generator Tool
- Drawing or Painting App JavaScript
- How to Take Screenshots in JavaScript
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.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Image Resizer JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="upload-box">
<input type="file" accept="image/*" hidden>
<img src="https://www.codingnepalweb.com/demos/resize-and-compress-image-javascript/upload-icon.svg" alt="">
<p>Browse File to Upload</p>
</div>
<div class="content">
<div class="row sizes">
<div class="column width">
<label>Width</label>
<input type="number">
</div>
<div class="column height">
<label>Height</label>
<input type="number">
</div>
</div>
<div class="row checkboxes">
<div class="column ratio">
<input type="checkbox" id="ratio" checked>
<label for="ratio">Lock aspect ratio</label>
</div>
<div class="column quality">
<input type="checkbox" id="quality">
<label for="quality">Reduce quality</label>
</div>
</div>
<button class="download-btn">Download Image</button>
</div>
</div>
</body>
</html>
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 <a> element
a.href = canvas.toDataURL("image/jpeg", imgQuality);
a.download = new Date().getTime(); // passing current time as download value
a.click(); // clicking <a> 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.
There is an issue with the code. It always gives PNG output even I upload JPG images. Can you please provide code that gives the same result as the same input format?
which algorithm is used to create this image image resizer
Please read the blog and the given codes.
This code does not use any algorithm for image resizing. It uses the HTML5 Canvas API to create a new canvas element with the desired width and height, and then draws the original image onto it using the drawImage() method. It also provides options to adjust the image quality and aspect ratio. Finally, it generates a download link for the resized image using the toDataURL() method of the canvas element.