feat: add option to opt-out of lazysizes

README.md

@@ -12,7 +12,7 @@
 - Supports aspect ratios
 - Works with your existing assets, no custom fieldtype needed
 - Displays a single color placeholder (muted dominant color) of the image
-- Uses [lazySizes](https://github.com/aFarkas/lazysizes) 
+- Supports [lazySizes](https://github.com/aFarkas/lazysizes)
 
 ## Motivation
 
@@ -26,12 +26,9 @@ Install via composer:
 Publish the config:
 `php artisan vendor:publish --tag="statamic-image-renderer-config"`
 
-Add [lazysizes](https://github.com/aFarkas/lazysizes) to your sites js:
+If you want to use the native browser-level lazy-loading, set `lazy_loading` to `browser` inside the config.
 
-```
-yarn add lazysizes
-```
-or
+When using [lazysizes](https://github.com/aFarkas/lazysizes) add it to your site like this:
 ```
 npm install lazysizes
 ```

config/statamic-image-renderer.php

@@ -16,11 +16,12 @@
         'xl' => 1280,
         '2xl' => 1536,
     ],
+
     /*
     |--------------------------------------------------------------------------
     | Provider
     |--------------------------------------------------------------------------
-    | can currently be
+    | Can currently be
     | imgix, glide
     |
     */
@@ -43,15 +44,21 @@
 
     /*
     |--------------------------------------------------------------------------
-    | Image color placeholder
+    | Image
     |--------------------------------------------------------------------------
-	|
+    |
     */
 
-	/**
-	 * A value in percent that allows to mute the most dominant color.
-	 * Applying a change of this value to all existing images requires
-	 * regenerating the placeholders using the `php please resp:generate` command.
-	 */
+    /**
+     * A value in percent that allows to mute the most dominant color.
+     * Applying a change of this value to all existing images requires
+     * regenerating the placeholders using the `php please resp:generate` command.
+     */
     'background_color_mute_percent' => 66,
+
+    /**
+     * Defines how lazy-loading should be handled.
+     * Can be "browser" (browser-level lazy-loading) or "lazysizes".
+     */
+    'lazy_loading' => 'lazysizes',
 ];

resources/views/responsiveImage.blade.php

@@ -1,22 +1,30 @@
+@php
+$use_lazysizes = config("statamic-image-renderer.lazy_loading", "lazysizes") === "lazysizes";
+@endphp
+
 <picture>
 	@foreach ($srcsets as $srcset)
-		<source 
+		<source
 			sizes="{{ $srcset["sizes"] }}"
-			{{-- width="{{ $srcset["width"] }}" --}}
-			{{-- height="{{ $srcset["height"] }}" --}}
-			@if(!$loop->last) media="(min-width: {{ $srcset["min_width"] }}px)"@endif 
+			@if (!$loop->last) media="(min-width: {{ $srcset["min_width"] }}px)"@endif
+			@if ($use_lazysizes)
 			data-srcset="{{ $srcset["srcset"] }}"
+			@else
+			srcset="{{ $srcset["srcset"] }}"
+			@endif
 		/>
 	@endforeach
 	<img
-		onload="this.style.backgroundColor = 'transparent';"
+		onload="this.style.backgroundColor='transparent';@if(!$use_lazysizes)this.classList.remove('lazyload');this.classList.add('lazyloaded')@endif"
 		loading="lazy"
 		height="{{ $height }}"
 		width="{{ $width }}"
-    src="{{ $placeholder }}"
-    data-src="{{ $placeholder }}"
+    	src="{{ $placeholder }}"
+		@if ($use_lazysizes)
+    	data-src="{{ $placeholder }}"
+		@endif
 		class="lazyload {{ $class }}"
 		style="background-color: {{ $dominant_color }};"
-    alt="{{ $alt }}"
+    	alt="{{ $alt }}"
     />
 </picture>