Resize and Compress Images in HTML, CSS & JavaScript

Published on June 6, 2024

Hello, and welcome back to our channel! Today, we have an exciting tutorial lined up for you. We’ll be walking you through the process of creating a simple yet powerful image resiser using HTML, CSS, and JavaScript. So, let’s dive right in!

First off, let’s take a look at the HTML code that forms the foundation of our image resiser.

We begin with the usual structure of an HTML document. The <!DOCTYPE html> declaration sets the document type and ensures compatibility with web browsers.

In the <head> section, we specify the character set, title, link to an external stylesheet for styling, and the viewport meta tag for responsive design. Additionally, we include a JavaScript file using the <script> tag with the defer attribute, ensuring it’s loaded after the document content.

Moving on to the <body> section, we have our main content wrapped inside a <div> with the class “wrapper” for structuring purposes.

Inside the wrapper, we have the upload box, where users can select an image file from their device. It consists of an <input> element of type “file” with the accept attribute set to “image/*” for accepting only image files. The actual file input is hidden, and we display an image icon alongside a text prompt using an <img> tag and a <p> tag.

Next, we have the resising options section. Users can specify the desired width and height for the resised image using <input> elements of type “number” inside separate columns.

Additionally, we provide checkboxes for users to choose whether to lock the aspect ratio or reduce the quality of the resised image. These checkboxes are enclosed within separate columns for organisation.

Finally, we have the download button, which users can click to download the resised image once they’re satisfied with their adjustments.

And there you have it! That’s the HTML structure of our image resiser. In the next part of this tutorial, we’ll dive into the CSS to make our design visually appealing and user-friendly.

CSS

In this section, we’ll go through the CSS code that styles our HTML elements, making our image resizer visually appealing and user-friendly.

Starting off, we’re applying a global reset to all elements using the universal selector *. This ensures consistent spacing and sising throughout the project.

We set up the body to be a flex container with centre alignment both horizontally and vertically. This ensures our image resizer is nicely centred on the screen, regardless of the viewport size.

Moving on to the .wrapper class, we define its dimensions, padding, and background colour. This encapsulates our entire image resizer interface. Additionally, we’ve set up a transition effect for smooth height changes.

By adding the .wrapper.active class, we increase its height to accommodate additional content, such as the uploaded image and resizing options.

Inside the wrapper, we have the upload box styled with a dashed border to indicate the area where users can drop their image files. When activated, the border disappears, providing a cleaner look.

The content section initially has zero opacity and is not clickable (pointer-events: none). This prevents users from interacting with it until an image is uploaded. Once activated, it fades in smoothly, and users can interact with the resizing options.

We style the input fields for width and height, ensuring they are visually consistent and easy to use. The labels are also styled for clarity and readability.

Checkboxes for locking aspect ratio and reducing quality are styled to match the overall design aesthetic. When checked, they change colour to indicate selection.

Finally, we style the download button with a contrasting colour scheme, making it stand out. It’s also set to uppercase for emphasis.

And there you have it! That’s the CSS styling for our image resiser interface. In the next part of this tutorial, we’ll delve into the JavaScript to add functionality to our project.

JAVASCRIPT

Now let’s move on to the JavaScript part where we’ll add functionality to our image resiser.

In this section, we’ll go through the JavaScript code that enables our image resiser to do its magic, allowing users to upload, resize, and download images seamlessly.

We start by selecting various elements from our HTML document using document.querySelector() and store them in variables for easy access.

When a file is selected for upload, the loadFile function is triggered. It loads the selected image, updates the width and height input fields with the image’s dimensions, calculates the original image’s aspect ratio, and activates the .wrapper class to reveal the resising options.

As users type in the width or height input fields, the corresponding value is updated accordingly. If the aspect ratio checkbox is checked, the height or width is adjusted to maintain the original aspect ratio of the image.

When the download button is clicked, the resizeAndDownload function is executed. This function creates a canvas element, draws the resised image onto it, sets the desired image quality, converts the canvas content to a data URL, and triggers a download of the resised image.

We also have event listeners set up for the file input, upload box, and download button to handle user interactions effectively.

And there you have it! That’s the JavaScript code powering our image resiser, allowing users to upload, resise, and download images with ease.

If you’re enjoying this video, don’t forget to like, subscribe, and hit the notification bell for more content like this. Happy coding, and stay tuned for our next video!

Our Latest Blog

Become a Selenium Automation Expert Ace the LSET Tester Exam & Unlock New Opportunities

March 16, 2025ByFlorence

Our Latest Blog

Become a Selenium Automation Expert: Ace the LSET Tester Exam & Unlock New Opportunities!

Boost Your Career with the LSET Selenium Tester Exam

Key Takeaways from the International AI and Machine Learning Workshop with Dr. Eric Hossein Fontes

Popular Courses

Follow Us