Skip to content

Lazy-loaded images are rendered with their data: placeholder instead of the real image #88

Open

Description

@morisil

Lazy-loaded images are rendered with their placeholder src rather than the real image.

Observed

On a Wayback Machine capture of https://www.benjerry.com/flavors/flavor-graveyard (web.archive.org/web/20230129141559/…), most images in the dump came out as:

[![Dastardly Mash](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) Dastardly Mash](…)

That data: URI is the usual 1×1 transparent GIF lazy-loading libraries put in src until the image scrolls into view.
The real URL sits in another attribute (typically data-src, data-lazy-src, data-original, or srcset/data-srcset).

Why it matters

  • The Markdown carries ~80 bytes of noise per image and none of the information, so a model can neither see nor fetch the image.
    In this case the photos were what the task needed, and the agent had to go through each flavor page instead.
  • A dump is taken without scrolling, so on a lazy-loading page this hits nearly every image below the fold.

Suggested behaviour

When src is a data: URI (or missing), fall back in this order:

  1. currentSrc, if the element has already resolved one;
  2. data-src / data-lazy-src / data-original;
  3. the best candidate of srcset / data-srcset.

If nothing better exists, emit the image without a data: placeholder (alt text only) rather than inlining the placeholder.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions