Class HTMLImageElement

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

The HTMLImageElement interface represents an HTML img element, providing the properties and methods used to manipulate image elements.

[Value("HTMLImageElement")]
public class HTMLImageElement : HTMLElement

Inheritance

object

EventTarget

Node

Element

HTMLElement

HTMLImageElement

Inherited Members

HTMLElement.Click()

HTMLElement.AttachInternals()

HTMLElement.ShowPopover(ShowPopoverOptions)

HTMLElement.HidePopover()

HTMLElement.TogglePopover(Union61)

HTMLElement.OffsetParent

HTMLElement.OffsetTop

HTMLElement.OffsetLeft

HTMLElement.OffsetWidth

HTMLElement.OffsetHeight

HTMLElement.EditContext

HTMLElement.Title

HTMLElement.Lang

HTMLElement.Translate

HTMLElement.Dir

HTMLElement.Hidden

HTMLElement.Inert

HTMLElement.AccessKey

HTMLElement.AccessKeyLabel

HTMLElement.Draggable

HTMLElement.Spellcheck

HTMLElement.WritingSuggestions

HTMLElement.Autocapitalize

HTMLElement.Autocorrect

HTMLElement.InnerText

HTMLElement.OuterText

HTMLElement.Popover

Element.GetSpatialNavigationContainer()

Element.FocusableAreas(FocusableAreasOption)

Element.SpatialNavigationSearch(SpatialNavigationDirection, SpatialNavigationSearchOptions)

Element.Pseudo(string)

Element.ComputedStyleMap()

Element.GetClientRects()

Element.GetBoundingClientRect()

Element.CheckVisibility(CheckVisibilityOptions)

Element.ScrollIntoView(Union21)

Element.Scroll(ScrollToOptions)

Element.Scroll(double, double)

Element.ScrollTo(ScrollToOptions)

Element.ScrollTo(double, double)

Element.ScrollBy(ScrollToOptions)

Element.ScrollBy(double, double)

Element.HasAttributes()

Element.GetAttributeNames()

Element.GetAttribute(string)

Element.GetAttributeNS(string, string)

Element.SetAttribute(string, string)

Element.SetAttributeNS(string, string, string)

Element.RemoveAttribute(string)

Element.RemoveAttributeNS(string, string)

Element.ToggleAttribute(string, bool)

Element.HasAttribute(string)

Element.HasAttributeNS(string, string)

Element.GetAttributeNode(string)

Element.GetAttributeNodeNS(string, string)

Element.SetAttributeNode(Attr)

Element.SetAttributeNodeNS(Attr)

Element.RemoveAttributeNode(Attr)

Element.AttachShadow(ShadowRootInit)

Element.Closest(string)

Element.Matches(string)

Element.WebkitMatchesSelector(string)

Element.GetElementsByTagName(string)

Element.GetElementsByTagNameNS(string, string)

Element.GetElementsByClassName(string)

Element.InsertAdjacentElement(string, Element)

Element.InsertAdjacentText(string, string)

Element.RequestFullscreen(FullscreenOptions)

Element.SetHTMLUnsafe(Union85)

Element.GetHTML(GetHTMLOptions)

Element.InsertAdjacentHTML(string, Union88)

Element.SetPointerCapture(long)

Element.ReleasePointerCapture(long)

Element.HasPointerCapture(long)

Element.RequestPointerLock(PointerLockOptions)

Element.Part

Element.ScrollTop

Element.ScrollLeft

Element.ScrollWidth

Element.ScrollHeight

Element.ClientTop

Element.ClientLeft

Element.ClientWidth

Element.ClientHeight

Element.CurrentCSSZoom

Element.NamespaceURI

Element.Prefix

Element.LocalName

Element.TagName

Element.Id

Element.ClassName

Element.ClassList

Element.Slot

Element.Attributes

Element.ShadowRoot

Element.ElementTiming

Element.Onfullscreenchange

Element.Onfullscreenerror

Element.InnerHTML

Element.OuterHTML

Node.ELEMENT_NODE

Node.ATTRIBUTE_NODE

Node.TEXT_NODE

Node.CDATA_SECTION_NODE

Node.ENTITY_REFERENCE_NODE

Node.ENTITY_NODE

Node.PROCESSING_INSTRUCTION_NODE

Node.COMMENT_NODE

Node.DOCUMENT_NODE

