Skeleton Image

Specialized skeleton component for image placeholders with customizable aspect ratios and optional caption support.

Demo

Default (16:9)

Square (1:1)

Usage

<script>
import SkeletonImage from '$lib/shared/components/loading/SkeletonImage.svelte';
</script>

<!-- Default 16:9 image -->
<SkeletonImage />

<!-- Square image -->
<SkeletonImage aspectRatio="1 / 1" />

<!-- With caption -->
<SkeletonImage showCaption={true} />

<!-- Custom animation -->
<SkeletonImage animation="pulse" />

<!-- Custom size -->
<SkeletonImage width="400px" />

Props

Prop	Type	Default	Description
`aspectRatio`	`string`	`'16 / 9'`	CSS aspect-ratio value
`showCaption`	`boolean`	`false`	Whether to show caption skeleton
`animation`	`'shimmer' \\| 'pulse' \\| 'none'`	`'shimmer'`	Animation style
`width`	`string`	`'100%'`	Image width
`rounded`	`boolean`	`false`	Use rounded corners
`class`	`string`	`''`	Additional CSS classes

Common Aspect Ratios

Ratio	Use Case
`16 / 9`	Video thumbnails, hero images
`4 / 3`	Standard photos
`1 / 1`	Square images, avatars
`3 / 4`	Portrait photos
`21 / 9`	Ultra-wide banners

Examples

Gallery Skeleton

<div class="gallery">
	{#each Array(6) as _}
		<SkeletonImage aspectRatio="1 / 1" />
	{/each}
</div>

Article Image

<article>
	<SkeletonImage aspectRatio="16 / 9" showCaption={true} />
	<SkeletonText lines={3} />
</article>

Profile Cover

<div class="profile-header">
	<SkeletonImage aspectRatio="21 / 9" />
	<Skeleton variant="avatar" size="lg" />
</div>

Best Practices

Match Aspect Ratios: Use the same aspect ratio as your actual images
Prevent Layout Shift: Skeleton dimensions should match loaded content exactly
Caption Consistency: Only show caption skeleton if real image has captions
Responsive Sizing: Use percentage widths for responsive layouts