Master Real-Time Image Resizing with Python: A 3-Step Guide

In the modern digital era, image management becomes extremely essential for content creation. In any case, be it preparing images to be uploaded on the web, compressing them to fit mobile devices, or accommodating a particular design in any way, image resizing on the average is performed by almost every user. In this blog, we’ll  will try to help create a web-based application for image resizing which would be simple and easy to users. A very basic and powerful framework called Streamlit along with Python programming Image Processing Applications Library will be used for this. So, let’s get right to the work!

The Challenge

Objective: Create a web-based solution where users can upload photos, input dimensions for the image, view the original and resized photos, and download the resized image. The application should be designed with ease of accessibility to uploading, resizing, and the downloading of an image in mind.

Background: Resizing images before using them in applications is a common activity. For example, preparing images for the web, rescaling images for smartphone displays, or sizes defined by some design. A simple web application can enhance this experience by letting people upload, resize and control images in a more fun and engaging manner.

Scope of the Application

The following will be additional functionalities which our web application will incorporate.

• Image Upload: Simple forms will allow users to submit images (JPEG or PNG).
• Image Resizing: Afterwards the user specifies, and their application will resize the images as per the size provided (width and height). The application will use high-quality image resizing algorithms.
• Display Images: All the original images will be presented for comparison alongside the resized images.
• Image Download: The reduced size image can be downloaded only in PNG format.

Building the Application

Tools and Libraries

To create a web interface, we’ll rely on Streamlit and include image processing using Pillow (PIL). Streamlit is a great platform for creating web interactive applications with little code, while Pillow has a lot to offer in terms of image processing.

1. This part lists all the necessary libraries and modules required for the project.

import streamlit as st
from PIL import Image
import io

• streamlit: To create the web application interface.
• PIL (Pillow): Image processing component.
• io: To work with image data in byte format.

2. Image Resizing Function

Create the implementation of the function which is in charge of the image resizing process. This function will be applied later in the application to carry out the resizing process.

def resize_image(image, width, height):
    # Use LANCZOS filter for high-quality resizing
    return image.resize((width, height), Image.LANCZOS)

• resize_image(image, width, height): This method accepts three parameters – image, width, height – and produces a resized image using the LANCZOS filter for producing a high-quality image.

3. Main Application Logic

This part deals with the primary operations of the application, such as how the users work with it, and image processing, and so on.

def main():
    st.title("Image Resizer")

    # Upload image
    uploaded_file = st.file_uploader("Choose an image file", type=["jpg", "jpeg", "png"])
    
    if uploaded_file is not None:
        # Open image
        image = Image.open(uploaded_file)
        
        st.image(image, caption="Uploaded Image", use_column_width=True)
        
        # Resize options
        st.sidebar.header("Resize Options")
        width = st.sidebar.number_input("Width", min_value=1, value=image.width)
        height = st.sidebar.number_input("Height", min_value=1, value=image.height)
        
        # Resize image
        resized_image = resize_image(image, width, height)
        
        # Show resized image
        st.subheader("Resized Image")
        st.image(resized_image, caption="Resized Image", use_column_width=True)
        
        # Save resized image to BytesIO object
        buffered = io.BytesIO()
        resized_image.save(buffered, format="PNG")
        img_bytes = buffered.getvalue()
        
        # Download button
        st.sidebar.download_button(
            label="Download Resized Image",
            data=img_bytes,
            file_name="resized_image.png",
            mime="image/png"
        )

• title(“Image Resizer”): Adds a title to the web application.
• file_uploader: Presents a mechanism for the user to upload an image.
• image: Renders the images that were uploaded and resized respectively.
• sidebar.number_input: At this section, image dimensions are given by the user.
• sidebar.download_button: In this, the user can download the image that has already been resized.

4. Execution Block

This block applies some conditions such that it only executes when the script is first run containing the main function.

if __name__ == "__main__":
    main()

• if name == “main”: ensures that the main function gets executed only when the associated script is directly run.

Resources

It is possible to access the complete code and other project materials from the following link: GitHub. Do check out and add to the collection:

GitHub Repository: Image Resizer Project.

Are you keen to develop more practical applications based on Python in real time? Then have a look at what we achieved in our last project:

• Using Python to Create a Weather App that Updates in Real-Time

This project is aimed at the creation of a working weather application which refreshes in real time as an added supplement to the tool that resizes images.

To Increase your understanding, Watch Step wise-step Project Explanation video

Conclusion

One of the best ways to make the image optimization work easier is simply building an image resizing web application. With the help of Streamlit and Pillow, it is possible to design a multimedia interface where users upload, resize, view, and download images within a short time. This approach not only helps save time but also ensures that the images are resized properly for specific purposes improving overall user experience. Visit the GitHub site to check out the relevant materials and begin uploading and optimizing images right away!