Skip to content

fix: cap srcset against naturalWidth instead of currentWidth#1036

Open
fuleinist wants to merge 1 commit intoCodeinwp:developmentfrom
fuleinist:fix/srcset-naturalwidth-cap
Open

fix: cap srcset against naturalWidth instead of currentWidth#1036
fuleinist wants to merge 1 commit intoCodeinwp:developmentfrom
fuleinist:fix/srcset-naturalwidth-cap

Conversation

@fuleinist
Copy link

Summary

Fixes #1030 - srcset capped at profiling container width, causing blurry images on wider viewports.

Problem

When Optimole's JS page profiler measures an image on a desktop screen (e.g. 1440px wide), it stores srcset entries capped at that container width. Visitors on wider screens (e.g. 1750px) then receive a srcset whose largest 1x entry is 1440px, causing visible blur.

Root Cause

In _generateResponsiveSizes(), the condition was capping against currentWidth (CSS-rendered size) instead of naturalWidth (actual image pixel width).

Fix

Changed the condition to cap against naturalWidth instead, ensuring 1x srcset variants are generated for all breakpoints up to the image's actual pixel width.

Files Changed

  • assets/js/modules/srcset-detector.js - 1 line change

The srcset detector was capping 1x DPR variants at the CSS-rendered
width at profiling time, not the image's natural pixel width. This
caused blurry images on viewports wider than the profiling screen.

Before: A 2560px image profiled on 1440px screen would only generate
srcset entries up to 1440w for 1x DPR, causing upscaling blur on
larger screens.

After: The srcset is capped at the image's naturalWidth, ensuring
all available resolution is used regardless of profiling viewport.

Fixes Codeinwp#1030
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant