diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f9f925..27d2c12 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,12 @@
 # ImageOptimize Changelog
 
-## 1.6.53 - UNRELEASED
+## 1.6.53 - 2024.04.04
 ### Added
 * Added the ability to pass in a config array to `.imgTag()`, `.pictureTag()` and `.linkPreloadTag()`
 
+### Changed
+* Changed `.loading()` → `.loadingStrategy()`, `.artDirection()` → `addSourceFrom()`
+
 ## 1.6.52 - 2024.04.02
 ### Added
 * Added a `--queue` option to the `image-optimize/optimize/create` console command if you want to defer the image generation to be run via queue job, rather than immediately via the console command
diff --git a/docs/docs/using.md b/docs/docs/using.md
index 651f601..b35d8d9 100644
--- a/docs/docs/using.md
+++ b/docs/docs/using.md
@@ -154,7 +154,7 @@ All of the tag methods below support an Element Query-like chained syntax that l
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.imgTag()
-        .loading('lazy')
+        .loadingStrategy('lazy')
         .render() }}
 ```
 
@@ -163,7 +163,7 @@ All of the tag methods below support an Element Query-like chained syntax that l
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.imgTag({
-        'loading': 'lazy',
+        'loadingStrategy': 'lazy',
         }).render() }}
 ```
 
@@ -225,25 +225,25 @@ Which will generate the following HTML markup for you:
 
 Any attributes with empty values will not be rendered, so you can use that to remove any of the prepopulated attributes should you need to.
 
-##### The `.loading()` Parameter
+##### The `.loadingStrategy()` Parameter
 
-With `.loading()`, you can control how the image will be loaded.It can one of the following:
+With `.loadingStrategy()`, you can control how the image will be loaded.It can one of the following:
 
 * `'eager'` - (default) load the image normally (no lazy loading)
 * `'lazy'` - us the browser's built-in lazy loading via the `loading="lazy"` attribute
 * `'lazySizes'` - use the lazysizes JavaScript library for lazy loading the image
 * `'lazySizesFallback'` - use the browser's built-in lazy loading, falling back on the lazysizes JavaScript library if the browser doesn't support native lazy loading
 
-###### Using `.loading('eager')`
+###### Using `.loadingStrategy('eager')`
 
-`.loading('eager')` is the default, which causes the image to be loader eagerly.
+`.loadingStrategy('eager')` is the default, which causes the image to be loader eagerly.
 
 You'd typically want this for "above the fold" images that should be rendered as soon as possible.
 
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.imgTag()
-        .loading('eager')
+        .loadingStrategy('eager')
         .render() }}
 ```
 
@@ -261,9 +261,9 @@ Which will generate the following HTML markup for you:
 >
 ```
 
-###### Using `.loading('lazy')`
+###### Using `.loadingStrategy('lazy')`
 
-`.loading('lazy')` will load the image lazily via native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading) by adding `class="lazyload"` and `loading="lazy"` attributes to the image.
+`.loadingStrategy('lazy')` will load the image lazily via native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading) by adding `class="lazyload"` and `loading="lazy"` attributes to the image.
 
 This leverages native browser lazy loading of images, without the need for additional JavaScript code.
 
@@ -272,7 +272,7 @@ You'd typically want this for "below the fold" images that the browser can load
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.imgTag()
-        .loading('lazy')
+        .loadingStrategy('lazy')
         .render() }}
 ```
 
@@ -295,9 +295,9 @@ Which will generate the following HTML markup for you:
 
 Note that it sets the background image to the OptimizedImage's placeholder via the `style` attribute, sp the placeholder image will be visible until the actual image loads.
 
-###### Using `.loading('lazySizes')`
+###### Using `.loadingStrategy('lazySizes')`
 
-`.loading('lazySizes')` will load the image lazily via the [lazysizes](https://github.com/aFarkas/lazysizes) library. You'd typically want this for "below the fold" images that the browser can load lazily as needed.
+`.loadingStrategy('lazySizes')` will load the image lazily via the [lazysizes](https://github.com/aFarkas/lazysizes) library. You'd typically want this for "below the fold" images that the browser can load lazily as needed.
 
 This allows you to support lazy loading of images even with browsers that don't support native lazy loading.
 
@@ -306,7 +306,7 @@ You'd typically want this for "below the fold" images that the browser can load
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.imgTag()
-        .loading('lazySizes')
+        .loadingStrategy('lazySizes')
         .render() }}
 ```
 
