Lazy loading added

README.md

@@ -43,6 +43,25 @@ And once run, the widget code will generate a new WebP image file on the fly (or
 
 The browser will pick up the best source for the provided image, and thanks to revolutionary WebP compression, it will make your website loading faster.
 
+## Image lazy-loading
+
+[Lazy images loading](https://web.dev/browser-level-image-lazy-loading/) makes the browser load the images when it reach a certain point, after which the image became visible in the current browser tab. You can use this pure HTML feature (no JS involved) from within the widget:
+
+```php
+<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "loading" => "lazy" ]) ?>
+```
+
+The generated output looks like this:
+
+```html
+<picture>
+    <source type="image/webp" srcset="/images/product/extra.webp">
+    <img src="/images/product/extra.png" loading="lazy">
+</picture>
+```
+
+Use it to make your website loading times even faster.
+
 ## Installation
 
 The preferred way to install the library is through the [composer](https://getcomposer.org/).

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "pelock/yii2-imgopt",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "Image optimization widget for Yii2 Framework with auto WebP image format generation from PNG/JPG files.",
     "type": "yii2-extension",
     "keywords": ["image", "optimization", "yii2", "webp", "jpg", "png", "generator"],

src/ImgOpt.php

@@ -70,6 +70,7 @@
  * @property string $alt image alternative description used as alt="description" property (optional)
  * @property string $css image class list as a string (can contain multiple classes) used as class="one two three..." (optional)
  * @property string $style image custom CSS styles used as style="one; two; three;..." (optional)
+ * @property string $loading lazy loading option (auto|lazy|eager) (https://web.dev/browser-level-image-lazy-loading/) (optional)
  * @property string $itemprop use schema itemprop="image" value (optional)
  * @property string $height  height used as height="value" (optional)
  * @property string $width width used as width="value" (optional)
@@ -108,6 +109,11 @@ class ImgOpt extends Widget
 	 */
 	public $style;
 
+	/**
+	 * @var string lazy loading option (auto|lazy|eager) (https://web.dev/browser-level-image-lazy-loading/) (optional)
+	 */
+	public $loading;
+
 	/**
 	 * @var string use schema itemprop="image" value (optional)
 	 */
@@ -294,8 +300,8 @@ public function run()
 			"alt" => $this->alt,
 			"height" => $this->height,
 			"width" => $this->width,
+			"loading" => $this->loading,
 			"itemprop" => $this->itemprop
-
 		]);
 
 		// was WebP image generated from our unoptimized image?