Skip to content

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Aug 24, 2025

This PR updates the Stencil image helpers documentation to include the new lossy parameter based on the implementation in bigcommerce/paper-handlebars#383.

What's Changed

New Image Optimization Section

Added a comprehensive overview explaining the benefits of lossy compression:

  • Smaller file sizes through lossy compression
  • Automatic WebP conversion for supported browsers
  • Improved page load times and reduced bandwidth usage

Updated Image Helper Documentation

All Stencil image helpers now document the optional lossy parameter:

  • getImage - Main image helper for preset-based sizing
  • getImageSrcset - Responsive image srcset generation
  • getContentImage - Content management image helper
  • getContentImageSrcset - Content management srcset helper
  • getImageManagerImage - Image manager helper
  • getImageManagerImageSrcset - Image manager srcset helper

Enhanced Examples

Added practical examples showing how to use the lossy parameter:

<!-- Basic usage -->
{{getImage image "logo" lossy=true}}

<!-- With responsive images -->
{{getImageSrcset image use_default_sizes=true lossy=true}}

<!-- Content images -->
{{getContentImage "asset.jpg" width=123 height=321 lossy=true}}

When lossy=true is specified, the helpers append ?compression=lossy to the generated URLs, enabling the CDN to apply lossy compression and automatic format conversion.

Benefits for Developers

  • Performance optimization: Developers can now easily enable image compression to improve site performance
  • Backward compatibility: The parameter is optional and defaults to false, preserving existing behavior
  • Comprehensive documentation: Clear examples and explanations help developers understand when and how to use lossy compression

This documentation update ensures developers have the information they need to leverage the new image optimization capabilities in their Stencil themes.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@Copilot Copilot AI changed the title [WIP] Draft updates to documentation for Stencil image helpers based on @bigcommerce/paper-handlebars/pull/383 to describe how to use the lossy parameter to optimize image performance; the lossy parameter will allow for lossy compression resulting in smaller... docs: Add lossy parameter documentation for Stencil image helpers Aug 24, 2025
@Copilot Copilot AI requested a review from bookernath August 24, 2025 05:47
Copilot finished work on behalf of bookernath August 24, 2025 05:47
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.

2 participants