Node.DOCUMENT_TYPE_NODE

Node.DOCUMENT_FRAGMENT_NODE

Node.NOTATION_NODE

Node.DOCUMENT_POSITION_DISCONNECTED

Node.DOCUMENT_POSITION_PRECEDING

Node.DOCUMENT_POSITION_FOLLOWING

Node.DOCUMENT_POSITION_CONTAINS

Node.DOCUMENT_POSITION_CONTAINED_BY

Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC

Node.GetRootNode(GetRootNodeOptions)

Node.HasChildNodes()

Node.Normalize()

Node.CloneNode(bool)

Node.IsEqualNode(Node)

Node.IsSameNode(Node)

Node.CompareDocumentPosition(Node)

Node.Contains(Node)

Node.LookupPrefix(string)

Node.LookupNamespaceURI(string)

Node.IsDefaultNamespace(string)

Node.InsertBefore(Node, Node)

Node.AppendChild(Node)

Node.ReplaceChild(Node, Node)

Node.RemoveChild(Node)

Node.NodeType

Node.NodeName

Node.BaseURI

Node.IsConnected

Node.OwnerDocument

Node.ParentNode

Node.ParentElement

Node.ChildNodes

Node.FirstChild

Node.LastChild

Node.PreviousSibling

Node.NextSibling

Node.NodeValue

Node.TextContent

EventTarget.AddEventListener(string, Action, Union26)

EventTarget.AddEventListener(string, Action<MouseEvent>, Union26)

EventTarget.AddEventListener(string, Action<Event>, Union26)

EventTarget.RemoveEventListener(string, Action, Union27)

EventTarget.AddEventListener(string, EventListener, Union26)

EventTarget.RemoveEventListener(string, EventListener, Union27)

EventTarget.DispatchEvent(Event)

EventTarget.When(string, ObservableEventListenerOptions)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

-The HTML element implementing this interface: img

See also on MDN

Constructors

HTMLImageElement()

public HTMLImageElement()

Properties

Align

IMPORTANT

Deprecated

The obsolete align
property of the HTMLImageElement interface is a string which indicates
how to position the image relative to its container.

[Value("align")]
public string Align { get; set; }

Property Value

string

A string specifying one of the following strings which set the
alignment mode for the image.

Remarks

You should instead use the
CSS property vertical-align, which does in fact also work on images
despite its name. You can also use the float property to float the image
to the left or right margin.

The align property reflects the HTML align
content attribute.

See also on MDN

Alt

The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the img element is not loaded.

[Value("alt")]
public string Alt { get; set; }

Property Value

string

A string which contains the alternate text to display when the image is not loaded or for use by assistive devices.The alt attribute is officially mandatory; it&apos;s meant to always be specified.
If the image doesn&apos;t require a fallback (such as for an image which is decorative or an advisory icon of minimal importance), you may specify an empty string ("").
For compatibility reasons, browsers generally will accept an image without an alt attribute, but you should try to get into the habit of using it.

Remarks

This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn&apos;t finished loading yet.

Perhaps the most important reason to use the alt property is to support accessibility, as the alt text may be used by screen readers and other assistive technologies to help people with a disability make full use of your content.
It will be read aloud or sent to a braille output device, for example, to support blind or visually impaired users.

Think of it like this: When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there&apos;s an image on the page.

The alternate text is displayed in the space the image would occupy and should be able to take the place of the image without altering the meaning of the page.

See also on MDN

Border

IMPORTANT

Deprecated

The obsolete HTMLImageElement
property border specifies the number of pixels thick the
border surrounding the image should be. A value of 0, the default, indicates that no
border should be drawn.

[Value("border")]
public string Border { get; set; }

Property Value

string

A string containing an integer value specifying the thickness of the
border that should surround the image, in CSS pixels. A value of 0, or an
empty string, indicates that there should be no border drawn. The default value of
border is 0.When set to the null value, that null value is converted to the empty string (""), so elt.border = null is equivalent to elt.border = "".

Remarks

You should not use this property! Instead, you should use CSS to style the
border. The border property or its longhand properties to not only set
the thickness of the border but to potentially apply a wide variety of other styling
options to it.

The width, specifically, is controlled using the writing-mode aware
border-block-start-width, border-block-end-width,
border-inline-start-width, and border-inline-end-width
properties.

For compatibility (or perhaps other) reasons, you can use the older properties instead
(or in addition): border-top-width, border-right-width,
border-bottom-width, and border-left-width.

