Increase Website Speeds: DALL·E images from PNG to JPEG or/and WEBP.

by tyler garrett | Jan 26, 2023 | Automation

In todays article we will teach you how to trim your Dalle images and more than anything increase your load speeds on your websites, applications, and dashboards.

Often when you load an image to a software, you’re thinking about the load speed because that will dictate the overall user experience. This is both a technical problem with code and images.

This article covers the technical challenge by offering a script to manage your PNG files and opens a door into how optimization of images can make a big deal!

If you haven’t noticed we have rebranded and started trying out DALL·E images. We are seeking to improve our websites user experience, and trying a little bit of branding.

We really have fallen in love with the output and found we are consistently having to clean the OpenAI logo from the output. We always remove the bottom 16 pixels and lower the image quality because we want to use the image.

Imagine trying to wait 1 minute for a website to load. That’s what we want to avoid. Algorithms are created to test load speed and loading everything in less than one second is not only ideal but expected by end users.

by Tyler Garrett

When adding large images to the internet, often there’s a need to lower the quality, to improve website speeds, applications load faster, and you enjoy a better user experience. This script automatically manages the quality of your image, set to 75, and you can change the settings by updating the quality variable.

To remove the labeling created by DALL·E’s workflow, we can apply a quick python solution to solve the problem.

Below, you’ll find two scripts, one script helps you go from PNG to JPEG and trims the image, and the next python script will help you white label your Dalle image, plus convert PNG to WEBP!

We hope this allows you a quicker path to using DALL·E designs in your future.

To begin, you’ll need a directory of images and your computer turned on.

import os
from PIL import Image

# Set the directory containing the image files
directory = "C:/Users/ityle/Downloads/Edit"

# Set the output quality (0-100)
quality = 75

# Set the pixel trim size
trim = 16

# Get a list of the files in the directory
files = os.listdir(directory)

# Iterate through the files
for file in files:
  # Check if the file is a PNG
  if file.endswith(".png"):
    # Open the image file
    im = Image.open(os.path.join(directory, file))

    # Convert the image to JPEG
    im = im.convert("RGB")

    # Crop the bottom 16 pixels off the image
    width, height = im.size
    im = im.crop((0, 0, width, height-trim))

    # Lower the image quality
    im.save(os.path.join(directory, "modified_" + file.replace(".png", ".jpg")), "JPEG", quality=quality)

You will need to edit the file directory to ensure you’re aiming at the correct folder. This script applies modified to the beginning of any changed images and also helps improve the quality of the image, to lower the sizes from 2mb to 100kb.

Removing the DALLE logo is now a quick process and you’re back to using these amazing graphics in no time.

Moving from PNG to Webp with Dalle image

While we enjoy the previous script, we found the range on the file output was 100kb to 140kb, and this can generate a somewhat slow image for internet loading speeds.

Below, find code to help you convert png to webp, which is Googles image compression file format that is sweeping the web.

import os
from PIL import Image

# Set the directory containing the image files
directory = "C:/Users/ityle/xyz"

# Set the pixel trim sizes
trim = 16 # bottom trim exactly sized for dalle logo
trim_top = 300  # New trim for the top

# Get a list of the files in the directory
files = os.listdir(directory)

# Start with quality 100 and decrease to 1
start_quality = 100
end_quality = 1

# Store file paths, sizes, and quality settings
file_info = []

# Iterate through the files
for file in files:
    # Check if the file is a PNG
    if file.endswith(".png"):
        print(f"Processing {file}...")

        # Open the image file
        im = Image.open(os.path.join(directory, file))

        # Trim the top part of the image
        width, height = im.size
        im = im.crop((0, trim_top, width, height - trim))

        # Loop through quality settings
        for quality in range(start_quality, end_quality - 1, -1):
            # Save the image with the current quality setting
            webp_filename = os.path.join(directory, f"{quality}_q_" + file.replace(".png", ".webp"))
            im.save(webp_filename, "WebP", quality=quality)

            # Get the file size
            file_size = os.path.getsize(webp_filename)

            # Store file path, size, and quality
            file_info.append((webp_filename, file_size, quality))

            # Print information
            print(f"Quality: {quality}, File: {webp_filename}, Size: {file_size} bytes")

# Find the file closest to X KB
closest_file = min(file_info, key=lambda x: abs(x[1] - 15000))

# Delete all other generated WebP files
for webp_file, _, _ in file_info:
    if webp_file != closest_file[0]:
        os.remove(webp_file)
        print(f"Deleted {webp_file}")

print(f"Closest file to 15KB: {closest_file[0]}, Size: {closest_file[1]} bytes, Quality: {closest_file[2]}")

In this script we add a feature to trim both top and bottom, we recommend trimming the image vertically to improve the load speeds even greater. We have transitioned to this python script because it allows us to save on the image sizes and improved our overall design workflow.

Now, our website loads faster than ever before. Most importantly the First Content Paint loads in less than 1 second and that is a good metric for a website! Websites that load fast tend to keep end users longer.

If you have any questions about the python script, we recommend you contact our data engineering consulting team!