Leptos `<Image/>` (Batteries included)

Crafted with inspiration from Next.js

Images make a substantial impact on the size and performance of a website, so why not get them right?

Enter Leptos <Image/>, a component that enhances the standard HTML <img> element with automatic image optimization features.

Size Optimization: Resize images, and use modern .webp format for optimal size and quality.
Low-Quality Image Placeholders (LQIP): With this feature, the Image component embeds SVGs, extracted from the original images, into the initial SSR HTML. This placeholder is shown while the optimized version is loading.
Faster Page Load: Prioritize key images, such as those contributing to the Largest Contentful Paint (LCP) with the priority prop. The component adds a preload <link> to the document head, improving load times and enhancing your site's performance.

Quick Start

REQUIRES SSR + AXUM

Add leptos_image via cargo:

cargo add leptos_image

In the base of your App, wrap everything (including Router) in <ImageProvider/>

```rust // In your main App. use leptos::; use leptos_meta::; use leptos_image::{Image, ImageProvider};

[component]

pub fn App(cx: Scope) -> impl IntoView { providemetacontext(cx);

view! { cx,
    <Title text="Welcome to Leptos"/>
    // Wrap the base of your App with ImageProvider
    <ImageProvider>
        <MyPage/>
        // The rest of your App...
    </ImageProvider>
}

}

// Now you can use the Image Component anywhere in your app!

[component]

pub fn MyPage(cx: Scope) -> impl IntoView { view! { cx, <Image src="/cute_ferris.png" blur=true width=750 height=500 quality=85 /> } } ``` Next go to your SSR Main Function in <code>main.rs</code> Before you create your router, call the <code>cache_app_images</code> function with the project root. This will cache all the images in your app, and generate the LQIPs. If you have a lot of images, then you should probably only call this function in production because it will delay your server startup. If you don't include this function, then image caching will happen at runtime. ```rust use leptos::*; let conf = getconfiguration(None).await.unwrap(); let leptosoptions = conf.leptosoptions; let root = leptosoptions.site_root.clone(); use leptosimage::cache::cacheapp_images; cacheappimages(root, |cx: Scope| view! {cx, <App/>}) .await .expect("Failed to cache images"); ``` Next add an endpoint to your router that serves the cached images. For now, the endpoint path must be <code>/cache/image</code> and is not configurable ```rust use axum::{routing::{get, post}, Router}; use leptosimage::handlers::imagecache_handler; let router = ... router.route("/cache/image", get(imagecachehandler)); ``` The final router should look something like this! ```rust let router = Router::new() .route("/api/*fnname", post(leptosaxum::handleserverfns)) .leptosroutes(&leptosoptions, routes, |cx| { view! { cx, <App/> } }) // Here's the new route!. .route("/cache/image", get(imagecachehandler)) .withstate(leptosoptions); ``` And that's it. You're all set to use the Image Component. <h2>Caveats:</h2> <ul> <li>Images will only be retrieved from routes that are non-dynamic (meaning not <code>api/post/:id</code> in Route path).</li> <li>Images can take a few seconds to optimize, meaning first startup of server will be slower.</li> <li>Actix Support is coming soon!</li> </ul> </body></html>

Leptos <Image/> (Batteries included)

Quick Start

[component]

[component]

Leptos `<Image/>` (Batteries included)