See also on MDN

Complete

The read-only HTMLImageElement interface's
complete attribute is a Boolean value which indicates
whether or not the image has completely loaded.

[Value("complete")]
public bool Complete { get; }

Property Value

bool

A Boolean value which is true if the image has completely loaded;
otherwise, the value is false.The image is considered completely loaded if any of the following are true:It&apos;s worth noting that due to the image potentially being received asynchronously, the
value of complete may change while your script is running.

Remarks

See also on MDN

CrossOrigin

The HTMLImageElement
interface&apos;s crossOrigin attribute is a string which
specifies the Cross-Origin Resource Sharing (CORS) setting to use when
retrieving the image.

[Value("crossOrigin")]
public string? CrossOrigin { get; set; }

Property Value

string

A string of a keyword specifying the CORS mode to use when fetching
the image resource. If you don&apos;t specify crossOrigin, the image is fetched
without CORS (the fetch no-cors mode).Permitted values are:If crossOrigin is an empty string (""),
the anonymous mode is selected.

Remarks

-CrossOrigin
-CrossOrigin
-CrossOrigin

See also on MDN

CurrentSrc

The read-only HTMLImageElement property
currentSrc indicates the URL of the image which is
currently presented in the img element it represents.

[Value("currentSrc")]
public string CurrentSrc { get; }

Property Value

string

A string indicating the full URL of the image currently visible in
the img element represented by the HTMLImageElement.
This is useful when you provide multiple image options using the
Sizes and/or
Srcset properties. currentSrc lets you
determine which image from the set of provided images was selected by the browser.

Remarks

See also on MDN

Decoding

The decoding property of the HTMLImageElement interface provides a hint to the browser as to how it should decode the image. More specifically, whether it should wait for the image to be decoded before presenting other content updates or not.

[Value("decoding")]
public string Decoding { get; set; }

Property Value

string

A string representing the decoding hint. Possible values are:

Remarks

-The Decode() method
-The img element decoding attribute
-What does the image decoding attribute actually do? on tunetheweb.com (2023)

See also on MDN

FetchPriority

The fetchPriority property of the HTMLImageElement interface represents a hint to the browser indicating how it should prioritize fetching a particular image relative to other images.
It reflects the fetchpriority attribute of the corresponding img element.

[Value("fetchPriority")]
public string FetchPriority { get; set; }

Property Value

string

A string representing the priority hint.
Possible values are:

Remarks

The property allows a developer to signal that fetching a particular image early in the loading process has more or less impact on user experience than a browser can reasonably infer when assigning an internal priority.
This in turn allows the browser to increase or decrease the priority, and potentially load the image earlier or later than it would otherwise.
The property should be used sparingly, as excessive or incorrect prioritization can degrade performance.

The fetch priority can be used to complement preloading, allowing a developer to boost the priority ahead of less-impactful resources that have a higher default priority.
For example, if a developer knows that a particular image significantly contributes to the website's Largest Contentful Paint (LCP) they could add <link rel="preload"> for the image and then further boost the priority using the fetchpriority property.

Note that both the internal priority of any fetch operation, and the impact of fetchPriority on the priority, are entirely browser dependent.

-FetchPriority
-FetchPriority
-HTTP Link header
-Optimize resource loading with the Fetch Priority API for information about how this API affects priorities on Chrome.

See also on MDN

Height

The height property of the
HTMLImageElement interface indicates the height at which the image is
drawn, in CSS pixel if the image is being drawn or rendered to any
visual medium such as the screen or a printer; otherwise, it&apos;s the natural, pixel
density corrected height of the image.

[Value("height")]
public ulong Height { get; set; }

Property Value

ulong

An integer value indicating the height of the image. The terms in which the height is
defined depends on whether the image is being rendered to a visual medium or not.

Remarks

-Height
-Height
-Height
-Height
-Height
-Height

See also on MDN

Hspace

IMPORTANT

Deprecated

The
obsolete hspace property of the
HTMLImageElement interface specifies the number of pixels of empty
space to leave empty on the left and right sides of the img element
when laying out the page.

[Value("hspace")]
public ulong Hspace { get; set; }

Property Value

ulong

An integer value specifying the width, in pixels, of the horizontal margin to apply to
the left and right sides of the image.

Remarks

This property reflects the HTML hspace
attribute.

