Last updated: September 18, 2024
# How to reduce image file sizes without losing quality
**Joseph Grabski**
Content Lead · Rochester, United Kingdom · Show bio
[](https://x.com/joe%5Fgrabski)[](https://github.com/Missing-Tech)
Our beloved [/image/optimize](/docs/robots/image-optimize.md) Robot and[/image/resize](/docs/robots/image-resize.md) Robot are our most powerful tools for combating bloated file sizes and long execution times. We'll take a look today at some real-world figures to see exactly how much these Robots can reduce your file sizes.
## Method
In order to collect the data for this blog post, I created a small Python script that will create anAssembly to optimize several different test images, tweaking a single parameter with each iteration. That way, each Assembly is isolated from the previous ones, providing us with more sanitary results. Each file type that we test has at least two test images, too.
You can find the code for the script [here](https://github.com/Missing-Tech/OptimizeTester) on GitHub.
Two Templates were used to test each Robot individually. Encapsulating eachRobot is important to ensure our data is only reflecting the impact that specificRobot had. Both Templates are shown below.
```json
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"optimize": {
"use": ":original",
"robot": "/image/optimize",
"preserve_meta_data": false,
"priority": "conversion-speed"
}
}
}
```
```json
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"quality": {
"use": ":original",
"robot": "/image/resize",
"result": true,
"quality": 20,
"imagemagick_stack": "{{stacks.imagemagick.recommended_version}}"
}
}
}
```
We should also define a metric to measure the overall file size reduction - **% Size Difference**. It's the percentage difference between the input and output file sizes. Here's the formula we use to calculate this:
Now, let's take a look at some of the data.
## Priority
The first parameter we'll take a look at is the `priority`. We have the choice between two different algortihms,`compression-ratio` and `conversion-speed`, depending on whether we'd like a slightly lower compression ratio of \~18% for faster execution times, or a higher compression ratio of \~31% for minimal file size.
### Compression-ratio
As you can see below, using the `compression-ratio` priority will generally result in a greater file size reduction than if you're using the `conversion-speed` priority.
However, if you decide not to preserve the file's metadata, both priorities will use the same compression algorithm, which explains why the size reduction is the same for both priorities.
### Conversion-speed
The `conversion-speed` priority, as implied, will help combat long execution times. As demonstrated below, out of the approximately fifty Assemblies ran, the overall execution time was reduced by an average of one second while using the `conversion-speed` priority.
## Input format
Of course, the extent of our optimizations is limited by the file type. Let's take a look at which file types you can expect to gain the most from.
### Size difference
As is evidently clear below, *.webp* files show a dramatically higher average file size reduction, while *.jpg* files show almost no size reduction. The range between *.gif*, *.png*, *.svg* and\_.jpg\_ is narrow, too – so results may vary more depending on the files you choose to use.
### Execution time
In terms of execution times, *.gif* is a clear winner, with *.webp* coming in at a close second. However, perhaps the more surprising result from this is how much longer both *.svg* and \_.png\_files took to process, perhaps due to both of them using lossless compression.
Try the same optimization workflow in our live [GIF compressor](/demos/image-processing/gif-compressor.md).
## Quality
### File size
One of the best ways to reduce file size is by reducing the quality with the[/image/resize](/docs/robots/image-resize.md) Robot. As you can see in the graph below, a quality of 75 or below will result in signifcant file size reductions. However, quality values above 75 cause the file size to acutally *increase*.
Reducing the quality also brings improvements to the overall execution time of anAssembly. The differences in this case are more linear.
### Image quality
So, what impact does the quality actually have on how an image looks?
Here's the same image in four different qualities. At lower qualities, the number of colors is reduced, resulting in the color banding that you can see below.
This is quite a large image, however, with a lot of different colors. The quality difference is practically invisible with simpler images – such as the Transloadit logo.
Quality: 25
There's only two colors in this image, meaning you can bring the quality value down without seeing any difference.
Of course, it's best if you do some small experiments yourself to find a quality value that strikes a nice compromise between file size and image quality.
## Conclusions
After throwing all that information at you, let's take some time to comb through and see how this can benefit you right now.
Perhaps the most important detail that you can take away is the use of the *.webp* format. Regardless of whether you're looking to reduce execution times or file-sizes, you will see a benefit here. You can compare the result with our live [PNG to WebP](/demos/image-processing/convert-an-image-from-png-to-webp.md)and [JPG to WebP](/demos/image-processing/convert-an-image-from-jpg-to-webp.md) converters. Combining this with a slightly reduced file quality in a single[/image/resize](/docs/robots/image-resize.md) Step will likely yield the best results.
Another important take-away is choosing the appropriate `priority` for your use case. The`compression-ratio` algorithm would be my choice, due to how significant the size reduction can be. But again, feel free to trial it yourself.
Lastly, I hope this blog has inspired you to go on an optimization spree with yourTemplates, and that it'll be a nice springboard for the start of your journey. We'd be happy to help guide you where possible, so please also reach out to us via support or[Twitter](https://twitter.com/transloadit).
[#image-optimize-robot](/blog/tags/image-optimize-robot.md)[#image-resize-robot](/blog/tags/image-resize-robot.md)[#performance](/blog/tags/performance.md)[#assembly](/blog/tags/assembly.md)
### 👩💻 Join 20k+ developers
Sign up for our [monthly newsletter](/newsletters.md) to receive direct links to 3 exclusive tech — and 2 product updates. No less, no more.
Your email:
Get access
## File uploading and encoding. Made simple.
Transloadit streamlines file handling for developers, trusted by brands like Coursera and The New York Times. We’re known for a reliable API, top-notch support, and a strong commitment to open source, with projects like [Uppy](https://uppy.io) and [Tus](https://tus.io) setting standards in file processing.
[Sign up](/c/)[Book a Demo](https://survey.typeform.com/to/kRg47Xi5)
No credit card needed
Cancel anytime