ImageKit can be used to generate thumbnails from PSD, AI, EPS, SVG, and animated GIF, APNG, and WebP images. This is useful when you want to generate thumbnails from vector images or animated images.
SVG to raster format conversion
ImageKit.io allows you to convert SVG images to raster formats by using the format transformation parameter (f).
To perform this conversion, you need to specify the desired raster format as f-<raster_format>
in the image URL. For example: f-png
, f-jpg
, etc.
If you enable automatic format conversion or use f-auto
in the image URL, SVG images will not be converted to raster formats and will be delivered as SVG files only. Specifying f-<raster_format>
in the URL is the only way to convert SVGs to raster formats.
To apply image transformations such as resizing, adding overlays, etc., SVG images must be converted to raster formats.
URL - https://ik.imagekit.io/ikmedia/tr:f-png/imagekitlogo.svg
The SVG image is transformed to PNG format. The transparency is preserved in PNG format by default.
The dimension of the raster output is determined by the viewBox
attribute of the SVG when no height or width is defined in the transformation. In this case, the dimension of the raster output is 158x33 pixels, since the viewBox
attribute of the original SVG is set to 0 0 158 33
.
URL - https://ik.imagekit.io/ikmedia/tr:f-jpg,w-200,bg-pink/imagekitlogo.svg
The SVG image is transformed into a JPG format with a width of 200 pixels and a pink background color added to it.
Get thumbnail from PSD, PDF, AI, EPS and animated files
Delivers the specified page, frame, or layer of a multi-page, multi-frame, or multi-layer, such as a PDF, animated image like GIF, or PSD. It needs to be used alongside the ik-thumbnail.jpg URL component.
ik-thumbnail.jpg
needs to be added after the file resource URL, like this:
https://ik.imagekit.io/ikmedia/tr:pg-2/layout.psd/ik-thumbnail.jpg
List of supported multi-page/frame/layer files formats
- PSD
- EPS
- AI
- GIF
- Animated Webp
- Animated PNG
If the pg
parameter is not provided and only ik-thumbnail.jpg
is added after the file resource URL of the above-mentioned formats, then the first page, frame, or layer is extracted by default.
Usage
Syntax | Description | Value Type | Usage Example |
---|---|---|---|
pg-<number> | Delivers a single page or layer of a multi-page or multi-layer file (PDF, PSD), or a specified frame of an animated image like GIF. | Number | pg-2 |
pg-<range> (Applicable for PSD only) | Delivers the specified range of pages or layers from a PSD file. | Numbers separated by - (for range) or _ (for multiple values) | Used in the following ways:
|
pg-name-<layer name(s)> (Applicable for PSD only) | Delivers one or more named layers from a PSD file | Strings enclosed in " separated by _ (for multiple values) | The name of the layer(s) to deliver enclosed in double quotes (" ). Use underscore (_ ) to separate a list of layer namespg-name-"layer-name-1"_"layer-name-2" |
For example, let's take this layout.psd file with 5 layers.
Remember that ImageKit counting starts from 1
which is the whole thumbnail, and then 2
is the first layer from the bottom, 3
is the second layer from the bottom, and so on. That means:
layer-0
is the first layer from the bottom. And for ImageKit, it will be2
.layer-1
is the second layer from the bottom. And for ImageKit, it will be3
.layer-002
is the third layer from the bottom. And for ImageKit, it will be4
. Or you can refer by name i.e.layer-002
.layer-003
is the fourth layer from the bottom. And for ImageKit, it will be5
. Or you can refer by name i.e.layer-003
.layer-4
is the fifth layer from the bottom. And for ImageKit, it will be6
.
Now, let's see how we can extract a single layer, a range of layers, and multiple layers from this PSD file.
URL - https://ik.imagekit.io/ikmedia/layout.psd/ik-thumbnail.jpg?tr=pg-1
It will combine all the layers and generate a thumbnail.
URL - https://ik.imagekit.io/ikmedia/layout.psd/ik-thumbnail.jpg?tr=pg-2
Technically, the first layer from the bottom.
URL - https://ik.imagekit.io/ikmedia/layout.psd/ik-thumbnail.jpg?tr=pg-3-4
2nd and 3rd layers combined using 3-4
.
URL - https://ik.imagekit.io/ikmedia/layout.psd/ik-thumbnail.jpg?tr=pg-3-
All layers after the 2nd one.
URL - https://ik.imagekit.io/ikmedia/layout.psd/ik-thumbnail.jpg?tr=pg-2_3-4
1st layer using 2
, and then everything between 2nd and 3rd layer (inclusive) using 3-4
.
URL - https://ik.imagekit.io/ikmedia/layout.psd/ik-thumbnail.jpg?tr=pg-name-"layer-4"_"layer-002"
Here, we are referring to layers by name - layer-4
and layer-002
.
Usage In Overlays
Adding ik-thumbnail.jpg
after the file URL resource is not required in overlays.
pg
is not supported in conditional transformations.
GIF to video
Converting GIF images to videos is a recommended practice because GIFs often have large file sizes due to the numerous frames they contain. Using videos instead of GIFs on websites or mobile apps offers several advantages, which are detailed in Google's documentation available here.
This method helps optimize load times because videos typically have better compression and loading efficiency compared to GIFs. By reducing file size, download and rendering times are quicker, leading to an enhanced user experience. Developers can improve website and app performance by incorporating video files, resulting in smoother interactions and faster content delivery.
ImageKit.io allows you to convert your GIF images to Video files very easily and efficiently using the URL-based transformation parameter.
To convert a GIF image to a video file, add ik-gif-video.mp4
after the GIF resource URL.
Syntax
https://ik.imagekit.io/ikmedia/docs_images/examples/gif-test.gif/ik-gif-video.mp4
You can transform the final video using any video transformation supported by ImageKit.io.