@@ -335,9 +335,9 @@ It's expected that you will have loaded the lazysizes library already on the fro
 
 Note that it sets the background image to the OptimizedImage's placeholder via the `style` attribute, sp the placeholder image will be visible until the actual image loads.
 
-###### `.loading('lazySizesFallback')`
+###### `.loadingStrategy('lazySizesFallback')`
 
-`.loading('lazySizesFallback')` will load the image lazily via the native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading), but will fall back on using the [lazysizes](https://github.com/aFarkas/lazysizes) library if the browser doesn't support native lazy loading.
+`.loadingStrategy('lazySizesFallback')` will load the image lazily via the native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading), but will fall back on using the [lazysizes](https://github.com/aFarkas/lazysizes) library if the browser doesn't support native lazy loading.
 
 This is the best of both worlds, in terms of using native browser lazy loading if it's available, and falling back on lazysizes JavaScript if it is not.
 
@@ -346,7 +346,7 @@ You'd typically want this for "below the fold" images that the browser can load
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.imgTag()
-        .loading('lazySizesFallback')
+        .loadingStrategy('lazySizesFallback')
         .render() }}
 ```
 
@@ -389,7 +389,7 @@ With `.placeholder()`, you can set the type of placeholder image that should be
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.imgTag()
         .placeholder('image')
-        .loading('lazy')
+        .loadingStrategy('lazy')
         .render() }}
 ```
 
@@ -491,20 +491,20 @@ Which will generate the following HTML markup for you:
 
 Any attributes with empty values will not be rendered, so you can use that to remove any of the prepopulated attributes should you need to.
 
-##### The `.loading()` Parameter
+##### The `.loadingStrategy()` Parameter
 
-With `.loading()`, you can control how the image will be loaded.
+With `.loadingStrategy()`, you can control how the image will be loaded.
 
-###### Using `.loading('eager')`
+###### Using `.loadingStrategy('eager')`
 
-`.loading('eager')` is the default, which causes the image to be loader eagerly.
+`.loadingStrategy('eager')` is the default, which causes the image to be loader eagerly.
 
 You'd typically want this for "above the fold" images that should be rendered as soon as possible.
 
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.pictureTag()
-        .loading('eager')
+        .loadingStrategy('eager')
         .render() }}
 ```
 
@@ -536,9 +536,9 @@ Which will generate the following HTML markup for you:
 </picture>
 ```
 
-###### Using `.loading('lazy')`
+###### Using `.loadingStrategy('lazy')`
 
-`.loading('lazy')` will load the image lazily via native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading) by adding `class="lazyload"` and `loading="lazy"` attributes to the image.
+`.loadingStrategy('lazy')` will load the image lazily via native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading) by adding `class="lazyload"` and `loading="lazy"` attributes to the image.
 
 This leverages native browser lazy loading of images, without the need for additional JavaScript code.
 
@@ -547,7 +547,7 @@ You'd typically want this for "below the fold" images that the browser can load
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.pictureTag()
-        .loading('lazy')
+        .loadingStrategy('lazy')
         .render() }}
 ```
 
@@ -584,9 +584,9 @@ Which will generate the following HTML markup for you:
 
 Note that it sets the background image to the OptimizedImage's placeholder via the `style` attribute, sp the placeholder image will be visible until the actual image loads.
 
-###### Using `.loading('lazySizes')`
+###### Using `.loadingStrategy('lazySizes')`
 
-`.loading('lazySizes')` will load the image lazily via the [lazysizes](https://github.com/aFarkas/lazysizes) library. You'd typically want this for "below the fold" images that the browser can load lazily as needed.
+`.loadingStrategy('lazySizes')` will load the image lazily via the [lazysizes](https://github.com/aFarkas/lazysizes) library. You'd typically want this for "below the fold" images that the browser can load lazily as needed.
 
 This allows you to support lazy loading of images even with browsers that don't support native lazy loading.
 
@@ -595,7 +595,7 @@ You'd typically want this for "below the fold" images that the browser can load
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.pictureTag()
-        .loading('lazySizes')
+        .loadingStrategy('lazySizes')
         .render() }}
 ```
 
