@responsive-image/[email protected]

Minor Changes

• #881 fec0c61 Thanks @simonihmig! - Add aspectRatio option

  Provider functions for image CDNs support an aspectRatio parameter to set the aspect ratio of the remote image, allowing the image component to render proper width and height attributes to prevent layout shift.

Patch Changes

• #883 4c13f20 Thanks @simonihmig! - Cleanup and update package.json meta data

• Updated dependencies [4c13f20]:

  • @responsive-image/[email protected]

@responsive-image/[email protected]

Patch Changes

• #883 4c13f20 Thanks @simonihmig! - Cleanup and update package.json meta data

• Updated dependencies [4c13f20]:

  • @responsive-image/[email protected]

@responsive-image/[email protected]

Major Changes

• #586 84abd80 Thanks @simonihmig! - Rename all packages to be under a new @responsive-image scope

• #608 a3f94f2 Thanks @simonihmig! - Use imagetools for more image processing options

  @responsive-image/webpack is now using the imagetools-core package for image processing via sharp. This now supports not only scaling to different sizes and generating different image formats as before, but also a lot of other directives for image manipulation.

  Breaking Changes: Some parameters passed to the loader as defaults directly or using as query parameters in imports had to change to align with that library:

  • widths has been renamed to w
  • formats to format
  • the separator for array vlues has been changed to ; instead of ,

  Example: import image from './path/to/image.jpg?w=400;800&responsive';

Minor Changes

• #598 025ccef Thanks @simonihmig! - Refactored BlurHash implementation to be ESM based

• #663 3ab97bd Thanks @simonihmig! - Do not apply default value for quality

  Instead we rely on sharp's own defaults. For .avif images this will use a lower quality setting (50 instead of 80), which produces smaller sizes with almost the same visual quality as e.g. 80 for jpegs.

• #669 e2d6111 Thanks @simonihmig! - Add caching support

  Generated images will be cached, based on the source and image processing config. This is especially useul for the vite-plugin in dev mode (serve), since images are processed on-demand within the Vite dev server middleware.

• #664 bab7cae Thanks @simonihmig! - Rename all eri-* attributes and classes to ri-* for consistency

Patch Changes

• #681 4b08662 Thanks @simonihmig! - Support aspect ratio parameter correctly

  When aspect is given (via import query params), the height of the image is adjusted to match when resizing, and the image component will correctly render with the new aspect ratio, rather than that of the original image.

• #604 63e0336 Thanks @simonihmig! - Fix broken published webpack package

• #660 1c903cd Thanks @simonihmig! - Refactor build plugins, extract shared functionality into @response-image/build-utils

• #633 353cfab Thanks @simonihmig! - Fix LQIP color bug causing invalid hex values

• Updated dependencies [84abd80, 3ab97bd, 1c903cd, e2d6111, 92f957f, bab7cae, 7cef8c6]:

  • @responsive-image/[email protected]
  • @responsive-image/[email protected]

@responsive-image/[email protected]

Major Changes

• #715 fee0cb5 Thanks @simonihmig! - Introduce new @responsive-image/wc package for Lit-based web component support

  This package exposes a browser native Web Component. It is implemented using the Lit library, but it can be used with any other framework supporting web components, or none at all.

Minor Changes

• #726 da0f40c Thanks @simonihmig! - Add BlurHash support to web component

• #764 8588cc6 Thanks @simonihmig! - Redispatch events, expose complete property

• #762 486695e Thanks @simonihmig! - Support styling with :part(img)

• #763 05815c0 Thanks @simonihmig! - Support customizing HTML image attributes in @responsive-image/wc

Patch Changes

• Updated dependencies [84abd80, 92f957f, 7cef8c6]:
  • @responsive-image/[email protected]

@responsive-image/[email protected]

Minor Changes

• #640 49b242d Thanks @simonihmig! - Support serve mode in vite-plugin

• #663 3ab97bd Thanks @simonihmig! - Do not apply default value for quality

  Instead we rely on sharp's own defaults. For .avif images this will use a lower quality setting (50 instead of 80), which produces smaller sizes with almost the same visual quality as e.g. 80 for jpegs.

