Resize and Compress Images in HTML CSS & JavaScript

 Resize and Compress Images in HTML CSS & JavaScript

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

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

<div class="wrapper">
    <div class="upload-box">
        <input type="file" accept="image/*" hidden>
        <img src="https://i.postimg.cc/C5TrXrxS/Upload-Icon-Logo-dmpshift-solutions.png" 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>

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

@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

See the Pen Resize and Compress Images in HTML CSS & JavaScript by SHIFT DMP (@shiftdmp) on CodePen.