Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Page profiler extrapolates inaccurate responsive slot widths from one viewport measurement

Abierto
  • ¿Algo no está bien?
#1,112 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
javascript, php
Área
frontend, performance

Línea de trabajo

Comienza con _generateResponsiveSizes() en assets/js/modules/srcset-detector.js y, después, sigue el recorrido de Profile::store() y add_missing_srcset_attributes() en los archivos PHP indicados. Ejecuta la suite de JavaScript srcset-detector y tests/test-srcset.php; luego verifica los tamaños generados comparándolos con los slots CSS medidos en layouts cuyas proporciones cambian entre los breakpoints de escritorio y móvil.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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)

Lenguaje dominante
PHP
Estrellas
73
Forks
14
Merge medio
2 d 13 h
PR fusionados (30 d)
16

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Codeinwp/optimole-wp

Todos los issues de Codeinwp/optimole-wp

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.