• #669 e2d6111 Thanks @simonihmig! - Add caching support

  Generated images will be cached, based on the source and image processing config. This is especially useul for the vite-plugin in dev mode (serve), since images are processed on-demand within the Vite dev server middleware.

• #664 bab7cae Thanks @simonihmig! - Rename all eri-* attributes and classes to ri-* for consistency

• #619 cb2e67f Thanks @simonihmig! - Introduce new @responsive/vite-plugin with basic Vite loader

• #642 7ca5b5c Thanks @simonihmig! - Add LQIP support to vite-plugin

Patch Changes

• #681 4b08662 Thanks @simonihmig! - Support aspect ratio parameter correctly

  When aspect is given (via import query params), the height of the image is adjusted to match when resizing, and the image component will correctly render with the new aspect ratio, rather than that of the original image.

• #660 1c903cd Thanks @simonihmig! - Refactor build plugins, extract shared functionality into @response-image/build-utils

• #633 353cfab Thanks @simonihmig! - Fix LQIP color bug causing invalid hex values

• Updated dependencies [84abd80, 3ab97bd, 1c903cd, e2d6111, 92f957f, bab7cae, 7cef8c6]:

  • @responsive-image/[email protected]
  • @responsive-image/[email protected]

@responsive-image/[email protected]

Major Changes

• #586 84abd80 Thanks @simonihmig! - Rename all packages to be under a new @responsive-image scope

• #598 025ccef Thanks @simonihmig! - Refactored BlurHash implementation to be ESM based

• #771 b5dacfe Thanks @simonihmig! - Remove FastBoot related workarounds in imgix image CDN provider

  Instead of working around a known issue in the actual runtime code, users need to add a FastBoot config to expose needed globals like URL or URLSearchParams, as documented in the Ember guide.

• #614 2d10626 Thanks @simonihmig! - Use Record-based API for cloudinary transformations

  Instead of passing cloudinary transformations as a string according to the Cloudinary Transformation URL API, you need to pass them as an object. If you want to use chained transformations, pass an array of objects.

  // using @resposive-image/cdn
  const simpleTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: { co: 'rgb:20a020', e: 'colorize:50' },
  });
  
  const chainedTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: [
      { co: 'rgb:20a020', e: 'colorize:50' },
      { ar: '1.0', c: 'fill', w: '150' },
      { r: 'max' },
    ],
  });

  {{!-- using @responsive-image/ember }}
  <ResponsiveImage
    @src={{responsiveImageCloudinaryProvider
      "foo/bar.jpg"
      transformations=(hash co="rgb:20a020" e="colorize:50")
    }}
  >

• #783 fe2fe11 Thanks @simonihmig! - Rename image CDN functions, dropping -provider suffix

• #752 9f6c96e Thanks @simonihmig! - Drop support for Ember < 4.12

• #579 5a69e21 Thanks @simonihmig! - Drop service class

  The responsive-image service has been dropped and replaced with a simple static module from the new core package.

• #737 55c502c Thanks @simonihmig! - Refactor the way to set config

  The ember package does not read from config/addons.js anymore. Instead an explicit runtime call to setConfig() is needed, same as for the wc package. The cdn package reads its config from the cdn namespace.

Minor Changes

• #585 ab0e08b Thanks @simonihmig! - Move CDN providers to a single dedicated cdn package.

  Ember helpers are now exposed from the main @responsive-image/ember package again, wrapping the function from the new @responsive-image/cdn package.
  The previous dedicated addons @ember-responsive-image/cloudinary and @ember-responsive-image/imgix have been removed again.

• #664 bab7cae Thanks @simonihmig! - Rename all eri-* attributes and classes to ri-* for consistency

• #773 b09549c Thanks @simonihmig! - Add support for Netlify image CDN

Patch Changes

• #744 b370ed6 Thanks @simonihmig! - Refactor BlurHash usage in Ember

  Use dynamic import of local blurhash module instead of public asset, to let the bundler produce more robust output (e.g. custom publicPath)

• #646 9661f86 Thanks @simonihmig! - Remove use of @ember/render-modifiers