See also on MDN

IsMap

The HTMLImageElement property isMap is a
Boolean value which indicates that the image is to be used by a server-side image map.
This may only be used on images located within an a element.

[Value("isMap")]
public bool IsMap { get; set; }

Property Value

bool

A Boolean value which is true if the image is being used for a server-side
image map; otherwise, the value is false.

Remarks

NOTE

For accessibility reasons, you should generally avoid using
server-side image maps, as they require the use of a mouse. Use a client-side image map instead.

See also on MDN

Loading

The HTMLImageElement property loading is a string whose value provides a hint to the user agent on how to handle the loading of the image which is currently outside the window's visual viewport.

[Value("loading")]
public string Loading { get; set; }

Property Value

string

A string providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
The possible values are:

Remarks

This helps to optimize the loading of the document&apos;s contents by postponing loading the image until it&apos;s expected to be needed, rather than immediately during the initial page load.

-The img element
-Web performance in the MDN Learning Area
-Lazy loading in the MDN web
performance guide

See also on MDN

LongDesc

IMPORTANT

Deprecated

The deprecated property longDesc on
the HTMLImageElement interface specifies the URL of a text or HTML file
which contains a long-form description of the image. This can be used to
provide optional added details beyond the short description provided in the
title attribute.

[Value("longDesc")]
public string LongDesc { get; set; }

Property Value

string

A string which may be either an empty string (indicating that no long
description is available) or the URL of a file containing a long form description of the
image&apos;s contents.For example, if the image is a PNG of a flowchart.
The longDesc property could be used to provide an explanation of the flow
of control represented by the chart, using only text. This can be used by readers both
as an explanation, but also as a substitute for visually-impaired users.

Remarks

-aria-details

See also on MDN

Lowsrc

[Value("lowsrc")]
public string Lowsrc { get; set; }

Property Value

string

Name

IMPORTANT

Deprecated

The HTMLImageElement
interface&apos;s deprecated name property specifies
a name for the element. This has been replaced by the Id
property available on all elements.

[Value("name")]
public string Name { get; set; }

Property Value

string

A string providing a name by which the image can be referenced.

WARNING

This property is deprecated and is only in the
specification still for backward compatibility purposes. Since it functions
identically to id, you can and should use it instead.

Remarks

See also on MDN

NaturalHeight

The HTMLImageElement interface's
naturalHeight property is a read-only value which
returns the intrinsic (natural), density-corrected height of the image in
CSS pixel.

[Value("naturalHeight")]
public ulong NaturalHeight { get; }

Property Value

ulong

An integer value indicating the intrinsic height, in CSS pixels, of the image. This is
the height at which the image is naturally drawn when no constraint or specific value is
established for the image. This natural height is corrected for the pixel density of the
device on which it's being presented, unlike Height.If the intrinsic height is not available—either because the image does not specify an
intrinsic height or because the image data is not available in order to obtain this
information, naturalHeight returns 0.

Remarks

This is the height the image is if
drawn with nothing constraining its height; if you don&apos;t specify a height for the image,
or place the image inside a container that either limits or expressly specifies the
image height, it will be rendered this tall.

NOTE

Most of the time the natural height is the actual height of the image sent by the server.
Nevertheless, browsers can modify an image before pushing it to the renderer. For example, Chrome
degrades the resolution of images on low-end devices. In such cases, naturalHeight will consider the height of the image modified
by such browser interventions as the natural height, and returns this value.

See also on MDN

NaturalWidth

The HTMLImageElement interface's read-only
naturalWidth property returns the intrinsic (natural),
density-corrected width of the image in CSS pixel.

[Value("naturalWidth")]
public ulong NaturalWidth { get; }

Property Value

ulong

An integer value indicating the intrinsic width of the image, in CSS pixels. This is
the width at which the image is naturally drawn when no constraint or specific value is
established for the image. This natural width is corrected for the pixel density of the
device on which it&apos;s being presented, unlike the value of
Width.If the intrinsic width is not available—either because the image does not specify an
intrinsic width or because the image data is not available in order to obtain this
information, naturalWidth returns 0.

Remarks

This is the width the image is if drawn with nothing constraining
its width; if you neither specify a width for the image nor place the image inside a
container that limits or expressly specifies the image width, this is the number of CSS
pixels wide the image will be.

The corresponding NaturalHeight method
returns the natural height of the image.

