@props(['src', 'alt', 'ratio' => '4 / 3', 'eager' => false])
@php
    $ratioParts = array_map('floatval', preg_split('/\s*\/\s*/', $ratio));
    $imageWidth = 1600;
    $imageHeight = count($ratioParts) === 2 && $ratioParts[0] > 0
        ? (int) round($imageWidth * $ratioParts[1] / $ratioParts[0])
        : 1200;
@endphp
<figure {{ $attributes->class(['image-placeholder', 'media-image']) }} style="--placeholder-ratio: {{ $ratio }}">
    <img src="{{ asset($src) }}" alt="{{ $alt }}" width="{{ $imageWidth }}" height="{{ $imageHeight }}" loading="{{ $eager ? 'eager' : 'lazy' }}" decoding="async" @if($eager) fetchpriority="high" @endif>
</figure>