In digital content, images play a significant role in communicating messages aesthetically. Nevertheless, optimizing images for different platforms and gadgets can be complicated, and it often requires resizing according to the required dimensions. There are several ways and libraries to resize images. However, we will use the Python Pillow library to resize images.
Pillow is a part of the Python Imaging Library (PIL). It provides a reflexive interface for managing several image formats and image processing. Its abilities make it a go-to choice for developers who are working on image processing automation.
Here, we will make an image resizer app to input an image, enter the required width and height, and obtain the desired image size. Our image resizer will use the Pillow library, Flask, and HTML. To learn more about Flask and the Flask app, check out the following Educative Answers:
For image resizer, we will require two main libraries of Python. To use them for the app, put them in a file named requirements.txt:
flaskpillow
To run the app, we need a file named app.py that will perform the actual function.
from flask import Flask, render_template, request, send_filefrom PIL import Imageimport ioapp = Flask(__name__)@app.route('/', methods=['GET', 'POST'])def index():if request.method == 'POST':image = request.files['image']width = int(request.form['width'])height = int(request.form['height'])resized_image = resize_image(image, (width, height))return send_file(resized_image, download_name='resized_image.jpg', as_attachment=True)return render_template('index.html')def resize_image(image, size):img = Image.open(image)# Convert RGBA to RGB if necessaryif img.mode == 'RGBA':img = img.convert('RGB')img.thumbnail(size)output = io.BytesIO()img.save(output, format='JPEG')output.seek(0)return outputif __name__ == '__main__':app.run(host='0.0.0.0', port=3000, debug=True)
Here is an explanation:
Line 1: We will import required modules for the application from Flask.
Line 2: From PIL (Python Imaging Library), we will import required modules for resizing.
Line 3: The import io command imports the module that aids in handling binary data for input/output.
Line 5: We initialize a Flask application named app.
Line 7: The @app.route() command defines the route for the root URL (/) that supports GET and POST method.
Line 8–14: The main function affiliated with root is index(). Within the function:
If the request method is POST and a form is submitted, the uploaded image, target width, and target height is extracted.
The resized_image command calls the resize_image() for image resizing.
The send_file() command sends a response in the form of a resized image and triggers a download.
Line 16: If the request method is GET, the index.html template is rendered and displayed.
Line 18–29: The resize_image() command opens the uploaded image using Pillow library, converts it into RGB if necessary, resizes the image according to the required dimensions, creates an output stream called io.BytesIO() to save the image as a binary stream in memory. The img.save() command saves the output image in JPEG format. The output.seek(0) command moves the stream cursor to the start. Binary data of resized image is returned.
Line 31: The if __name__ == '__main__': command ensures that the Flask app is run only when we execute the script directly.
Line 32: The app.run() command runs the app on host 0.0.0.0 and port 3000, and with debugging enabled.
The rendered HTML template is saved as index.html:
<!DOCTYPE html><html><head><title>Image Resizer</title><style>body {font-family: Arial, sans-serif;text-align: center;margin: 0;padding: 0;background-color: #f0f0f0;}.container {max-width: 500px;margin: 50px auto;padding: 20px;background-color: #ffffff;border: 1px solid #ddd;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}h1 {margin-top: 0;color: #333;}form {text-align: left;}label {display: block;font-weight: bold;margin-top: 10px;color: #555;}input[type="file"], input[type="number"] {width: 100%;padding: 10px;margin-top: 4px;border: 1px solid #ccc;border-radius: 4px;}input[type="submit"] {background-color: #007BFF;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;}input[type="submit"]:hover {background-color: #0056b3;}</style></head><body><div class="container"><h1>Image Resizer</h1><form method="POST" action="/" enctype="multipart/form-data"><label for="image">Upload Image:</label><input type="file" name="image" accept="image/*" required><br><label for="width">Target Width:</label><input type="number" name="width" required><br><label for="height">Target Height:</label><input type="number" name="height" required><br><input type="submit" value="Resize"></form></div></body></html>
It includes a container in which there are input boxes for input image, desired width and height, and a “submit” button. On pressing “submit”, the resize function is triggered and we get the resized image. The index.html file also contains styling for the application user interface.
You can use it by pressing “Run” and click the link to use the application.
flask pillow
Free Resources