Primeros Pasos#
Esta guía le muestra cómo comenzar con la subida de imágenes y la optimización en tiempo real con Snapkit.
1. Subir Imágenes#
Hay dos formas de subir imágenes:
- Panel Web: Arrastre y suelte archivos o haga clic en el botón de subida
- Plugin de Figma: Los equipos que usan Figma pueden subir directamente desde el Plugin de Figma
2. Aplicar Transformaciones en Tiempo Real#
Puede optimizar imágenes en tiempo real agregando parámetros de transformación a la URL.
El siguiente ejemplo optimiza las imágenes de la siguiente manera:
format=webp: Convertir al formato WebP para hasta 80% de ahorro de tamañow=200: Redimensionar el ancho a 200 píxelesdpr=3: Aplicar densidad de píxeles 3x para pantallas de alta resolución
El resultado proporciona 3x más velocidad de carga y calidad de imagen nítida comparado con el original.
https://snapkit-cdn.snapkit.studio/landing-page/fox.jpg?format=webp&w=200&dpr=3Imagen Original
JPG, 1920px
2,5s tiempo de carga, 346KB
Imagen Optimizada
(format=webp&w=200&dpr=3)
WebP, 200px, Alta resolución
0,05s tiempo de carga, 35,4KB
10x más pequeño, 50x más rápido
Para más opciones de transformación, consulte la Guía de Transformación de Imágenes.
Próximos Pasos#
- Guía de Integración para integrar Snapkit en su frontend
- Guía de Transformación de Imágenes para explorar opciones de transformación avanzadas
¿Necesita Ayuda?#
Si tiene alguna pregunta, no dude en contactarnos:
- Chat de Consulta: Abra Channel Talk (botón de chat en la parte inferior derecha)
- Comunidad Discord: https://discord.com/invite/RM6QgTW8↗
- Issues GitHub: https://github.com/snapkit-studio/snapkit-js↗
- Soporte por Email: contact@snapkit.studio
¡Felicidades! Ahora está listo para entregar imágenes rápidas y optimizadas con Snapkit.