Vector and Animated Images

Learn how to generate thumbnails from vector and animated images.

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/imagekitlogo.svg

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.

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:

Copy

https://ik.imagekit.io/ikmedia/tr:pg-2/layout.psd/ik-thumbnail.jpg

List of supported multi-page/frame/layer files formats

PDF
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: Use underscore (`_`) to separate a list of multiple pages/layers: `pg-1_3_5` Use hyphens (`-`) to indicate a page/layer range: `pg-2-4` Use a hyphen with no ending number to indicate starting from a specified page/layer until the end: `pg-4-`
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 names Copy pg-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 be 2.
layer-1 is the second layer from the bottom. And for ImageKit, it will be 3.
layer-002 is the third layer from the bottom. And for ImageKit, it will be 4. Or you can refer by name i.e. layer-002.
layer-003 is the fourth layer from the bottom. And for ImageKit, it will be 5. Or you can refer by name i.e. layer-003.
layer-4 is the fifth layer from the bottom. And for ImageKit, it will be 6.

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-3-4

2nd and 3rd layers combined using 3-4.

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.

URL - https://ik.imagekit.io/ikmedia/tr:l-image,i-layout.psd,pg-3,h-200,w-200,l-end/medium_cafe_B1iTdD0C.jpg

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

Copy

https://ik.imagekit.io/ikmedia/docs_images/examples/gif-test.gif/ik-gif-video.mp4

https://ik.imagekit.io/ikmedia/docs_images/examples/gif-test.gif

You can transform the final video using any video transformation supported by ImageKit.io.