Convert & Optimize Images with Python & Pillow 🚀

Seif Eddine Saad — Mon, 28 Apr 2025 07:58:22 +0000

Working with lots of images? Whether you’re handling user-uploads, prepping assets for the web, or just cleaning up a folder of photos, automating conversion and compression will save you hours of manual work—and bandwidth!

In this tutorial you’ll learn how to:

Batch-convert any image (PNG, WEBP, TIFF, BMP…) to JPEG
Optimize the resulting JPEGs for web-friendly file sizes
Package it all into a one-file Python script

🛠️ Prerequisites:

Python 3.6+ installed on your machine
Basic comfort with the command line
(Optional) A virtualenv or Conda environment

pip install pillow

📂 Project Structure:

Create a folder called image-converter with two subfolders:

image-converter/
├─ input_images/    ← put your source files here
└─ output_images/   ← optimized JPGs will land here

🔥 The Script:

Create convert_images.py in image-converter/ and paste:

from PIL import Image
import os
import sys

# 1️⃣ Determine script’s own directory
BASE_DIR = os.path.dirname(os.path.abspath(__file__))

# 2️⃣ Define input/output folders
input_folder  = os.path.join(BASE_DIR, 'input_images')
output_folder = os.path.join(BASE_DIR, 'output_images')

# 3️⃣ Sanity checks
if not os.path.isdir(input_folder):
    print(f"❌ Input folder not found: {input_folder}")
    sys.exit(1)
os.makedirs(output_folder, exist_ok=True)

# 4️⃣ Gather images
valid_exts = ('png', 'webp', 'jpeg', 'jpg', 'tiff', 'bmp')
files = [f for f in os.listdir(input_folder)
         if f.lower().endswith(valid_exts)]

if not files:
    print("❌ No images found in", input_folder)
    sys.exit(1)

print(f"🔍 Found {len(files)} image(s):")
for f in files: print("  •", f)

# 5️⃣ Conversion loop
for fname in files:
    src_path = os.path.join(input_folder, fname)
    img = Image.open(src_path).convert('RGB')   # ensure JPEG-compatible

    base, _ = os.path.splitext(fname)
    dst_path = os.path.join(output_folder, f"{base}.jpg")

    # quality=85 is usually a sweet spot; optimize=True shrinks a bit more
    img.save(dst_path, "JPEG", quality=85, optimize=True)
    print(f"✅ Saved: {dst_path}")

print(f"\n🎉 Done! Converted & optimized {len(files)} files.")

🚀 How It Works

Absolute paths
We compute BASE_DIR so you can run the script from anywhere, and it will always locate the right folders.
File filtering
We only pick files with common image extensions—even skips over stray text files or hidden folders.
RGB conversion
JPEG doesn’t support alpha/transparency. Converting to RGB ensures no errors.
Quality & optimization
- quality=85 retains visual fidelity with ~30–50% smaller size than 100.
- optimize=True applies an extra compression pass.

✅ Running It

Drop all your images into input_images/.
From the terminal (inside image-converter/):

python convert_images.py

Hope this saves you time and bandwidth. If you 💚 it, give it a clap, and drop any questions or improvements below!

Next JS & Supabase CRUD🚀

Seif Eddine Saad — Sun, 01 Sep 2024 14:37:28 +0000

Introduction:

Creating a CRUD (Create, Read, Update, Delete) application is a core skill for web developers, and using Next.js with Supabase makes it even easier. In this guide, we'll explore how to build a fully functional CRUD app using Next.js for the frontend and Supabase for the backend.

Demo:

https://next-supabase-crud-eight.vercel.app

Github:

Give it a star⭐️
https://github.com/seifeddinesaad01/Next-Supabase-CRUD

Requirement:

Before we go so far, let’s prepare some software we need.

Software

