Erste Schritte#

Dieser Leitfaden zeigt Ihnen, wie Sie mit Snapkit das Hochladen von Bildern und die Echtzeit-Optimierung beginnen können.

1. Bilder hochladen#

Es gibt zwei Möglichkeiten, Bilder hochzuladen:

• Web-Dashboard: Dateien per Drag & Drop oder durch Klicken auf die Upload-Schaltfläche
• Figma Plugin: Teams, die Figma verwenden, können direkt über das Figma Plugin hochladen

2. Echtzeit-Transformationen anwenden#

Sie können Bilder in Echtzeit optimieren, indem Sie Transformationsparameter zur URL hinzufügen.

Das folgende Beispiel optimiert Bilder folgendermaßen:

• format=webp: Konvertierung ins WebP-Format für bis zu 80% Größeneinsparung
• w=200: Breite auf 200 Pixel ändern
• dpr=3: 3-fache Pixeldichte für hochauflösende Displays anwenden

Das Ergebnis bietet 3x schnellere Ladegeschwindigkeit und scharfe Bildqualität im Vergleich zum Original.

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

Originalbild

JPG, 1920px

2,5s Ladezeit, 346KB

Optimiertes Bild

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

WebP, 200px, Hochauflösend

0,05s Ladezeit, 35,4KB

10x kleiner, 50x schneller

Weitere Transformationsoptionen finden Sie im Bild-Transform-Leitfaden.

Nächste Schritte#

• Integration-Leitfaden für die Integration von Snapkit in Ihr Frontend
• Bild-Transform-Leitfaden um erweiterte Transformationsoptionen zu erkunden

Benötigen Sie Hilfe?#

Wenn Sie Fragen haben, kontaktieren Sie uns gerne:

• Live-Chat: Öffnen Sie Channel Talk (Chat-Button unten rechts)
• Discord Community: https://discord.com/invite/RM6QgTW8↗
• GitHub Issues: https://github.com/snapkit-studio/snapkit-js↗
• E-Mail-Support: contact@snapkit.studio

Glückwunsch! Sie sind jetzt bereit, schnelle und optimierte Bilder mit Snapkit bereitzustellen.