# image/image/converters

module

<a id="functions">

## Functions

<a id="function-downcastImageAttribute">

### `downcastImageAttribute( imageUtils, imageType, attributeKey ) → ( dispatcher: DowncastDispatcher ) => void` _(internal)_

Converter used to convert a given image attribute from the model to the view.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/image/converters.ts#L391)

#### Parameters

* `imageUtils: ImageUtils`

* `imageType: 'imageBlock' | 'imageInline'`

  The type of the image.

* `attributeKey: string`

  The name of the attribute to convert.

#### Returns

* `( dispatcher: DowncastDispatcher ) => void`

<a id="function-downcastSourcesAttribute">

### `downcastSourcesAttribute( imageUtils ) → ( dispatcher: DowncastDispatcher ) => void` _(internal)_

Converts the `source` model attribute to the `<picture><source /><source />...<img /></picture>` view structure.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/image/converters.ts#L319)

#### Parameters

* `imageUtils: ImageUtils`

#### Returns

* `( dispatcher: DowncastDispatcher ) => void`

<a id="function-downcastSrcsetAttribute">

### `downcastSrcsetAttribute( imageUtils, imageType ) → ( dispatcher: DowncastDispatcher ) => void` _(internal)_

Converter used to convert the `srcset` model image attribute to the `srcset` and `sizes` attributes in the view.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/image/converters.ts#L283)

#### Parameters

* `imageUtils: ImageUtils`

* `imageType: 'imageBlock' | 'imageInline'`

  The type of the image.

#### Returns

* `( dispatcher: DowncastDispatcher ) => void`

<a id="function-upcastImageFigure">

### `upcastImageFigure( imageUtils ) → ( dispatcher: UpcastDispatcher ) => void` _(internal)_

Returns a function that converts the image view representation:

```html
<figure class="image"><img src="..." alt="..."></img></figure>
```

to the model representation:

```html
<imageBlock src="..." alt="..."></imageBlock>
```

The entire content of the `<figure>` element except the first `<img>` is being converted as children of the `<imageBlock>` model element.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/image/converters.ts#L42)

#### Parameters

* `imageUtils: ImageUtils`

#### Returns

* `( dispatcher: UpcastDispatcher ) => void`

<a id="function-upcastImg">

### `upcastImg( matchImageType, imageUtils ) → ( dispatcher: UpcastDispatcher ) => void` _(internal)_

Returns a function that upcasts an `<img>` element to either an `imageBlock` or an `imageInline` model element.

The image type is first determined from the view structure (see [`getViewImageType`](module_image_image_utils.md#function-getViewImageType)): an `<img>` wrapped in a `<figure class="image">` or styled with `display: block` becomes an `imageBlock`, otherwise an `imageInline`.

That structural type is then verified against the schema at the insertion position. If it cannot be placed there - neither directly (or after hoisting to an allowed ancestor) nor wrapped in an auto-created paragraph - the converter falls back to `matchImageType`. This is what allows a block image to degrade to an inline image inside an inline root (and, symmetrically, an inline image to become a block image in a context that only accepts block images) instead of being dropped.

Both `ImageBlockEditing` and `ImageInlineEditing` register this converter, each passing the type it falls back to. When only one of them is loaded, that single type is always produced.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/image/converters.ts#L125)

#### Parameters

* `matchImageType: 'imageBlock' | 'imageInline'`

  The image type to fall back to when the type resolved from the view cannot be placed at the insertion position.

* `imageUtils: ImageUtils`

  The `ImageUtils` plugin instance.

#### Returns

* `( dispatcher: UpcastDispatcher ) => void`

<a id="function-upcastPicture">

### `upcastPicture( imageUtils ) → ( dispatcher: UpcastDispatcher ) => void` _(internal)_

Returns a function that converts the image view representation:

```html
<picture><source ... /><source ... />...<img ... /></picture>
```

to the model representation as the `sources` attribute:

```html
<image[Block|Inline] ... sources="..."></image[Block|Inline]>
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/image/converters.ts#L184)

#### Parameters

* `imageUtils: ImageUtils`

#### Returns

* `( dispatcher: UpcastDispatcher ) => void`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)