Image Optimization in Astro with Astro ImageTools

This page demonstrates the usage of the astro-imagetools library with live examples.

Components

• <Img /> Component
• <Picture /> Component
• <BackgroundImage /> Component
• <BackgroundPicture /> Component

APIs

• renderImg API
• renderPicture API
• renderBackgroundImage API
• renderBackgroundPicture API

Layout

The layout property tells the image to respond differently depending on the device size or the container size.

Select a layout below and try resizing the window or rotating your device to see how the image reacts.

• Constrained Layout
• Fixed Layout
• Full Width Layout
• Fill Layout

Placeholder

The placeholder property tells the image what to show while loading.

• Blurred Placeholder
• Dominant Color Placeholder
• Traced SVG Placeholder
• No Placeholder

Internal Image

The following is an example of a reference to an internal image in the src directory (../images/elva-800w.jpg).

External Image

The following is an example of a reference to an external image (https://picsum.photos/1024/768).

Image in /public

This image is in the public directory (/images/public.jpeg).

Learn More

You can optionally configure many more things!

Checkout the Astro ImageTools documentation to learn more.