NOTE

Most of the time the natural width is the actual width of the image sent by the server.
Nevertheless, browsers can modify an image before pushing it to the renderer. For example, Chrome
degrades the resolution of images on low-end devices. In such cases, naturalWidth will consider the width of the image modified
by such browser interventions as the natural width, and returns this value.

See also on MDN

ReferrerPolicy

The
HTMLImageElement.referrerPolicy
property reflects the HTML referrerpolicy attribute of the
img element defining which referrer is sent when fetching the
resource.

[Value("referrerPolicy")]
public string ReferrerPolicy { get; set; }

Property Value

string

A string; one of the following:

Remarks

-ReferrerPolicy,
ReferrerPolicy, and
ReferrerPolicy.

See also on MDN

Sizes

The HTMLImageElement property
sizes allows you to specify the layout width of the
image for each of a list of media conditions. This provides the ability to
automatically select among different images—even images of different orientations or
aspect ratios—as the document state changes to match different media
conditions.

[Value("sizes")]
public string Sizes { get; set; }

Property Value

string

A string containing a comma-separated list of source size descriptors
followed by an optional fallback size. Each source size descriptor is
comprised of a media condition, then at least one whitespace character, then the
source size value to use for the image when the media condition
evaluates to true.
You can use the value auto to replace the whole list of sizes or the first entry in the list.
For more information about the syntax of the sizes attribute, see <img>.

Remarks

Each condition is specified using the same conditional format used
by media queries.

-Media queries
-Using media queries
-HTML images
-Responsive images
-Using the srcset and sizes attributes

See also on MDN

Src

The HTMLImageElement property
src, which reflects the HTML src attribute, specifies the image to display in the img
element.

[Value("src")]
public string Src { get; set; }

Property Value

string

When providing only a single image, rather than a set of images from which the browser
selects the best match for the viewport size and display pixel density, the
src attribute is a string specifying the URL of the
desired image. This can be set either within the HTML itself using the
src content attribute, or programmatically by setting the
element&apos;s src property.If you use the srcset content attribute to provide multiple
image options for different display pixel densities, the URL specified by the
src attribute is used in one of two ways:Additionally, if you use src along with both
Sizes (or the
corresponding sizes content attribute) and
srcset in order to choose an image based on the viewport size, the
src attribute is only used as a fallback for browsers that don&apos;t support
sizes and srcset; otherwise, it&apos;s not used at all.

Remarks

See also on MDN

Srcset

The HTMLImageElement property
srcset is a string which identifies one or more
image candidate strings, separated using commas (,) each
specifying image resources to use under given circumstances.

[Value("srcset")]
public string Srcset { get; set; }

Property Value

string

A string containing a comma-separated list of one or more image
candidate strings to be used when determining which image resource to present inside the
img element represented by the
HTMLImageElement.Each image candidate string must begin with a valid URL referencing a non-interactive
graphic resource. This is followed by whitespace and then a condition descriptor that
indicates the circumstances in which the indicated image should be used. Space
characters, other than the whitespace separating the URL and the corresponding condition
descriptor, are ignored; this includes both leading and trailing space, as well as space
before or after each comma.The condition descriptor may take one of two forms:If the condition descriptor is not provided (in other words, the image candidate
provides only a URL), the candidate is assigned a default descriptor of &quot;1x&quot;.This string provides versions of an image to be used at the standard pixel density
(undescribed, assigned a default of 1x) as well as double that pixel density (2x).When an image element&apos;s srcset contains &quot;x&quot; descriptors, browsers also consider
the URL in the Src attribute (if present) as a
candidate, and assign it a default descriptor of 1x.This string provides versions of a header image to use when the user agent
renderer needs an image of width 640px, 960px, or 1024px.Note that if any resource in a srcset is described with a &quot;w&quot; descriptor, all
resources within that srcset must also be described with &quot;w&quot; descriptors, and
the image element's Src is not considered
a candidate.

Remarks

Each image
candidate string contains an image URL and an optional width or pixel density descriptor
that indicates the conditions under which that candidate should be used instead of the
image specified by the Src property.

The srcset property, along with the Sizes
property, are a crucial component in designing responsive websites, as they
can be used together to make pages that use appropriate images for the rendering
situation.

NOTE

If the srcset attribute uses width descriptors, the sizes attribute must also be present, or the srcset itself will be ignored.

