Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Missing-srcset enhancement rewrites data-*-srcset attributes and breaks Envira lazy-load placeholders

Đã đóng
  • Có gì không ổn?
#1,184 3 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@selul đang làm issue này rồi.

Từ ngày 16/10/2026.

  • #1169 của @pirate-bot — đã merge

Đánh giá

Issue này chưa được đánh giá.

Mô tả

3rd-part-compatibilities bug-report

Status (2026-10-16)

Fixed in PR #1185 (bugfix/1184 → development). Pirate-bot approved f38d4978, and all checks are green.

  • The srcset/sizes enhancement now reads the image tag attribute by attribute, the way a browser does. It only reads and writes the image's own quoted src / srcset / sizes, at their exact positions; data-*-srcset, data-src, data-sizes and text inside other values are never touched.
  • An image whose first src or srcset is a data: placeholder (quoted, unquoted, spaced or uppercase) is left to its lazy loader, including its sizes. This covers the QA agent's finding.
  • Verified on testing.optimole.com/envira-test-page/: gallery 92 image 4 keeps Envira's placeholder srcset, with no duplicate sizes. The Firefox Envira E2E test passes on the PR.
  • A differential run against development (124 cases through the full replacer) changed no CDN URL replacement. Only srcset/sizes differ, in 2 cases.
  • Not enhanced any more (they keep their CDN src): malformed markup such as alt=can't, and partly JSON-escaped markup (src="https:\/\/…").
  • Not changed: when an image's own srcset uses x descriptors, adding w entries still mixes them; repeated sizes breakpoints remain the #1111 / #1113 area.
  • The second QA run found that an image with a data: placeholder in data-src before its real src gets no profiler srcset, on development too. The image parser takes the placeholder as the image URL; filed separately as #1186.
  • development (and the release PR #1169) keep failing this E2E test until #1185 is merged.

Summary

When the page profiler has missing-srcset data for an image, Optml_Tag_Replacer::add_missing_srcset_attributes() rewrites the wrong attributes. Its srcset= / sizes= / src= regexes are not anchored to an attribute name, so they also match data-*-srcset, data-*-sizes and data-*-src attributes that lazy-load and gallery plugins use.

On Envira Gallery images this:

  1. reads the existing value from data-envira-srcset (the first match) instead of srcset;
  2. writes the merged value into every match, so Envira's placeholder srcset="data:image/gif;base64,…" is replaced with real CDN candidates;
  3. inserts sizes after both the real and the data-envira-srcset attribute, so the tag ends up with two sizes attributes;
  4. mixes x and w descriptors in one srcset (… 2x, … 254w, … 400w), which is invalid.

Because the placeholder srcset is gone, the browser downloads the image immediately instead of leaving it to Envira's lazy loader. In Firefox that load finishes before Envira's justifiedGallery init, and the init then resets src to data-safe-src (the GIF placeholder). The image still shows (from srcset), but the markup no longer matches what the gallery script expects, and lazy loading is defeated for that image.

Steps to reproduce

  1. Envira Gallery Lite gallery on a page, Optimole connected, lazy load in viewport mode.
  2. Visit the page so optimizer.js stores a missing-srcset measurement for one gallery image (the profile in Optml_Manager::instance()->page_profiler).
  3. Reload and look at that image's tag.

Live example: http://testing.optimole.com/envira-test-page/, gallery 92, attachment 18 (#envira-gallery-wrap-92 #envira-gallery-image-18).

Expected: srcset keeps Envira's data: placeholder, data-envira-srcset is not touched, one sizes attribute.

Actual:

<img … class="envira-gallery-image envira-gallery-image-4 envira-normal envira-lazy"
  src="https://….i.optimole.com/…/w:254/h:300/…/marina-mazur-…-scaled.jpg"
  data-envira-srcset="… 2x, … 254w, … 400w" sizes="(max-width: 2560px) 254px"
  srcset="… 2x, … 254w, … 400w" sizes="(max-width: 2560px) 254px"
  data-safe-src="data:image/gif;base64,…" />

The other images in the same gallery (no profiler data) keep srcset="data:image/gif;base64,…".

Impact

  • The E2E check tests/e2e/envira.spec.ts › Gallery images all attributes replaced properly has failed on Firefox on 7 of the last 8 development runs since 2026-10-12, including the release PR #1169. It started once the shared QA site's profile recorded missing-srcset data for attachment 18. Chromium passes only because its script timing is different.
  • Any plugin that keeps the real source in a data-*-srcset / data-*-src attribute (Envira, other galleries and lazy loaders) can get duplicated attributes or a placeholder srcset replaced with eager candidates.

Root cause

inc/tag_replacer.php:

  • add_missing_srcset_attributes(): strpos( $tag, 'srcset=' ) / strpos( $tag, 'sizes=' ) presence checks; srcset insert after /(src=["'][^"']*["'])/i; sizes insert after /(srcset=["'][^"']*["'])/i; existing-sizes lookup /sizes=…/.
  • enhance_existing_srcset() / enhance_existing_sizes(): preg_match on /srcset=…/ and /sizes=…/, then preg_replace with no limit.

The code was introduced in 4.1.0 (8ab74741).

Proposed fix

  • Match only the real src / srcset / sizes attributes (attribute name preceded by whitespace) and replace a single occurrence.
  • When the real srcset (or src) is a data: placeholder, another script owns loading the image: leave the tag unchanged instead of adding eager candidates.
  • PHPUnit cases for an Envira-style tag.
Ngôn ngữ chính
PHP
Star
74
Fork
14
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
21

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Codeinwp/optimole-wp

Tất cả issue của Codeinwp/optimole-wp

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.