Getting Started
This guide helps you get started with Snapkit by walking you through uploading an image, retrieving optimized versions, applying transformations, and using placeholders.
1. Upload Your Image
You can upload an image to Snapkit by dragging and dropping it into the upload area or by clicking the upload button.
2. Use Optimized Images
Snapkit automatically generates optimized versions of your image. To use them, just replace /original/ in the URL with /gen/ and change the extension:
https://cdn.snapkit.studio/acme/image/gen/1200x800/example.avif
https://cdn.snapkit.studio/acme/image/gen/1200x800/example.webp
https://cdn.snapkit.studio/acme/image/gen/1200x800/example.progressive.jpeg- AVIF / WebP: Great for modern browsers and fast networks
- Progressive JPEG: Good fallback for older browsers or slower connections
Learn more in our pregenerate documentation.
3. Apply Real-Time Transformations
You can transform your image on-the-fly by adding query parameters. For example, to resize:
https://cdn.snapkit.studio/acme/image/gen/1200x800/example.webp?w=200A common practice is to size images based on device pixel ratio. For more options, see the transformation guide.
4. Improve UX with Placeholders
Display a lightweight preview while the main image loads:
example.blurhash.png— blur-based placeholder using the BlurHash algorithmexample.lqip.png— small low-quality image placeholder
Example usage:
https://cdn.snapkit.studio/acme/image/gen/1200x800/example.blurhash.png
https://cdn.snapkit.studio/acme/image/gen/1200x800/example.lqip.pngBlurHash usually offers smoother results and better perceived performance.
Next Steps
- Try integrating Snapkit with your frontend using our integration guide
- Explore more advanced transformations in our transformation guide
That’s it! You’re ready to start using Snapkit to deliver fast, optimized, and beautiful images.