Image transformations
Serve images at the right size and format
Section titled “Serve images at the right size and format”uHeadless’ built-in image transformation service allows to generate images optimized and resized dynamicly on the edge.
How to use
Section titled “How to use”Once image transformations has been enabled on your uHeadless project you can start using image transformations. You need to proxy your images through the media.uheadless.com service.
Example
Section titled “Example”<img src="https://media.uheadless.com/<id>/media/0mxpkjq4/mkl_selskabslokale_vinter-2024_9.jpg?w=1280" />Options
Section titled “Options”This documentation covers the URL search parameters that can be used to configure image transformations.
Sets the width of the output image in pixels
?w=800Height
Section titled “Height”Sets the height of the output image in pixels
?h=600Quality
Section titled “Quality”Sets the quality/compression level of the output image
?q=85 // (1-100)Fit Modes
Section titled “Fit Modes”Resize Behavior
Section titled “Resize Behavior”Determines how the image should be resized to fit the specified dimensions
| Values | Description |
|---|---|
| clip | Scales to fit within dimensions |
| crop | Scales and crops to fill dimensions |
| scale | Only scales down, never up |
?fit=cropFocal Point and Gravity
Section titled “Focal Point and Gravity”Focal Point X
Section titled “Focal Point X”X-coordinate of the focal point for cropping operations
Must be used together with fp-y
?fp-x=0.5 // (0-1)Focal Point Y
Section titled “Focal Point Y”Y-coordinate of the focal point for cropping operations
Must be used together with fp-x
?fp-y=0.3 // (0-1)Rotation
Section titled “Rotation”Rotation
Section titled “Rotation”Rotates the image by the specified number of degrees
?rot=90Format Conversion
Section titled “Format Conversion”Format
Section titled “Format”Converts the image to the specified format
| Values | Description |
|---|---|
| avif | Converts to avif |
| jpg | Converts to jpeg |
| png | Converts to png |
| webp | Converts to webp |
Background Color
Section titled “Background Color”Sets the background color for transparent areas (useful for format conversions)
?bg=ffffffImage Effects
Section titled “Image Effects”Blur Effect
Section titled “Blur Effect”Applies a blur effect to the image
?blur=5Brightness
Section titled “Brightness”Adjusts the brightness of the image
?bri=10Contrast
Section titled “Contrast”Adjusts the contrast of the image
?con=15Sharpen
Section titled “Sharpen”Applies a sharpening effect to the image
?sharp=3Cropping
Section titled “Cropping”Rectangle Crop
Section titled “Rectangle Crop”Crops the image to a specific rectangle defined by left, top, width, height
?rect=80,272,2880,1620Usage Examples
Section titled “Usage Examples”# Basic resize with quality?w=800&h=600&q=85
# Crop with focal point?w=400&h=300&fit=crop&fp-x=0.3&fp-y=0.7
# Format conversion with background?fm=jpeg&bg=ffffff
# Multiple effects?w=500&blur=2&bri=10&con=5&sharp=1
# Rectangle crop with rotation?rect=100,50,800,600&rot=90