graph-image v0.3.1

graph-image

Advanced Lazy-Loading and Compression with Svelte/SvelteKit and Hygraph

Demo • Obie Munoz

• Automatically resize images according to your design specifications
• Dynamically serve .webp format where supported, ensuring modern compression techniques are utilized for faster load times
• Generate device-specific variants to ensure optimal download size
• Prioritize initial page speed and conserve bandwidth
• Employ the 'blur-in' technique or a solid background for seamless image loading experiences
• Prevent page layout jumps with consistent image positioning

Special thanks to the creators and contributors of @graphcms/react-image for the work in React this project was based on.

Quickstart

Here's an example using a static asset object.

<script>
    import { GraphImage } from "graph-image";

    const asset = {
        handle: "uQrLj1QRWKJnlQv1sEmC",
        width: 800,
        height: 800
    }
</script>

<GraphImage image={asset} maxWidth={800} />
<GraphImage
	title="Example 2"
	alt="Example 2"
	image={{ handle: asset.handle, width: 1920, height: 1080 }}
	withWebp
	maxWidth={500}
	style={{
		width: '500px',
		margin: '32px 16px'
	}}
/>

Props

Source and Image

You can also show the Source and Image components to show different images at different breakpoints.

<script>
	import { Image, Source } from 'graph-image';
</script>

<picture>
	<source
		handle="uQrLj1QRWKJnlQv1sEmC"
		alt="Mobile Image"
		width="{768}"
		height="{800}"
		media="(max-width: 600px)"
	/>
	<image handle="uQrLj1QRWKJnlQv1sEmC" alt="Desktop Image" width="{1920}" height="{1800}" />
</picture>

Preloading Source and Image

You can also Preload Source and Image components please note that because responsive preload has no notion of "order" or "first match", the media queries will need to be translated

<script>
	import { Image, Source } from 'graph-image';
</script>

<picture>
	<source
		handle="sdgegrrnlQvsd23vcl"
		alt="Mobile Image"
		width="{400}"
		height="{400}"
		media="(max-width: 400px)"
		preloadMedia="(max-width: 400px)"
	/>
	<source
		handle="adWEFKJnlQvsda1s12e"
		alt="MD Image"
		width="{768}"
		height="{800}"
		media="(max-width: 800px)"
		preloadMedia="(min-width: 400.1px and (max-width: 800px)"
	/>
	<image
		handle="uQrLj1QRWKJnlQv1sEmC"
		alt="Desktop Image"
		width="{1920}"
		height="{1800}"
		loading="eager"
		media="(min-width: 800.1px)"
	/>
</picture>