Image Resizer Script in HTML, CSS And JavaScript with Source Code

Resizing and compressing photos has became easy with this code, in case you want to reduce the quality and also it's size (width/height) you can do it simply with one click. this article is particularly for those who want to make their own images size reducer using only HTML, CSS and JavaScript.

I truly hope you would have liked the demo of the image size reducer and compressor made by using HTML, CSS And JavaScript, in case you want to understand the logic behind this code you better read the blog fully to understand what is used and how the code work.

So in this article you're going to learn how to compress and resize images using Html, CSS and JavaScript from the begining. if you have the basic knowledge of JavaScript I understand you would possibly have problems understanding the codes and the logic behind this.

in this image Resizer and size reducer code, people can upload their image and change it's size width and height to its choice. Lock and unlock aspect ratio means that if you want this code to select the appropriate size for your image then Tik the lock and if you want to give manually then unlock and put your size inside the input boxes.

if you want the image Resizer and Compressor to reduce the image quality you should choose the reduce quality option, once it's selected, the image Resizer and Compressor will reduce the image quality by 35% and then go ahead and download the image it'll automatically begin downloading to your gallery with edited version.

if you want to know how the image quality reducer will look on your website online then try the demo given below.

Image Resizer and Compress in HTML, CSS & JavaScript - Source Codes

To edit this code you will go through some step which is given below:

Create a file and name it. You can use any name of this folder and create the below-mentioned files inside this folder.
Create an index.html file. It's the main file to your project, 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
If you want all code work in one html file the Create any html file, name it and it's extension must be an .html
Put the CSS file in the <style> command above the <head>
Create a <script> above the </body> and paste the JavaScript code there.
Now run the html file it should work.

Html Code:

The .HTML code for image Resizer and Compressor is:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

<title>Image Resizer JavaScript | NulledAppSource</title>

</head>

<body>

<p>Browse File to Upload</p>

</div>

<label>Width</label>

</div>

<label>Height</label>

</div>

<label for="ratio">Lock aspect ratio</label>

</div>

<label for="quality">Reduce quality</label>

</div>

<button class="download-btn">Download Image</button>

</div>

</body>

</html>

CSS Code:

The .CSS code for image Resizer and Compressor is:

/* 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;

}

JavaScript Code:

The JavaScript code for image Resizer and Compressor is below, Paste the following code in your .script 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 and 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());

You are done. you’ve made a Resize and Compress Images in HTML CSS & JavaScript now. If your code doesn’t work please contact us. It's free. Thank you and Please keep visiting our site for more codes in future and daily updates.

Image Resizer Script in HTML, CSS And JavaScript with Source Code

🔹About

#buttons=(Accept !) #days=(20)

Contact form

Image Resizer Script in HTML, CSS And JavaScript with Source Code

You may like these posts

#buttons=(Accept !) #days=(20)

Contact form