Added minimal threshold for image resize

Author: kevinmeijer97

config/glide-directive.php

@@ -32,4 +32,7 @@
 
     // Set the default queue to use for generating the images.
     'default_queue' => env('STATAMIC_GLIDE_DIRECTIVE_DEFAULT_QUEUE', 'default'),
+
+    // Set the threshold width to use for the image source sets.
+    'image_resize_threshold' => 480
 ];

resources/views/image.blade.php

@@ -1,41 +1,53 @@
 @if($image)
-    <picture>
-        @if( $image->extension() == 'svg' || $image->extension() == 'gif')
-            <img
-                class="{{ $class }}"
-                src="{{ $image->url() }}"
-                alt="{{ $alt }}"
-                width="{{ $width }}"
-                height="{{ $height }}"
-            />
-        @else
-            @isset($presets['webp'])
-                <source
-                    srcset="{{ $presets['webp'] }}"
-                    sizes="32px"
-                    type="image/webp"
-                >
-            @endisset
-            @isset($presets[$image->mimeType()])
-                <source
-                    srcset="{{ $presets[$image->mimeType()] }}"
-                    sizes="32px"
-                    type="{{ $image->mimeType() }}"
-                >
-            @endisset
-            <img
-                    {!! $attributes ?? '' !!}
+    @if($image->width() > config('justbetter.glide-directive.image_resize_threshold'))
+        <picture>
+            @if( $image->extension() == 'svg' || $image->extension() == 'gif')
+                <img
                     class="{{ $class }}"
-                    src="{{ $presets['placeholder'] ?? $image->url() }}"
-                    alt="{{ $alt ?? $image->alt() }}"
+                    src="{{ $image->url() }}"
+                    alt="{{ $alt }}"
                     width="{{ $width }}"
                     height="{{ $height }}"
-                    loading="lazy"
-                    onload="
-                        this.onload = null;
-                        window.responsiveResizeObserver.observe(this);
-                    "
-            >
-        @endif
-    </picture>
+                />
+            @else
+                @isset($presets['webp'])
+                    <source
+                        srcset="{{ $presets['webp'] }}"
+                        sizes="32px"
+                        type="image/webp"
+                    >
+                @endisset
+                @isset($presets[$image->mimeType()])
+                    <source
+                        srcset="{{ $presets[$image->mimeType()] }}"
+                        sizes="32px"
+                        type="{{ $image->mimeType() }}"
+                    >
+                @endisset
+                <img
+                        {!! $attributes ?? '' !!}
+                        class="{{ $class }}"
+                        src="{{ $presets['placeholder'] ?? $image->url() }}"
+                        alt="{{ $alt ?? $image->alt() }}"
+                        width="{{ $width }}"
+                        height="{{ $height }}"
+                        loading="lazy"
+                        onload="
+                            this.onload = null;
+                            window.responsiveResizeObserver.observe(this);
+                        "
+                >
+            @endif
+        </picture>
+    @else
+        <img
+            {!! $attributes ?? '' !!}
+            class="{{ $class }}"
+            src="{{ $image->url() }}"
+            alt="{{ $alt ?? $image->alt() }}"
+            width="{{ $width }}"
+            height="{{ $height }}"
+            loading="lazy"
+        >
+    @endif
 @endif

src/Responsive.php

@@ -39,6 +39,10 @@ public static function handle(mixed ...$arguments): Factory|View|string
 
     public static function getPresets(Asset $asset): array
     {
+        if ($asset->width() <= config('justbetter.glide-directive.image_resize_threshold')) {
+            return [];
+        }
+
         $config = config('statamic.assets.image_manipulation.presets');
 
         if (! config('justbetter.glide-directive.placeholder') && isset($config['placeholder'])) {