npm: (https://www.npmjs.com)
Visual Studio Code: (https://code.visualstudio.com)

Account

Supabase Account (https://supabase.com)

1.Setup Project:

$ npm create next-app next14-supabase-crud

2.Install Dependencies:

$ yarn add @supabase/supabase-js

3. Supabase:

Create supabase project, fill the form

Then it will redirect into your project detail

4.Configure Environment Variable:

Let’s create .env file, and copy-paste this code below and define variable value based on supabase config.

NEXT_PUBLIC_SUPABASE_URL=supabase-url
NEXT_PUBLIC_SUPABASE_KEY=supabase-key

5. Supabase configuration:

Then create supabase configuration file ./config/supabase.js, and copy paste code below.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);
export default supabase;

6. Create Table Posts:

Create table named posts and define table column.Don’t forget to uncheck Enable Row Level Security (RLS) to make read and write access public.

Then:

7. Folder structure :

8. Create Page to List All Posts

Update page app/page.tsx and copy paste code below.

"use client"
import supabase from "../config/supabase";
import Head from "next/head";
import Link from "next/link";
import { useEffect, useState } from "react";
import { CiEdit } from "react-icons/ci";
import { MdDeleteOutline } from "react-icons/md";
import { Empty } from 'antd';



export default function Home() {
  const [posts, setPosts] = useState<any>([]);

  const getPosts = async () => {
    const { data, error } = await supabase.from('posts').select('*');
    if (error) {
      console.error('Error fetching data:', error.message);
    } else {
      setPosts(data);
    }
  }

  useEffect(() => {
    getPosts()
  }, [])

  return (
    <>
      <div className="container mx-auto mt-8 max-w-[560px] bg-white p-4 rounded-lg min-h-60">
        <div className="flex justify-between items-center pb-4 border-b border-dashed border-gray-900 mb-4">
          <h1 className="text-3xl font-semibold">Posts</h1>
          <Link
            className="bg-black hover:bg-opacity-80 text-white rounded-lg px-4 py-2 duration-200"
            href="/create"
          >
            Create New
          </Link>
        </div>
        <ul>
          {posts.map((task:any) => (
            <li key={task.id} className="py-2 flex justify-between w-full">
              <span>
                <strong>{task.title}</strong> - {task.description}
              </span>
              <span className="flex gap-2">
                <Link className="text-blue-700 underline hover:no-underline flex justify-center items-center gap-2" href={`/edit/${task.id}`}><CiEdit />Edit</Link>
                <Link className="text-red-500 underline hover:no-underline flex justify-center items-center gap-2" href={`/delete/${task.id}`}><MdDeleteOutline />Delete</Link>
              </span>
            </li>
          ))}
          {posts?.length < 1 && <Empty />}
        </ul>
      </div>
      <Head>
        <title>Post</title>
      </Head>
    </>
  );
}

9. Create Page to Create New Tasks

Create page app/create/page.jsx and copy paste code below.

"use client";

import supabase from "@/config/supabase";
import Head from "next/head";
import { useRouter } from "next/navigation"; // Update this import
import { useState } from "react";

export default function Create() {
  const router = useRouter(); // Use `useRouter` from `next/navigation`
  const [post, setPost] = useState<any>({
    title: "",
    description: "",
  });

  const onChange = (e: any) => {
    setPost({ ...post, [e.target.name]: e.target.value });
  };

  const handleCreate = async () => {
    try {
      await supabase.from("posts").upsert([post]);
      router.push("/"); // This line is fine
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <div className="container mx-auto mt-8 max-w-[560px] bg-white p-4 rounded-lg min-h-60 ">
        <div className="flex justify-between items-center pb-4 border-b border-dashed border-gray-900 mb-4">
          <h1 className="text-3xl font-semibold">Create Post</h1>
        </div>
        <form>
          <div className="mb-4">
            <label>Title</label>
            <input
              className="mt-1 px-4 py-2 border border-gray-300 rounded-md block w-full"
              type="text"
              name="title"
              value={post?.tile}
              onChange={onChange}
            />
          </div>
          <div className="mb-4">
            <label>Description</label>
            <input
              className="mt-1 px-4 py-2 border border-gray-300 rounded-md block w-full"
              type="text"
              name="description"
              value={post?.description}
              onChange={onChange}
            />
          </div>
          <button
            className="bg-black hover:bg-opacity-80 text-white rounded-lg px-4 py-2 duration-200 w-full"
            type="button"
            onClick={handleCreate}
          >
            Create Post
          </button>
        </form>
      </div>
      <Head>
        <title>Create Post</title>
      </Head>
    </>
  );
}

10. Create Page to Edit Post

Create page app/edit/[id]/edit.tsx and copy paste code below.

"use client";

import supabase from "@/config/supabase";
import Head from "next/head";
import { useParams, useRouter } from "next/navigation"; // Use next/navigation for Next.js 13+
import { useEffect, useState } from "react";

interface Task {
  title: string;
  description: string;
}

const Edit = () => {
  const router = useRouter();

  const { id } = useParams();

  const [post, setPost] = useState<Task>({
    title: "",
    description: "",
  });

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPost({ ...post, [e.target.name]: e.target.value });
  };

  useEffect(() => {
    const fetchPost = async () => {
      if (typeof id === "string") {
        const { data, error } = await supabase
          .from("posts")
          .select("*")
          .eq("id", id)
          .single();

        if (error) {
          console.error("Error fetching task:", error.message);
          return;
        }

        if (data) {
          setPost(data);
        }
      }
    };

    if (id) {
      fetchPost();
    }
  }, [id]);

  const handleUpdate = async () => {
    try {
      if (typeof id === "string") {
        const { error } = await supabase.from("posts").update(post).eq("id", id);

        if (error) {
          console.error("Error updating task:", error.message);
          return;
        }

        router.push("/");
      }
    } catch (error) {
      console.error("Error:", error);
    }
  };

  return (
    <>
      <div className="container mx-auto mt-8 max-w-[560px] bg-white p-4 rounded-lg min-h-60">
        <div className="flex justify-between items-center pb-4 border-b border-dashed border-gray-900 mb-4">
          <h1 className="text-3xl font-semibold">Edit Post</h1>
        </div>
        <form>
          <div className="mb-4">
            <label htmlFor="name">Title: </label>
            <input
              className="mt-1 px-4 py-2 border border-gray-300 rounded-md block w-full"
              type="text"
              id="title"
              name="title"
              value={post.title}
              onChange={onChange}
            />
          </div>
          <div className="mb-4">
            <label htmlFor="description">Description: </label>
            <input
              className="mt-1 px-4 py-2 border border-gray-300 rounded-md block w-full"
              type="text"
              id="description"
              name="description"
              value={post.description}
              onChange={onChange}
            />
          </div>
          <button
            className="bg-black hover:bg-opacity-80 text-white rounded-lg px-4 py-2 duration-200 w-full"
            type="button"
            onClick={handleUpdate}
          >
            Edit Post
          </button>
        </form>
      </div>
      <Head>
        <title>Edit Post</title>
      </Head>
    </>
  );
};

export default Edit;

11. Create Page to Delete Posts

Create page app/delete/[id]/page.tsx and copy paste code below.

"use client"
import supabase from "@/config/supabase";
import Head from "next/head";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const Delete = () => {
  const router = useRouter();
  const { id } = useParams();

  const [post, setPost] = useState<any>({
    title: "",
    description: "",
  });

  useEffect(() => {
    const fetchPost = async () => {
      const { data } = await supabase.from("posts").select("*").eq("id", id);
      setPost(data);
    };

    if (id) {
      fetchPost();
    }
  }, [id]);

  const handleDelete = async () => {
    try {
      await supabase.from("posts").delete().eq("id", id);
      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <div className="container mx-auto mt-8 max-w-[560px] bg-white p-4 rounded-lg min-h-60">
        <div className="flex justify-between items-center pb-4 border-b border-dashed border-gray-900 mb-4">
          <h1 className="text-3xl font-semibold">Delete Post</h1>
        </div>
        <form>
          <div className="my-12">
            Are you sure to delete <strong>{post?.name}</strong>?
          </div>
          <div className="flex w-full gap-2">
            <Link
              href="/"
              className="text-center bg-gray-300 hover:bg-opacity-80 text-black rounded-lg px-4 py-2 duration-200 w-full"
            >
              Cancel
            </Link>
            <button
              className="bg-black hover:bg-opacity-80 text-white rounded-lg px-4 py-2 duration-200 w-full"
              type="button"
              onClick={handleDelete}
            >
              Delete
            </button>
          </div>
        </form>
      </div>
      <Head>
        <title>Delete Post</title>
      </Head>
    </>
  );
};

export default Delete;

12.Result:

npm run dev

Your website would be like:

Conclusion

Congratulations on making it to the end of this guide on creating a CRUD application with Next.js and Supabase! I hope this article has given you a solid foundation and the confidence to build and expand your own web applications using these powerful tools. Thank you for taking the time to read through this tutorial—your interest and engagement mean a lot!

If you have any questions, feedback, or want to connect, feel free to reach out on LinkedIn or check out more of my projects on GitHub. I’d love to hear from you and see what amazing things you build!

Forem: Seif Eddine Saad