DEV Community

Cover image for 🖼️ Build an Image Converter WebApp Using Python and Streamlit
Lawani Elyon John
Lawani Elyon John

Posted on

2

🖼️ Build an Image Converter WebApp Using Python and Streamlit

🌟 Introduction

Have you ever wanted a quick, browser-based tool to convert image formats without installing extra software? 🤔 Well, I built an Image Converter WebApp using Python and Streamlit, and it does just that! 🚀 In this post, I’ll walk you through the app, its features, the process of building it, and what I’ve learned along the way.


🛠️ Tech Stack

This project uses:

  • Python: The powerhouse behind image processing.
  • Streamlit: A fantastic framework for building fast, interactive web apps.
  • Pillow (PIL): For handling image file processing.

✨ Features

Here’s what this app offers:

  • 🖼️ File Upload: Supports image formats like PNG, JPG, JPEG, JFIF, and BMP.
  • 🔄 Format Conversion: Easily convert images into formats like PNG, JPEG, JFIF, or BMP.
  • 📤 Image Preview: Displays the uploaded image and its original format.
  • ⬇️ Download Option: Allows you to download the converted image instantly.

Image0 description

🛤️ Let's build the App


Step 1: Setting Up the Project

  1. Open your terminal or command prompt.

  2. Create a new directory named IMGCONVERTOR and navigate into it:

   mkdir IMGCONVERTOR  
   cd IMGCONVERTOR  
Enter fullscreen mode Exit fullscreen mode
  • Open the project folder in VS Code:
   code .  
Enter fullscreen mode Exit fullscreen mode
  • Install the required libraries using the following command:
   pip install streamlit pillow  
Enter fullscreen mode Exit fullscreen mode

Now you’re ready to start building the app! 🎉


Step 2: Writing the Core Functionality

  1. Inside your project directory, create a new Python file named imgconvrtr.py:
   touch imgconvrtr.py  
Enter fullscreen mode Exit fullscreen mode

If you're using Windows, you can create the file with:

   echo. > imgconvrtr.py  
Enter fullscreen mode Exit fullscreen mode
  1. Open the imgconvrtr.py file in your text editor, and add the following code to define the core function for image conversion:
   from PIL import Image  
   import io  

   def convert_img_format(image_file, frmat):  
       with Image.open(image_file) as img:  
           output_img = io.BytesIO()  
           img.save(output_img, format=frmat.upper())  
           output_img.seek(0)  
           return output_img  
Enter fullscreen mode Exit fullscreen mode

This file acts as a module that will be imported into your main Streamlit app to handle image processing.


Step 3: Creating the Streamlit Interface

Streamlit makes building interactive web apps easy, and it's perfect for this project:

  1. In your project directory, create a new Python file named app.py:
   touch app.py  
Enter fullscreen mode Exit fullscreen mode

For Windows users:

   echo. > app.py  
Enter fullscreen mode Exit fullscreen mode
  1. Open the app.py file in your text editor, and add the following script:
   import streamlit as st  
   from PIL import Image  
   from imgconvrtr import convert_img_format  

   # App Title  
   st.title("Image Converter")  

   # File Uploader  
   uploaded_file = st.file_uploader("Upload an Image", type=["png", "jpg", "jpeg", "jfif", "bmp"])  

   if uploaded_file is not None:  
       # Display the uploaded image  
       img = Image.open(uploaded_file)  
       st.image(img, caption="Uploaded Image", use_column_width=True)  
       st.write(f"Original format: {img.format}")  

       # Format selection dropdown  
       output_format = st.selectbox("Choose the output format", ["PNG", "JPEG", "JFIF", "BMP"])  

       # Convert and download the image  
       if st.button("Convert 📸"):  
           converted_img = convert_img_format(uploaded_file, output_format.lower())  
           st.download_button(  
               label=f"Download as {output_format}",  
               data=converted_img,  
               file_name=f"image.{output_format.lower()}",  
               mime=f"image/{output_format.lower()}"  
           )  
Enter fullscreen mode Exit fullscreen mode
  1. Save the file. This script builds an interactive interface where users can upload images, select a desired format, and download the converted image.

You’re now ready to test your app! Run the following command in your terminal:

streamlit run app.py  
Enter fullscreen mode Exit fullscreen mode

This will launch the app in your default web browser, allowing you to interact with the converter. 🚀

🌱 What I Learned

This project taught me:

  • How to use Pillow for image processing.
  • Creating interactive UI with Streamlit.
  • Handling file uploads and downloads in web apps.

🚀 Improvements

Here are some ideas to take this project further:

  • Add GIF and WebP format support.
  • Enable image resizing and cropping.
  • Improve accessibility with better keyboard navigation.

💻 Running the Project

To run this app locally:

  1. Clone the repo:
   git clone https://github.com/Lawani-EJ/Image-Convertor  
Enter fullscreen mode Exit fullscreen mode
  1. Navigate to the project directory:
   cd Image-Convertor  
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies:
   pip install -r requirements.txt  
Enter fullscreen mode Exit fullscreen mode
  1. Start the Streamlit server:
   streamlit run app.py  
Enter fullscreen mode Exit fullscreen mode
  1. Open your browser at http://localhost:8501.

🎥 Demo

Here’s a quick look at the app in action:

video descrtoption

And a screenshot of the app interface:

Image1 description


🙏 Thank You!

Thanks for reading! If you found this project interesting, give it a star ⭐ on GitHub and share your thoughts in the comments below. Let’s make image processing easier for everyone! 😄


Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay