Generated sizes attribute can contain duplicate max-width conditions

Summary

With Retina Quality enabled, Optimole can emit multiple sizes clauses using the same max-width condition but different slot widths. Each breakpoint is expected to have an unambiguous effective slot declaration. Because only the first matching condition participates in browser selection, later duplicates are unreachable and can leave the browser using an unintended slot width.

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 with Retina Quality enabled
Integration / third party: Browser responsive-image selection
Reported error / symptom: Duplicate conditions such as two max-width: 768px entries
Impact: Conflicting responsive-image metadata can cause unintended candidate selection and oversized downloads.

Reproduction notes

Confirmed by direct code inspection and by support's inspection of the reported output; no local browser reproduction was performed.

1. Enable Retina Quality for an image eligible for page-profiler-generated responsive candidates.
2. Allow both 1x and 2x candidates for one breakpoint to survive candidate selection and filtering.
3. Inspect the generated sizes attribute on a later rendered response.
4. Observe repeated conditions such as (max-width: 768px) paired with different slot widths.

Diagnosis

Conclusion

The profiler generates 1x and 2x resource candidates for the same breakpoint, multiplies each candidate's width by DPR, and carries both into PHP. PHP then uses each resource width as the CSS slot width for that shared breakpoint. Deduplication compares complete strings, so clauses with the same condition and different widths remain. The behavior is deterministic when both density candidates survive selection and filtering.

Where this likely occurs

• assets/js/modules/srcset-detector.js — optmlSrcsetDetector._generateResponsiveSizes() lines 419–460 iterates both DPR multipliers for each breakpoint and assigns the same breakpoint to differently scaled widths.
• assets/js/modules/srcset-detector.js — optmlSrcsetDetector._selectBestVariations() lines 531–585 intentionally retains selected 1x and 2x entries and deduplicates by resource width rather than breakpoint.
• inc/tag_replacer.php — Optml_Tag_Replacer::add_missing_srcset_attributes() lines 487–517 creates a sizes clause from every retained candidate using the DPR-scaled width.
• inc/tag_replacer.php — Optml_Tag_Replacer::add_missing_srcset_attributes() lines 553–578 applies array_unique() to complete clause strings, preserving same-breakpoint clauses with different widths.
• inc/tag_replacer.php — Optml_Tag_Replacer::enhance_existing_sizes() lines 647–676 has the same complete-string deduplication behavior when extending an existing simple sizes value.
• Commits 8ab74741721c and 49a757f34fd1 introduced the relevant profiler and generation path; the behavior remains in inspected v4.2.10.

Engineering notes

The path is primarily reachable with Retina Quality enabled because add_missing_srcset_attributes() filters out entries with DPR greater than one when the setting is disabled. Both candidates also have to survive natural-dimension validation, the variation limit, and container filtering. The duplicate clauses represent resource-density alternatives as CSS slot alternatives, although a sizes media list resolves the first matching condition rather than selecting among conditions by DPR.

Test coverage status

tests/test-srcset.php lines 112–169 and 211–224 cover distinct breakpoints only. assets/js/modules/__tests__/srcset-detector.test.js covers retention of 1x and 2x candidates but does not inspect rendered same-breakpoint sizes clauses. No relevant test found during inspection supplies density variants sharing a breakpoint and checks condition uniqueness. Tests were not executed during this read-only investigation.

What to verify or explore next

• Reproduce with Retina Quality enabled and an image large enough for both density candidates to survive validation.
• Inspect generated sizes output for repeated media conditions and record which clause appears first.
• Compare selected resources before and after profile data is stored.
• Run the targeted PHP srcset suite and JavaScript srcset-detector suite across images with and without existing simple sizes attributes.

Unknowns / follow-up

The exact ordering observed on the customer's page and the customer plugin version are unknown.

Confidence

Confidence: 97/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() and _selectBestVariations() in assets/js/modules/srcset-detector.js, then trace add_missing_srcset_attributes() and enhance_existing_sizes() in inc/tag_replacer.php. Run tests/test-srcset.php and the JavaScript srcset-detector suite with Retina Quality and shared breakpoints. Done means retained density variants no longer produce ambiguous repeated conditions in generated sizes attributes.