Merge pull request #1132 from cloudinary/optimize-dpr-values

Optimize the lazy-loading DPR numbers

Author: aatanasov-cloudinary

js/inline-loader.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '2814799d655f563dcef8');
+<?php return array('dependencies' => array(), 'version' => 'ddf62970fa28de856098');

js/inline-loader.js

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'ded1dd3da3fe93cb64da');
+<?php return array('dependencies' => array(), 'version' => '763fff6b35eade3cc6d2');

js/lazy-load.asset.php

@@ -1,3 +1,5 @@
+import { roundToHalf } from './utils';
+
 const CloudinaryLoader = {
 	deviceDensity: window.devicePixelRatio ? window.devicePixelRatio : 'auto',
 	density: null,
@@ -151,11 +153,20 @@ const CloudinaryLoader = {
 			return 1;
 		}
 		let deviceDensity = this.deviceDensity;
+
+		// Round to nearest 0.5 to reduce URL variations
+		if ( 'auto' !== deviceDensity ) {
+			deviceDensity = roundToHalf( deviceDensity );
+		}
+
 		if (
 			'max' !== maxDensity &&
 			'auto' !== deviceDensity
 		) {
 			maxDensity = parseFloat( maxDensity );
+
+			// Round maxDensity to nearest 0.5 to maintain consistency
+			maxDensity = roundToHalf( maxDensity );
 			deviceDensity =
 				deviceDensity > Math.ceil( maxDensity )
 					? maxDensity

js/lazy-load.js

@@ -1,3 +1,5 @@
+import { roundToHalf } from './utils';
+
 const LazyLoad = {
 	deviceDensity: window.devicePixelRatio ? window.devicePixelRatio : 'auto',
 	density: null,
@@ -73,11 +75,19 @@ const LazyLoad = {
 			return 1;
 		}
 		let deviceDensity = this.deviceDensity;
+
+		// Round to nearest 0.5 to reduce URL variations
+		if ( 'auto' !== deviceDensity ) {
+			deviceDensity = roundToHalf( deviceDensity );
+		}
+
 		if (
 			'max' !== maxDensity &&
 			'auto' !== deviceDensity
 		) {
 			maxDensity = parseFloat( maxDensity );
+			// Round maxDensity to nearest 0.5 to maintain consistency
+			maxDensity = roundToHalf( maxDensity );
 			deviceDensity =
 				deviceDensity > Math.ceil( maxDensity )
 					? maxDensity

src/js/inline-loader.js

@@ -0,0 +1,10 @@
+/**
+ * Rounds a number to the nearest 0.5 increment.
+ * This reduces URL variations for DPR values.
+ *
+ * @param {number} value - The value to round.
+ * @return {number} The rounded value (e.g., 1.666 -> 1.5, 2.3 -> 2.5).
+ */
+export const roundToHalf = ( value ) => {
+	return Math.round( value * 2 ) / 2;
+};