Operations like crop or resize don’t seem like a big deal, because even the simplest editors can do them. The devil is in the details. If you dive deeper into the nuts and bolts of the image processing pipeline developed by different companies, you’ll notice that not all image transformations are created equal. In this article, we’ll cover the guiding principles of image transformations performed by Uploadcare that allow you to easily yet effectively adjust images for your website.
A Key Ingredient of Efficient Image Transformations: They’re Done on the Fly
Uploadcare image transformations allow you to adjust image size, crop, change quality and format, and apply various filters. The thing is, you don’t need any third-party services, software, or a designer to perform these operations. By changing the URL, you immediately get the image with the desired parameters. This is what we mean by “on the fly.”
How does it benefit you? First of all, it helps developers avoid manually generating numerous sets of images for different screens, which is a time-consuming and costly process. With on-the-fly processing, you can set one-off adjustments (like applying custom dimensions) whenever you need to.
Second, it saves you effort in case of future design updates. For example, if you need to change the design of your website or app, you won’t have to write scripts to re-process the entire archive of uploaded images. The changes are applied automatically when you change the operations in the URL API.
The Baseline for On-the-Fly Performance
“On the fly” implies getting the requested image as fast as possible. In Uploadcare, there are two components that ensure rapid processing: implementation of Pillow-SIMD and a content delivery network (CDN).
1. Pillow-SIMD: What is it and how does it help?
Pillow-SIMD is a high-performance fork for Pillow, an open-source Python imaging library. The fork was developed by Uploadcare, and its suffix SIMD stands for “single instruction, multiple data.” It means that things work even faster thanks to performing the same operation on multiple data points simultaneously.
For this library, Uploadcare developers accelerated resizing, applying filters and adjustments, transpositions, blurring, and other operations. To do so, they often had to get down to the hardware level. As a result, for most operations, Pillow-SIMD is 4-6 times faster than Pillow. Nowadays, Uploadcare’s servers use it for most operations with images.
Starting from May 2016, the Pillow-SIMD code became open, so everyone in the field of image processing (not only Uploadcare users) can take it for their projects.
Using a CDN can generally improve UX since it eliminates the correlation between the content delivery speed and users’ locations. It does two things that help you—and more importantly, your users—get the requested images faster:
- It caches data;
- It uses geo-filtering for choosing the closest server to each user.
When users request the same content, it’s not created and processed from scratch. Since it’s cached on servers that are geographically distributed, and hence closer to the various end users, it’s delivered faster than it would be if you were using a single origin server instead of a CDN.
Providing a Better Developer Experience with a Handy URL Scheme
Visually tweaking images on web pages actually involves quite a bit of mathematics and analytical work. We at Uploadcare tried to make these operations in such a way that they don’t clutter up the code and you still have readable syntax. This is better seen in a real-world example.
On the Uploadcare website, we have an image with the following HTML code:
As you can see from the code, there are already resizing, crop, and alignment parameters. Let’s say we want to display the same image on a screen with a higher resolution. In that case, the code could look like this:
<picture> <img src=“https://ucarecdn.com/5e39garden/-/scale_crop/440x440/center/”> <source src=“https://ucarecdn.com/5e39garden/-/scale_crop/880x880/center/ 2x” type=“”> </picture>
If we want to, we can also convert this image into WebP format. Then we’ll have:
<picture> <img src=“https://ucarecdn.com/5e39garden/-/scale_crop/440x440/center/”> <source src=“https://ucarecdn.com/5e39garden/-/scale_crop/880x880/center/ 2x” type=“”> <source src=“https://ucarecdn.com/5e39garden/-/scale_crop/440x440/center/-/format/webp/” type=“image/webp”> <source src=“https://ucarecdn.com/5e39garden/-/scale_crop/880x880/center/-/format/webp/” type=“image/webp”> </picture>
The code may look a bit lengthy, but the good news is that with Uploadcare, you don’t have to manually tweak the image formats since it can do it automatically by analyzing the user’s context. Like this:
<picture> <img src=“https://ucarecdn.com/5e39garden/-/scale_crop/440x440/center/-/format/auto/”> <source src=“https://ucarecdn.com/5e39garden/-/scale_crop/880x880/center/ 2x”/-/format/auto/> </picture>
Similarly, by just changing the URL, we can:
- Crop an image;
- Resize it (so it looks good on certain screens, for instance);
- Make an image sharper or blur it;
- Apply various visual filters;
- Or add an overlay (e.g., for making a watermark or putting a sold-out stamp on a product picture).
5 Principles of Efficient Image Transformations
However, just enabling some editing features wasn’t enough. That’s why there are five principles at the core of Uploadcare that ensure an excellent developer experience, meaning that you won’t end up with a rotated image and uglified code. What are they?
Principle #1: The code should be easy to read
As developers, we know firsthand that you often spend more time reading code, not writing it. We tried to make it convenient to work with the URL scheme: operations can be easily distinguished from each other.
Principle #2: The code should be easy to write
The parameters of operations are arranged in the most logical order and use intuitive abbreviations (as in the example above:
-/scale_crop/440x440/center/). Many parameters can be omitted.
Principle #3: Backward compatibility
Once written, URLs will always work. If you have a working set of operations now, it will work with all images, including the ones you add in the future.
Principle #4: Consistency
Users upload different images. Various formats, color schemes, number of bits per pixel, and alpha channels. You don’t need to test whether the URL will work with every combination of sources. It simply will. If Uploadcare API says there’s an image, then all the operations it can do are available for that file.
Principle #5: Piping for geometric operations
Unlike most other image modification systems that work via URL schemes, we execute geometry operations sequentially and apply them consistently. You can write
-/rotate/90/-/rotate/270/ and get the result you expect.
+Auto rotation: A minor default feature that brings major improvements to the DX
With Uploadcare, you don’t even need to specify some operations, since it performs them automatically. Auto rotation is the best example.
The orientation of images is set by EXIF tags (you can find them in the image properties). When you take a photo, your camera writes an EXIF orientation value depending on how you’re holding the camera. Here’s the problem: images often aren’t stored in their true orientation, and some browsers ignore the EXIF orientation tag and display an image in the wrong orientation.
Since most images are designed to be displayed on the web, Uploadcare automatically rotates all the images on processing according to their EXIF tags, so you don’t even have to think about it.
It’s true that Uploadcare is hardly a universal system for converting images from anything to anything. Still, with over nine years of boots-on-the-ground experience, we have a clear understanding of what sites and apps need for efficient image processing and delivery. This is why there are some limitations that are necessary for being able to provide top-notch on-the-fly image transformations.
The images you receive from users may come in different formats and resolutions. We try to cover as wide a range as possible, and support a large number of formats and resolutions up to 75 megapixels. For your reference, the latest iPhone 11 has a 12-megapixel camera, and Canon’s EOS 5DS R, a professional high-resolution camera, offers 50.6 megapixels of resolution. For most cases, the default limit is more than enough, but there’s a possibility to individually extend it if necessary.
Uploadcare supports PNG, JPEG, and WebP. These are the most common and efficient formats, plus there’s a wide range of settings that help images meet the needs of websites and apps.
The current maximum output resolution is 3000×3000px. That’s not much compared to the input resolution, but it’s more than enough for most tasks. Again, these limits aren’t carved in stone, so if we notice a demand for higher resolution, chances are the limits will be reconsidered.
To Sum Up
The essential part of handling uploaded images is the work that happens after they’re actually uploaded. Image processing can help you cut bandwidth costs, roll out responsiveness, and enhance images in terms of art direction without a designer. In other words, it’s the icing on the cake.
In this article, we’ve covered Uploadcare’s approach to handling image transformations: it should be easy to implement, easy to use, and make your image processing lightning fast. Now that you know some great things about Uploadcare’s solution, take it for a spin and see how it’ll benefit your project.