
Optimize images without quality loss
🤖/image/optimize reduces the size of images while maintaining the same visual quality.
With this Robot it's possible to reduce the file size of your JPEG, PNG, GIF, WEBP and SVG images by up to 80% for big images and 65% for small to medium sized ones — while keeping their original quality!
This Robot enables you to lower your storage and bandwidth costs, and improves your user experience and monetization by reducing the load time of image-intensive web pages.
It works well together with 🤖/image/resize to bring the full power of resized and optimized images to your website or app.
Note: This Robot accepts all image types and will just pass on unsupported image types unoptimized. Hence, there is no need to set up 🤖/file/filter workflows for this.
Parameters
-
use
String / Array of Strings / ObjectrequiredSpecifies which Step(s) to use as input.
-
You can pick any names for Steps except
":original"
(reserved for user uploads handled by Transloadit) -
You can provide several Steps as input with arrays:
"use": [ ":original", "encoded", "resized" ]
💡 That’s likely all you need to know about
use
, but you can view advanced use cases:› Advanced use cases
-
Step bundling. Some Robots can gather several Step results for a single invocation. For example, 🤖/file/compress would normally create one archive for each file passed to it. If you'd set
bundle_steps
to true, however, it will create one archive containing all the result files from all Steps you give it. To enable bundling, provide an object like the one below to theuse
parameter:"use": { "steps": [ ":original", "encoded", "resized" ], "bundle_steps": true }
This is also a crucial parameter for 🤖/video/adaptive, otherwise you'll generate 1 playlist for each viewing quality.
Keep in mind that all input Steps must be present in your Template. If one of them is missing (for instance it is rejected by a filter), no result is generated because the Robot waits indefinitely for all input Steps to be finished.Here’s a demo that showcases Step bundling.
-
Group by original. Sticking with 🤖/file/compress example, you can set
group_by_original
totrue
, in order to create a separate archive for each of your uploaded or imported files, instead of creating one archive containing all originals (or one per resulting file). This is important for for 🤖/media/playlist where you'd typically set:"use": { "steps": [ "segmented" ], "bundle_steps": true, "group_by_original": true }
-
Fields. You can be more discriminatory by only using files that match a field name by setting the
fields
property. When this array is specified, the corresponding Step will only be executed for files submitted through one of the given field names, which correspond with the strings in thename
attribute of the HTML file input field tag for instance. When using a back-end SDK, it corresponds withmyFieldName1
in e.g.:$transloadit->addFile('myFieldName1', './chameleon.jpg')
.This parameter is set to
true
by default, meaning all fields are accepted.Example:
"use": { "steps": [ ":original" ], "fields": [ "myFieldName1" ] }
-
Use as. Sometimes Robots take several inputs. For instance, 🤖/video/merge can create a slideshow from audio and images. You can map different Steps to the appropriate inputs.
Example:
"use": { "steps": [ { "name": "audio_encoded", "as": "audio" }, { "name": "images_resized", "as": "image" } ] }
Sometimes the ordering is important, for instance, with our concat Robots. In these cases, you can add an index that starts at 1. You can also optionally filter by the multipart field name. Like in this example, where all files are coming from the same source (end-user uploads), but with different
<input>
names:Example:
"use": { "steps": [ { "name": ":original", "fields": "myFirstVideo", "as": "video_1" }, { "name": ":original", "fields": "mySecondVideo", "as": "video_2" }, { "name": ":original", "fields": "myThirdVideo", "as": "video_3" } ] }
For times when it is not apparent where we should put the file, you can use Assembly Variables to be specific. For instance, you may want to pass a text file to 🤖/image/resize to burn the text in an image, but you are burning multiple texts, so where do we put the text file? We specify it via
${use.text_1}
, to indicate the first text file that was passed.Example:
"watermarked": { "robot": "/image/resize", "use" : { "steps": [ { "name": "resized", "as": "base" }, { "name": "transcribed", "as": "text" }, ], }, "text": [ { "text" : "Hi there", "valign": "top", "align" : "left", }, { "text" : "From the 'transcribed' Step: ${use.text_1}", "valign" : "bottom", "align" : "right", "x_offset": 16, "y_offset": -10, } ] }
-
-
priority
String ⋅ default:compression-ratio
Provides different algorithms for better or worse compression for your images, but that run slower or faster. Valid values are
"compression-ratio"
and"conversion-speed"
. The value"conversion-speed"
will result in an average compression ratio of 18%."compression-ratio"
will result in an average compression ratio of 31%. -
progressive
Boolean ⋅ default:false
Interlaces the image if set to
true
, which makes the result image load progressively in browsers. Instead of rendering the image from top to bottom, the browser will first show a low-res blurry version of the image which is then quickly replaced with the actual image as the data arrives. This greatly increases the user experience, but comes at a loss of about 10% of the file size reduction. -
preserve_meta_data
Boolean ⋅ default:true
Specifies if the image's metadata should be preserved during the optimization, or not. If it is not preserved, the file size is even further reduced. But be aware that this could strip a photographer's copyright information, which for obvious reasons can be frowned upon.
-
fix_breaking_images
Boolean ⋅ default:true
If set to
true
this parameter tries to fix images that would otherwise make the underlying tool error out and thereby break your Assemblies. This can sometimes result in a larger file size, though.
Demos
Related blog posts
- A Happy 2014 from Transloadit! January 14, 2014
- Adding Support for Lossless Image Optimization June 6, 2013
- Better PNG Optimization July 29, 2014
- On Upgrades & Goodbyes August 8, 2014
- Image optimization improvements November 24, 2015
- Happy 2016 from Transloadit December 31, 2015
- Raising prices (for new customers) February 7, 2018
- Re-loadit: the /dropbox/import Robot January 28, 2019
- Benchmarking our Image Optimization Robot August 3, 2022