Components

Image

Optimized Visuals. Seamless Performance.

The Image component enables you to insert highly optimized, responsive images into your content without needing to write any code. With automatic format conversion (AVIF, WebP), progressive loading, theme-dependent variations, and complete control over visual rendering, this component is designed to deliver the best possible user experience and performance.

From focal points to custom responsive sizes and lazy loading, every image is tailored to serve only what your users need, making your project faster, more accessible, and SEO-friendly.

Performance and Flexibility First

  1. Next-Gen Formats.
    Images automatically served as AVIF or WebP.

  2. Responsive Variants.
    Serve the perfect image size.

  3. Lazy by Default.
    Boost UX & Core Web Vitals instantly.

Beautiful Image Delivery

  1. Theme-Based Variants.
    Switch images by theme.

  2. Use thumbhashes for loading previews.
    Create smooth, progressive experiences.

  3. Set quality, fade-in, and focus.
    Fine-tune your visual storytelling.

Use Cases

Use the Image component for any visual asset on your page that requires performance and design precision:

  • Hero banners and featured images

  • Product and portfolio displays

  • Blog or article visuals

  • Background visuals and decorative elements

  • Themed visuals for light and dark UI variants

  • Icons or infographics that require responsive scaling

Paired with Vertex Forge’s image optimization pipeline and Storyblok's Image Service, the component ensures your content loads fast and beautifully, anywhere.

Configuration Options & Features

The Image component delivers pixel-perfect visuals, automatically optimized for performance, SEO, and user experience. With support for responsive sizing, format conversion, placeholders, and visual consistency across themes, it empowers you to tell your visual story while keeping your site lightning-fast.

Faster loads. Sharper images. Smarter delivery.

Asset

Choose your image from the internal asset library.

Images are uploaded and managed here, allowing for structured asset management.

Asset Variants

Define alternate images to be used for different themes.

For example, serve a dark-themed version when your project switches to dark mode.

Alt

Enter a descriptive alternative text to enhance accessibility and SEO. Alt texts help screen readers and search engines understand the context of your image.

Placeholder

Toggle to show a blurred thumbhash preview of the image while it loads. Great for performance and perceived speed. Thumbhashes are instant, loaded, and blurry previews of your chosen asset that provide your users with immediate perceived performance improvements for progressive loading strategies.

Max Width Sizes

Define responsive breakpoints that determine the number of image versions to be generated and served per screen width.

Ensures optimized delivery based on device size.

Lazy

Toggle to lazy load the image when it’s below the initial viewport.

Reduces load time and bandwidth usage for content not immediately visible.

Quality

Set the image quality level (e.g., 80, 90, 100). Balance visual fidelity and file size depending on use case.

Transition

Enable a smooth fade-in animation once the image is loaded. Enhances user perception of speed and elegance.

Component Theme

Apply a consistent style theme for your image container.

Includes spacing, alignment, borders, and other design tokens.