Create GIFs form videos
FastPix provides a simple and efficient method for extracting GIFs from videos, allowing developers to create engaging and shareable content for their applications. GIFs are highly popular for adding visual dynamism and are particularly effective in social media, messaging, and content-sharing platforms. This guide walks you through the step-by-step process of generating GIFs with FastPix, from video initialization to final output customization.
Step 1: Create an on-demand video
- Upload Your Video: Start by creating your on-demand video in FastPix by uploading your video file. This step is foundational for all further actions, including GIF creation.
- Documentation reference: For quick guidance on setting up an on-demand video, check out our quick start guide.
Step 2: Monitor the video status
Before you proceed to extract a GIF, ensure the media has been fully processed.
Waiting for the media status to change to "ready" ensures that the video is fully prepared for playback and that all associated functionalities, including animated GIF generation, are available.
Step 3: Extract a GIF
To extract a clip or GIF, make an API request to FastPix specifying the video's playback ID and the desired start and end times for the clip. You can also specify the output format (clip or GIF) and dimensions.
URL format
https://image.fastpix.io/{PLAYBACK_ID}clip.{gif | webp}
Supported formats: GIFs can be generated in gif or webp format, providing flexibility based on your application’s requirements.
Making API request:
- Request type: GET
- Endpoint: https://image.fastpix.io/{PLAYBACK_ID}/clip.{gif|webp}
- Operation: Retrieve a clip or GIF from a video
Path parameters
| Parameters name | Mandatory | Data type | Description |
|---|---|---|---|
PLAYBACK_ID | Yes | String | Playback_id of the video |
ServiceWithFormat | Yes | String | Format of result (e.g., gif/webp) |
Query parameters
| Parameter name | Mandatory | Data type | Description |
|---|---|---|---|
start | No | Float | Specifies the start time (in seconds) on the video timeline for the GIF creation. Default is set to 0. |
end | No | Float | Defines the end time (in seconds) on the video timeline for the GIF creation. The default end time is 5 seconds after the start time. The GIF's duration must be between 250 milliseconds and 10 seconds. |
height | No | int32 | The height in pixels of the animated GIF. Defaults to the aspect ratio based on width. Maximum height is 640px. |
width | No | int32 | Sets the width of the GIF in pixels. Default is 320px. If the height is specified, the width will adjust to maintain the aspect ratio. The maximum width allowed is 640px. |
fps | No | int32 | The frame rate of the generated GIF. Defaults to 15 fps with a maximum of 30 fps. |
Example:
https://images.fastpix.io/a15efb40-e664-49c2-9545-72e7b60352c1/clip.gif?width=320&height=200&start=0&end=5&fps=15
Common use cases for GIFs
GIFs or animated images serve as a dynamic visual tool for enhancing content, making them popular in a range of applications. Here are some specific ways developers can use GIFs to add value to user experiences:
- Tutorials and how-Tos: GIFs are ideal for quick, silent tutorials that demonstrate how to use specific features or navigate interfaces. For instance, a GIF can guide users through logging in, performing a search, or accessing special app features, all without taking up much screen space.
- Highlight key moments: You can allow users to quickly view key moments or highlights in a longer video. For example, an app showcasing sports events could use GIFs to highlight goals or game-winning shots, giving users a quick visual summary that’s easily shareable.
- User interaction and social sharing: Embedding GIFs in messaging apps, social feeds, or comments can increase interaction. Users can share reactions, personal highlights, or even mini-stories in GIF form, making content more engaging and shareable.
- Product demos in e-commerce: For e-commerce applications, GIFs provide a quick way to showcase product features or views, especially for products with complex details, moving parts, or specific user interactions.
Best practices for optimizing GIFs
Optimizing GIFs is essential to maintaining performance, especially in applications where fast load times and smooth interactions are crucial. Here are some best practices to ensure your GIFs look great without sacrificing efficiency:
- Keep the duration short: For an optimal user experience, limit GIF length to between 3 and 5 seconds. Shorter GIFs reduce file sizes, which helps them load faster and loop more smoothly without lagging. This is especially useful in social and e-commerce apps, where users expect quick content previews.
- Optimize frame rate: The frame rate (fps) determines the GIF’s smoothness. For rapid or detailed movements, use a frame rate between 15-20 fps for clarity. Lower fps (such as 10) can work well for slower or less-detailed movements, as it reduces file size without greatly impacting quality. Setting the right fps keeps your GIFs looking professional while controlling data usage.
- Use consistent dimensions: When choosing dimensions for your GIF, select sizes that fit within your application’s design and user experience requirements. Consistent sizing keeps your UI looking cohesive and prevents layout shifts. Also, smaller resolutions improve load time, especially important for mobile devices.
- Leverage WebP for better compression: If WebP is supported on your target platform, this format generally provides better quality at smaller file sizes compared to traditional GIFs. WebP is ideal for high-traffic applications and enhances mobile performance by reducing bandwidth usage.
Updated 2 days ago