aFarkas/lazysizes · info

Define width or height of image, so we can calculate the oth

Error message

Define width or height of image, so we can calculate the other dimension

What it means

This is a console warning (console.log) emitted by the lazysizes aspectratio plugin, not an exception. The plugin computes an image's intrinsic aspect ratio to reserve layout space, but it needs at least one real dimension (width or height) to derive the other. When width < 36 and height <= 0, it cannot compute a ratio, logs this message, and returns early without applying the aspect-ratio padding.

Source

Thrown at plugins/aspectratio/ls.aspectratio.js:162

						ratioCache[ratio] = match[1] * 1;
					}
				}

				return ratioCache[ratio];
			};
		})(),
		addAspectRatio: function(img, notNew){
			var ratio;
			var width = img.offsetWidth;
			var height = img.offsetHeight;

			if(!notNew){
				addClass(img, 'lazyaspectratio');
			}

			if(width < 36 && height <= 0){
				if(width || height && window.console){
					console.log('Define width or height of image, so we can calculate the other dimension');
				}
				return;
			}

			ratio = this.getSelectedRatio(img);
			ratio = this.parseRatio(ratio);

			if(ratio){
				if(width){
					img.style.height = (width / ratio) + 'px';
				} else {
					img.style.width = (height * ratio) + 'px';
				}
			}
		},
		removeAspectRatio: function(img){
			removeClass(img, 'lazyaspectratio');
			img.style.height = '';

View on GitHub (pinned to 1523a4ff45)

Solutions

1. Add a width or height attribute (larger than 36px for width) to the <img>, or set a valid data-aspectratio attribute so the plugin can compute the other dimension
2. Verify the markup template outputs non-zero dimensions; fix cases producing width="0" or height="0"
3. If dimensions are injected later by JS, ensure that happens before the plugin processes the image, or re-trigger lazyloading after injection
4. Check that the aspectratio plugin is correctly initialized (data-aspectratio selector/class wiring) so ratios are picked up

Example fix

// before
<img class="lazyaspectratio" data-src="photo.jpg">
// after
<img class="lazyaspectratio" data-src="photo.jpg" data-aspectratio="1.5">

img.addEventListener('lazybeforeunveil', function () {
  if (!(parseInt(img.getAttribute('width'), 10) >= 36 || parseInt(img.getAttribute('height'), 10) > 0)) {
    img.setAttribute('data-aspectratio', '16/9');
  }
});

// This is a console.log, not a thrown error; guard by pre-checking dimensions
if (parseInt(img.getAttribute('width'), 10) < 36 && parseInt(img.getAttribute('height'), 10) <= 0) {
  img.setAttribute('data-aspectratio', '16/9'); // fallback ratio
}

When it happens

Trigger: Calling plugins/aspectratio/ls.aspectratio.js' getSelectedRatio path on an <img> whose width attribute is missing, zero, tiny (<36px), or invalid, and whose height attribute is <= 0 or absent. Also triggered when data-aspectratio is absent at this stage so no ratio can be derived from attributes.

Common situations: Lazy-loaded images marked with the lazyaspectratio class but rendered without width/height attributes; templates that output width="0" or height="0" for placeholder images; CMS-generated markup stripping dimensions; developers adding the plugin but forgetting the required data-aspectratio or dimension attributes; images loaded before dimensions are injected by JS.

AI-assisted analysis of aFarkas/lazysizes@1523a4ff45 (2026-09-03). Data as JSON: /api/errors/1d997e11c19665b0. Report an issue: GitHub.