Getting Started#

This guide shows you how to start uploading images and real-time optimization with Snapkit.

1. Upload Images#

There are two ways to upload images:

• Web Dashboard: Drag and drop files or click the upload button
• Figma Plugin: Teams using Figma can upload directly from the Figma Plugin

2. Apply Real-Time Transformations#

You can optimize images in real-time by adding transformation parameters to URLs.

The example below optimizes images as follows:

• format=webp: Convert to WebP format for up to 80% size savings
• w=200: Resize width to 200 pixels
• dpr=3: Apply 3x pixel density for high-resolution displays

The result provides 3x faster loading speed and sharp image quality compared to the original.

https://snapkit-cdn.snapkit.studio/landing-page/fox.jpg?format=webp&w=200&dpr=3

Original Image

JPG, 1920px

2.5s load time, 346KB

Optimized Image

(format=webp&w=200&dpr=3)

WebP, 200px, High-resolution

0.05s load time, 35.4KB

10x smaller, 50x faster

For more transformation options, see the Image Transform Guide.

Next Steps#

• Integration Guide to integrate Snapkit into your frontend
• Image Transform Guide to explore advanced transformation options

Need Help?#

If you have any questions, please feel free to contact us:

• Live Chat: Open Channel Talk (chat button in bottom right)
• Discord Community: https://discord.com/invite/RM6QgTW8↗
• GitHub Issues: https://github.com/snapkit-studio/snapkit-js↗
• Email Support: contact@snapkit.studio

Congratulations! You're now ready to deliver fast and optimized images with Snapkit.