This is a simple, client-side Image Compressor web app that allows users to upload an image and reduce its file size directly in the browser without needing to install any software.
Key Features:
- Upload images via drag-and-drop or file input
- Compresses JPEG/PNG images using the Canvas API
- Adjustable quality slider to control compression level
- Instant preview of original vs. compressed image
- Option to download the compressed image
Technologies Used:
- HTML5: Structure & file input
- CSS3: Responsive design and UI styling
- JavaScript: File handling, image processing with Canvas API, compression logic
📌 HTML Code Overview
🔹 Header (Navbar)
-
Includes a logo and navigation menu (
Home,About,Contact Us,Help). - The logo uses an external image and styled brand name "Img Compressor".
🔹 Landing Section
-
Features a split layout:
- Left Side (ll): Displays an image/logo.
-
Right Side (rr): Contains a scrolling heading (using
<marquee>) describing the purpose of the tool. - A "Get Started" button links to the tool section.
🔹 Main Tool Section (#gtstr)
- Also uses a two-column layout:
- Left Side (rr1): Logo and introductory text encouraging image editing.
- Right Side (ll1): Actual image compressor tool interface.
⚙️ Image Compressor Features in HTML
- Image Upload: A file input allows users to upload an image (only images are accepted).
-
Resize Controls:
- Users can manually set Width and Height.
- Option to lock aspect ratio via a checkbox.
- Quality Control: Checkbox to reduce image quality for compression.
- Download Button: Triggers image processing and download.
🖼️ User Interface Components
- Image preview/upload area.
- Input fields for width and height.
- Aspect ratio and quality toggle options.
- Download button to save the compressed image.
🔗 HTML Code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Compressor</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image"
href="https://www.freepnglogos.com/uploads/camera-logo-png/camera-logo-download-clipart-24.png">
</head>
<body>
<nav>
<div class="logo">
<img src="https://editzstock.com/wp-content/uploads/2022/05/Phoro-editing-logo-2-1024x1024.png" height="80px">
Img<span style="color: rgba(119, 89, 219, 0.831);"> Compressor</span>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
<div class="start">
<div class="ll">
<img src="https://editzstock.com/wp-content/uploads/2022/05/Phoro-editing-logo-2-1024x1024.png"
style="height: 50vh; margin-top: 50px; filter: drop-shadow(0 0 10px gray);">
</div>
<div class="rr">
<div class="rrchild">
<marquee direction="left">
<h1>A perfect example of Image Editor in which we can resize images and also reduce the quality of
images.</h1>
</marquee>
<hr>
</div>
<button id="start"><a href="#gtstr">Get Started</a></button>
</div>
</div>
<div class="start1" id="gtstr">
<div class="rr1">
<img src="https://editzstock.com/wp-content/uploads/2022/05/Phoro-editing-logo-2-1024x1024.png"
style="height: 40vh; margin-left:20px; margin-top: 50px; filter: drop-shadow(0 0 10px gray);">
<div>
<h1 style="text-align: center;">Select and Edit</h1>
<p>It is easy to use and also user friendly.</p>
</div>
</div>
<div class="ll1">
<div class="container">
<div class="img-section" id="imgbox">
<input id="imgs" type="file" accept="image/*" hidden>
<img src="upload.png" width="80px" alt="img">
<label>Browse File to Upload</label>
</div>
<div class="base">
<div class="right">
<label for="width">Width</label>
<input type="number" id="width">
<span>
<input type="checkbox" id="ratio" checked>
<label for="ratio">Lock aspect ratio</label>
</span>
</div>
<div class="left">
<label for="height">Height</label>
<input type="number" id="height">
<span>
<input type="checkbox" id="qual">
<label for="qual">Reduce quality</label>
</span>
</div>
</div>
<input type="button" id="btn" value="Download Image">
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>📌 CSS Code Overview
- Modern, clean UI using flexbox layout.
- nteractive effects (like hover and upload preview).
- Responsive behavior across screen sizes.
- Visual consistency through color, padding, and structure.
🔗 CSS Code here:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgba(119, 89, 219, 0.831);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
color: rgb(99, 99, 99);
scroll-behavior: smooth;
}
nav{
z-index: 1;
display: flex;
justify-content: space-around;
align-items: center;
background-color: white;
/* padding: 20px; */
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.logo{
font-size: 24px;
cursor: pointer;
display: flex;
font-weight: 600;
/* justify-content: center; */
align-items: center;
}
nav ul{
gap: 20px;
display: flex;
}
nav ul li{
list-style: none;
}
nav ul li a{
font-size: 18px;
text-decoration: none;
color: gray;
}
.start
{
overflow: hidden;
width: 85%;
/* box-shadow: 0 0 20px gray; */
border-radius: 10px;
background-color: rgb(255, 255, 255);
height: 70vh;
margin-top: 20vh;
margin-bottom: 10vh;
}
.start2
{
/* overflow: hidden; */
width: 85%;
display: flex;
justify-content: space-between;
/* box-shadow: 0 0 20px gray; */
border-radius: 10px;
background-color: rgb(255, 255, 255);
min-height: 70vh;
margin-top: 20vh;
margin-bottom: 10vh;
padding: 10px;
}
#start{
/* color: rgb(0, 0, 0); */
font-size: 24px;
position: relative;
top: 28%;
right:-44%;
transform: rotate(50deg);
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
font-weight: 600;
border-radius: 2px;
font-size: 25px;
cursor: pointer;
border: none;
outline: none;
&:hover{
background-color: rgb(233, 231, 231);
}
}
.hide{
display: none;
}
#start a{
text-decoration: none;
color: black;
}
.start .ll{
padding-left: 100px;
}
.ll1{
/* border-left: 2px dashed gray; */
display: flex;
align-items: center;
justify-content: center;
width: 420px;
height: 100%;
padding-left: 10px;
/* position: relative;
right: 0;
top: 0; */
/* float: right; */
/* margin-right: 10px; */
/* background-color: rgb(121, 103, 80); */
}
hr{
color: white;
}
.start .rr{
background-color: rgba(112, 60, 170, 0.831);
height: 120%;
position: relative;
width: 90%;
top: -400px;
right: -500px;
transform: rotate(-50deg);
color: white;
}
.rr1{
display: flex;
align-items: center;
justify-content: center;
width: 900px;
}
.start1{
overflow: hidden;
width: 85%;
/* box-shadow: 0 0 20px gray; */
display: flex;
align-items: center;
border-radius: 10px;
background-color: rgb(255, 255, 255);
min-height: 70vh;
margin-top: 20vh;
padding: 20px;
margin-bottom: 10vh;
}
.img-section{
display: flex;
flex-direction: column;
cursor: pointer;
/* justify-content: center; */
align-items: center;
width: 100%;
border: 2px dashed rgb(148, 146, 146);
padding: 40px;
border-radius: 6px;
overflow: hidden;
&:hover{
background-color: rgba(251, 249, 249, 0.867);
}
}
.img-section.active{
border: none;
}
.img-section.active label{
display: none;
}
.img-section.active img{
width: 100%;
object-fit: cover;
height: 100%;
}
.img-section label{
margin-top: 25px;
}
.container{
background-color: rgb(245, 244, 245);
padding: 20px;
border-radius: 5px;
display: flex;
flex-direction: column;
width: 400px;
}
.base{
display: flex;
justify-content: space-around;
}
.base label{
font-weight: 600;
margin-top: 25px;
}
.base input[type=number]{
margin-top: 15px;
padding: 5px;
border: none;
outline: none;
border: 1px solid gray;
border-radius: 4px;
}
.base input[type=checkbox]{
margin-top: 24px;
cursor: pointer;
}
.base .left,.base .right{
display: flex;
flex-direction: column;
}
input[type=button]{
margin-top: 25px;
padding: 10px;
background-color: rgba(119, 89, 219, 0.831);
color: white;
border: none;
cursor: pointer;
&:hover{
background-color: rgba(105, 79, 192, 0.831);
}
}
@media (max-width:1305px){
.start .rr{
top: -350px;
right: -400px;
}
}
@media (max-width:1180px){
.rr1{
flex-direction: column;
/* width: 500px; */
}
}
@media (max-width:1105px){
.start .rr{
top: -300px;
right: -350px;
}
}
@media (max-width:970px){
.start .rr{
width: 100%;
height: 140%;
top: -305px;
right: -300px;
}
#start{
top: 20%;
right:-34%;
}
.start .ll{
padding-left: 50px;
}
}
@media (max-width:875px){
.start1{
flex-direction: column;
}
.ll1{
/* border-left: 0px;
border-top: 2px dashed gray; */
border: none;
padding-top: 20px;
}
.rr1{
padding-bottom: 20px;
}
}
@media (max-width:835px){
.start{
display: none;
}
}
@media (max-width:570px){
.container{
width: 350px;
}
.base input[type=number]{
width: 140px;
}
nav{
flex-direction: column;
}
nav ul{
padding: 5px;
width: 100%;
/* align-items: center; */
background-color: rgb(227, 223, 223);
justify-content: center;
/* border-top: 1px solid gray; */
}
}
@media (max-width:460px){
.container{
width: 300px;
}
.base input[type=number]{
width: 100px;
}
}
@media (max-width:380px){
.container{
width: 270px;
}
}
.right22{
display: flex;
flex-direction: column;
}
.right22 h1{
background-color: antiquewhite;
}
🔚 JavaScript Summary:
This JS code:
- Lets users upload an image
- Resize it with optional aspect ratio locking
- Compress it using canvas
-
Download the new compressed image
All done client-side, with no server or external API needed.
🔗 JS Code here:
let imginp=document.getElementById("imgs");
let imgcon=document.getElementById("imgbox");
let preview=imgcon.querySelector("img");
let height=document.getElementById("height"),
width=document.getElementById("width");
let ratio=document.getElementById("ratio");
let ratioimg;
let btn=document.getElementById("btn");
let quality=document.getElementById("qual");
let base=document.querySelector("base");
document.addEventListener('contextmenu',event=>{
event.preventDefault();
}
)
const loadFile=(e)=>{
const file=e.target.files[0];
if(!file) return;
preview.src=URL.createObjectURL(file);
preview.addEventListener("load",()=>{
document.querySelector(".img-section").classList.add("active");
document.querySelector(".img-section").style.padding=0;
height.value=preview.naturalHeight;
width.value=preview.naturalWidth;
ratioimg=preview.naturalWidth/preview.naturalHeight;
})
console.log(file);
}
width.addEventListener("keyup",()=>{
const h=ratio.checked ? width.value / ratioimg : height.value;
height.value=Math.floor(h);
})
height.addEventListener("keyup",()=>{
const w=ratio.checked ? height.value / ratioimg : width.value;
width.value=Math.floor(w);
})
const resize=()=>{
const canvas=document.createElement("canvas");
const a=document.createElement("a");
const ctx=canvas.getContext("2d");
const imgQuality=quality.checked ? 0.7 : 1.0;
canvas.width=width.value;
canvas.height=height.value;
ctx.drawImage(preview,0,0,canvas.width,canvas.height);
a.href=canvas.toDataURL("image/jpeg",imgQuality);
a.download=new Date().getTime();
a.click();
}
btn.addEventListener("click",resize);
imginp.addEventListener("change",loadFile);
imgcon.addEventListener("click",()=>{ imginp.click(); })
✅ Wrapping Up the Journey
After exploring the fundamentals of HTML, CSS, and JavaScript, I’ve successfully built a fully functional Image Compressor web app. This project helped me deepen my understanding of:
- File handling and previews in JavaScript
- Canvas API for image manipulation
- Responsive UI design using CSS
- Real-world form and interaction logic
Not only is this tool lightweight and user-friendly, but it also performs all operations entirely on the client side — meaning no server uploads and no privacy concerns.
🎯 Project Output Demo
Below is the output of the Image Compressor tool in action. Upload any image, adjust dimensions or quality, and download the compressed version instantly!
So,this is the final output of our project. Feel free to suggest us if needed.
THANKS TO ALL
0 Comments