Image URL API
Our powerful CDN not only delivers your images at lightning-fast speeds, but it also allows you to transform them on the fly through URL parameters. With an easy-to-use syntax, you can resize, crop, create complex compositions, and perform a wide range of other transformations to your images simply by adding parameters to the URL. This means you can quickly and easily tailor your images to your specific needs, without the need for complex editing tools or extensive coding. So why wait? Sign up for an account today and start transforming your images with ease.
Please, take a look at the parameters available for image transformation in our CDN. These parameters can help you optimize and enhance your images to better suit your needs. From cropping and resizing to adding watermarks and text, there are many options available to customize your images. Take some time to explore the different parameters and see how they can benefit your website or application.
Aspect Ratio
The aspectRatio
parameter is a string that allows you to control the proportions of your image by specifying the width-to-height ratio.
It takes the form of a fraction, with the width and height separated by a colon (:).
For example, 1:1 represents a square aspect ratio, while 4:3 represents a more rectangular shape commonly used in standard images.
Here are some examples of popular aspect ratios and their corresponding values:
- Square: 1:1
- Standard Image: 4:3
- Landscape Image: 16:9
- Instagram Post: 4:5
- Pinterest Pin: 2:3
By setting the aspect ratio parameter, you can ensure that your images are displayed in the correct proportions, regardless of the device or screen size.
Usually used together with
- Name
focalPoint
- Type
- string
- Description
- See More about Focal Point
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?aspectRatio=1:1
aspectRatio="1:1"
AVIF
The avif
parameter allows you to programmatically enable or disable AVIF compression for your images.
By default, our CDN will automatically detect if a user's browser supports AVIF and will deliver the image in the appropriate format.
However, you can use the AVIF CDN parameters to override this default behavior and force the delivery of images in AVIF format, regardless of the browser's support for it.
This gives you more control over how your images are delivered and can help to optimize your website or application for improved performance.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?avif=false
AVIF=true (11Kb)
AVIF=false (96.9Kb)
Background
The background
parameter allows for customization of the image's background.
It can take various values, including a hex string to set a solid color background,
a comma-separated string to generate gradients, an image URL to use as the background,
the self-image to use as the background, or even a blurhash version of the image.
The background
parameter enables users to create unique images with personalized backgrounds
that complement the image's content. It provides an excellent opportunity for designers, marketers,
and content creators to showcase their creativity and enhance their visual storytelling.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgPad=10.0
bg="blurhash"
bg="tomato,#d7006c,orange"
Background Aspect Ratio
The bgAspectRatio
parameter is used to change the aspect ratio of the background image or color used in image transformations.
This parameter accepts a string in the format of width:height (e.g., 16:9, 4:3)
or a floating-point number representing the ratio of width to height (e.g., 1.5, 0.75).
By default, the background image or color will be displayed with the same aspect ratio as the original image. However,
if the bgAspectRatio
parameter is provided, the background will be adjusted to fit the specified aspect ratio, which
can be useful for creating custom compositions or changing the overall visual look of an image.
For example, setting bgAspectRatio=1:1
would create a square background for the image,
while bgAspectRatio=16:9
would create a widescreen background.
The bgAspectRatio
parameter can be used in combination with other image
transformation parameters to achieve a wide range of visual effects.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgAspectRatio=9:16
&bgPad=10.0
bgAspectRatio="9:16"
bgAspectRatio="1:1"
Background Black & White
The bgBlackWhite
parameter is a boolean parameter that allows you to remove the color from the background of an image.
When this parameter is set to true, the background will be converted to black and white, creating a grayscale effect.
This can be useful if you want to de-emphasize the background and bring more attention to the foreground or subject of the image.
On the other hand, if you want to preserve the original color of the background, you can simply set this parameter to false or
omit it from the URL parameters.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgBlackWhite=true
&bgPad=10.0
bgBlackWhite=true
Background Blur
The bgBlur
parameter is a numerical value that can be used to apply a Gaussian blur effect to the image's background.
This parameter can be useful for creating a more visually appealing design by softening the background and bringing focus to the image's subject.
The value for bgBlur
ranges from 0 to 100, where 0 means no blur and 100 means the maximum blur effect.
The higher the value, the more blurred the background will appear.
For example, a bgBlur
value of 20 would apply a slight blur to the background, while a value of 80 would create a more noticeable blur effect.
The exact amount of blur that works best for an image can vary based on factors such as image resolution, background color, and overall design aesthetic.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgBlur=10.0
&bgPad=10.0
bgBlur=20
bgBlur=80
Background Brightness
The bgBrightness
parameter allows you to adjust the brightness of the background of your image.
You can use a value between -100 and 100, where -100 is completely black and 100 is completely white.
Positive values will brighten the background while negative values will darken it.
This can be useful if you want to make the background more visible or less distracting,
or if you want to adjust the contrast between the foreground and background.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgBrightness=50
&bgPad=10.0
bgBrightness=-50
bgBrightness=50
Background Gradient Direction
The bgGradientDir
parameter is used to define the direction of a gradient background applied to an image.
This parameter can be defined as left
, right
(which is the default), top
, or bottom
. When the parameter is set,
a gradient will be generated using the specified direction, with colors that transition smoothly from the start to the end of the gradient.
This can be useful for creating visually interesting backgrounds for images.
Possible values
- left
string
- right
string
(default) - top
string
- bottom
string
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=d7006c,orange
&bgGradientDir='right'
&bgPad=10.0
bgGradientDir="right"
bgGradientDir="top"
Background Gradient Sharpness
The bgGradientSharp
parameter adjusts the sharpness of the background gradient.
It accepts a numeric value, where 0 is the softest (default) and 20 is the sharpest.
When set to a lower value, the gradient will have more visible color bands, and the transition between colors will appear sharper. On the other hand, when set to a higher value, the gradient will have a more subtle transition between colors, making it appear softer.
This parameter is useful when generating gradients as backgrounds and allows for more control over the appearance of the final image.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=d7006c,orange
&bgGradientSharp=5
&bgPad=10.0
bgGradientSharp=5
bgGradientSharp=15
Background Height
The bgHeight
parameter is used to define the height of the background. It takes a number in pixels as input, and if the height is lower
than the main image, the background will be reduced to fit. This parameter can be useful when you want to add a background to an image
and make sure it has a specific height.
For example, if you have an image with a height of 800 pixels and you want to add a background with a height of 100 pixels, you can use the
bgHeight=100
parameter to set the height of the background. If you set the bgHeight
parameter to a higher value than the main image, the
background will be stretched to fit the new height.
Overall, the bgHeight
parameter allows you to customize the height of your background, and ensure that it is the correct size for your needs.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=d7006c,orange
&bgHeight=500
&bgPad=10.0
bgHeight=800
Background Padding
The bgPad
parameter allows you to adjust the padding of an image relative to the background.
This can be done in two ways - using an absolute or relative value.
With an absolute value, you can specify the number of pixels to pad the image from the background. For example, a value of 10 would add a 10-pixel padding around the image.
With a relative value, you can specify a percentage of the image size to pad from the background. For example, a value of 10.0 would add a 10% padding around the image.
This feature is especially useful when you need to adjust the spacing between the image and the background, or when you want to create a more dynamic and visually appealing composition.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgPad=10.0
bgPad="10.0"
bgPad=10
Background Rounded
The bgRounded
parameter is used to adjust the rounded corners of the background of an image. This parameter can take either an
absolute or a relative value. An absolute value is given in pixels, while a relative value is given as a percentage of the image size.
For example, bgRounded=20
sets an absolute value of 20 pixels for the background rounding, while bgRounded=10.0
sets a relative
value of 10% of the image size for the background rounding.
This parameter can be useful for creating images with a rounded background, which can add a touch of elegance or personality to an image.
By adjusting the bgRounded
parameter, you can customize the level of rounding to suit your specific needs.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgPad=10.0
&bgRounded=10.0
bgRounded="10.0"
bgRounded=25
Background Saturation
The bgSaturation
parameter is a number that can be used to adjust the saturation of the background image.
A value of -100 will result in a completely desaturated (black and white) image, while a value of 0 (default)
will preserve the original saturation of the image. Values between 0 and 100 will adjust the saturation accordingly.
This parameter can be useful when trying to create a specific aesthetic or look for an image composition.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgPad=10.0
&bgSaturation=-50
bgSaturation=-50
Background Shadow
The bgShadow
parameter is a boolean option that allows you to apply a drop shadow effect to the main image when used in conjunction with a background.
By enabling this parameter, you can add depth and dimension to your images, making them stand out from the background and creating a visually appealing effect.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=blurhash
&bgPad=10.0
&bgShadow=true
&bgSize=800x800
bgShadow=true
Background Size
The bgSize
parameter is a shortcut to define the background size in pixels, using the format wxh (e.g., 200x200).
For example, bgSize=800x800
would set the background size to 800 pixels wide and 800 pixels high.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=d7006c,orange
&bgPad=10.0
&bgSize=800x800
bgSize="800x800"
Background Width
bgWidth
is a numeric value in pixels that defines the width of the background. If the width is lower than the main image,
the background will be reduced to fit. This parameter can be used in combination with other background parameters, such as bgHeight
or bgAspectRatio
, to create custom backgrounds for your images.
This will set the width of the background to 1200 pixels, and if the main image is wider than 1200 pixels, it will be scaled down to fit the background.
Usually used together with
- Name
bg
- Type
- string
- Description
- See More about Background
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?bg=d7006c,orange
&bgPad=10.0
&bgWidth=800
bgWidth=800
Black & White
The blackWhite
parameter is a simple yet powerful way to convert an image to grayscale.
By setting this boolean parameter to true, all color information is stripped from the image,
resulting in a black and white version of the original. This can be useful for creating a vintage
or artistic look, or simply for reducing the file size of an image. It can also be used in conjunction
with other parameters to create custom effects.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?blackWhite=true
blackWhite=true
Blend
The blend
parameter is a powerful way to overlay a color or gradient on top of an image.
It takes a single color or multiple comma-separated colors, which will be used to create a gradient.
This parameter can be used to add an overlay to an image, or to create a duotone effect by blending two colors.
For example, blend=blue
will overlay a blue color on top of the image, while blend=yellow,blue
will create a gradient that goes from blue
to yellow
.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?blend=yellow,blue
blend="yellow,blue"
blend="yellow"
Blend Gradient Direction
The blendGradientDir
parameter is used to define the direction of a gradient blend applied to an image.
This parameter can be defined as left
, right
(which is the default), top
, or bottom
. When the parameter is set,
a gradient will be generated using the specified direction, with colors that transition smoothly from the start to the end of the gradient.
This can be useful for creating visually interesting blends for images.
Possible values
- left
string
- right
string
(default) - top
string
- bottom
string
Usually used together with
- Name
blend
- Type
- string
- Description
- See More about Blend
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?blend=yellow,blue
&blendGradientDir=right
blendGradientDir="right"
blendGradientDir="top"
Blend Gradient Sharpness
The blendGradientSharp
parameter adjusts the sharpness of the blend gradient.
It accepts a numeric value, where 0 is the softest (default) and 20 is the sharpest.
When set to a lower value, the gradient will have more visible color bands, and the transition between colors will appear sharper. On the other hand, when set to a higher value, the gradient will have a more subtle transition between colors, making it appear softer.
This parameter is useful when generating gradients as blends and allows for more control over the appearance of the final image.
Usually used together with
- Name
blend
- Type
- string
- Description
- See More about Blend
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?blend=yellow,blue
&blendGradientSharp=5
blendGradientSharp=5
blendGradientSharp=15
Blend Mode
The blendMode
parameter is used to define how the overlay created by the blend parameter should be blended with the original image.
This parameter can be set to a variety of values, such as multiply
, screen
, overlay
, hardlight
, and many more.
Each value produces a different effect when blending the two images together, allowing for a wide range of creative possibilities.
For example, setting blend to a solid color and blendMode
to multiply
can create a darkening effect on the original image,
while setting blend to a gradient and blendMode
to overlay
can create a textured overlay.
Overall, the blendMode
parameter adds another layer of control to the blend parameter, allowing for even more customization and
creativity when transforming images.
Possible values
- add
string
- color
string
- colorburn
string
- colordodge
string
- darken
string
- darkercolor
string
- difference
string
- divide
string
- exclusion
string
- hardlight
string
- hardmix
string
- hue
string
- lighten
string
- lightercolor
string
- linearburn
string
- lineardodge
string
- linearlight
string
- luminosity
string
- multiply
string
(default) - none
string
- overlay
string
- phoenix
string
- pinlight
string
- reflex
string
- saturation
string
- screen
string
- softlight
string
- substract
string
- vividlight
string
Usually used together with
- Name
blend
- Type
- string
- Description
- See More about Blend
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?blend=yellow,blue
&blendMode=multiply
blendMode="multiply"
blendMode="overlay"
blendMode="none"
Blend Opacity
The blendOpacity
parameter is used to adjust the opacity of the overlay when the blendMode
parameter is set to "none".
The default value is 75, but it can be adjusted to increase or decrease the opacity of the overlay.
This parameter only applies when using a flat color or gradient as the overlay, and not when using other blend modes.
Usually used together with
- Name
blend
- Type
- string
- Description
- See More about Blend
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?blend=yellow,blue
&blendOpacity=50
blendOpacity=75
blendOpacity=95
Blur
The blur
parameter applies Gaussian blur to an image. This parameter takes a numeric value that represents the standard deviation of the Gaussian blur kernel,
which determines the amount of blur to be applied. A larger value will result in a more blurred image, while a smaller value will result in less blur.
The blur
parameter is particularly useful for creating a background or adding an artistic effect to an image.
By applying a Gaussian blur to the background, the foreground object can be emphasized and stand out more.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?blur=50
blur=50
Brightness
The brightness
parameter is used to adjust the overall brightness of an image. It can take a value from -100 to 100, with 0 being the default brightness.
A positive value increases the brightness of the image, while a negative value decreases it. For example, a brightness value of 50 would increase the brightness by 50%,
making the image appear lighter, while a value of -50 would decrease the brightness by 50%, making the image appear darker.
The brightness
parameter can be used to adjust the exposure of an image, enhance or reduce the visibility of details, or to create a particular atmosphere or mood in the image.
It is often used in combination with other image processing techniques like contrast, saturation, and sharpness to achieve a desired visual effect.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?brightness=50
brightness=-50
brightness=50
Dpr
The dpr
parameter, short for device pixel ratio, is used to specify the resolution of the image for devices with high pixel density screens.
It starts from 1 and goes up to a maximum of 2, where 1 represents a standard resolution and 2 represents a high resolution.
When the dpr
parameter is not provided, the system automatically detects the device pixel ratio of the user's browser and serves the image at the appropriate resolution.
For example, if a user with a high pixel density screen opens a page with an image that has no dpr
parameter, the system will automatically serve the image with a higher resolution to ensure that it looks sharp and clear on the user's screen.
Providing a dpr
parameter can be useful for optimizing the image size and quality for different device types. For example, if you have an image that is 1000 pixels wide,
you could serve it with a dpr of 1 for standard resolution devices and a dpr of 2 for high resolution devices. This would result in the image being displayed at 1000 pixels
on standard resolution devices and 2000 pixels on high resolution devices, ensuring that it looks sharp and clear on both types of devices.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?dpr=2
Focal Point
The focalPoint
parameter is a powerful tool to control the cropping of an image. It allows you to specify the point of interest in the image that should be centered in the final crop.
If you do not provide a focalPoint
, our system will use an intelligent algorithm to automatically determine the best crop for the image based on object detection.
By using the focalPoint
parameter, you can ensure that your images are cropped exactly as you want them to be, with the most important parts of the image always visible.
Possible values
- auto
string
(default) - bottom-left
string
- bottom-right
string
- bottom
string
- center
string
- left-bottom
string
- left-top
string
- left
string
- right-bottom
string
- right-top
string
- right
string
- top-left
string
- top-right
string
- top
string
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?aspectRatio=1:1
&focalPoint=left
focalPoint="left"
focalPoint="right"
Format
The format
parameter is used to specify the image file format to be used. It can be set to "png" or "jpg", but if it is not specified,
the system will choose the best format based on some heuristics, such as the input file type and the desired output quality.
PNG is a lossless image format that supports transparency and is generally used for images with text, line art, or other graphics with sharp edges. On the other hand, JPG is a lossy image format that is suitable for photographic images and other images with smooth transitions between colors.
It's important to note that using the right image format can have a significant impact on the image quality and file size. Therefore, it's recommended to choose the format carefully based on the type of image and its intended use.
Possible values
- auto
string
(default) - jpg
string
- png
string
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?format=png
Height
The height
parameter is used to define the height of an image in pixels. It can be used alone or in conjunction with the width
parameter to set
the dimensions of the image.
When used alone, the height
parameter will set the height of the image while preserving its aspect ratio. If the image is wider than it is tall,
it will be scaled down proportionally so that it fits within the specified height. If the image is taller than it is wide, it will be scaled down
proportionally so that it fits within the specified height, with blank space added to the sides of the image.
When used with the width
parameter, the height
parameter will set the height of the image while preserving its aspect ratio.
If the mode
parameter is set to fit
(the default value), the image will be scaled down proportionally to fit within the specified dimensions,
with blank space added to either the top/bottom or left/right sides of the image to fill any remaining space. If the mode
parameter is set to fill
,
the image will be scaled up or down proportionally so that it completely fills the specified dimensions, with any excess portions of the image cropped out.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?height=500
Mark
The mark
parameter is used to add a watermark to an image. It can accept an internal or external source for the watermark.
When using an external source, the URL should be specified.
The watermark is placed in the bottom right of the image by default.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
mark="a0e23c93492f95a19a749289493dbcfd.png"
Mark Align
The markAlign
parameter is used to specify the alignment of a watermark image that is added to an image using the mark parameter.
It controls the positioning of the watermark image on the main image.
The markAlign
parameter supports the following values:
center
: This value centers the watermark image both horizontally and vertically on the main image.top
,bottom
,left
,right
: These values align the watermark image to the respective edge of the main image.top-left
,top-right
,bottom-left
,bottom-right
: These values align the watermark image to the respective corner of the main image.left-top
,left-center
,left-bottom
,right-top
,right-center
,right-bottom
: These values align the watermark image to a position on the edge of the main image, with an offset in pixels from the edge.
Additionally, the markAlign
parameter can also be grid
. In this case, the watermark image is tiled across the main image, with an offset in pixels from the edge of the main image.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markAlign=center
markAlign="center"
markAlign="grid"
Mark Angle
The markAngle
parameter is used to rotate the watermark image by a specified angle in degrees. It accepts values between -180 and 180,
where negative values represent a counterclockwise rotation and positive values represent a clockwise rotation.
For example, if the markAngle
parameter is set to 45, the watermark image will be rotated clockwise by 45 degrees.
Similarly, if the markAngle
parameter is set to -90, the watermark image will be rotated counterclockwise by 90 degrees.
It's important to note that the markAngle
parameter is only applicable if the watermark image is in a landscape orientation.
If the watermark image is in portrait orientation, it will not be rotated. Additionally, if the markAngle
parameter is not provided,
the watermark image will be placed in its default orientation.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markAlign=grid
&markAngle=45
markAngle=45
Mark Background
The markBg
parameter is used in conjunction with the mark parameter to specify the background color or gradient for a watermark that is being applied to an image.
This parameter can be set to a single flat color or to a gradient if multiple colors are provided as a comma-separated list.
When a single color is specified, the watermark will have a uniform background color. If a gradient is specified, the background color will gradually transition from one color to the next across the watermark.
The syntax for setting a gradient with the markBg
parameter is the same as for other gradient parameters, with each color and position separated by a comma.
For example, setting markBg
=yellow,purple would create a gradient that transitions from yellow to purple.
It is important to note that the markBg
parameter only affects the background color or gradient of the watermark, and does not affect the color or transparency
of the watermark itself.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=white
markBg="white"
markBg="yellow,purple"
Mark Background Gradient Direction
The markBgGradientDir
parameter is used to define the direction of a mark gradient background applied to an image.
This parameter can be defined as left
, right
(which is the default), top
, or bottom
. When the parameter is set,
a gradient will be generated using the specified direction, with colors that transition smoothly from the start to the end of the gradient.
This can be useful for creating visually interesting backgrounds for images.
Possible values
- left
string
- right
string
(default) - top
string
- bottom
string
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=yellow,purple
&markBgGradientDir=right
markBgGradientDir="right"
markBgGradientDir="top"
Mark Background Gradient Sharpness
The markBgGradientSharp
parameter adjusts the sharpness of the background gradient.
It accepts a numeric value, where 0 is the softest (default) and 20 is the sharpest.
When set to a lower value, the gradient will have more visible color bands, and the transition between colors will appear sharper. On the other hand, when set to a higher value, the gradient will have a more subtle transition between colors, making it appear softer.
This parameter is useful when generating gradients as backgrounds and allows for more control over the appearance of the final image.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=yellow,purple
&markBgGradientSharp=5
markBgGradientSharp=5
Mark Background Opacity
The markBgOpacity
is a parameter used in image processing that specifies the opacity of the background color or gradient used for a watermark.
The value ranges from 0 to 100, where 0 represents a completely transparent background, and 100 represents a completely opaque background.
This parameter is typically used in conjunction with the markBg parameter to set the background color or gradient of the watermark.
By adjusting the markBgOpacity
, you can control the visibility of the background color or gradient, allowing you to create subtle or more prominent watermarks on your images.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=white
&markBgOpacity=50
markBgOpacity=50
markBgOpacity=100
Mark Background Padding
The markBgPad
parameter is used in conjunction with the markBg
parameter to set the padding around the watermark background.
It can be defined as an absolute value in pixels or as a relative value, which is a percentage of the watermark's width.
For example, markBgPad=10 would set a 10-pixel padding around the watermark background, while markBgPad=10.0
would set a padding of 10% of the watermark's width.
If no value is specified, the padding defaults to 10.0.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=white
&markBgPad=10.0
markBgPad=10
markBgPad="40.0"
Mark Background Rounded
The markBgRounded
parameter is used to add rounded corners to the background of the watermark. This parameter can take an absolute value in pixels or a
relative value as a percentage of the watermark's width or height.
For example, if markBgRounded
is set to 10, the corners of the watermark's background will be rounded by 10 pixels.
If it is set to 10.0, the corners will be rounded by 10% of the watermark's width or height.
This parameter can be useful to make the watermark blend more naturally with the image by avoiding sharp corners. It is also a way to add a subtle touch of design to the watermark itself.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=white
&markBgRounded=10.0
markBgRounded=10
markBgRounded="20.0"
Mark Height
The markHeight
parameter sets the height of the watermark image. This parameter can be specified as an absolute or relative value.
When an absolute value is used, the watermark image will have the exact height specified in pixels.
For example, markHeight=50
would set the height of the watermark image to 50 pixels.
When a relative value is used, the watermark image will have a height proportional to the height of the original image.
For example, markHeight=10.0
would set the height of the watermark image to 10% of the height of the original image.
It is important to note that if both markWidth and markHeight parameters are provided, the watermark will be resized to fit within the given dimensions while preserving its aspect ratio.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=white
&markHeight=200
markHeight=200
markHeight="50.0"
Mark Opacity
The markOpacity
parameter is used to adjust the opacity of a watermark that is applied to an image using the mark parameter.
The value of this parameter can range from 0 to 100, where 0 is completely transparent and 100 is completely opaque.
By adjusting the markOpacity
parameter, you can control how visible the watermark is in the final image.
For example, if you set the markOpacity
to 50, the watermark will be partially transparent and the underlying image will be partially visible through it.
Conversely, if you set the markOpacity
to 100, the default, the watermark will be completely opaque and the underlying image will be completely covered by it.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markOpacity=50
markOpacity=50
markOpacity=100
Mark Padding
The markPad
parameter is used to set the padding around a watermark image that is added to a main image using the mark parameter.
The value of the markPad
parameter can be either an absolute or a relative value.
If an absolute value is used, it sets the padding in pixels around the watermark image. For example, markPad=10
would add a padding of 10 pixels around the watermark image.
If a relative value is used, it sets the padding as a percentage of the width or height of the main image,
depending on whether the watermark image is aligned horizontally or vertically. For example, markPad=10.0
would add a padding of 10% of the main
image width or height around the watermark image, depending on its alignment.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markPad=50
markPad=50
markPad="20.0"
Mark Size
The markSize
parameter is a shortcut parameter that allows you to set the size of a watermark in a single parameter instead of specifying
both the markWidth
and markHeight
parameters separately. The value of the markSize
parameter should be in the format wxh (e.g., 200x200).
This parameter is useful when you want to set the watermark size without specifying the markWidth
and markHeight
parameters separately.
By using markSize
, you can save time and simplify your code. Keep in mind that the markSize
parameter overrides any values set for markWidth
and markHeight
.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markSize=250x250
markSize="250x250"
Mark Width
The markWidth
parameter is used to specify the width of the watermark image that is being added to the original image.
It can be defined as an absolute value in pixels or a relative value as a percentage of the original image width.
When an absolute value is used, the watermark image will have the exact width specified in pixels.
For example, markWidth=50
would set the width of the watermark image to 50 pixels.
When a relative value is used, the watermark image will have a width proportional to the width of the original image.
For example, markWidth=10.0
would set the width of the watermark image to 10% of the width of the original image.
It is important to note that if both markWidth
and markHeight
parameters are provided, the watermark will be resized to fit
within the given dimensions while preserving its aspect ratio.
Usually used together with
- Name
mark
- Type
- string
- Description
- See More about Mark
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mark=a0e23c93492f95a19a749289493dbcfd.png
&markBg=white
&markWidth=200
markWidth=200
markWidth="50.0"
MaxHeight
The maxHeight
parameter is used to set the maximum height of the output image. If the original image height is greater than the maxHeight
value,
it will be scaled down to fit within the specified height while preserving the aspect ratio.
If the original image height is already smaller than the specified maxHeight
value, then no scaling is performed.
For example, if the original image height is 1000 pixels and the maxHeight
value is set to 500, the image will be scaled down to 500 pixels in height
while preserving its aspect ratio. On the other hand, if the original image height is only 400 pixels and the maxHeight
value is set to 500,
the image will not be scaled as it already fits within the maximum height constraint.
It's worth noting that the maxHeight
parameter takes priority over the height
parameter.
If both are specified, the image will be scaled to the specified maxHeight
if greater than height
.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?maxHeight=500
MaxWidth
The maxWidth
parameter is used to specify the maximum width of the transformed image. If the original image width is greater than the specified maxWidth
,
the image will be resized proportionally until it meets the specified maximum width. If the original image width is smaller than the specified maxWidth
, the image will not be resized.
It is important to note that maxWidth
only specifies a maximum limit and not an exact width. The actual width of the transformed image may be smaller than maxWidth
if it is necessary to preserve the aspect ratio of the original image.
The maxWidth
parameter is often used in conjunction with the height parameter to create images that fit within a specific size constraint while maintaining their aspect ratio.
The combination of maxWidth
and height ensures that the transformed image fits within the maximum width and height constraints, with the final size determined by the aspect
ratio of the original image.
It's worth noting that the maxWidth
parameter takes priority over the width
parameter.
If both are specified, the image will be scaled to the specified maxWidth
if greater than width
.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?maxWidth=500
Mode
The mode
parameter in image processing refers to the way the image should be resized or cropped to fit within certain dimensions.
The mode
can be set to either fit
or fill
.
When the mode
is set to fit
, the image will be resized to fit within the specified dimensions while preserving its aspect ratio.
If either the width or height is not specified, the original dimensions of the image will be used. This is similar to the
contain
method of resizing. In other words, the image will
be scaled down proportionally until it fits within the specified dimensions, and any empty space will be filled with a background color or transparency.
When the mode
is set to fill
, the image will be resized and cropped to fill the specified dimensions while maintaining its aspect ratio.
This is similar to the cover
method of resizing.
In other words, the image will be scaled up or down proportionally to completely fill the specified dimensions, and any excess will be cropped off.
You can use focalPoint
parameter to specifies the point in the image that should remain in focus.
In this mode, the focal point is used as a guide to determine which part of the image should be preserved, and the rest of the image is cropped out.
The image is then scaled to fill the desired dimensions while keeping the focal point in the center of the resulting image.
This mode is useful when you want to ensure that a particular part of the image remains visible while cropping out the excess.
The focalPoint
parameter allows you to define the area of the image that is most important, ensuring that it remains in the final image.
On the other hand, when the focalPoint
parameter is not defined, SimpleImg uses advanced algorithms to automatically detect the most important part of an
image and crop it accordingly.
This ensures that the image is resized to the specified dimensions while maintaining the important content of the image.
It is important to note that if neither the width nor height is specified, the original dimensions of the image will be used.
Possible values
- fit (or contain)
string
(default) - fill (or cover)
string
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?height=500
&mode=fill
&width=500
mode="fill"
mode="fit"
QR
The qr
parameter is used to add a QR code to the image. It is a string value that represents the data to be encoded as a QR code.
The QR code is automatically generated and added to the image. By default, the QR code is positioned at the bottom-right corner of the image.
This parameter can be useful in situations where you want to include a QR code in an image, for example, to provide a quick way for users to access a webpage or to provide additional information about a product.
It's worth noting that some image transformations may not be compatible with the QR code. In such cases, the QR code may not be generated correctly or may be partially or completely obscured. Therefore, it's important to test the output image to ensure that the QR code is working as expected.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
qr="https://simpleimg.io"
QR Align
The qrAlign
parameter is used to specify the alignment of the QR code that is added to an image using the qr
parameter.
It controls the positioning of the QR code on the main image.
The qrAlign
parameter supports the following values:
center
: This value centers the QR code both horizontally and vertically on the main image.top
,bottom
,left
,right
: These values align the QR code to the respective edge of the main image.top-left
,top-right
,bottom-left
,bottom-right
: These values align the QR code to the respective corner of the main image.left-top
,left-center
,left-bottom
,right-top
,right-center
,right-bottom
: These values align the QR code to a position on the edge of the main image, with an offset in pixels from the edge.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrAlign=center
qrAlign="center"
QR Border
The qrBorder
parameter is used to set the color of the border around the QR code added to an image using URL parameters.
It accepts a string value representing a color code in HEX, RGB, or named format.
For example, if you want to set a red border color around the QR code, you can add the qrBorder
parameter to the URL with the value FF0000.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrBorder=000000
qrBorder="#000000"
QR Padding
The qrPad
parameter is used to set the padding around the QR code that is added to a main image using the qr
parameter.
The value of the qrPad
parameter can be either an absolute or a relative value.
If an absolute value is used, it sets the padding in pixels around the QR code. For example, qrPad=10
would add a padding of 10 pixels around the QR code.
If a relative value is used, it sets the padding as a percentage of the width or height of the main image,
depending on whether the QR code is aligned horizontally or vertically. For example, qrPad=10.0
would add a padding of 10% of the main
image width or height around the QR code, depending on its alignment.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrPad=50
qrPad=50
qrPad="20.0"
QR Rounded
The qrRounded
parameter is a boolean used to control the corners of the QR code image. When set to true
or not specified, it rounds the corners of the QR code,
and when set to false
, the corners are left square. This parameter can be useful when you want to add a QR code to an image but
want to match the style of the image, for example, by rounding the corners of the QR code to match the rounded corners of the main image.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrRounded=true
qrRounded=true
qrRounded=false
QR Size
The qrSize
parameter is used to set the size of the QR code image in the composite image. It accepts a numeric value which can be either absolute or relative.
The value represents the width and the height of the square QR code. For example, if you set the qrSize=200
, the QR code image will be a square with a width and height of 200 pixels.
If the value is relative, it will be calculated based on the dimensions of the main image. For example, if you set qrSize=50.0
,
the QR code will have a size equal to 50% of the width of the main image.
It's important to note that the qrSize
parameter only sets the size of the QR code, not the entire composite image.
If you want to set the size of the entire composite image, you should use the width and height parameters instead.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrSize=400
qrSize=400
qrSize=30.0
QR Text
The qrText
parameter is used to add a top text to a QR code that is overlaid onto an image.
This text can provide additional information related to the QR code or can be used for branding purposes.
The qrText
parameter accepts a string value that represents the text to be displayed on top of the QR code.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrText=Hello There!
qrText="Hello There!"
QR Text Bottom
The qrTextBottom
parameter is used to add a bottom text to a QR code that is overlaid onto an image.
This text can provide additional information related to the QR code or can be used for branding purposes.
The qrTextBottom
parameter accepts a string value that represents the text to be displayed on top of the QR code.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrText=Hello There!
&qrTextBottom=simpleimg.io
qrTextBottom="Hello There!"
QR Text Color
The qrTextColor
parameter is used to set the color of the text in the QR code. It can be set using either a hex string or a named color.
A hex string is a six-digit code that represents the RGB values of the color, while a named color is a predefined color that has a name.
For example, to set the text color of the QR code to red, you can use the hex string ff0000, which represents pure red in RGB color space. Alternatively, you can use the named color red to achieve the same result.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrText=Hello There!
&qrTextBottom=simpleimg.io
&qrTextColor=d7006c
qrTextColor="#d7006c"
QR Text Font
The qrTextFont
parameter is used to specify the font style for the text that is added to QR code image. It can take the following values:
impact
: This is the default value and it uses the Impact font style for the text.bold
: This option uses a bold version of the Impact font style.medium
: This option uses a medium weight version of the Impact font style.mono
: This option uses a monospace font style for the text.monobold
: This option uses a bold monospace font style for the text.
The font style is applied to the text specified in the qrText
parameter, which is the string that appears on the QR code image.
Usually used together with
- Name
qr
- Type
- string
- Description
- See More about QR
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?qr=https://simpleimg.io
&qrText=Hello There!
&qrTextBottom=simpleimg.io
&qrTextFont=monobold
qrTextFont="monobold"
Rounded
The rounded
parameter is used to add rounded corners to an image. It can be specified as either an absolute or relative value.
When specified as an absolute value, the rounded
parameter determines the radius of the curve in pixels.
For example, rounded=20
would create a curve with a radius of 20 pixels.
When specified as a relative value, the rounded
parameter determines the percentage of the image width or height that should be used as the radius.
For example, rounded=50.0
would create a curve with a radius equal to 50% of the image width or height (whichever is smaller).
The rounded
parameter can be used in combination with other parameters, such as width and height, to create images with rounded corners that are resized to specific dimensions.
The resulting image will have the specified width and height, with the corners rounded according to the rounded
parameter.
It's important to note that the rounded
parameter only affects the corners of the image, and will not affect any other parts of the image.
Additionally, if the image is already smaller than the specified width and height parameters, the image will not be enlarged to fit the dimensions, and the rounded
parameter will only affect the existing image size.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?rounded=50
rounded=50
rounded=50.0
Saturation
The saturation
parameter is a number that can be used to adjust the saturation of the image.
A value of -100 will result in a completely desaturated (black and white) image, while a value of 0 (default)
will preserve the original saturation of the image. Values between 0 and 100 will adjust the saturation accordingly.
This parameter can be useful when trying to create a specific aesthetic or look for an image composition.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?saturation=-50
saturation=-50
Size
The size
parameter is a shortcut to define the size in pixels, using the format wxh (e.g., 200x200).
For example, size=800x800
would set the image size to 800 pixels wide and 800 pixels high.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?mode=fill
&size='800x800'
size="800x800"
Src
The src
parameter can also be an external URL pointing to an image file. In this case, the image will be fetched and transformed by the service,
and the resulting URL can be used to display the transformed image. This feature is useful when you want to transform an image hosted on a different server or domain,
without having to download and re-upload it to your own server.
Snippet
https://demo.simpleimg.io/
?bgAspectRatio=1:1
&bgPad=10.0
&rounded=10.0
&src=https://images.unsplash.com/photo-1526069824293-406685e85766?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
src="images.unsplash.com/photo-1526069824293-406685e85766"
Text
The text
parameter is used to add text to an image. This parameter takes a string value, which specifies the text that needs to be added to the image.
The size of the text will be automatically adjusted to fit in the specified space, which is determined by the textWidth
and textHeight
parameters.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store,\nManage and Deliver Images!
text="Simple Img is Service to Upload, Store,\nManage and Deliver Images!"
Text Align
The textAlign
parameter is used to specify the alignment of the text that is added to an image using the text
parameter.
It controls the positioning of the text on the main image.
The textAlign
parameter supports the following values:
center
: This value centers the text both horizontally and vertically on the main image.top
,bottom
,left
,right
: These values align the text to the respective edge of the main image.top-left
,top-right
,bottom-left
,bottom-right
: These values align the text to the respective corner of the main image.left-top
,left-center
,left-bottom
,right-top
,right-center
,right-bottom
: These values align the text to a position on the edge of the main image, with an offset in pixels from the edge.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store,\nManage and Deliver Images!
&textAlign=center
textAlign="center"
Text Break
The textBreak
parameter is a boolean parameter used to enable or disable automatic text breaking in an image when using the text
parameter.
When the textBreak
parameter is set to true
, the text will be automatically broken into multiple lines to fit within the specified width of the image.
If the parameter is set to false
, the text will not be broken, and the text will overflow the specified width, potentially causing the text to become truncated or cropped.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
textBreak=true
Text Color
The textColor
parameter is used to set the color of the text . It can be set using either a hex string or a named color.
A hex string is a six-digit code that represents the RGB values of the color, while a named color is a predefined color that has a name.
For example, to set the text color to red, you can use the hex string ff0000, which represents pure red in RGB color space. Alternatively, you can use the named color red to achieve the same result.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
&textColor=d7006c
textColor="#d7006c"
Text Font
The textFont
parameter is used to specify the font style for the text. It can take the following values:
impact
: This is the default value and it uses the Impact font style for the text.bold
: This option uses a bold version of the Impact font style.medium
: This option uses a medium weight version of the Impact font style.mono
: This option uses a monospace font style for the text.monobold
: This option uses a bold monospace font style for the text.
The font style is applied to the text specified in the text
parameter.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
&textFont=monobold
textFont="monobold"
Text Height
The textHeight
parameter is used to set the height of the text container in which the text will be placed.
It can be set as an absolute value in pixels or as a relative value using percentages.
When an absolute value is used, the text container will have a fixed height in pixels. When a relative value is used, the height of the text container will be determined based on a percentage of the height of the source image.
The textHeight
parameter is useful when you want to limit the vertical space that the text takes up in the image.
By setting a maximum height, you can ensure that the text does not overflow or crowd the rest of the image.
For example, setting textHeight=100
would limit the height of the text container to 100 pixels, while setting textHeight=50.0
would limit the
height of the text container to 50% of the height of the source image.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
&textHeight=50.0
&textWidth=25.0
textHeight="50.0"
Text Line Height
The textLineHeight
parameter is used to set the line height of the text in the image. It is a numeric value that represents the height of each line.
The default value is 1, which means that the line height will be automatically calculated based on the font size and the aspect ratio of the text container.
If you want to set a specific line height, you can provide a numeric value for the textLineHeight
parameter.
For example, a value of 1.5 would set the line height to 150% of the font size, while a value of 2 would set it to double the font size.
Setting the line height can be useful when you want to control the spacing between lines of text, or when you have multiple lines of text and you want to make sure that they are evenly spaced.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
&textHeight=50.0
&textLineHeight=2
&textWidth=25.0
textLineHeight=2
Text Padding
The textPad
parameter is used to set the padding around the text that is added to a main image using the text
parameter.
The value of the textPad
parameter can be either an absolute or a relative value.
If an absolute value is used, it sets the padding in pixels around the text. For example, textPad=10
would add a padding of 10 pixels around the text.
If a relative value is used, it sets the padding as a percentage of the width or height of the main image,
depending on whether the text is aligned horizontally or vertically. For example, textPad=10.0
would add a padding of 10% of the main
image width or height around the text, depending on its alignment.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
&textHeight=50.0
&textPad=50
&textWidth=25.0
textPad=50
textPad="20.0"
Text Size
The textSize
parameter is used to specify the maximum font size of the text that will be added to the image.
This parameter can take either an absolute or a relative value. If an absolute value is used (like textSize=50
), it will be interpreted as the maximum font size in pixels.
If a relative value is used (like textSize=5.0
), it will be interpreted as a percentage of the image height.
By default, the textSize
parameter is set to 5% of the image height. This means that the font size will automatically adjust depending on the size of the image.
For example, if the image is very small, the font size will be small as well to avoid overcrowding the image with text. On the other hand, if the image is very large, the font size will be larger as well to ensure that the text is readable.
It is important to note that the actual font size used may be smaller than the specified maximum size if the text needs to be resized to fit within the specified text
container size (as determined by the textHeight
parameter). Additionally, if the textSize
value is too large relative to the available space,
the text may be cut off or may not fit within the specified text container. Therefore, it is recommended to use a reasonable maximum font size value
and to test the output for each image size and text content.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
&textHeight=100.0
&textSize=5.0
&textWidth=75.0
textSize="5.0"
textSize="100.0"
Text Width
The textWidth
parameter is used to set the width of the text container in which the text will be placed.
It can be set as an absolute value in pixels or as a relative value using percentages.
When an absolute value is used, the text container will have a fixed width in pixels. When a relative value is used, the width of the text container will be determined based on a percentage of the width of the source image.
The textWidth
parameter is useful when you want to limit the vertical space that the text takes up in the image.
By setting a maximum width, you can ensure that the text does not overflow or crowd the rest of the image.
For example, setting textWidth=100
would limit the width of the text container to 100 pixels, while setting textWidth=50.0
would limit the
width of the text container to 50% of the width of the source image.
Usually used together with
- Name
text
- Type
- string
- Description
- See More about Text
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?text=Simple Img is Service to Upload, Store, Manage and Deliver Images!
&textBreak=true
&textHeight=50.0
&textWidth=25.0
textWidth="25.0"
WEBP
The webp
parameter is a boolean option that can be used to enable or disable WebP compression programmatically.
When this parameter is set to "true", the image will be served in the WebP format if the browser supports it. If the parameter is set to "false",
the image will be served in the original format. This parameter is useful for optimizing image delivery and reducing page load times,
especially for users on slow connections or with limited data plans.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?avif=false
&webp=false
WEBP=true (45.9Kb)
WEBP=false (96.9Kb)
Width
The width
parameter defines the width of the output image. If used with or without the height
parameter, the image's aspect ratio is maintained to avoid distorting the image.
When the mode
parameter is set to fit
, the image is scaled down proportionally so that it fits within the specified width and height values.
This means that the image may be smaller than the specified width and height values.
On the other hand, when the mode
parameter is set to fill
, the image is scaled proportionally to completely fill the specified width and height values.
This may result in parts of the image being cropped to fit the specified dimensions.
Snippet
https://demo.simpleimg.io/
1bb881bb17876c6b6f129516b4356913.jpg
?width=500