Page profiler extrapolates inaccurate responsive slot widths from one viewport measurement

Summary

Optimole-generated sizes values can overstate an image's slot width at responsive breakpoints because the observed layout width from one viewport is projected onto other viewport sizes. The generated slot values are expected to reflect the image's responsive CSS layout. On layouts whose width proportion changes by breakpoint, the generated value can cause the browser to select a substantially oversized image and increase mobile transfer and rendering cost.

Customer context

Product / area: Optimole page profiler and generated sizes attributes
Version: Customer version not provided; inspected source is v4.2.10
Environment: Responsive WordPress frontend, including a 360-pixel mobile viewport
Integration / third party: Browser responsive-image selection
Reported error / symptom: A full-bleed hero reportedly received a 614-pixel slot declaration on a 360-pixel viewport and selected a 2386-pixel image
Impact: Oversized mobile image downloads and degraded performance on an image-heavy site.

Reproduction notes

The transcript provides a staff-confirmed output example; no local runtime reproduction was performed.

1. Use a responsive image whose slot occupies a different proportion of viewport width on desktop and mobile.
2. Allow the desktop page profiler to record missing srcset data.
3. Load a later response at a mobile breakpoint and inspect the generated sizes value.
4. Compare the declared slot with the rendered CSS width and selected resource. The report observed a 614-pixel declaration on a 360-pixel viewport.

Diagnosis

Conclusion

The profiler observes the image width at the current viewport, converts it to one viewport-width ratio, and applies that ratio to every fixed breakpoint. It has no measurement of how the image's CSS slot changes at those breakpoints. Only desktop missing-srcset measurements are stored globally, so a mobile profile does not correct this projection. This directly supports the reported inaccurate mobile slot for responsive layouts whose proportions change.

Where this likely occurs

• assets/js/modules/srcset-detector.js — optmlSrcsetDetector._calculateRequiredSizes() lines 341–362 delegates responsive inference to _generateResponsiveSizes().
• assets/js/modules/srcset-detector.js — optmlSrcsetDetector._generateResponsiveSizes() lines 410–483 calculates currentWidth / window.innerWidth once and projects that ratio across all configured breakpoints.
• inc/v2/PageProfiler/Profile.php — OptimoleWP\PageProfiler\Profile::store() lines 183–209 stores missing-srcset measurements in global profile data only for the desktop device profile.
• inc/tag_replacer.php — Optml_Tag_Replacer::add_missing_srcset_attributes() lines 487–578 converts the projected breakpoint data into rendered sizes clauses.
• Commit 49a757f34fd1 introduced the current single-ratio breakpoint projection; it is present from v4.1.0 through inspected v4.2.10.

Engineering notes

The observed ratio is accurate only while the image occupies the same proportion of viewport width at every generated breakpoint. Responsive layout transitions, fixed-width components, column changes, and breakpoint-specific CSS can violate that assumption. The inspected JavaScript parses existing srcset candidates but does not use an existing sizes expression as a responsive layout model. Existing lowercase calc(), min(), max(), and clamp() values intentionally bypass sizes enhancement through Optml_Tag_Replacer::should_skip_sizes() at inc/tag_replacer.php lines 686–713; this confirms the customer's workaround uses a deliberate guard.

Test coverage status

assets/js/modules/__tests__/srcset-detector.test.js covers candidate parsing, validation, and selection but no direct test of _generateResponsiveSizes() across layouts with different desktop and mobile slot proportions was found. tests/test-srcset.php lines 112–169 tests rendering from supplied candidate data and assumes the profiler data is accurate. Tests were not executed during this read-only investigation.

What to verify or explore next

• Reproduce with a layout whose image changes from one desktop-width proportion to a different mobile-width proportion.
• Capture profiler payloads and rendered sizes output from desktop and mobile profiling passes.
• Compare browser-selected resources against measured CSS slots at the configured breakpoints.
• Run the JavaScript srcset-detector suite and PHP srcset suite.

Unknowns / follow-up

The customer's exact CSS layout, cache state, and plugin version are unavailable. The report's 614-pixel value was not regenerated locally.

Confidence

Confidence: 95/100

Repository inspection confirms three independently verifiable defects in Optimole's page-profiler responsive-image path, and no matching GitHub issues were found. The reported Retina-disabled 1x behavior is intentional setting behavior covered by tests, so it is not included as a defect.

---

Source: HelpScout #3424946418
Generated by bug-report-triage (ID: bug-report-triage_6a87087cc5e402.90677248)

Start with _generateResponsiveSizes() in assets/js/modules/srcset-detector.js, then trace Profile::store() and add_missing_srcset_attributes() in the listed PHP files. Run the JavaScript srcset-detector suite and tests/test-srcset.php, then verify generated sizes against measured CSS slots across layouts whose proportions change between desktop and mobile breakpoints.