@@ -638,9 +638,9 @@ It's expected that you will have loaded the lazysizes library already on the fro
 
 Note that it sets the background image to the OptimizedImage's placeholder via the `style` attribute, sp the placeholder image will be visible until the actual image loads.
 
-###### `.loading('lazySizesFallback')`
+###### `.loadingStrategy('lazySizesFallback')`
 
-`.loading('lazySizesFallback')` will load the image lazily via the native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading), but will fall back on using the [lazysizes](https://github.com/aFarkas/lazysizes) library if the browser doesn't support native lazy loading.
+`.loadingStrategy('lazySizesFallback')` will load the image lazily via the native browser [lazing loading](https://web.dev/articles/browser-level-image-lazy-loading), but will fall back on using the [lazysizes](https://github.com/aFarkas/lazysizes) library if the browser doesn't support native lazy loading.
 
 This is the best of both worlds, in terms of using native browser lazy loading if it's available, and falling back on lazysizes JavaScript if it is not.
 
@@ -649,7 +649,7 @@ You'd typically want this for "below the fold" images that the browser can load
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.pictureTag()
-        .loading('lazySizesFallback')
+        .loadingStrategy('lazySizesFallback')
         .render() }}
 ```
 
@@ -706,7 +706,7 @@ With `.placeholder()`, you can set the type of placeholder image that should be
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.pictureTag()
         .placeholder('image')
-        .loading('lazy')
+        .loadingStrategy('lazy')
         .render() }}
 ```
 
@@ -829,21 +829,21 @@ Which will generate the following HTML markup for you:
 
 Any attributes with empty values will not be rendered, so you can use that to remove any of the prepopulated attributes should you need to.
 
-##### The `.artDirection()` Parameter
+##### The `.addSourceFrom()` Parameter
 
 Since each OptimizedImages field can be thought of as encapsulating a [srcset](https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/) for your images, if you require art direction where images change aspect ratios at different screen sizes, then you should use another OptimizedImages field for each art direction.
 
