Skip to content

fix: cap srcset against naturalWidth instead of currentWidth#1036

Merged
selul merged 1 commit intoCodeinwp:developmentfrom
fuleinist:fix/srcset-naturalwidth-cap
Mar 25, 2026
Merged

fix: cap srcset against naturalWidth instead of currentWidth#1036
selul merged 1 commit intoCodeinwp:developmentfrom
fuleinist:fix/srcset-naturalwidth-cap

Conversation

@fuleinist
Copy link
Copy Markdown
Contributor

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
@selul
Copy link
Copy Markdown
Contributor

selul commented Mar 24, 2026

@fuleinist Thanks for the contribution

@selul selul merged commit 8327591 into Codeinwp:development Mar 25, 2026
10 of 11 checks passed
@pirate-bot
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 4.2.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Mar 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released Indicate that an issue has been resolved and released in a particular version of the product.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants