Skip to content

Add external image processing with width/height parameter extraction #936

@gazal2708

Description

@gazal2708

Is your feature request related to a problem? Please describe.

Currently, external images in the HTML pipeline don't have optimized processing. When external images include width and height parameters in their URLs, these valuable dimensions are not being utilized to improve performance and user experience.

Describe the solution you'd like

Add a new pipeline step processExternalImages that:

  1. Identifies external images (not starting with ./media_)
  2. Extracts width and height parameters from URL search params
  3. Sets hardcoded width=750 and quality=65 in the URL for optimization
  4. Adds width and height attributes to the image element
  5. Preserves title as data-title attribute when different from alt

Describe alternatives you've considered

  1. Using original width/height values in URL(rejected - consistent sizing needed for page performance)
  2. Not processing external images at all (rejected - missing optimization opportunity)

Additional context

Implementation Details -

  1. New step: src/steps/process-external-images.js
  2. Integrated into html-pipe.js pipeline
  3. Comprehensive test coverage with three scenarios

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions