Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Page profiler extrapolates inaccurate responsive slot widths from one viewport measurement

Aperta
  • Qualcosa non va?
#1,112 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript, php
Ambito
frontend, performance

Direzione di ricerca

Inizia con _generateResponsiveSizes() in assets/js/modules/srcset-detector.js, quindi segui Profile::store() e add_missing_srcset_attributes() nei file PHP elencati. Esegui la suite JavaScript srcset-detector e tests/test-srcset.php, quindi verifica le dimensioni generate rispetto agli slot CSS misurati nei layout le cui proporzioni cambiano tra i breakpoint desktop e mobile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug-report bug-report-triage customer report

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)

Lingua principale
PHP
Stelle
73
Fork
14
Merge medio
2g 13h
PR unite (30g)
16

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Codeinwp/optimole-wp

Tutte le issue di Codeinwp/optimole-wp

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.