better responsive image support

resources/views/components/img.blade.php

@@ -1,7 +1,23 @@
 @props([
     'conversion' => null,
     'responsive' => true,
+    'loading' => 'lazy',
     'media',
 ])
-<img {!! $attributes !!} src="{{ $media->getUrl($conversion) }}"
-    @if ($responsive) srcset="{{ $media->getSrcset()->join(', ') }}" @endif>
+
+<img {!! $attributes !!} src="{{ $media->getUrl($conversion) }}" loading="{{ $loading }}"
+    height="{{ $media->getHeight($conversion) }}" width="{{ $media->getWidth($conversion) }}"
+    alt="{{ $media->getName($conversion) }}"
+    @if ($responsive) srcset="{{ $media->getSrcset($conversion)->join(', ') }}" 
+    x-data="{
+        sizes: '1px',
+        resize() {
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    size = this.$el.getBoundingClientRect().width ?? 1;
+                    this.sizes = Math.ceil(size / window.innerWidth * 100) + 'vw';
+                }, 50);
+            });
+        }
+    }"
+    x-intersect.once="resize" x-bind:sizes="sizes" @endif>

src/Models/Media.php

@@ -64,7 +64,8 @@ class Media extends Model
     public static function booted()
     {
         static::deleted(function (Media $media) {
-            $media->generated_conversions
+            $media
+                ->generated_conversions
                 ->each(fn (GeneratedConversion $generatedConversion) => $generatedConversion->delete());
             $media->deleteDirectory();
         });
@@ -154,6 +155,51 @@ public function getUrl(?string $conversion = null): ?string
         return null;
     }
 
+    public function getWidth(?string $conversion = null): ?int
+    {
+        if ($conversion) {
+            return $this->getGeneratedConversion($conversion)?->width;
+        }
+
+        return $this->width;
+    }
+
+    public function getHeight(?string $conversion = null): ?int
+    {
+        if ($conversion) {
+            return $this->getGeneratedConversion($conversion)?->height;
+        }
+
+        return $this->height;
+    }
+
+    public function getName(?string $conversion = null): ?string
+    {
+        if ($conversion) {
+            return $this->getGeneratedConversion($conversion)?->name;
+        }
+
+        return $this->name;
+    }
+
+    public function getSize(?string $conversion = null): ?int
+    {
+        if ($conversion) {
+            return $this->getGeneratedConversion($conversion)?->size;
+        }
+
+        return $this->size;
+    }
+
+    public function getAspectRatio(?string $conversion = null): ?float
+    {
+        if ($conversion) {
+            return $this->getGeneratedConversion($conversion)?->aspect_ratio;
+        }
+
+        return $this->aspect_ratio;
+    }
+
     /**
      * Retreive the temporary url of a conversion or nested conversion
      * Ex: $media->getUrl('poster.480p')
@@ -391,20 +437,25 @@ public function deleteGeneratedConversions(): static
         return $this;
     }
 
-    public function getResponsiveImages(): Collection
+    public function getResponsiveImages(?string $conversion = null): Collection
     {
         return collect(ResponsiveImagesConversionsPreset::$widths)
-            ->map(fn (int $width) => $this->getGeneratedConversion($width))
+            ->when($conversion,
+                fn (Collection $collection) => $collection->map(fn (int $width) => $this->getGeneratedConversion("{$conversion}.{$width}")),
+                fn (Collection $collection) => $collection->map(fn (int $width) => $this->getGeneratedConversion($width)),
+            )
             ->filter();
     }
 
     /**
      * Exemple: elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w
      */
-    public function getSrcset(): Collection
+    public function getSrcset(?string $conversion = null): Collection
     {
-        return $this->getResponsiveImages()
-            ->map(fn (GeneratedConversion $generatedConversion) => $generatedConversion->getUrl().' '.$generatedConversion->width.'w');
+        return $this
+            ->getResponsiveImages($conversion)
+            ->filter(fn (GeneratedConversion $generatedConversion) => $generatedConversion->getUrl())
+            ->map(fn (GeneratedConversion $generatedConversion) => "{$generatedConversion->getUrl()} {$generatedConversion->width}w");
     }
 
     /**