Image Component Demo
Optimized image components with automatic S3 to CDN URL conversion and Gumlet image optimization (srcset with 1x and 2x DPR support)
Features
- Automatic S3 → CDN URL conversion
- Gumlet image optimization params
- Responsive srcset (1x and 2x DPR)
- Lazy loading & async decoding
- TypeScript typed props
- Works in Astro & Svelte
Astro Image Component
Use in .astro files
masai-website-images bucket → cdn.masaischool.com
admissions-production bucket → img.masaischool.com
---
import ImageAstro from "../../components/Image/Image.astro";
---
<ImageAstro
src="https://masai-website-images.s3.ap-south-1.amazonaws.com/image.webp"
alt="Description"
width={400}
height={300}
class="rounded-lg"
/>Svelte Image Component
Use in .svelte files
or with client:load
directive
masai-website-images bucket → cdn.masaischool.com
admissions-production bucket → img.masaischool.com
<script lang="ts">
import ImageSvelte from "../../components/Image/Image.svelte";
</script>
<ImageSvelte
src="https://admissions-production-upload.s3.ap-south-1.amazonaws.com/image.avif"
alt="Description"
width={400}
height={300}
class="rounded-lg"
/>CDN URL Mappings
| S3 Bucket | CDN URL |
|---|---|
| masai-website-images.s3.ap-south-1.amazonaws.com | cdn.masaischool.com/masai-website/ |
| admissions-production-upload.s3.ap-south-1.amazonaws.com | img.masaischool.com/ |