-With `.artDirection()`, you can add the `<source>` tags from additional OptimizedImages fields to an output `<picture>` tag. The first argument is the OptimizedImages field, and the second argument is any `sourceAttrs` you want to set on the `<source>` tags:
+With `.addSourceFrom()`, you can add the `<source>` tags from additional OptimizedImages fields to an output `<picture>` tag for art direction purposes. The first argument is the OptimizedImages field to pull the art direction `srcset` from, and the second argument is any `sourceAttrs` you want to set on the `<source>` tags:
 
 ```twig
     {% set asset = entry.myAssetField.one() %}
     {{ asset.optimizedImagesField.pictureTag()
-        .loading('lazy')
+        .loadingStrategy('lazy')
         .sourceAttrs({
             'media': '(min-width: 800px)',
             'sizes': '80vw',
         })
-        .artDirection(asset.mobileOptimizedImagesField, {
+        .addSourceFrom(asset.mobileOptimizedImagesField, {
             'media': '(max-width: 799px)',
             'sizes': '60vw',
         })
diff --git a/src/models/ImgTag.php b/src/models/ImgTag.php
index 175b644..4caecd6 100644
--- a/src/models/ImgTag.php
+++ b/src/models/ImgTag.php
@@ -24,7 +24,7 @@ class ImgTag extends BaseImageTag
     /**
      * @var string The loading scheme to use: 'eager', 'lazy', 'lazySizes', 'lazySizesFallback'
      */
-    public $loading = 'eager';
+    public $loadingStrategy = 'eager';
 
     /**
      * @var string The type of placeholder image to use: 'box', 'color', 'image', 'silhouette'
@@ -61,9 +61,9 @@ public function __construct($config = [])
      * @param string $value
      * @return $this
      */
-    public function loading(string $value): ImgTag
+    public function loadingStrategy(string $value): ImgTag
     {
-        $this->loading = $value;
+        $this->loadingStrategy = $value;
 
         return $this;
     }
@@ -103,8 +103,8 @@ public function render(): Markup
     {
         $attrs = $this->imgAttrs;
         // Handle lazy loading
-        if ($this->loading !== 'eager') {
-            $attrs = $this->swapLazyLoadAttrs($this->loading, $this->placeholder, $attrs);
+        if ($this->loadingStrategy !== 'eager') {
+            $attrs = $this->swapLazyLoadAttrs($this->loadingStrategy, $this->placeholder, $attrs);
         }
         // Remove any empty attributes
         $attrs = array_filter($attrs);
diff --git a/src/models/PictureTag.php b/src/models/PictureTag.php
index 01027d9..4abe031 100644
--- a/src/models/PictureTag.php
+++ b/src/models/PictureTag.php
@@ -24,7 +24,7 @@ class PictureTag extends BaseImageTag
     /**
      * @var string The loading scheme to use: 'eager', 'lazy', 'lazySizes', 'lazySizesFallback'
      */
-    public $loading = 'eager';
+    public $loadingStrategy = 'eager';
 
     /**
      * @var string The type of placeholder image to use: 'box', 'color', 'image', 'silhouette'
@@ -46,11 +46,6 @@ class PictureTag extends BaseImageTag
      */
     public $imgAttrs = [];
 
-    /**
-     * @var OptimizedImage[] array OptimizedImage models to add as art direction
-     */
-    public $artDirection = [];
-
     /**
      * @param $config
      */
@@ -78,9 +73,9 @@ public function __construct($config = [])
      * @param string $value
      * @return $this
      */
-    public function loading(string $value): PictureTag
+    public function loadingStrategy(string $value): PictureTag
     {
-        $this->loading = $value;
+        $this->loadingStrategy = $value;
 
         return $this;
     }
@@ -147,7 +142,7 @@ public function imgAttrs(array $value): PictureTag
      * @param array $sourceAttrs
      * @return PictureTag
      */
-    public function artDirection(OptimizedImage $optimizedImage, array $sourceAttrs = []): PictureTag
+    public function addSourceFrom(OptimizedImage $optimizedImage, array $sourceAttrs = []): PictureTag
     {
         $this->populateSourceAttrs($optimizedImage, $sourceAttrs);
 
@@ -165,8 +160,8 @@ public function render(): Markup
         // Handle the <source> tag(s)
         foreach ($this->sourceAttrs as $attrs) {
             // Handle lazy loading
-            if ($this->loading !== 'eager') {
-                $attrs = $this->swapLazyLoadAttrs($this->loading, $this->placeholder, $attrs);
+            if ($this->loadingStrategy !== 'eager') {
+                $attrs = $this->swapLazyLoadAttrs($this->loadingStrategy, $this->placeholder, $attrs);
             }
             // Remove any empty attributes
             $attrs = array_filter($attrs);
@@ -176,8 +171,8 @@ public function render(): Markup
         // Handle the <img> tag
         $attrs = $this->imgAttrs;
         // Handle lazy loading
-        if ($this->loading !== 'eager') {
-            $attrs = $this->swapLazyLoadAttrs($this->loading, $this->placeholder, $attrs);
+        if ($this->loadingStrategy !== 'eager') {
+            $attrs = $this->swapLazyLoadAttrs($this->loadingStrategy, $this->placeholder, $attrs);
         }
         // Remove any empty attributes
         $attrs = array_filter($attrs);