Correct srcset to prevent blurry images

[girishpanchal30]

All Submissions:

• Have you followed the Optimole Contributing guideline?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

There is an open PR with the fix as suggested in the issue description.

Changes proposed in this Pull Request:

Passed the original image dimensions (naturalWidth and naturalHeight) as data attributes on the <img> tag. Since images served via Optimole are dynamically resized, the browser-reported naturalWidth and naturalHeight reflect the optimized image rather than the original source, leading to incorrect dimension calculations.

Closes #1030

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[pirate-bot]

Plugin build for 8aa5536 is ready 🛎️!

• Download build
• Download dev

[Copilot]

Pull request overview

This PR aims to prevent blurry images on larger viewports by ensuring the JS srcset profiler uses the original image dimensions (not the optimized ones) when deciding which responsive sizes to include.

Changes:

• Inject data-original-width / data-original-height onto processed <img> tags (derived from attachment metadata).
• Update the srcset detector to read “natural” dimensions from those new data attributes instead of img.naturalWidth/Height.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
inc/tag_replacer.php	Adds original-dimension data attributes to image tags and introduces a URL→attachment-ID helper.
assets/js/modules/srcset-detector.js	Switches “natural” dimension reads to the new HTML data attributes.

Comments suppressed due to low confidence (1)

assets/js/modules/srcset-detector.js:193

• naturalWidth/naturalHeight now come only from data-original-*, so any image where PHP couldn't inject these attributes (non-attachment URLs, offloaded/DAM URLs that don’t resolve, cached content generated before this change) will be skipped entirely (insufficient dimension data). Consider falling back to img.naturalWidth/img.naturalHeight when the data attributes are missing/NaN. Also, this change alone doesn’t address issue #1030 because _generateResponsiveSizes() still caps 1x variants by currentWidth; the cap needs to be based on the (original) natural width instead.

    const naturalWidth = img.hasAttribute('data-original-width') ? parseInt(img.getAttribute('data-original-width'), 10) : 0;
    const naturalHeight = img.hasAttribute('data-original-height') ? parseInt(img.getAttribute('data-original-height'), 10) : 0;
    
    // Skip if we can't determine dimensions
    if (!currentWidth || !currentHeight || !naturalWidth || !naturalHeight) {
      optmlLogger.warn(`Skipping image ${imageId}: insufficient dimension data`);
      return null;
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

There are existing PHPUnit coverage suites for tag replacement/srcset behavior (e.g., tests/test-replacer.php, tests/test-srcset.php). Please add/update tests to assert process_image_tags() injects data-original-width/data-original-height for Media Library images (including resized filenames like -150x150, @2x, and -scaled) so this doesn’t regress.

[Soare-Robert-Daniel]

This can be compacted like this:

			$missing_original_width = false === strpos( $image_tag, 'data-original-width=' );
			$missing_original_height = false === strpos( $image_tag, 'data-original-height=' );
			if ( $missing_original_width || $missing_original_height ) {
				$_image_id      = $this->attachment_url_to_post_id( wp_unslash( $images['img_url'][ $index ] ) );
				$image_metadata = wp_get_attachment_metadata( $_image_id );
				if ( $image_metadata && is_array( $image_metadata ) ) {
					if ($missing_original_width && ! empty( $image_metadata['width'] ) ) {
						$original_width = (int) $image_metadata['width'];
						$image_tag      = str_replace( 'data-opt-id=', 'data-original-width="' . $original_width . '" data-opt-id=', $image_tag );
					}
					if ( $missing_original_height && ! empty( $image_metadata['height'] ) ) {
						$original_height = (int) $image_metadata['height'];
						$image_tag       = str_replace( 'data-opt-id=', 'data-original-height="' . $original_height . '" data-opt-id=', $image_tag );
					}
				}
			}

[Soare-Robert-Daniel]

This can be compacted like this:

			$missing_original_width = false === strpos( $image_tag, 'data-original-width=' );
			$missing_original_height = false === strpos( $image_tag, 'data-original-height=' );
			if ( $missing_original_width || $missing_original_height ) {
				$_image_id      = $this->attachment_url_to_post_id( wp_unslash( $images['img_url'][ $index ] ) );
				$image_metadata = wp_get_attachment_metadata( $_image_id );
				if ( $image_metadata && is_array( $image_metadata ) ) {
					if ($missing_original_width && ! empty( $image_metadata['width'] ) ) {
						$original_width = (int) $image_metadata['width'];
						$image_tag      = str_replace( 'data-opt-id=', 'data-original-width="' . $original_width . '" data-opt-id=', $image_tag );
					}
					if ( $missing_original_height && ! empty( $image_metadata['height'] ) ) {
						$original_height = (int) $image_metadata['height'];
						$image_tag       = str_replace( 'data-opt-id=', 'data-original-height="' . $original_height . '" data-opt-id=', $image_tag );
					}
				}
			}

[Soare-Robert-Daniel]

You modified here that the natural height is not longer needed. Is this also true for this function

optimole-wp/assets/js/modules/srcset-detector.js

Line 345 in ba9d115

const responsiveSizes = this._generateResponsiveSizes(currentWidth, currentHeight, aspectRatio, naturalWidth, naturalHeight);

or just here?

In the idea that we might not need it at all if we go with your fix.

[girishpanchal30]

Yes, that height also works with the function, as it is used to verify whether the size is valid for the current rendered image dimensions.

[selul]

closing it since it was not addressing the root cause.