• #726 92f957f Thanks @simonihmig! - Extract BlurHash utils onto core

• Updated dependencies [84abd80, ab0e08b, 1f3b3d9, b5dacfe, 2d10626, 92f957f, b09549c, 7cef8c6, fe2fe11, 55c502c]:

  • @responsive-image/[email protected]
  • @responsive-image/[email protected]

@responsive-image/[email protected]

Major Changes

• #586 84abd80 Thanks @simonihmig! - Rename all packages to be under a new @responsive-image scope

Patch Changes

• #726 92f957f Thanks @simonihmig! - Extract BlurHash utils onto core

• #794 7cef8c6 Thanks @simonihmig! - Add resolveImage utility

@responsive-image/[email protected]

Major Changes

• #586 84abd80 Thanks @simonihmig! - Rename all packages to be under a new @responsive-image scope

• #782 1f3b3d9 Thanks @simonihmig! - Drop jpg, png as default image cdn formats

• #614 2d10626 Thanks @simonihmig! - Use Record-based API for cloudinary transformations

  Instead of passing cloudinary transformations as a string according to the Cloudinary Transformation URL API, you need to pass them as an object. If you want to use chained transformations, pass an array of objects.

  // using @resposive-image/cdn
  const simpleTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: { co: 'rgb:20a020', e: 'colorize:50' },
  });
  
  const chainedTransformation = cloudinaryProvider('foo/bar.jpg', {
    transformations: [
      { co: 'rgb:20a020', e: 'colorize:50' },
      { ar: '1.0', c: 'fill', w: '150' },
      { r: 'max' },
    ],
  });

  {{!-- using @responsive-image/ember }}
  <ResponsiveImage
    @src={{responsiveImageCloudinaryProvider
      "foo/bar.jpg"
      transformations=(hash co="rgb:20a020" e="colorize:50")
    }}
  >

• #783 fe2fe11 Thanks @simonihmig! - Rename image CDN functions, dropping -provider suffix

• #737 55c502c Thanks @simonihmig! - Refactor the way to set config

  The ember package does not read from config/addons.js anymore. Instead an explicit runtime call to setConfig() is needed, same as for the wc package. The cdn package reads its config from the cdn namespace.

Minor Changes

• #585 ab0e08b Thanks @simonihmig! - Move CDN providers to a single dedicated cdn package.

  Ember helpers are now exposed from the main @responsive-image/ember package again, wrapping the function from the new @responsive-image/cdn package.
  The previous dedicated addons @ember-responsive-image/cloudinary and @ember-responsive-image/imgix have been removed again.

• #773 b09549c Thanks @simonihmig! - Add support for Netlify image CDN

Patch Changes

• #771 b5dacfe Thanks @simonihmig! - Remove FastBoot related workarounds in imgix image CDN provider

  Instead of working around a known issue in the actual runtime code, users need to add a FastBoot config to expose needed globals like URL or URLSearchParams, as documented in the Ember guide.

• Updated dependencies [84abd80, 92f957f, 7cef8c6]:

  • @responsive-image/[email protected]

@responsive-image/[email protected]

Minor Changes

• #663 3ab97bd Thanks @simonihmig! - Do not apply default value for quality

  Instead we rely on sharp's own defaults. For .avif images this will use a lower quality setting (50 instead of 80), which produces smaller sizes with almost the same visual quality as e.g. 80 for jpegs.

• #669 e2d6111 Thanks @simonihmig! - Add caching support

  Generated images will be cached, based on the source and image processing config. This is especially useul for the vite-plugin in dev mode (serve), since images are processed on-demand within the Vite dev server middleware.

• #664 bab7cae Thanks @simonihmig! - Rename all eri-* attributes and classes to ri-* for consistency

Patch Changes

• #660 1c903cd Thanks @simonihmig! - Refactor build plugins, extract shared functionality into @response-image/build-utils

• Updated dependencies [84abd80, 92f957f, 7cef8c6]:

  • @responsive-image/[email protected]

@responsive-image/[email protected]

Patch Changes

• Updated dependencies [7cef8c6]:
  • @responsive-image/[email protected]
  • @responsive-image/[email protected]