Images and Media | Core Concepts Docs

Image Component

It is recommended to use the Image Component when displaying any and all images within your Blade templates.

    1<x-autoload::image :src="$image"/>

It is important to note that the `$image` variable here can be the integer Media ID of the Asset in the database ora string filename of a Media Asset. Both will work.

Customization

This component can also support passing classes, like so:

    1<x-autoload::image :src="$image" class="w-full h-full"/>

You can also pass any hardcoded or alternative Alt Text to the component directly and it will override any Alt Text that is bundled with the Media Asset.

    1<x-autoload::image :src="$image" alt="Beautiful sunset over a green pasture."/>

Background Images

This component will also support displaying uploaded images as a background image. To do this, include the `background` attribute.

It is best practice to also open up the component and place any additional content you may want, such as text over an image banner, inside the component tags.

    1<x-autoload::image :src="$image" class="w-full h-full" background>
2    <h2>Click here to join our newsletter</h2>
3    <a href="#">Join</a>
4</x-autoload::image>

Not using Image Component

Autoload injects a special media() function that can be called to perform the same actions as the media component. This is useful if you have a hardcoded image or want finer control over the image tag within your HTML.

You can use this function like so;

    1<img src="{{ media()->src('logo.png')->url() }}" alt="My Image" />

You may also trigger a conversion for the given file by passing the "conversion" parameter to the url() method:

    1<img src="{{ media()->src('logo.png')->url(conversion: 'webp') }}" alt="My WebP Image" />

This also has a chained format() method you can use to control the image manipulation:

    1<img src="{{ media()->src('logo.png')->format(['w' => '100'])->url() }}" alt="My Image" />

Available options for the format are the exact same as the ones for Glide.

Optimization

Autoload uses Spatie's Image Optimization for image compressions and manipulation.

All images that are displayed using the Autoload Image Component are run through two optimization processes before being displayed to the user. These processes are:

Image Compression = see image_compression_quality for setting how much compression is applied to images.
WebP Conversion = all other image types are still displayed, however Autoload creates a WebP version of the image to be served first with the original image as a fallback.