-HTML images
-Responsive images
-Image file type and format guide

See also on MDN

UseMap

The useMap property on the
HTMLImageElement interface reflects the value of the
HTML usemap attribute, which is a string
providing the name of the client-side image map to apply to the image.

[Value("useMap")]
public string UseMap { get; set; }

Property Value

string

A string providing the page-local URL (that is, a URL that begins
with the hash or pound symbol, #) of the map element
which defines the image map to apply to the image.You can learn more about client-side image maps in our learning article Add a hitmap on top of an image.

Remarks

See also on MDN

Vspace

IMPORTANT

Deprecated

The obsolete vspace property of the
HTMLImageElement interface specifies the number of pixels of empty space
to leave empty on the top and bottom of the img element when laying
out the page.

[Value("vspace")]
public ulong Vspace { get; set; }

Property Value

ulong

An integer value specifying the height, in pixels, of the vertical margin to apply to
the top and bottom sides of the image.

Remarks

See also on MDN

Width

The width property of the
HTMLImageElement interface indicates the width at which an image is
drawn in CSS pixel if it's being drawn or rendered to
any visual medium such as a screen or printer. Otherwise, it&apos;s the natural, pixel
density-corrected width of the image.

[Value("width")]
public ulong Width { get; set; }

Property Value

ulong

An integer value indicating the width of the image. The way the width is defined
depends on whether or not the image is being rendered to a visual medium, such as a
screen or printer:

Remarks

-Width
-Width
-Width
-Width
-Width
-Width

See also on MDN

X

The read-only HTMLImageElement property
x indicates the x-coordinate of the
img element's left border edge relative to the root element's
origin.

[Value("x")]
public long X { get; }

Property Value

long

An integer value indicating the distance in pixels from the left edge of the element&apos;s
nearest root element and the left edge of the img element's border
box. The nearest root element is the outermost html element that
contains the image. If the image is in an iframe, its x
is relative to that frame.In the diagram below, the left border edge is the left edge of the blue padding area.
So the value returned by x would be the distance from that point to the
left edge of the content area.Diagram showing the relationships between the various boxes associated with an element

NOTE

The x property is only valid if the computed
value of the image's display property is either
table-column or table-column-group; in other words, either
of those are set directly on the img or they're inherited from a
containing element or by being located within a column described by either
col or colgroup.

Remarks

The x and Y properties are only valid
for an image if its display property has the computed value
table-column or table-column-group. In other words: it has
either of those values set explicitly on it, or it has inherited it from a containing
element, or by being located within a column described by either col
or colgroup.

See also on MDN

Y

The read-only HTMLImageElement property
y indicates the y-coordinate of the
img element's top border edge relative to the root element's
origin.

[Value("y")]
public long Y { get; }

Property Value

long

An integer value indicating the distance in pixels from the top edge of the element&apos;s
nearest root element to the top edge of the img element's border
box. The nearest root element is the outermost html element that
contains the image. If the image is in an iframe, its
y is relative to that frame.In the diagram below, the top border edge is the top edge of the blue padding area. So
the value returned by y would be the distance from that point to the top
edge of the content area.Diagram showing the relationships between the various boxes associated with an element

NOTE

The y property is only valid if the computed
value of the image's display property is either
table-column or table-column-group; in other words,
either of those are set directly on the img or they're
inherited from a containing element or by being located within a column described
by either col or colgroup.

Remarks

The X and y properties are only valid
for an image if its display property has the computed value
table-column or table-column-group. In other words: it has
either of those values set explicitly on it, or it has inherited it from a containing
element, or by being located within a column described by either
col or colgroup.

See also on MDN

Methods

Decode()

The decode()
method of the HTMLImageElement interface returns a
Promise that resolves once the image is decoded and it is safe to append
it to the DOM.

[Value("decode")]
public Task<GlobalObject.Undefined> Decode()

Returns

Task<GlobalObject.Undefined>

A 'Promise' that fulfills with undefined once the image data is ready to be used.

Remarks

This can be used to initiate loading of the image prior
to attaching it to an element in the DOM (or adding it to the DOM as a new element), so
that the image can be rendered immediately upon being added to the DOM. This, in turn,
prevents the rendering of the next frame after adding the image to the DOM from causing
a delay while the image loads.

-What does the image decoding attribute actually do? on tunetheweb.com (2023)
-The Decoding property

See also on MDN