Long gone are the days when it was acceptable to simply push a 5-megabyte, uncropped photo onto a web page and call it a day. In today’s competition for user attention, image transformation and compression techniques are more important than ever. In this blog post, you’ll learn how to transform images from a developer perspective.
Without going too deep into math, image transformation means altering images using a defined set of rules. It includes not only geometric techniques like scaling and rotation, but also appearance‑based adjustments such as brightness and sharpness.
The core difference between raster and vector is their data models. Raster images are represented with a fixed-size pixel grid, whereas vector images utilize mathematical primitives (points, lines, curves, and shapes) to draw a picture.
Raster versus vector demoTherefore, raster image transformation quality is capped by its pixel density, while vector transformations lead to no quality loss. You often see advice to use vector formats for logos and other geometric graphics — this is why.
Client‑side transformations run directly on a user device using tools like Canvas on the Web and native mobile APIs. This approach shines when your main goal is to provide almost instant feedback and a smooth editing experience.
But there’s a trade-off. Client devices vary in power, so heavy or quality‑critical operations slow down, and you can’t guarantee consistent performance.
Server‑side processing centralizes the heavy lifting. You can use many libraries across different stacks to handle large files, advanced filters, and format conversions with predictable results.
The downside involves cost and latency. When mismanaged, your image transformation setup may become a bottleneck if the traffic demand is high.
Lossy operations permanently remove or change image data to achieve a result, while lossless operations retain original data so you can fully restore the image.
An artistic demo of lossy vs. lossless image compressionHere are examples of lossy transformations:
Use lossy transformations for web delivery, thumbnails, previews, and any situation where small file size matters more than perfect fidelity.
Lossless transformations preserve all original pixel information. After the transformation, the image can be reconstructed exactly as it was before. Let’s go over the examples of lossless transformations:
If you need extreme precision and pixel‑perfect fidelity for further edits, stick to lossless transformations.
Resizing is one of the fundamental operations in image transformation, but it’s tricky. A lot happens behind the simple idea of “scaling”. Pixel recalculation and choosing the right interpolation algorithm both shape the result.
Resizing means giving an image a new width and height and recalculating pixels to fit the new grid.
Resizing is always a geometric transformation and always lossy:
Interpolation methods in PhotoshopNew pixels are created by interpolation. Interpolation is, essentially, a guess as to what color a new pixel must have. The most used methods of interpolation are:
Like most of the transformations described in this post, resizing can be performed in many environments: graphic editors, command‑line tools, and code libraries across different languages. In web projects, resizing in a browser is often handled directly on the client side, or via other means server-side. Uploadcare provides another approach: a SaaS image pipeline that handles resizing through a URL‑based transformation API.
Cropping transforms an image by removing everything outside a defined rectangular area. Unlike resizing, cropping changes only image geometry and doesn’t recalculate pixel values inside the selected area.
Cropping tool in Uploadcare File Uploader WidgetAfter cropping, an image gets a new height and width and loses pixels outside the selected area. However, cropping isn’t fully lossy — the remaining pixels stay unaltered.
Rotating an image requires moving each pixel to a new location around the transformation center, usually the image center or top‑left corner. Visually, it resembles rotating real‑world objects, but the process relies on math instead of physics.
Any rotation by an angle not divisible by 90 degrees introduces potential quality loss because transformed pixels don’t always land on integer coordinates. When pixels fall between coordinates, the algorithm applies interpolation, which makes the transformation lossy.
An interface of JPEG Lossless Rotator softwareRotations by 90, 180, and 270 degrees are different. In this case, you don’t need interpolation — pixels aren’t recalculated; they’re swapped, with width and height coordinates exchanged. Like cropping, this type of rotation isn’t lossy. You might need specialized software to perform this operation.
Flipping is often described as mirroring an image. Visually, the process swaps pixels on the left with pixels on the right and vice versa, which results in horizontal mirroring. Applying the same swap to top‑bottom pixel pairs creates vertical mirroring. Performing horizontal and vertical mirroring in sequence produces a 180‑degree rotation.
The operation is lossless because it doesn’t add or remove pixels, doesn’t require interpolation, and produces no artifacts. This makes it one of the cleanest transformations.
In image transformations, format conversion means changing the image codec or container. Depending on how different the original and target formats are, several properties can change during conversion:
Format conversion can be lossy or lossless, too. For example, transcoding an image from BMP to PNG (both lossless) is a lossless conversion. Saving a PNG with an alpha channel as a legacy JPEG is lossy because of domain changes, quantization, and the loss of transparency.
You can treat format conversion as a service operation that happens prior to any geometric transformation. For example, opening a JPEG image in any graphic editor converts its data into a bitmap for further processing.
Color adjustments belong to the photometric group of transformations, meaning they change the image’s appearance but not its geometry. Based on the transformation algorithms, there are distinct categories of color adjustments:
Smart transformations are AI‑powered operations that use computer vision to analyze an image and perform context‑dependent actions:
Smart transformations are relatively new in the area of image transformation. They can act as standalone effects or support regular transformations by automating context‑dependent steps.
Uploadcare smart transformationsFor example, automatic face detection identifies face rectangles, key points (eyes, nose, lips), and head orientation. This information feeds into a regular cropping transformation.
Uploadcare’s AI-powered Smart Resize preserves the correct proportions of faces, silhouettes, and objects and resizes only the background and insignificant details.
Quality enhancers like AI upscalers perform resizing, but they generate new pixels by interpreting image context instead of relying on mathematical interpolation.
Now that we’ve covered different image transformation types, let’s proceed to how these are implemented in real software products. Here, Uploadcare’s approach is especially illustrative since image processing is built directly into the platform’s architecture and becomes a natural part of the developer’s workflow.
Uploadcare uses a modular architecture where each component handles its own stage of the file lifecycle:
With on‑the‑fly operations, you don’t treat transformations and delivery as separate processes. You request an image with specific parameters or filters through a URL, and the transformed result arrives immediately. The CDN caches each result, so repeat requests are served instantly.
Uploadcare supports two ways of working with files.
URL-based operations are defined right in the URL and allow for image transformations:
https://ucarecd.net/<UUID>/-/sharp/<sharpness_level>/REST API-based operations let you manage storage, convert documents and videos, and perform other file operations. The REST File API integrates with popular frameworks and languages. Here’s a JavaScript example:
const { listOfFiles, UploadcareSimpleAuthSchema } = await import('@uploadcare/rest-client');
const uploadcareSimpleAuthSchema = new UploadcareSimpleAuthSchema({
publicKey: 'YOUR_PUBLIC_KEY',
secretKey: 'YOUR_SECRET_KEY',
});
const response = listOfFiles({}, { authSchema: uploadcareSimpleAuthSchema });
console.log(response);Uploadcare turns image handling into a simple and predictable process. The CDN caches every unique image variant and delivers it instantly. The URL‑based approach lets you chain transformations, all on top of a secure system that normally requires significant time to build yourself.
Sign up for an Uploadcare account, create a project, and upload your image. After selecting your image in the dashboard, you see the UUID on the right under the file name — this identifier lets you reference the original image when applying transformations.
Uploadcare interface with image selected and UUID visibleThe rest is simple: you take the UUID and add the required operations to the URL. The platform supports dozens of transformations, from basic geometric changes to advanced optimizations and color corrections.
For example, you can resize the image using the following URL structure:
https://ucarecdn.com/<UUID>/-/resize/800x600/
Example of resize transformation using URL in UploadcareCrop it:
https://ucarecdn.com/<UUID>/-/crop/768x768/center/
Example of crop transformation using URL in UploadcareOr convert the image into a different format, say, WebP:
https://ucarecdn.com/<UUID>/-/format/webp/
Example of WebP conversion using Uploadcare’s URL APIYou can even chain these transformations together and get results using a single URL:
https://ucarecdn.com/<UUID>/-/resize/800x600/-/crop/300x300/center/-/format/webp/
Uploadcare’s URL-based transformations chained togetherThis section includes practical examples of the most commonly used transformations, demonstrated in PHP, with HTML5 Canvas and JavaScript, and through Uploadcare’s transformation API. Local code examples require input.jpg in the same folder and the GD image library activated for PHP.
To demonstrate resizing with PHP and GD library, this snippet loads a JPEG file and scales it down to 400×300 pixels. The script recalculates the image to match the new dimensions and saves the resized version as a separate file.
<?php
// Load original image
$src = imagecreatefromjpeg('input.jpg');
// Resize to 400x300
$dst = imagescale($src, 400, 300);
// Save result
imagejpeg($dst, 'resized.jpg', 90);
?>
<!DOCTYPE html>
<html>
<body>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 800px">
<h2>Resized (400×300)</h2>
<img src="resized.jpg">
</body>
</html>
Image resizing using PHP and GD library<!DOCTYPE html>
<html>
<body>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 800px">
<canvas id="c" style="display: none"></canvas>
<h2>Result</h2>
<img id="output">
<script>
const img = new Image();
img.src = 'input.jpg';
img.onload = () => {
const canvas = document.getElementById('c');
canvas.width = 400;
canvas.height = 300;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 400, 300);
document.getElementById('output').src = canvas.toDataURL('image/jpeg');
};
</script>
</body>
</html>
Image resizing using HTML5 Canvas and JavaScriptAs shown earlier:
https://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/resize/400x300/
Image resizing using UploadcareFor cropping, let’s crop out the 300×300 area, with the top left corner at 100 pixels horizontally and 50 pixels vertically:
<?php
$src = imagecreatefromjpeg('input.jpg');
// Crop 300×300 from (100, 50) coords
$crop = ['x' => 100, 'y' => 50, 'width' => 300, 'height' => 300];
$dst = imagecrop($src, $crop);
imagejpeg($dst, 'cropped.jpg', 90);
?>
<!DOCTYPE html>
<html>
<body>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 800px">
<h2>Cropped (300×300)</h2>
<img src="cropped.jpg" style="max-width: 400px">
</body>
</html>
Image cropping using the PHP GD library<!DOCTYPE html>
<html>
<body>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 800px">
<canvas id="c" style="display: none"></canvas>
<h2>Result</h2>
<img id="output">
<script>
const img = new Image();
img.src = 'input.jpg';
img.onload = () => {
const canvas = document.getElementById('c');
canvas.width = 300;
canvas.height = 300;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 100, 50, 300, 300, 0, 0, 300, 300);
document.getElementById('output').src = canvas.toDataURL('image/jpeg');
};
</script>
</body>
</html>
Image cropping with HTML5 Canvas and JavaScriptWith Uploadcare, you pass width and height separated by x and alignment values for the top‑left corner separated by a comma:
https://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/crop/300x300/100,50/
Image cropping transformation using Uploadcare URL APIHere, the code applies two different transformations to the same source image. One operation rotates the picture by 90 degrees, while another produces a horizontally mirrored version. Each transformation is saved as its own output file.
<?php
$src = imagecreatefromjpeg('input.jpg');
// Rotate 90°
$rotated = imagerotate($src, 90, 0);
// Flip horizontally
$flipped = imagecreatefromjpeg('input.jpg');
imageflip($flipped, IMG_FLIP_HORIZONTAL);
imagejpeg($rotated, 'rotated.jpg');
imagejpeg($flipped, 'flipped.jpg');
?>
<!DOCTYPE html>
<html>
<body>
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 400px">
</div>
<div>
<h2>Rotated 90°</h2>
<img src="rotated.jpg" style="max-width: 400px">
</div>
<div>
<h2>Flipped Horizontally</h2>
<img src="flipped.jpg" style="max-width: 400px">
</div>
</div>
</body>
</html>
Image rotation and flipping done with the PHP GD library<!DOCTYPE html>
<html>
<body>
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 400px">
</div>
<div>
<h2>Rotated 90deg</h2>
<img id="output-rotate" style="max-width: 400px">
</div>
<div>
<h2>Flipped Vertically</h2>
<img id="output-flip" style="max-width: 400px">
</div>
</div>
<canvas id="c" style="display: none"></canvas>
<script>
const img = new Image();
img.src = 'input.jpg';
img.onload = () => {
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
// ROTATION (90 degrees clockwise)
canvas.width = img.height;
canvas.height = img.width;
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
document.getElementById('output-rotate').src = canvas.toDataURL('image/jpeg');
ctx.restore();
// FLIPPING (vertical)
// Create a second canvas for flipping
const flipCanvas = document.createElement('canvas');
const flipCtx = flipCanvas.getContext('2d');
flipCanvas.width = img.width;
flipCanvas.height = img.height;
// Vertical flip (draw below horizontal flip)
flipCtx.save();
flipCtx.scale(1, -1);
flipCtx.drawImage(img, 0, -img.height);
flipCtx.restore();
// Show final result (rotated image)
document.getElementById('output-flip').src = flipCanvas.toDataURL('image/jpeg');
};
</script>
</body>
</html>
Image rotating and flipping with HTML5 Canvas and JavaScriptUploadcare uses /mirror/ for horizontal flipping and /flip/ for vertical flipping:
https://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/rotate/90/
https://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/flip/
https://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/mirror/
A split-screen view of Uploadcare’s rotate, flip, and mirror image transformationsThis section shows how to switch an image from one format to another. The script reads a JPEG file and re‑encodes it as a PNG.
<?php
$src = imagecreatefromjpeg('input.jpg');
imagepng($src, 'converted.png');
?>
<!DOCTYPE html>
<html>
<body>
<h2>Original (JPEG)</h2>
<img src="input.jpg" style="max-width: 400px">
<h2>Converted (PNG)</h2>
<img src="converted.png" style="max-width: 400px">
</body>
</html>
JPEG to PNG conversion using PHP and GD library<!DOCTYPE html>
<html>
<body>
<canvas id="c" style="display: none"></canvas>
<h2>Original (JPEG)</h2>
<img src="input.jpg" style="max-width: 400px">
<h2>Result (PNG)</h2>
<img id="output" style="max-width: 400px"/>
<script>
const img = new Image();
img.src = 'input.jpg';
img.onload = () => {
const canvas = document.getElementById('c');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
document.getElementById('output').src = canvas.toDataURL('image/png');
};
</script>
</body>
</html>
JPEG to PNG conversion using HTML5 Canvas and JavaScriptYou can chain resizing with format conversion for presentation purposes, for example:
https://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/resize/400x/-/format/png/
JPEG to PNG conversion using UploadcareIn this example, the focus is on JPEG compression. The script saves a new version of the image using an extremely low-quality setting, illustrating how compression parameters influence visual detail.
<?php
$src = imagecreatefromjpeg('input.jpg');
// lowest quality for demo purposes
imagejpeg($src, 'compressed.jpg', 1);
?>
<!DOCTYPE html>
<html>
<body>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 600px">
<h2>Compressed (Quality 1)</h2>
<img src="compressed.jpg" style="max-width: 600px">
</body>
</html>
Drastic JPEG compression using PHP and GD image library<!DOCTYPE html>
<html>
<body>
<canvas id="c" style="display: none"></canvas>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 600px">
<h2>Compressed Output</h2>
<img id="output" style="max-width: 600px"/>
<script>
const img = new Image();
img.src = 'input.jpg';
img.onload = () => {
const canvas = document.getElementById('c');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
document.getElementById('output').src = canvas.toDataURL('image/jpeg', 0.01);
};
</script>
</body>
</html>
Drastic JPEG compression using HTML5 Canvas and JavaScriptThe whole quality spectrum is broken down into presets when compressing with Uploadcare.
Taken from Uploadcare docs on compression:
normal — the default behavior when no quality operation is applied. The reasonable quality for 1x pixel density.better — can be used to render relatively small and detailed previews. ≈125% file size compared to normal.best — can be used to deliver images close to their pristine quality (e.g., for artwork). ≈170% file size.lighter — useful when applied to relatively large images to save traffic without significant quality loss. ≈80% file size.lightest — highest compression ratio for high pixel ratio. ≈50% file size.I use lightest as the most aggressive option:
https://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/resize/600x/-/quality/lightest/
Image compression using UploadcareThis snippet demonstrates brightness adjustment using PHP and GD library. The script increases the image’s brightness level and outputs a modified version with the updated appearance.
<?php
$src = imagecreatefromjpeg('input.jpg');
// Brightness +100
imagefilter($src, IMG_FILTER_BRIGHTNESS, 100);
imagejpeg($src, 'color_adjusted.jpg');
?>
<!DOCTYPE html>
<html>
<body>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 600px">
<h2>Color Adjusted</h2>
<img src="color_adjusted.jpg" style="max-width: 600px">
</body>
</html>
Increasing brightness using PHP and GD library<!DOCTYPE html>
<html>
<body>
<canvas id="c" style="display:none"></canvas>
<h2>Original</h2>
<img src="input.jpg" style="max-width: 600px">
<h2>Adjusted Output</h2>
<img id="output" style="max-width: 600px">
<script>
const img = new Image();
img.src = 'input.jpg';
img.onload = () => {
const canvas = document.getElementById('c');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.filter = 'brightness(2)';
ctx.drawImage(img, 0, 0);
document.getElementById('output').src = canvas.toDataURL('image/jpeg');
};
</script>
</body>
</html>
Increasing brightness using HTML5 Canvas and JavaScripthttps://ucarecdn.com/c7916a46-291e-4ce8-86a3-9ae4c6a7b33e/-/resize/600x/-/brightness/20/
Increasing brightness using UploadcareAs the screenshots show, each tool produces different brightness characteristics.
Uploadcare offers AI‑driven transformations to automate regular tasks. Examples include smart crop, face blurring based on face detection algorithms, and background removal.
Smart crop lets you crop an image based on the main object’s position. It’s useful for generating profile pictures and highlighting key objects.
Smart cropping using automated face detection with UploadcareFace detection works similarly and helps you blur faces:
Blurring faces with UploadcareBackground removal detects the main object and removes everything else. It’s available through the REST API only.
With the “lazy generation” approach, dynamic assets are not pre-generated. Instead, each transformation is created at the time of the first request.
After the first request, the file is stored in the CDN cache. Subsequent requests check the cache first and are served from there if available. This balances the load and speeds up the delivery. Cached results stay predictable because each URL acts as a unique key in the cache database.
With this approach, you don’t need manual CDN invalidation because no existing assets are updated. If there’s a transformation with unique parameters, there’s a unique identifier for that.
You can find a detailed breakdown of Core Web Vitals for web developers in a separate article on Uploadcare. For this article, let’s go over the main ideas that can help you improve your website by optimizing images.
LCP often depends on how fast the largest image in the viewport loads. You can improve loading speed by:
-/quality/smart/Your goal is to use as little bandwidth as possible for the required visual result.
The Cumulative Layout Shift metric reflects how much page elements shift during loading. Images without width and height attributes cause the most CLS issues. You improve CLS by:
-/resize/ and -/crop/<img> width and height attributes to those predefined variablesCaching is one of the core responsibilities of a CDN. Distributed points of presence are another major advantage of CDNs like Uploadcare. Files are cached at CDN edge nodes around the world. Your users receive content from the closest edge nodes with low latency and fast transfer speeds.
Working with images in modern web applications relies on understanding how each transformation affects the final output. Knowing when operations are lossy or lossless and how client‑side and server‑side approaches differ helps you choose the right technique for each task. URL‑based pipelines are another option to consider — they offer a straightforward way to handle transformations and delivery, and they integrate cleanly into different project setups.
The most common transformations are resize (performance + responsiveness), crop (thumbnails/avatars), rotate/flip (fix orientation), format conversion (WebP/AVIF for smaller files), and quality adjustments (reduce bandwidth). Some workflows also use AI transformations like smart crop or background removal for automation.
Uploadcare uses URL-based transformations. After upload, you apply operations directly in the CDN URL:
https://ucarecdn.com/<UUID>/-/resize/800x600/You can also chain transformations, and Uploadcare delivers results via a cached global CDN.
Client-side transformations are great for instant previews, but performance depends on the user’s device. Server-side transformations are more consistent and handle large files better. With Uploadcare, transformations run on demand and are cached via CDN, giving predictable performance without managing infrastructure.
Ready to get started?
Join developers who use Uploadcare to build file handling quickly and reliably.
Written by Arthur Khayrullin
Arthur Khayrullin is a web developer with over a decade of experience. His clients are international start-ups and companies that want to stand firmly on their feet on the Web, while focusing on the business operations.