Logo

dev-resources.site

for different kinds of informations.

Dall.E Image Gen, And Size Comparison Of Image Formats

Published at
2/19/2024
Categories
ai
image
compression
ffmpeg
Author
crawlingcrusader
Categories
4 categories in total
ai
open
image
open
compression
open
ffmpeg
open
Author
16 person written this
crawlingcrusader
open
Dall.E Image Gen, And Size Comparison Of Image Formats

Image Gen And Conversion

Of late images generated via Dall.E can be downloaded only as .webp. This is slightly annoying because of it limited integration, for instance you can't upload a .webp image to twitter. This is only a minor inconvenience because you can easily convert webp to png image using ffmpeg.

ffmpeg -i input_image.webp output_image.webp
Enter fullscreen mode Exit fullscreen mode

Now, why would open AI do such a thing? If I remember correctly the images weren't available as png directly.

Well, webp images are smaller in size, hence lower storage and egress cost (if any).

Comparison

Now I wanted to know how much a size difference are we really talking about. So I generated an image using Dalle.E, downloaded it as web and converted to a couple other formats.
Here's the generated image:

Image description

The chart below shows the difference in image size

image size comparison

As you can see, its a pretty steep increase in size when an image goes from webp to png.

I generated this chart using GPT-4. Here's the prompt that I used:

can you generate a bar chart for me, here's the x, and y data
x: jpg, webp, tiff, png
y: 160, 494, 1500, 2300
label for x: image format
label for y: image size in KB

One might wonder, why is there a difference in size when its the same image? The answer is difference in compression techniques.
JPEG format uses lossy compression, which means some data points from image are lost. Which means every time you edit a jpeg image some data is lost, and the image size decreases.
To further illustrate this I converted the same image to jpeg multiple.
Basically running following command:

ffmpeg -i silicon-road2.jpg silicon-road.jpg
Enter fullscreen mode Exit fullscreen mode

to convert, and then run it again on the output.
With every iteration there was minor change in size. The chart below shows the trend for 5 iteration

jpeg conversion trend

Side note : I wrote a script and ran it for 100 iteration.
The image size stabilised after 9th iteration. Yet to figure out the exact science behind this.
Script:

#!/bin/bash

input="silicon-road.jpg"

# Loop 100 times
for i in $(seq 1 100)
do
    output="silicon-road${i}.jpg"

    ffmpeg -i "$input" "$output"

    input="$output"
done
Enter fullscreen mode Exit fullscreen mode

On the other hand PNG uses lossless compression which mean all the data points are preserved. Running the conversion operation has no impact on the image size.

What Did We Lose

Here's the original image:

original

Here's the image after 10 conversions:

Image description

It can be hard or near impossible to notice any difference with naked eye. So we'll run following command to get the 'difference' :

ffmpeg -i silicon-road.jpg -i silicon-road10.jpg -filter_complex "[0][1]blend=all_mode=difference" difference.png
Enter fullscreen mode Exit fullscreen mode

The command is essentially comparing (subtracting) the color value of each pixel. This way pixels with bigger difference will appear brighter.

Here's what the difference looks like:
difference

There's isn't a whole lot going on, so let's take a look at the difference between the jpeg, and png image:

Image description

This ends my detour of image size comparison. I better get back to the task at hand.

compression Article's
30 articles in total
Favicon
AVIF File Format: The Evolution in Web Image Compression
Favicon
Lightweight, Transparent, Animated: Get All of Them by WebP Format
Favicon
Flutter Image Compression: Ensuring High Quality
Favicon
Compression Is About Knowing Your Data
Favicon
How to use compression in Node.js server for better bandwidth ?
Favicon
Dall.E Image Gen, And Size Comparison Of Image Formats
Favicon
When life gives you lemons ...
Favicon
Image Compression in JavaScript/TypeScript
Favicon
How to Use IMGCentury For Bulk & Unlimited Image Compressions?
Favicon
Created simple phone number compression functions.
Favicon
Exploring the LZ77 Compression Algorithm
Favicon
Ultimate 3D Compression: echo3D Introduces Compression Tools for 3D Content to Accelerate 3D Development
Favicon
Reduce Network Usage - With This 1 Simple Trick!
Favicon
How Finding the Right Compression Level Can Speed Up your Website
Favicon
Client-side image compression with Firebase and Compressor.js
Favicon
Client-side image compression with Supabase Storage
Favicon
COS Cost Optimization Solution
Favicon
Is there any way to compress the data while using mongo persistence with NEventStore?
Favicon
Search safe number compression algorithm(feat. Python)
Favicon
Golang HTTP Handler With Gzip
Favicon
How to use AVIF today!
Favicon
Large documents in redis: is it worth compressing them (Part 1)
Favicon
Open or create TAR files in C# with Aspose.ZIP
Favicon
Supercharge your API with Compression
Favicon
Django 3.2 - News on compressed fixtures and fixtures compression
Favicon
How I made my own file compressor using Node.js
Favicon
Compressed GraalVM Native Images: the best startup for Java apps comes in tiny packages
Favicon
What is lossy and lossless compression
Favicon
did you ever ask yourself how file compression works ? the maths behind greedy algos
Favicon
Huffman coding from scratch with Elixir

Featured ones: