diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md index 438a34c0aae9b43..200e6d20dcdb349 100644 --- a/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md +++ b/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md @@ -58,7 +58,7 @@ To aid tabbing, you can supply a [skip link](/en-US/docs/Web/HTML/Reference/Elem ## Alt attribute for image -Every image should have an [`alt`](/en-US/docs/Web/HTML/Reference/Elements/img#alt) attribute. If the image is purely decoration and adds no meaning to the content or context of the document, the `alt` attribute should be present, but empty. You can optionally also add [`role="presentation"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/presentation_role). All other images should include an `alt` attribute providing [alternative text describing the image](/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes) in a way that is helpful to users who can read the rest of the content but can't see the image. Think about how you would describe the image to someone who can't load your image: that's the information you should include as the value of the `alt` attribute. +Every image should have an [`alt`](/en-US/docs/Web/HTML/Reference/Elements/img#alt) attribute. If the image is purely decoration and adds no meaning to the content or context of the document, the `alt` attribute should be present, but empty. You can optionally also add [`role="presentation"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/presentation_role). All other images should include an `alt` attribute providing [alternative text describing the image](/en-US/docs/Web/HTML/Reference/Elements/img#accessibility) in a way that is helpful to users who can read the rest of the content but can't see the image. Think about how you would describe the image to someone who can't load your image: that's the information you should include as the value of the `alt` attribute. ```html diff --git a/files/en-us/web/api/htmlimageelement/align/index.md b/files/en-us/web/api/htmlimageelement/align/index.md index 403f803e4931501..95790f24d01d552 100644 --- a/files/en-us/web/api/htmlimageelement/align/index.md +++ b/files/en-us/web/api/htmlimageelement/align/index.md @@ -10,53 +10,31 @@ browser-compat: api.HTMLImageElement.align {{APIRef("HTML DOM")}}{{deprecated_header}} -The _obsolete_ **`align`** -property of the {{domxref("HTMLImageElement")}} interface is a string which indicates -how to position the image relative to its container. +The _deprecated_ **`align`** property of the {{domxref("HTMLImageElement")}} interface is a string which indicates how to position the image relative to its container. It reflects the `` element's [`align`](/en-US/docs/Web/HTML/Reference/Elements/img#align) content attribute. -You should instead use the -CSS property {{cssxref("vertical-align")}}, which does in fact also work on images -despite its name. You can also use the {{cssxref("float")}} property to float the image -to the left or right margin. - -The `align` property reflects the HTML [`align`](/en-US/docs/Web/HTML/Reference/Elements/img#align) -content attribute. +You should instead use the CSS property {{cssxref("vertical-align")}}, which does in fact also work on images despite its name. You can also use the {{cssxref("float")}} property to float the image to the left or right margin. ## Value -A string specifying one of the following strings which set the -alignment mode for the image. - -### Baseline alignment - -These three values specify the alignment of the element relative to the text baseline. -These should be replaced by using the CSS {{cssxref("vertical-align")}} property. +A string. For the permitted values, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#align) reference. -- `bottom` - - : The bottom edge of the image is to be aligned vertically with the current text - baseline. **Default value.** -- `middle` - - : The center of the object should be aligned vertically with the current baseline. -- `top` - - : The top edge of the object should be aligned vertically with the current baseline. +## Examples -It may be worth noting that {{cssxref("vertical-align")}} offers several additional -options for its value; you may wish to consider these when changing your code to use it. +### Setting the align attribute -### Floating images horizontally +```js +const img = new Image(); +img.src = "example.png"; +img.align = "top"; +``` -The `left` and `right` properties don't affect the -baseline-relative alignment. Instead, they cause the image to "float" to the left or -right margin, allowing the following text to flow around the image. You should instead -use the CSS {{cssxref("float")}} property, specifying as the value -either `left` or `right`. +Instead of doing this, consider: -- `left` - - : Floats the image over to place the left edge flush against the current margin. Any - text that follows will flow against the image's right edge. -- `right` - - : Floats the image to place its right edge flush against the right margin. Subsequent - text will flow along the image's left edge. +```js +const img = new Image(); +img.src = "example.png"; +img.style.verticalAlign = "top"; +``` ## Specifications diff --git a/files/en-us/web/api/htmlimageelement/alt/index.md b/files/en-us/web/api/htmlimageelement/alt/index.md index 3daeeca7c7b4bab..0c25bbbed839e50 100644 --- a/files/en-us/web/api/htmlimageelement/alt/index.md +++ b/files/en-us/web/api/htmlimageelement/alt/index.md @@ -8,241 +8,24 @@ browser-compat: api.HTMLImageElement.alt {{APIRef("HTML DOM")}} -The {{domxref("HTMLImageElement")}} property **`alt`** provides fallback (alternate) text to display when the image specified by the {{HTMLElement("img")}} element is not loaded. +The **`alt`** property of the {{domxref("HTMLImageElement")}} interface provides fallback (alternate) text to display when the image specified by the {{HTMLElement("img")}} element is not displayed, whether because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet. It reflects the `` element's [`alt`](/en-US/docs/Web/HTML/Reference/Elements/img#alt) content attribute. -This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet. - -Perhaps the most important reason to use the `alt` property is to support [accessibility](/en-US/docs/Web/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'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_. +There are important accessibility implications of providing appropriate alt text, and the requirements may differ based on the purpose of the image. See the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#authoring_meaningful_alternate_descriptions) reference for more information. ## Value -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's meant to always be specified. -If the image doesn'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. - -## Usage notes - -The fundamental guideline for the `alt` attribute is that every image's alternate text should be able to replace the image _without altering the meaning of the page_. You should never use `alt` for text that could be construed as a caption or title. -There are separate attributes and elements designed for those purposes. +A string. ## Examples -Beyond that, there are additional guidelines for using `alt` appropriately which vary depending on what the image is being used for. -These are shown in the examples below. - -### Decorative images - -Images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their `alt` attributes set to the empty string (`""`). -This is shown in the example below. - -#### HTML - -In the HTML for this example, shown below, the {{HTMLElement("img")}} element includes the `alt` property, which will prevent the image from having any alternate text, since it's a decorative detail. - -```html -
-
- -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci - ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac - neque libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar - ex id sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus - laoreet cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus - scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu. -

-
-
-``` - -#### CSS - -The CSS for this example sets up the styles for the layout as shown in the result below. - -```css -body { - margin: 0; - padding: 0; -} - -p { - margin-block-start: 0; - margin-block-end: 1em; - margin-top: 0; - margin-bottom: 1em; -} - -.container { - width: 100vh; - height: 95vh; - font: - 16px "Helvetica", - "Arial", - sans-serif; -} - -.left-margin { - background-color: rgb(241 240 237); - width: 9em; - height: 100%; - float: left; - margin-right: 5px; - padding-right: 1em; - display: flex; - align-items: center; - justify-content: center; -} - -.left-margin img { - width: 6em; -} - -.contents { - background-color: rgb(241 240 235); - height: 100%; - margin-left: 2em; - padding-top: 1em; - padding-left: 2em; - padding-right: 1em; -} -``` - -#### Result - -{{EmbedLiveSample("Decorative_images", 600, 500)}} - -### Images used as buttons +### Setting the alt attribute -When using an image as a button (by using it as the only visible child of an {{HTMLElement("a")}} element representing a hyperlink), the `alt` attribute must be used to convey the purpose of the button. -In other words, it should be the same text you would use in a textual button to serve the same purpose. - -For example, in the snippet of HTML below, a toolbar which uses icon images as link labels provides `alt` attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used. - -```html - -``` - -### Images containing diagrams or maps - -When an image contains information presented as a diagram, chart, graph, or map, the `alt` text should provide the same information, at least in summary form. -This is true whether the /me image is in a bitmapped format such as [PNG](/en-US/docs/Web/Media/Guides/Formats/Image_types#png_portable_network_graphics) or [JPEG](/en-US/docs/Web/Media/Guides/Formats/Image_types#jpeg_joint_photographic_experts_group_image) or in a vector format like [SVG](/en-US/docs/Web/Media/Guides/Formats/Image_types#svg_scalable_vector_graphics). - -- For a map, the `alt` text could be directions to the place indicated by the map, similarly to how you would explain it verbally. -- For a chart, the text could describe the items in the chart and their values. -- For a diagram, the text could be an explanation of the concept presented by the diagram. - -Keep in mind that any text included in diagrams and charts presented in {{Glossary("SVG")}} format may be read by screen readers. -This may impact the decisions you make when writing the `alt` text for the diagram. - -### Icons or logos - -Logos (such as corporate or brand logos) and informational icons should use the corresponding text in their `alt` strings. -That is, if an image is a corporate logo, the `alt` text should be the name of the company. -If the image is an icon representing a status or other information, the text should be the name of that state. - -For example, if an image is a badge that's shown on a page to indicate that the content of the page is new and has been updated recently, the corresponding `alt` text might be `"Updated Recently"` or even `"Updated on 27 August 2019"`. - -In this example, a starburst image with the word "New!" is used to indicate that an article is about something new (and probably supposedly also exciting). -The `alt` attribute is set to `New Page!` to allow that text to be displayed in place of the image if the image isn't available. -It is also available to be read by screen readers. - -#### HTML - -The HTML below creates a snippet of content from a site using the described icon. -Note the use of the `alt` attribute on the {{HTMLElement("img")}}, providing a good substitution string to use in case the image doesn't load. - -```html -
- New Page! -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci - ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque - libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar ex id - sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus laoreet - cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus - scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu. -

-
-``` - -#### CSS - -The main feature of the CSS here is the use of {{cssxref("clip-path")}} and {{cssxref("shape-outside")}} to wrap the text around the icon in an appealing way. - -```css -.container { - max-width: 500px; -} - -.page-info-badge { - width: 9em; - padding-right: 1em; - float: left; - clip-path: polygon( - 100% 0, - 100% 50%, - 90% 70%, - 80% 80%, - 70% 90%, - 50% 100%, - 0 100%, - 0 0 - ); - shape-outside: polygon( - 100% 0, - 100% 50%, - 90% 70%, - 80% 80%, - 70% 90%, - 50% 100%, - 0 100%, - 0 0 - ); -} - -.contents { - margin-top: 1em; - font: - 16px "Helvetica", - "Arial", - sans-serif; -} +```js +const img = new Image(); +img.src = "example.png"; +img.alt = "An example picture"; ``` -#### Result - -{{EmbedLiveSample("Icons_or_logos", 640,400)}} - -### Other images - -Images showing objects or scenes should have `alt` text describing what's seen in the image. -A photo of a yellow teapot might literally have its `alt` attribute set to `"A yellow teapot"`. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/htmlimageelement/alt/margin-flourish.svg b/files/en-us/web/api/htmlimageelement/alt/margin-flourish.svg deleted file mode 100644 index bfe2b7b331a5ffe..000000000000000 --- a/files/en-us/web/api/htmlimageelement/alt/margin-flourish.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/files/en-us/web/api/htmlimageelement/attributionsrc/index.md b/files/en-us/web/api/htmlimageelement/attributionsrc/index.md index 277f453480d9fa9..0a2767bcc20a306 100644 --- a/files/en-us/web/api/htmlimageelement/attributionsrc/index.md +++ b/files/en-us/web/api/htmlimageelement/attributionsrc/index.md @@ -10,34 +10,13 @@ browser-compat: api.HTMLImageElement.attributionSrc {{APIRef("Attribution Reporting API")}}{{securecontext_header}}{{SeeCompatTable}} -The -**`attributionSrc`** property of the {{domxref("HTMLImageElement")}} interface gets and sets the [`attributionsrc`](/en-US/docs/Web/HTML/Reference/Elements/img#attributionsrc) attribute on an {{htmlelement("img")}} element programmatically, reflecting the value of that attribute. `attributionsrc` specifies that you want the browser to send an {{httpheader("Attribution-Reporting-Eligible")}} header along with the image request. - -On the server-side this is used to trigger sending an {{httpheader("Attribution-Reporting-Register-Source")}} or {{httpheader("Attribution-Reporting-Register-Trigger")}} header in the response, to register an image-based [attribution source](/en-US/docs/Web/API/Attribution_Reporting_API/Registering_sources#html-based_event_sources) or [attribution trigger](/en-US/docs/Web/API/Attribution_Reporting_API/Registering_triggers#html-based_attribution_triggers), respectively. Which response header should be sent back depends on the value of the `Attribution-Reporting-Eligible` header that triggered the registration. - -The source/trigger is registered once the browser receives the response containing the image file. - -> [!NOTE] -> Bear in mind that users might not necessarily be able to perceive the image at all — it might be a 1x1 transparent tracking pixel that is only being used for attribution reporting. +The **`attributionSrc`** property of the {{domxref("HTMLImageElement")}} interface that you want the browser to send an {{httpheader("Attribution-Reporting-Eligible")}} header along with the image request. It reflects the `` element's [`attributionsrc`](/en-US/docs/Web/HTML/Reference/Elements/img#attributionsrc) content attribute. See the [Attribution Reporting API](/en-US/docs/Web/API/Attribution_Reporting_API) for more details. ## Value -A string. There are two versions of this property that you can get and set: - -- Empty string, i.e., `imgElem.attributionSrc=""`. This specifies that you want the {{httpheader("Attribution-Reporting-Eligible")}} header sent to the same server as the `src` attribute points to. This is fine when you are handling the attribution source or trigger registration on the same server. When registering an attribution trigger this property is optional, and an empty string value will be used if it is omitted. -- Value containing one or more URLs, for example: - - ```js - imgElem.attributionSrc = - "https://a.example/register-source https://b.example/register-source"; - ``` - - This is useful in cases where the requested resource is not on a server you control, or you just want to handle registering the attribution source on a different server. In this case, you can specify one or more URLs as the value of `attributionSrc`. When the resource request occurs the {{httpheader("Attribution-Reporting-Eligible")}} header will be sent to the URL(s) specified in `attributionSrc` in addition to the resource origin. These URLs can then respond with a {{httpheader("Attribution-Reporting-Register-Source")}} or {{httpheader("Attribution-Reporting-Register-Trigger")}} header as appropriate to complete registration. - - > [!NOTE] - > Specifying multiple URLs means that multiple attribution sources can be registered on the same feature. You might for example have different campaigns that you are trying to measure the success of, which involve generating different reports on different data. +A string that is either empty or a space-separated list of URLs. For the interpretation of this attribute, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#attributionsrc) reference. ## Examples diff --git a/files/en-us/web/api/htmlimageelement/border/index.md b/files/en-us/web/api/htmlimageelement/border/index.md index 6cee899d2355aee..9fe3a09a27957a4 100644 --- a/files/en-us/web/api/htmlimageelement/border/index.md +++ b/files/en-us/web/api/htmlimageelement/border/index.md @@ -10,58 +10,32 @@ browser-compat: api.HTMLImageElement.border {{APIRef("HTML DOM")}}{{deprecated_header}} -The obsolete {{domxref("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. +The _deprecated_ **`border`** property of the {{domxref("HTMLImageElement")}} interface 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. It reflects the `` element's [`border`](/en-US/docs/Web/HTML/Reference/Elements/img#border) content attribute. -You should _not_ use this property! Instead, you should use CSS to style the -border. The {{cssxref("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 -{{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, -{{cssxref("border-inline-start-width")}}, and {{cssxref("border-inline-end-width")}} -properties. - -For compatibility (or perhaps other) reasons, you can use the older properties instead -(or in addition): {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, -{{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}. +You should instead use the CSS property {{cssxref("border")}} or its longhand properties to not only set the thickness of the border but also to potentially apply a wide variety of other styling options to it. ## Value -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`. +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 = ""`. -## Usage notes - -Do not use `border`. It is obsolete. Instead, use the CSS -{{cssxref("border")}} property and its longhand properties to establish borders around -images. - -For example, if you have the following HTML: - -```html - -``` +## Examples -The following will provide the same appearance using CSS instead of this obsolete -property: +### Setting the border attribute -```html - +```js +const img = new Image(); +img.src = "example.png"; +img.border = "1"; ``` -You can further provide additional information to change the color and other features -of the border: +Instead of doing this, consider: -```html - +```js +const img = new Image(); +img.src = "example.png"; +img.style.borderWidth = "1px"; ``` ## Specifications diff --git a/files/en-us/web/api/htmlimageelement/complete/index.md b/files/en-us/web/api/htmlimageelement/complete/index.md index 51abc7973a992c2..253b386a275a351 100644 --- a/files/en-us/web/api/htmlimageelement/complete/index.md +++ b/files/en-us/web/api/htmlimageelement/complete/index.md @@ -8,52 +8,36 @@ browser-compat: api.HTMLImageElement.complete {{APIRef("HTML DOM")}} -The read-only {{domxref("HTMLImageElement")}} interface's -**`complete`** attribute is a Boolean value which indicates -whether or not the image has completely loaded. +The **`complete`** read-only property of the {{domxref("HTMLImageElement")}} interface is a Boolean value indicating whether or not the image has completely loaded. ## Value -A Boolean value which is `true` if the image has completely loaded; -otherwise, the value is `false`. +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: -- Neither the [`src`](/en-US/docs/Web/HTML/Reference/Elements/img#src) nor the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) - attribute is specified. -- The `srcset` attribute is absent and the `src` attribute, - while specified, is the empty string (`""`). -- The image resource has been fully fetched and has been queued for - rendering/compositing. -- The image element has previously determined that the image is fully available and - ready for use. -- The image is "broken;" that is, the image failed to load due to an error or because - image loading is disabled. +- Neither the [`src`](/en-US/docs/Web/HTML/Reference/Elements/img#src) nor the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute is specified. +- The `srcset` attribute is absent and the `src` attribute, while specified, is the empty string (`""`). +- The image resource has been fully fetched and has been queued for rendering/compositing. +- The image element has previously determined that the image is fully available and ready for use. +- The image is "broken;" that is, the image failed to load due to an error or because image loading is disabled. -It's worth noting that due to the image potentially being received asynchronously, the -value of `complete` may change while your script is running. +It's worth noting that due to the image potentially being received asynchronously, the value of `complete` may change while your script is running. ## Examples -Consider a photo library app that provides the ability to open images into a lightbox -mode for improved viewing as well as editing of the image. These photos may be very -large, so you don't want to wait for them to load, so your code -uses `async`/`await` to load the images in the background. +### Executing functions on loaded images only -But imagine that you have other code that needs to only run when the image has -completed loading, such as a command that performs red-eye removal on the image in the -lightbox. While ideally this command wouldn't even be executed if the image hasn't fully -loaded, for improved reliability you want to check to ensure this is the case. +Consider a photo library app that provides the ability to open images into a lightbox mode for improved viewing as well as editing of the image. These photos may be very large, so you don't want to wait for them to load, so your code uses `async`/`await` to load the images in the background. -So the `fixRedEyeCommand()` function, which is called by the button that -triggers red-eye removal, checks the value of the lightbox -image's `complete` property before attempting to do its work. This is -demonstrated in the code below. +But imagine that you have other code that needs to only run when the image has completed loading, such as a command that performs red-eye removal on the image in the lightbox. While ideally this command wouldn't even be executed if the image hasn't fully loaded, for improved reliability you want to check to ensure this is the case. + +So the `fixRedEyeCommand()` function, which is called by the button that triggers red-eye removal, checks the value of the lightbox image's `complete` property before attempting to do its work. This is demonstrated in the code below. ```js -let lightboxElem = document.querySelector("#lightbox"); -let lightboxImgElem = lightboxElem.querySelector("img"); -let lightboxControlsElem = lightboxElem.querySelector(".toolbar"); +const lightboxElem = document.querySelector("#lightbox"); +const lightboxImgElem = lightboxElem.querySelector("img"); +const lightboxControlsElem = lightboxElem.querySelector(".toolbar"); async function loadImage(url, elem) { return new Promise((resolve, reject) => { diff --git a/files/en-us/web/api/htmlimageelement/crossorigin/clock-demo-400px.png b/files/en-us/web/api/htmlimageelement/crossorigin/clock-demo-400px.png deleted file mode 100644 index 999ad528fe9cbf6..000000000000000 Binary files a/files/en-us/web/api/htmlimageelement/crossorigin/clock-demo-400px.png and /dev/null differ diff --git a/files/en-us/web/api/htmlimageelement/crossorigin/index.md b/files/en-us/web/api/htmlimageelement/crossorigin/index.md index 4e59fe7b4ff8a01..ee817b662b38e01 100644 --- a/files/en-us/web/api/htmlimageelement/crossorigin/index.md +++ b/files/en-us/web/api/htmlimageelement/crossorigin/index.md @@ -8,44 +8,21 @@ browser-compat: api.HTMLImageElement.crossOrigin {{APIRef("HTML DOM")}} -The {{domxref("HTMLImageElement")}} -interface's **`crossOrigin`** attribute is a string which -specifies the Cross-Origin Resource Sharing ({{Glossary("CORS")}}) setting to use when -retrieving the image. +The **`crossOrigin`** property of the {{domxref("HTMLImageElement")}} interface is a string which specifies the Cross-Origin Resource Sharing ({{Glossary("CORS")}}) setting to use when retrieving the image. It reflects the `` element's [`crossorigin`](/en-US/docs/Web/HTML/Reference/Elements/img#crossorigin) content attribute. ## Value -A string of a keyword specifying the CORS mode to use when fetching -the image resource. If you don't specify `crossOrigin`, the image is fetched -without CORS (the fetch `no-cors` mode). - -Permitted values are: - -- `anonymous` - - : Requests by the {{HTMLElement("img")}} element have their - {{domxref("Request.mode", "mode")}} set to `cors` and their {{domxref("Request.credentials", "credentials")}} - mode set to `same-origin`. This means that CORS is enabled - and credentials are sent _if_ the image is fetched from the same origin from - which the document was loaded. -- `use-credentials` - - : Requests by the {{domxref("HTMLImageElement")}} will use the `cors` mode - and the `include` credentials mode; all image requests by the element will - use CORS, regardless of what domain the fetch is from. - -If `crossOrigin` is an empty string (`""`), -the `anonymous` mode is selected. +A string. For the permitted values, see the HTML [`crossorigin`](/en-US/docs/Web/HTML/Reference/Attributes/crossorigin) attribute reference. ## Examples -In this example, a new {{HTMLElement("img")}} element is created and added to the -document, loading the image with the Anonymous state; the image will be loaded using -CORS and credentials will be used for all cross-origin loads. +### Setting the crossorigin attribute + +In this example, a new {{HTMLElement("img")}} element is created and added to the document, loading the image with the Anonymous state; the image will be loaded using CORS and credentials will be used for all cross-origin loads. -### JavaScript +#### JavaScript -The code below demonstrates setting the `crossOrigin` property on an -`` element to configure CORS access for the fetch of a -newly-created image. +The code below demonstrates setting the `crossOrigin` property on an `` element to configure CORS access for the fetch of a newly-created image. ```js const container = document.querySelector(".container"); @@ -65,7 +42,7 @@ function loadImage(url) { image.src = url; } -loadImage("clock-demo-400px.png"); +loadImage("/shared-assets/images/examples/balloon.jpg"); ``` ### HTML @@ -110,7 +87,7 @@ output { ### Result -{{EmbedLiveSample("Examples", 600, 260)}} +{{EmbedLiveSample("Setting the crossorigin attribute", 600, 260)}} ## Specifications diff --git a/files/en-us/web/api/htmlimageelement/currentsrc/index.md b/files/en-us/web/api/htmlimageelement/currentsrc/index.md index 3bba3cff37ebf8c..a94eafc44d8f126 100644 --- a/files/en-us/web/api/htmlimageelement/currentsrc/index.md +++ b/files/en-us/web/api/htmlimageelement/currentsrc/index.md @@ -8,28 +8,19 @@ browser-compat: api.HTMLImageElement.currentSrc {{APIRef("HTML DOM")}} -The read-only {{domxref("HTMLImageElement")}} property -**`currentSrc`** indicates the URL of the image which is -currently presented in the {{HTMLElement("img")}} element it represents. +The **`currentSrc`** read-only property of the {{domxref("HTMLImageElement")}} interface indicates the URL of the image selected by the browser to load. ## Value -A string indicating the full URL of the image currently visible in -the {{HTMLElement("img")}} element represented by the `HTMLImageElement`. -This is useful when you provide multiple image options using the -{{domxref("HTMLImageElement.sizes", "sizes")}} and/or -{{domxref("HTMLImageElement.srcset")}} properties. `currentSrc` lets you -determine which image from the set of provided images was selected by the browser. +A string indicating the full URL of the image currently selected by the browser to load. If the image uses the {{domxref("HTMLImageElement.srcset", "srcset")}} attribute, `currentSrc` lets you determine which image from the set of provided images was selected by the browser. The property's value is unrelated to whether the image has successfully loaded or not. ## Examples -In this example, two different sizes are provided for an image of a clock. One is 200px -wide and the other is 400px wide. The [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) attribute is -provided to indicate that the image should be drawn at 50% of the document width if the -viewport is under 400px wide; otherwise, the image is drawn at 90% width of the -document. +### Testing which image is loaded -### HTML +In this example, two different sizes are provided for an image of a clock. One is 200px wide and the other is 400px wide. The [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document. + +#### HTML ```html ``` -### JavaScript +#### JavaScript ```js const clockImage = document.querySelector("img"); @@ -54,9 +45,9 @@ p.textContent = clockImage.currentSrc.endsWith("200px.png") document.body.appendChild(p); ``` -### Result +#### Result -{{EmbedLiveSample("Examples", 640, 370)}} +{{EmbedLiveSample("Testing which image is loaded", 640, 370)}} ## Specifications @@ -65,3 +56,8 @@ document.body.appendChild(p); ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLImageElement.src")}} +- {{domxref("HTMLImageElement.srcSet")}} diff --git a/files/en-us/web/api/htmlimageelement/decode/index.md b/files/en-us/web/api/htmlimageelement/decode/index.md index 2fe3b5964e088a2..8175f06255dcce1 100644 --- a/files/en-us/web/api/htmlimageelement/decode/index.md +++ b/files/en-us/web/api/htmlimageelement/decode/index.md @@ -8,16 +8,9 @@ browser-compat: api.HTMLImageElement.decode {{APIRef("HTML DOM")}} -The **`decode()`** -method of the {{domxref("HTMLImageElement")}} interface returns a -{{jsxref("Promise")}} that resolves once the image is decoded and it is safe to append -it to the DOM. +The **`decode()`** method of the {{domxref("HTMLImageElement")}} interface returns a {{jsxref("Promise")}} that resolves once the image is decoded and is safe to be appended to the DOM. -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. +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. ## Syntax @@ -35,19 +28,11 @@ A {{jsxref('Promise')}} that fulfills with `undefined` once the image data is re ### Exceptions -- `EncodingError` - - : A {{domxref('DOMException')}} indicating that an error occurred while decoding the - image. - -## Usage notes - -One potential use case for `decode()`: when loading very large images (for -example, in an online photo album), you can present a low resolution thumbnail image -initially and then replace that image with the full-resolution image by instantiating a -new {{domxref("HTMLImageElement")}}, setting its source to the full-resolution image's -URL, then using `decode()` to get a promise which is resolved once the -full-resolution image is ready for use. At that time, you can then replace the -low-resolution image with the full-resolution one that's now available. +- `EncodingError` {{domxref("DOMException")}} + - : An error occurred while decoding the image. This can happen if: + - The request failed + - The image request changed after calling `decode()` (for example, by changing its `src`) + - The image's data is corrupted ## Examples @@ -70,9 +55,7 @@ img ``` > [!NOTE] -> Without a {{jsxref('Promise')}}-returning method, you -> would add the image to the DOM in a {{domxref("Window/load_event", "load")}} event handler, -> and handle the error in the {{domxref("HTMLElement/error_event", "error")}} event's handler. +> Without a {{jsxref('Promise')}}-returning method, you would add the image to the DOM in a {{domxref("Window/load_event", "load")}} event handler, and handle the error in the {{domxref("HTMLElement/error_event", "error")}} event's handler. ### Avoiding empty images @@ -98,7 +81,7 @@ async function getImage() { } ``` -This is particularly useful if you're dynamically swapping an existing image for a new one, and also prevents unrelated paints outside of this code from being held up while the image is decoding. +This is particularly useful if you're dynamically swapping an existing image for a new one, and also prevents unrelated paints outside of this code from being held up while the image is decoding. For example, in an online photo album, you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new {{domxref("HTMLImageElement")}}, setting its source to the full-resolution image's URL, then using `decode()` to get a promise which is resolved once the full-resolution image is ready for use. At that time, you can then replace the low-resolution image with the full-resolution one that's now available. ## Specifications diff --git a/files/en-us/web/api/htmlimageelement/decoding/index.md b/files/en-us/web/api/htmlimageelement/decoding/index.md index bc9f7e6b5b88efe..6d5310a2d25bf7d 100644 --- a/files/en-us/web/api/htmlimageelement/decoding/index.md +++ b/files/en-us/web/api/htmlimageelement/decoding/index.md @@ -8,29 +8,11 @@ browser-compat: api.HTMLImageElement.decoding {{APIRef("HTML DOM")}} -The **`decoding`** property of the {{domxref("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. +The **`decoding`** property of the {{domxref("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. It reflects the `` element's [`decoding`](/en-US/docs/Web/HTML/Reference/Elements/img#decoding) content attribute. ## Value -A string representing the decoding hint. Possible values are: - -- `"sync"` - - : Decode the image synchronously for atomic presentation with other content. -- `"async"` - - : Decode the image asynchronously and allow other content to be rendered before this completes. -- `"auto"` - - : No preference for the decoding mode; the browser decides what is best for the user. This is the default value, but different browsers have different defaults: - - Chromium defaults to `"sync"`. - - Firefox defaults to `"async"`. - - Safari defaults to `"sync"` except in a small number of circumstances. - -## Usage notes - -The `decoding` property provides a hint to the browser as to whether it should perform image decoding along with other tasks in a single step (`"sync"`), or allow other content to be rendered before this completes (`"async"`). In reality, the differences between the two values are often difficult to perceive and, where there are differences, there is often a better way. - -For images that are inserted into the DOM inside the viewport, `"async"` can result in flashes of unstyled content, while `"sync"` can result in small amounts of [jank](/en-US/docs/Glossary/Jank). Using the {{domxref("HTMLImageElement.decode()")}} method is usually a better way to achieve atomic presentation without holding up other content. - -For images inserted into the DOM outside of the viewport, modern browsers will usually decode them before they are scrolled into view and there will be no noticeable difference using either value. +A string. For the permitted values, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#decoding) reference. ## Examples diff --git a/files/en-us/web/api/htmlimageelement/fetchpriority/index.md b/files/en-us/web/api/htmlimageelement/fetchpriority/index.md index c22b12f370274b5..da1d39c4b167d63 100644 --- a/files/en-us/web/api/htmlimageelement/fetchpriority/index.md +++ b/files/en-us/web/api/htmlimageelement/fetchpriority/index.md @@ -8,31 +8,11 @@ browser-compat: api.HTMLImageElement.fetchPriority {{APIRef("HTML DOM")}} -The **`fetchPriority`** property of the {{domxref("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`](/en-US/docs/Web/HTML/Reference/Elements/img#fetchpriority) attribute of the corresponding {{htmlelement("img")}} element. - -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](/en-US/docs/Web/HTML/Reference/Attributes/rel/preload), 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 {{glossary("Largest Contentful Paint")}} (LCP) they could add [``](/en-US/docs/Web/HTML/Reference/Attributes/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. +The **`fetchPriority`** property of the {{domxref("HTMLImageElement")}} interface represents a hint to the browser indicating how it should prioritize fetching a particular image relative to other images. It reflects the `` element's [`fetchpriority`](/en-US/docs/Web/HTML/Reference/Elements/img#fetchpriority) content attribute. ## Value -A string representing the priority hint. -Possible values are: - -- `high` - - : Fetch the image at a high priority relative to other images with the same internal prioritization. -- `low` - - : Fetch the image at a low priority relative to other images with the same internal prioritization. -- `auto` - - : Don't set a user preference for the fetch priority. - This is the default. - It is used if no value is set or if an invalid value is set. +A string. For the permitted values, see the HTML [`fetchpriority`](/en-US/docs/Web/HTML/Reference/Attributes/fetchpriority) attribute. ## Examples diff --git a/files/en-us/web/api/htmlimageelement/height/index.md b/files/en-us/web/api/htmlimageelement/height/index.md index f373f5929ea8607..e322c07466f374b 100644 --- a/files/en-us/web/api/htmlimageelement/height/index.md +++ b/files/en-us/web/api/htmlimageelement/height/index.md @@ -8,34 +8,22 @@ browser-compat: api.HTMLImageElement.height {{APIRef("HTML DOM")}} -The **`height`** property of the -{{domxref("HTMLImageElement")}} interface indicates the height at which the image is -drawn, in {{Glossary("CSS pixel", "CSS pixels")}} if the image is being drawn or rendered to any -visual medium such as the screen or a printer; otherwise, it's the natural, pixel -density corrected height of the image. +The **`height`** property of the {{domxref("HTMLImageElement")}} interface indicates the height at which the image is drawn, in {{Glossary("CSS pixel", "CSS pixels")}}, if the image is being drawn or rendered to any visual medium such as a screen or printer. Otherwise, it's the natural, pixel density-corrected height of the image. ## Value -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. +An integer value indicating the height of the image. The way the height is defined depends on whether the image is being rendered to a visual medium or not. -- If the image is being rendered to a visual medium such as a screen or printer, the - height is expressed in {{Glossary("CSS pixel", "CSS pixels")}}. -- Otherwise, the image's height is represented using its natural (intrinsic) height, - adjusted for the display density as indicated by - {{domxref("HTMLImageElement.naturalHeight", "naturalHeight")}}. +- If the image is being rendered to a visual medium such as a screen or printer, the height is expressed in {{Glossary("CSS pixel", "CSS pixels")}}. +- Otherwise, the image's height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by {{domxref("HTMLImageElement.naturalHeight", "naturalHeight")}}. ## Examples -In this example, two different sizes are provided for an image of a clock using the -[`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. One is 200px wide and the other is 400px -wide. Further, the [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) attribute is provided to specify the -width at which the image should be drawn given the viewport's width. +In this example, two different sizes are provided for an image of a clock using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. One is 200px wide and the other is 400px wide. Further, the [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) attribute is provided to specify the width at which the image should be drawn given the viewport's width. ### HTML -Specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; -otherwise, it's drawn at 300px. +For viewports up to 400px wide, the image is drawn at a width of 200px. Otherwise, it's drawn at 400px. ```html

Image height: ?px (resize to update)

@@ -51,8 +39,7 @@ otherwise, it's drawn at 300px. ### JavaScript -The JavaScript code looks at the `height` to determine the height of the -image given the width at which it's currently drawn. +The JavaScript code looks at the `height` to determine the height of the image given the width at which it's currently drawn. ```js const clockImage = document.querySelector("img"); @@ -82,6 +69,8 @@ This example may be easier to try out {{LiveSampleLink('Examples', 'in its own w ## See also +- {{domxref("HTMLImageElement.width")}} +- {{domxref("HTMLImageElement.naturalHeight")}} - {{domxref("HTMLCanvasElement.height")}} - {{domxref("HTMLEmbedElement.height")}} - {{domxref("HTMLIFrameElement.height")}} diff --git a/files/en-us/web/api/htmlimageelement/hspace/index.md b/files/en-us/web/api/htmlimageelement/hspace/index.md index 40669985c551a06..19c95c9a9de464c 100644 --- a/files/en-us/web/api/htmlimageelement/hspace/index.md +++ b/files/en-us/web/api/htmlimageelement/hspace/index.md @@ -10,30 +10,13 @@ browser-compat: api.HTMLImageElement.hspace {{APIRef("HTML DOM")}}{{deprecated_header}} -The -_obsolete_ **`hspace`** property of the -{{domxref("HTMLImageElement")}} interface specifies the number of pixels of empty -space to leave empty on the left and right sides of the {{HTMLElement("img")}} element -when laying out the page. +The _deprecated_ **`hspace`** property of the {{domxref("HTMLImageElement")}} interface specifies the number of pixels of empty space to leave empty on the left and right sides of the {{HTMLElement("img")}} element when laying out the page. It reflects the `` element's [`hspace`](/en-US/docs/Web/HTML/Reference/Elements/img#hspace) content attribute. -This property reflects the {{Glossary("HTML")}} [`hspace`](/en-US/docs/Web/HTML/Reference/Elements/img#hspace) -attribute. +You should instead use the CSS property {{cssxref("margin")}} or its longhand properties to establish margin space around an image. ## Value -An integer value specifying the width, in pixels, of the horizontal margin to apply to -the left and right sides of the image. - -## Usage notes - -The value specified for `hspace` is mapped to the {{cssxref("margin-left")}} -and {{cssxref("margin-right")}} properties to specify the width of those margins in -pixels. - -> [!WARNING] -> This property is obsolete. You should instead use the CSS -> {{cssxref("margin")}} property and its longhand forms to establish margins around -> an ``. +An integer value specifying the width, in pixels, of the horizontal margin to apply to the left and right sides of the image. ## Specifications @@ -42,3 +25,8 @@ pixels. ## Browser compatibility {{Compat}} + +## See also + +- {{cssxref("margin")}} +- {{domxref("HTMLImageElement.vspace")}} diff --git a/files/en-us/web/api/htmlimageelement/ismap/index.md b/files/en-us/web/api/htmlimageelement/ismap/index.md index 93a5d8b9a79dafc..bd9fc0316b2df24 100644 --- a/files/en-us/web/api/htmlimageelement/ismap/index.md +++ b/files/en-us/web/api/htmlimageelement/ismap/index.md @@ -8,31 +8,22 @@ browser-compat: api.HTMLImageElement.isMap {{APIRef("HTML DOM")}} -The {{domxref("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 {{HTMLElement("a")}} element. +The **`isMap`** property of the {{domxref("HTMLImageElement")}} interface indicates thatthe image is part of a [server-side map](https://en.wikipedia.org/wiki/Image_map#Server-side). If so, the coordinates where the user clicked on the image are sent to the server. It reflects the `` element's [`ismap`](/en-US/docs/Web/HTML/Reference/Elements/img#ismap) content attribute. This attribute is allowed only if the `` element is a descendant of an {{htmlelement("a")}} element with a valid [`href`](/en-US/docs/Web/HTML/Reference/Elements/a#href) attribute. > [!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](/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image) instead. +> 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](/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image) instead. ## Value -A Boolean value which is `true` if the image is being used for a server-side -image map; otherwise, the value is `false`. +A Boolean value which is `true` if the image is being used for a server-side image map; otherwise, the value is `false`. ## Usage notes -When an image marked as being part of a server-side image map is clicked, the browser -constructs the string "?x,y", where x and y indicate the coordinates at which the -mouse was clicked as offsets from the top-left corner of the image, specified in CSS -pixels. +When an image marked as being part of a server-side image map is clicked, the browser constructs the string "?x,y", where x and y indicate the coordinates at which the mouse was clicked as offsets from the top-left corner of the image, specified in CSS pixels. -The browser then fetches that URL from the server and displays or downloads it -depending on the value of the [`download`](/en-US/docs/Web/HTML/Reference/Elements/a#download) attribute. +The browser then fetches that URL from the server and displays or downloads it depending on the value of the [`download`](/en-US/docs/Web/HTML/Reference/Elements/a#download) attribute. -Unlike server-side image maps, client-side image maps don't cause the -{{HTMLElement("img")}} element to adopt interactive content mode. +Unlike server-side image maps, client-side image maps don't cause the {{HTMLElement("img")}} element to adopt interactive content mode. ## Specifications diff --git a/files/en-us/web/api/htmlimageelement/loading/index.md b/files/en-us/web/api/htmlimageelement/loading/index.md index 48ac556246bee9f..0364c6cf2d70af9 100644 --- a/files/en-us/web/api/htmlimageelement/loading/index.md +++ b/files/en-us/web/api/htmlimageelement/loading/index.md @@ -8,48 +8,11 @@ browser-compat: api.HTMLImageElement.loading {{APIRef("HTML DOM")}} -The {{domxref("HTMLImageElement")}} property **`loading`** is a string whose value provides a hint to the {{Glossary("user agent")}} on how to handle the loading of the image which is currently outside the window's {{Glossary("visual viewport")}}. - -This helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load. +The **`loading`** property of the {{domxref("HTMLImageElement")}} interface provides a hint to the {{Glossary("user agent")}} on how to handle the loading of the image which is currently outside the window's {{Glossary("visual viewport")}}. This helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load. It reflects the `` element's [`loading`](/en-US/docs/Web/HTML/Reference/Elements/img#loading) content attribute. ## Value -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: - -- `eager` - - : The default behavior, `eager` tells the browser to load the image as soon as the `` element is processed. -- `lazy` - - : Tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. - For instance, if the user is scrolling through the document, a value of `lazy` will cause the image to only be loaded shortly before it will appear in the window's {{Glossary("visual viewport")}}. - -## Usage notes - -### JavaScript must be enabled - -Loading is only deferred when JavaScript is enabled. -This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when. - -### Timing of the load event - -The {{domxref("Window.load_event", "load")}} event is fired when the document has been fully processed. -When images are loaded eagerly (which is the default), every image in the document must be fetched before the `load` event can fire. - -By specifying the value `lazy` for `loading`, you prevent the image from delaying the `load` attribute by the amount of time it takes to request, fetch, and process the image. - -Images whose `loading` attribute is set to `lazy` but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the `load` event. -In other words, these images aren't loaded immediately when processing the `` element, but are still loaded as part of the initial page load. -They just don't affect the timing of the `load` event. - -That means that when `load` fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible. - -### Preventing element shift during image lazy loads - -When an image whose loading has been delayed by the `loading` attribute being set to `lazy` is finally loaded, the browser will determine the final size of the {{HTMLElement("img")}} element based on the style and intrinsic size of the image, then reflow the document as needed to update the positions of elements based on any size change made to the element to fit the image. - -To prevent this reflow from occurring, you should explicitly specify the size of the image's presentation using the image element's [`width`](/en-US/docs/Web/HTML/Reference/Elements/img#width) and -[`height`](/en-US/docs/Web/HTML/Reference/Elements/img#height) attributes. -By establishing the intrinsic {{glossary("aspect ratio")}} in this manner, you prevent elements from shifting around while the document loads, which can be disconcerting or off-putting at best and can cause users to click the wrong thing at worst, depending on the exact timing of the deferred loads and reflows. +A string. For the permitted values, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#loading) reference. ## Examples @@ -59,10 +22,10 @@ The `addImageToList()` function shown below adds a photo thumbnail to a list of function addImageToList(url) { const list = document.querySelector("div.photo-list"); - let newItem = document.createElement("div"); + const newItem = document.createElement("div"); newItem.className = "photo-item"; - let newImg = document.createElement("img"); + const newImg = document.createElement("img"); newImg.loading = "lazy"; newImg.width = 320; newImg.height = 240; @@ -85,5 +48,4 @@ function addImageToList(url) { - The {{HTMLElement("img")}} element - [Web performance](/en-US/docs/Learn_web_development/Extensions/Performance) in the MDN Learning Area -- [Lazy loading](/en-US/docs/Web/Performance/Guides/Lazy_loading) in the MDN web - performance guide +- [Lazy loading](/en-US/docs/Web/Performance/Guides/Lazy_loading) in the MDN web performance guide diff --git a/files/en-us/web/api/htmlimageelement/longdesc/index.md b/files/en-us/web/api/htmlimageelement/longdesc/index.md index 3f7694be9728203..2f65c7f5887b129 100644 --- a/files/en-us/web/api/htmlimageelement/longdesc/index.md +++ b/files/en-us/web/api/htmlimageelement/longdesc/index.md @@ -10,28 +10,15 @@ browser-compat: api.HTMLImageElement.longDesc {{APIRef("HTML DOM")}}{{deprecated_header}} -The _deprecated_ property **`longDesc`** on -the {{domxref("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`](/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute. +The _deprecated_ **`longDesc`** property of the {{domxref("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`](/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute. It reflects the `` element's [`longdesc`](/en-US/docs/Web/HTML/Reference/Elements/img#longdesc) content attribute. -## Value - -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's contents. +This attribute is considered obsolete in the [HTML spec](https://html.spec.whatwg.org/multipage/obsolete.html#element-attrdef-img-longdesc). It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby) or [`aria-details`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-details). You can also encapsulate the image within a link using the {{HTMLElement("a")}} element. -For example, if the image is a [PNG](/en-US/docs/Web/Media/Guides/Formats/Image_types#png_portable_network_graphics) 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. +## Value -## Usage notes +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's contents. -This property is _deprecated_ and should no longer be used. Instead of -using `longDesc` to provide a link to a detailed description of an image, -encapsulate the image within a link using the {{HTMLElement("a")}} element. +## Examples Consider the following older HTML: @@ -42,11 +29,9 @@ Consider the following older HTML: longdesc="image-descriptions/taco-tuesday.html" /> ``` -Here, the `longDesc` is used to indicate that the user should be able to -access a detailed description of the image `taco-tuesday.jpg` in the HTML -file `image-descriptions/taco-tuesday.html`. +Here, the `longDesc` is used to indicate that the user should be able to access a detailed description of the image `taco-tuesday.jpg` in the HTML file `image-descriptions/taco-tuesday.html`. -This can be easily converted into modern HTML: +This should be converted into the following HTML: ```html diff --git a/files/en-us/web/api/htmlimageelement/name/index.md b/files/en-us/web/api/htmlimageelement/name/index.md index 9a17ad7dc1698ed..7d7c13e2e74c555 100644 --- a/files/en-us/web/api/htmlimageelement/name/index.md +++ b/files/en-us/web/api/htmlimageelement/name/index.md @@ -10,19 +10,28 @@ browser-compat: api.HTMLImageElement.name {{APIRef("HTML DOM")}}{{deprecated_header}} -The {{domxref("HTMLImageElement")}} -interface's _deprecated_ **`name`** property specifies -a name for the element. This has been replaced by the {{domxref("Element.id", "id")}} -property available on all elements. +The _deprecated_ **`name`** property of the {{domxref("HTMLImageElement")}} interface specifies a name for the element. It reflects the `` element's [`name`](/en-US/docs/Web/HTML/Reference/Elements/img#name) content attribute. It has been replaced by the {{domxref("Element.id", "id")}} property available on all elements, and is kept only for compatibility reasons. ## Value 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`](/en-US/docs/Web/HTML/Reference/Global_attributes/id), you can and should use it instead. +## Examples + +### Setting the name attribute + +```js +const img = new Image(); +img.src = "example.png"; +img.alt = "An example picture"; +img.name = "example-img"; +``` + +Instead of doing this, set the `id` property instead: + +```js +img.id = "example-img"; +``` ## Specifications diff --git a/files/en-us/web/api/htmlimageelement/naturalheight/index.md b/files/en-us/web/api/htmlimageelement/naturalheight/index.md index 352a0dee0a493cd..494d5fb16bec456 100644 --- a/files/en-us/web/api/htmlimageelement/naturalheight/index.md +++ b/files/en-us/web/api/htmlimageelement/naturalheight/index.md @@ -8,37 +8,22 @@ browser-compat: api.HTMLImageElement.naturalHeight {{APIRef("HTML DOM")}} -The {{domxref("HTMLImageElement")}} interface's -**`naturalHeight`** property is a read-only value which -returns the intrinsic (natural), density-corrected height of the image in -{{Glossary("CSS pixel", "CSS pixels")}}. +The read-only **`naturalHeight`** property of the {{domxref("HTMLImageElement")}} interface returns the intrinsic (natural), density-corrected height of the image in {{Glossary("CSS pixel", "CSS pixels")}}. -This is the height the image is if -drawn with nothing constraining its height; if you don'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. +This is the height the image is if drawn with nothing constraining its height; if you neither specify a height for the image nor place the image inside a container that 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](https://crbug.com/1187043#c7). In such cases, `naturalHeight` will consider the height of the image modified -> by such browser interventions as the natural height, and returns this value. +> 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](https://crbug.com/1187043#c7). In such cases, `naturalHeight` will consider the height of the image modified by such browser interventions as the natural height, and returns this value. ## Value -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 {{domxref("HTMLImageElement.height", "height")}}. +An integer value indicating the intrinsic height of the image, in CSS pixels. 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 {{domxref("HTMLImageElement.height", "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. +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. ## Examples -This example displays both the natural, density-adjusted size of an image as well as -its rendered size as altered by the page's CSS and other factors. +This example displays both the natural, density-adjusted size of an image as well as its rendered size as altered by the page's CSS and other factors. ### HTML @@ -52,8 +37,7 @@ its rendered size as altered by the page's CSS and other factors. 

 ```
 
-The HTML features a 400x398 pixel image which is placed inside a
-{{HTMLElement("div")}}.
+The HTML features a 400x398 pixel image which is placed inside a {{HTMLElement("div")}}.
 
 ### CSS
 
@@ -68,9 +52,7 @@ The HTML features a 400x398 pixel image which is placed inside a
 }
 ```
 
-The main thing of note in the CSS above is that the style used for the container the
-image will be drawn in is 200px wide, and the image will be drawn to fill its width
-(100%).
+The main thing of note in the CSS above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%).
 
 ### JavaScript
 
@@ -87,10 +69,7 @@ Displayed size: ${width} x ${height} pixels
 });
 ```
 
-The JavaScript code dumps the natural and as-displayed sizes into the
-{{HTMLElement("pre")}}. This is done in response to
-the images's {{domxref("HTMLElement.load_event", "load")}} event handler, in order to ensure
-that the image is available before attempting to examine its width and height.
+The JavaScript code dumps the natural and as-displayed sizes into the {{HTMLElement("pre")}}. This is done in response to the images's {{domxref("HTMLElement.load_event", "load")}} event handler, in order to ensure that the image is available before attempting to examine its width and height.
 
 ### Result
 
@@ -103,3 +82,8 @@ that the image is available before attempting to examine its width and height.
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("HTMLImageElement.height")}}
+- {{domxref("HTMLImageElement.naturalWidth")}}
diff --git a/files/en-us/web/api/htmlimageelement/naturalwidth/index.md b/files/en-us/web/api/htmlimageelement/naturalwidth/index.md
index 6410f7c57eff58d..ccc5e98f2ae7cb6 100644
--- a/files/en-us/web/api/htmlimageelement/naturalwidth/index.md
+++ b/files/en-us/web/api/htmlimageelement/naturalwidth/index.md
@@ -8,35 +8,18 @@ browser-compat: api.HTMLImageElement.naturalWidth
 
 {{APIRef("HTML DOM")}}
 
-The {{domxref("HTMLImageElement")}} interface's read-only
-**`naturalWidth`** property returns the intrinsic (natural),
-density-corrected width of the image in {{Glossary("CSS pixel", "CSS pixels")}}.
+The read-only **`naturalWidth`** property of the {{domxref("HTMLImageElement")}} interface returns the intrinsic (natural), density-corrected width of the image in {{Glossary("CSS pixel", "CSS pixels")}}.
 
-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 {{domxref("HTMLImageElement.naturalHeight", "naturalHeight")}} method
-returns the natural height of the image.
+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, it will be rendered this wide.
 
 > [!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](https://crbug.com/1187043#c7). In such cases, `naturalWidth` will consider the width of the image modified
-> by such browser interventions as the natural width, and returns this value.
+> 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](https://crbug.com/1187043#c7). In such cases, `naturalWidth` will consider the width of the image modified by such browser interventions as the natural width, and returns this value.
 
 ## Value
 
-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's being presented, unlike the value of
-{{domxref("HTMLImageElement.width", "width")}}.
+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's being presented, unlike {{domxref("HTMLImageElement.width", "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.
+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.
 
 ## Examples
 
@@ -49,3 +32,8 @@ See [`HTMLImageElement.naturalHeight`](/en-US/docs/Web/API/HTMLImageElement/natu
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("HTMLImageElement.width")}}
+- {{domxref("HTMLImageElement.naturalHeight")}}
diff --git a/files/en-us/web/api/htmlimageelement/referrerpolicy/index.md b/files/en-us/web/api/htmlimageelement/referrerpolicy/index.md
index f27a44d88089acc..28d0af56c9ea650 100644
--- a/files/en-us/web/api/htmlimageelement/referrerpolicy/index.md
+++ b/files/en-us/web/api/htmlimageelement/referrerpolicy/index.md
@@ -8,45 +8,11 @@ browser-compat: api.HTMLImageElement.referrerPolicy
 
 {{APIRef("HTML DOM")}}
 
-The
-**`HTMLImageElement.referrerPolicy`**
-property reflects the HTML [`referrerpolicy`](/en-US/docs/Web/HTML/Reference/Elements/img#referrerpolicy) attribute of the
-{{HTMLElement("img")}} element defining which referrer is sent when fetching the
-resource.
+The **`referrerPolicy`** property of the {{domxref("HTMLImageElement")}} interface defining which referrer is sent when fetching the resource. It reflects the `` element's [`referrerpolicy`](/en-US/docs/Web/HTML/Reference/Elements/img#referrerpolicy) content attribute.
 
 ## Value
 
-A string; one of the following:
-
-- `no-referrer`
-  - : The {{HTTPHeader("Referer")}} header will be omitted entirely. No referrer
-    information is sent along with requests.
-- `no-referrer-when-downgrade`
-  - : The URL is sent
-    as a referrer when the protocol security level stays the same (e.g.HTTP→HTTP,
-    HTTPS→HTTPS), but isn't sent to a less secure destination (e.g., HTTPS→HTTP).
-- `origin`
-  - : Only send the origin of the document as the referrer in all cases.
-    The document `https://example.com/page.html` will send the referrer
-    `https://example.com/`.
-- `origin-when-cross-origin`
-  - : Send a full URL when performing a same-origin request, but only send the origin of
-    the document for other cases.
-- `same-origin`
-  - : A referrer will be sent for [same-site origins](/en-US/docs/Web/Security/Same-origin_policy), but
-    cross-origin requests will contain no referrer information.
-- `strict-origin`
-  - : Only send the origin of the document as the referrer when the protocol security
-    level stays the same (e.g., HTTPS→HTTPS), but don't send it to a less secure
-    destination (e.g., HTTPS→HTTP).
-- `strict-origin-when-cross-origin` (default)
-  - : This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the
-    protocol security level stays the same (e.g., HTTPS→HTTPS), and send no header to a
-    less secure destination (e.g., HTTPS→HTTP).
-- `unsafe-url`
-  - : Send a full URL when performing a same-origin or cross-origin request. This policy
-    will leak origins and paths from TLS-protected resources to insecure origins.
-    Carefully consider the impact of this setting.
+A string. For the permitted values, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#referrerpolicy) reference.
 
 ## Examples
 
@@ -69,6 +35,6 @@ div.appendChild(img); // Fetch the image using the origin as the referrer
 
 ## See also
 
-- {{domxref("HTMLAnchorElement.referrerPolicy")}},
-  {{domxref("HTMLAreaElement.referrerPolicy")}}, and
-  {{domxref("HTMLIFrameElement.referrerPolicy")}}.
+- {{domxref("HTMLAnchorElement.referrerPolicy")}}
+- {{domxref("HTMLAreaElement.referrerPolicy")}}
+- {{domxref("HTMLIFrameElement.referrerPolicy")}}
diff --git a/files/en-us/web/api/htmlimageelement/sizes/index.md b/files/en-us/web/api/htmlimageelement/sizes/index.md
index 14122dce3725c1b..c649a6ad3f91389 100644
--- a/files/en-us/web/api/htmlimageelement/sizes/index.md
+++ b/files/en-us/web/api/htmlimageelement/sizes/index.md
@@ -8,42 +8,21 @@ browser-compat: api.HTMLImageElement.sizes
 
 {{APIRef("HTML DOM")}}
 
-The {{domxref("HTMLImageElement")}} property
-**`sizes`** allows you to specify the layout width of the
-[image](/en-US/docs/Web/HTML/Reference/Elements/img) 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.
-
-Each condition is specified using the same conditional format used
-by [media queries](/en-US/docs/Web/CSS/CSS_media_queries).
+The **`sizes`** property of the {{domxref("HTMLImageElement")}} interface allows you to specify the layout width of the [image](/en-US/docs/Web/HTML/Reference/Elements/img) for each of a list of [media queries](/en-US/docs/Web/CSS/CSS_media_queries). 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. It reflects the `` element's [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) content attribute.
 
 ## Value
 
-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 [``](/en-US/docs/Web/HTML/Reference/Elements/img#sizes).
+A string. For more information about the syntax of the `sizes` attribute, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) reference.
 
 ## Examples
 
 ### Selecting an image to fit window width
 
-In this example, a blog-like layout is created, displaying some text and an image
-for which three size points are specified, depending on the width of the window. Three
-versions of the image are also available, with their widths specified. The browser takes
-all of this information and selects an image and width that best meets the specified
-values.
+In this example, a blog-like layout is created, displaying some text and an image for which three size points are specified, depending on the width of the window. Three versions of the image are also available, with their widths specified. The browser takes all of this information and selects an image and width that best meets the specified values.
 
-How exactly the images are used may depend upon the browser and the pixel density
-of the user's display.
+How exactly the images are used may depend upon the browser and the pixel density of the user's display.
 
-Buttons at the bottom of the example let you actually modify the `sizes`
-property slightly, switching the largest of the three widths for the image between 40em
-and 50em.
+Buttons at the bottom of the example let you actually modify the `sizes` property slightly, switching the largest of the three widths for the image between 40em and 50em.
 
 #### HTML
 
@@ -105,9 +84,7 @@ article img {
 
 #### JavaScript
 
-The JavaScript code handles the two buttons that let you toggle the third width option
-between 40em and 50em; this is done by handling the {{domxref("Element.click_event", "click")}}
-event, using the JavaScript string {{jsxref("String.replace", "replace()")}} method to replace the relevant portion of the `sizes` string.
+The JavaScript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the {{domxref("Element.click_event", "click")}} event, using the JavaScript string {{jsxref("String.replace", "replace()")}} method to replace the relevant portion of the `sizes` string.
 
 ```js
 const image = document.querySelector("article img");
@@ -146,3 +123,6 @@ The page is best {{LiveSampleLink('Selecting an image to fit window width', 'vie
 - [HTML images](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images)
 - [Responsive images](/en-US/docs/Web/HTML/Guides/Responsive_images)
 - [Using the `srcset` and `sizes` attributes](/en-US/docs/Web/HTML/Reference/Elements/img#using_the_srcset_and_sizes_attributes)
+- {{domxref("HTMLImageElement.currentSrc")}}
+- {{domxref("HTMLImageElement.src")}}
+- {{domxref("HTMLImageElement.srcset")}}
diff --git a/files/en-us/web/api/htmlimageelement/src/grapefruit-slice-332-332.jpg b/files/en-us/web/api/htmlimageelement/src/grapefruit-slice-332-332.jpg
deleted file mode 100644
index a12e03ea1b43e53..000000000000000
Binary files a/files/en-us/web/api/htmlimageelement/src/grapefruit-slice-332-332.jpg and /dev/null differ
diff --git a/files/en-us/web/api/htmlimageelement/src/index.md b/files/en-us/web/api/htmlimageelement/src/index.md
index 03de7acdc1d2509..ac04cf856a8152c 100644
--- a/files/en-us/web/api/htmlimageelement/src/index.md
+++ b/files/en-us/web/api/htmlimageelement/src/index.md
@@ -8,74 +8,22 @@ browser-compat: api.HTMLImageElement.src
 
 {{APIRef("HTML DOM")}}
 
-The {{domxref("HTMLImageElement")}} property
-**`src`**, which reflects the HTML [`src`](/en-US/docs/Web/HTML/Reference/Elements/img#src) attribute, specifies the image to display in the {{HTMLElement("img")}}
-element.
+The **`src`** property of the {{domxref("HTMLImageElement")}} interface specifies the image to display in the {{HTMLElement("img")}} element. It reflects the `` element's [`src`](/en-US/docs/Web/HTML/Reference/Elements/img#src) content attribute.
 
 ## Value
 
-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`](/en-US/docs/Web/HTML/Reference/Elements/img#src) content attribute, or programmatically by setting the
-element's `src` property.
-
-If you use the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#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:
-
-- as a fallback for browsers that don't support `srcset`.
-- as an equivalent for specifying an image in `srcset` with the size
-  multiplier `1x`; that is, the image specified by `src` is used
-  on low-density screens (such as typical 72 DPI or 96 DPI displays).
-
-Additionally, if you use `src` along with _both_
-{{domxref("HTMLImageElement.sizes", "sizes")}} (or the
-corresponding [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#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't support
-`sizes` and `srcset`; otherwise, it's not used at all.
+A string. For more information about the syntax of the `src` attribute, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#src) reference.
 
 ## Examples
 
-### Specifying a single image
-
-#### HTML
+### Setting the src attribute
 
-```html
-Slices of grapefruit, looking yummy.
+```js
+const img = new Image();
+img.src = "example.png";
+img.alt = "An example picture";
 ```
 
-#### Result
-
-{{EmbedLiveSample("Specifying_a_single_image", 640,200)}}
-
-### Using src with an image set
-
-When using a set of images with the {{domxref("HTMLImageElement.srcset", "srcset")}}
-property, the `src` serves as either a fallback for older browsers, or as the
-`1x` size of the image.
-
-#### HTML
-
-#### Result
-
-### Specifying a fallback for viewport-based selection
-
-When using viewport-bases selection of an image from a `srcset` by also
-specifying the {{domxref("HTMLImageElement.sizes", "sizes")}} property, the
-`src` property serves as the fallback to be used on browsers that don't
-support viewport-based selection. Browsers that _do_ support viewport-based
-selection will ignore `src` in this situation.
-
-#### HTML
-
-#### Result
-
 ## Specifications
 
 {{Specifications}}
@@ -83,3 +31,9 @@ selection will ignore `src` in this situation.
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("HTMLImageElement.currentSrc")}}
+- {{domxref("HTMLImageElement.srcset")}}
+- {{domxref("HTMLImageElement.sizes")}}
diff --git a/files/en-us/web/api/htmlimageelement/srcset/index.md b/files/en-us/web/api/htmlimageelement/srcset/index.md
index ab0c7a4e2f24452..21bafa620108b04 100644
--- a/files/en-us/web/api/htmlimageelement/srcset/index.md
+++ b/files/en-us/web/api/htmlimageelement/srcset/index.md
@@ -8,152 +8,28 @@ browser-compat: api.HTMLImageElement.srcset
 
 {{APIRef("HTML DOM")}}
 
-The {{domxref("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.
+The **`srcset`** property of the {{domxref("HTMLImageElement")}} interface identifies one or more _image candidate strings_, separated using commas (`,`), each specifying image resources to use under given circumstances. 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 {{domxref("HTMLImageElement.src", "src")}} property. It reflects the `` element's [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) content attribute.
 
-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 {{domxref("HTMLImageElement.src", "src")}} property.
-
-The `srcset` property, along with the {{domxref("HTMLImageElement.sizes", "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.
+The `srcset` property, along with the {{domxref("HTMLImageElement.sizes", "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`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute uses width descriptors, the `sizes` attribute must also be present, or the `srcset` itself will be ignored.
 
 ## Value
 
-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
-{{HTMLElement("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:
-
-- To indicate that the image resource specified by the image candidate string should
-  be used when the image is being rendered with a particular width in pixels, provide a
-  **width descriptor** comprised the number giving that width in pixels
-  followed by the lower case letter "w". For example, to provide an image resource to be
-  used when the renderer needs a 450 pixel wide image, use the width descriptor string
-  `450w`. The specified width must be a positive, non-zero, integer, and
-  _must_ match the intrinsic width of the referenced image. When a `srcset` contains
-  "w" descriptors, the browser uses those descriptors together with the
-  {{domxref("HTMLImageElement.sizes", "sizes")}} attribute to pick a resource.
-- Alternatively, you can use a **pixel density descriptor**, which
-  specifies the condition in which the corresponding image resource should be used as
-  the display's pixel density. This is written by stating the pixel density as a
-  positive, non-zero floating-point value followed by the lower-case letter "x". As an
-  example, to state that the corresponding image should be used when the pixel density
-  is double the standard density, you can give the pixel density descriptor
-  `2x` or `2.0x`.
-
-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 "1x".
-
-```plain
-"images/team-photo.jpg, images/team-photo-retina.jpg 2x"
-```
-
-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's `srcset` contains "x" descriptors, browsers also consider
-the URL in the {{domxref("HTMLImageElement.src", "src")}} attribute (if present) as a
-candidate, and assign it a default descriptor of `1x`.
-
-```plain
-"header640.png 640w, header960.png 960w, header1024.png 1024w"
-```
-
-This string provides versions of a header image to use when the {{Glossary("user agent", "user agent's")}}
-renderer needs an image of width 640px, 960px, or 1024px.
-
-Note that if any resource in a `srcset` is described with a "w" descriptor, all
-resources within that `srcset` must also be described with "w" descriptors, and
-the image element's {{domxref("HTMLImageElement.src", "src")}} is not considered
-a candidate.
+A string. For more information about the syntax of the `srcset` attribute, see the HTML [``](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) reference.
 
 ## Examples
 
-### HTML
-
-The HTML below indicates that the default image resource, contained within the
-{{domxref("HTMLImageElement.src", "src")}} attribute should be used for 1x
-displays, and that a 400-pixel version (contained within the `srcset`, and assigned
-a `2x` descriptor) should be used for 2x displays.
-
-```html
-

-  Clock
-

-```
-
-### CSS
-
-The CSS specifies that the image and its surrounding box should be 200 pixels square
-and should have a simple border around it. Also provided is the
-{{cssxref("word-break")}} attribute, using the `break-all` value to tell the
-browser to wrap the string within the width available regardless of where in the string
-the wrap must occur.
-
-```css
-.box {
-  width: 200px;
-  border: 2px solid rgb(150 150 150);
-  padding: 0.5em;
-  word-break: break-all;
-}
-
-.box img {
-  width: 200px;
-}
-```
-
-### JavaScript
-
-The following code uses the image's
-{{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display
-the URL selected by the browser from the `srcset`.
+### Setting the srcset attribute
 
 ```js
-const box = document.querySelector(".box");
-const image = box.querySelector("img");
-
-const newElem = document.createElement("p");
-newElem.textContent = "Image: ";
-newElem.appendChild(document.createElement("code")).textContent =
-  image.currentSrc;
-box.appendChild(newElem);
+const img = new Image();
+img.srcset =
+  "/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 2x, /en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png";
+img.alt = "An example picture";
 ```
 
-### Result
-
-In the displayed output below, the selected URL will correspond with whether your
-display results in selecting the 1x or the 2x version of the image. If you happen to
-have both standard and high density displays, try moving this window between them and
-reloading the page to see the results change.
-
-{{EmbedLiveSample("Examples", 640, 320)}}
-
-For additional examples, see our guide to [responsive images](/en-US/docs/Web/HTML/Guides/Responsive_images).
-
 ## Specifications
 
 {{Specifications}}
@@ -167,3 +43,6 @@ For additional examples, see our guide to [responsive images](/en-US/docs/Web/HT
 - [HTML images](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images)
 - [Responsive images](/en-US/docs/Web/HTML/Guides/Responsive_images)
 - [Image file type and format guide](/en-US/docs/Web/Media/Guides/Formats/Image_types)
+- {{domxref("HTMLImageElement.currentSrc")}}
+- {{domxref("HTMLImageElement.sizes")}}
+- {{domxref("HTMLImageElement.src")}}
diff --git a/files/en-us/web/api/htmlimageelement/usemap/index.md b/files/en-us/web/api/htmlimageelement/usemap/index.md
index a768c8b1f635971..e9ed854aaa09dc5 100644
--- a/files/en-us/web/api/htmlimageelement/usemap/index.md
+++ b/files/en-us/web/api/htmlimageelement/usemap/index.md
@@ -8,25 +8,15 @@ browser-compat: api.HTMLImageElement.useMap
 
 {{APIRef("HTML DOM")}}
 
-The **`useMap`** property on the
-{{domxref("HTMLImageElement")}} interface reflects the value of the
-{{Glossary("HTML")}} [`usemap`](/en-US/docs/Web/HTML/Reference/Elements/img#usemap) attribute, which is a string
-providing the name of the client-side image map to apply to the image.
+The **`useMap`** property of the {{domxref("HTMLImageElement")}} interface providing the name of the client-side image map to apply to the image. It reflects the `` element's [`usemap`](/en-US/docs/Web/HTML/Reference/Elements/img#usemap) content attribute.
 
 ## Value
 
-A string providing the page-local URL (that is, a URL that begins
-with the hash or pound symbol, `#`) of the {{HTMLElement("map")}} element
-which defines the image map to apply to the image.
+A string providing a valid anchor to a {{HTMLElement("map")}} element, formed by prepending the hash character `#` to the map's [`name`](/en-US/docs/Web/HTML/Reference/Elements/map#name) attribute.
 
 You can learn more about client-side image maps in our learning article [Add a hitmap on top of an image](/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image).
 
-## Usage notes
-
-The string value of `useMap` must be a valid anchor for a
-{{HTMLElement("map")}} element. In other words, this string should be the value of the
-appropriate ``'s [`name`](/en-US/docs/Web/HTML/Reference/Elements/map#name) attribute with a
-pound or hash symbol prepended to it.
+## Examples
 
 Consider a `` that looks like this:
 
@@ -41,61 +31,11 @@ Consider a `` that looks like this:
 
 ```
 
-Given the image map named `mainmenu-map`, the image which uses it should
-look something like the following:
+You could set `useMap` like this:
 
-```html
-
-```
-
-For additional examples (including interactive ones), see the articles about the
-{{HTMLElement("map")}} and {{HTMLElement("area")}} elements, as well as the [guide to using image maps](/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image).
-
-## Examples
-
-{{InteractiveExample("HTML Demo: <area>", "tabbed-taller")}}
-
-```html interactive-example
-
-  HTTP
-  HTML
-  JavaScript
-  Web APIs
-  CSS
-
-MDN infographic
-```
-
-```css interactive-example
-img {
-  display: block;
-  margin: 0 auto;
-  width: 260px;
-  height: 260px;
-}
+```js
+const menuBox = document.getElementById("menu-box");
+menuBox.useMap = "#mainmenu-map";
 ```
 
 ## Specifications
@@ -105,3 +45,9 @@ img {
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- [Add a hitmap on top of an image](/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image)
+- {{HTMLElement("map")}}
+- {{HTMLElement("area")}}
diff --git a/files/en-us/web/api/htmlimageelement/vspace/index.md b/files/en-us/web/api/htmlimageelement/vspace/index.md
index 6da884916bf4901..69a08a534c9e6f5 100644
--- a/files/en-us/web/api/htmlimageelement/vspace/index.md
+++ b/files/en-us/web/api/htmlimageelement/vspace/index.md
@@ -10,26 +10,13 @@ browser-compat: api.HTMLImageElement.vspace
 
 {{APIRef("HTML DOM")}}{{deprecated_header}}
 
-The _obsolete_ **`vspace`** property of the
-{{domxref("HTMLImageElement")}} interface specifies the number of pixels of empty space
-to leave empty on the top and bottom of the {{HTMLElement("img")}} element when laying
-out the page.
+The _deprecated_ **`vspace`** property of the {{domxref("HTMLImageElement")}} interface specifies the number of pixels of empty space to leave empty on the top and bottom sides of the {{HTMLElement("img")}} element when laying out the page. It reflects the `` element's [`vspace`](/en-US/docs/Web/HTML/Reference/Elements/img#vspace) content attribute.
 
-## Value
-
-An integer value specifying the height, in pixels, of the vertical margin to apply to
-the top and bottom sides of the image.
-
-## Usage notes
+You should instead use the CSS property {{cssxref("margin")}} or its longhand properties to establish margin space around an image.
 
-The value specified for `vspace` is mapped to the {{cssxref("margin-top")}}
-and {{cssxref("margin-bottom")}} properties to specify the height of those margins in
-pixels.
+## Value
 
-> [!WARNING]
-> This property is obsolete. You should instead use the CSS
-> {{cssxref("margin")}} property and its longhand forms to establish margins around
-> an ``.
+An integer value specifying the height, in pixels, of the vertical margin to apply to the top and bottom sides of the image.
 
 ## Specifications
 
@@ -38,3 +25,8 @@ pixels.
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{cssxref("margin")}}
+- {{domxref("HTMLImageElement.hspace")}}
diff --git a/files/en-us/web/api/htmlimageelement/width/index.md b/files/en-us/web/api/htmlimageelement/width/index.md
index 0c0c827563bcbc8..dd2a6ae8be3b3fa 100644
--- a/files/en-us/web/api/htmlimageelement/width/index.md
+++ b/files/en-us/web/api/htmlimageelement/width/index.md
@@ -8,35 +8,22 @@ browser-compat: api.HTMLImageElement.width
 
 {{APIRef("HTML DOM")}}
 
-The **`width`** property of the
-{{domxref("HTMLImageElement")}} interface indicates the width at which an image is
-drawn in {{Glossary("CSS pixel", "CSS pixels")}} if it's being drawn or rendered to
-any visual medium such as a screen or printer. Otherwise, it's the natural, pixel
-density-corrected width of the image.
+The **`width`** property of the {{domxref("HTMLImageElement")}} interface indicates the width at which the image is drawn, in {{Glossary("CSS pixel", "CSS pixels")}}, if the image is being drawn or rendered to any visual medium such as a screen or printer. Otherwise, it's the natural, pixel density-corrected width of the image.
 
 ## Value
 
-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:
+An integer value indicating the width of the image. The way the width is defined depends on whether the image is being rendered to a visual medium or not.
 
-- If the image is being rendered to a visual medium, the width is expressed in
-  {{Glossary("CSS pixel", "CSS pixels")}}.
-- If the image is not being rendered to a visual medium, its width is represented
-  using the image's natural (intrinsic) width, adjusted for the display density as
-  indicated by {{domxref("HTMLImageElement.naturalWidth", "naturalWidth")}}.
+- If the image is being rendered to a visual medium such as a screen or printer, the width is expressed in {{Glossary("CSS pixel", "CSS pixels")}}.
+- Otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by {{domxref("HTMLImageElement.naturalWidth", "naturalWidth")}}.
 
 ## Examples
 
-In this example, two different sizes are provided for an image of a clock using the
-[`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. One is 200px wide and the other is 400px
-wide. The [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) attribute is used to specify the width at
-which the image should be drawn given the viewport's width.
+In this example, two different sizes are provided for an image of a clock using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. One is 200px wide and the other is 400px wide. Further, the [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) attribute is provided to specify the width at which the image should be drawn given the viewport's width.
 
 ### HTML
 
-For viewports up to 400px wide, the image is drawn at a width of 200px. Otherwise, it's
-drawn at 400px.
+For viewports up to 400px wide, the image is drawn at a width of 200px. Otherwise, it's drawn at 400px.
 
 ```html
 
Image width: ?px (resize to update)

@@ -52,9 +39,7 @@ drawn at 400px.
 
 ### JavaScript
 
-JavaScript looks at the `width` property to determine the width of the image
-at the moment. This is performed in the window's {{domxref("Window.load_event", "load")}} and {{domxref("Window.resize_event", "resize")}} event handlers so the most
-current width information is always available.
+The JavaScript code looks at the `height` to determine the height of the image given the width at which it's currently drawn.
 
 ```js
 const clockImage = document.querySelector("img");
@@ -84,6 +69,8 @@ This example may be easier to try out {{LiveSampleLink('Examples', 'in its own w
 
 ## See also
 
+- {{domxref("HTMLImageElement.height")}}
+- {{domxref("HTMLImageElement.naturalWidth")}}
 - {{domxref("HTMLCanvasElement.width")}}
 - {{domxref("HTMLEmbedElement.width")}}
 - {{domxref("HTMLIFrameElement.width")}}
diff --git a/files/en-us/web/api/htmlimageelement/x/index.md b/files/en-us/web/api/htmlimageelement/x/index.md
index 8c9cbdd19496857..82cac0df30d1ff5 100644
--- a/files/en-us/web/api/htmlimageelement/x/index.md
+++ b/files/en-us/web/api/htmlimageelement/x/index.md
@@ -8,49 +8,25 @@ browser-compat: api.HTMLImageElement.x
 
 {{APIRef("HTML DOM")}}
 
-The read-only {{domxref("HTMLImageElement")}} property
-**`x`** indicates the x-coordinate of the
-{{HTMLElement("img")}} element's left border edge relative to the root element's
-origin.
-
-The `x` and {{domxref("HTMLImageElement.y", "y")}} properties are only valid
-for an image if its {{cssxref("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 {{HTMLElement("col")}}
-or {{HTMLElement("colgroup")}}.
+The read-only **`x`** property of the {{domxref("HTMLImageElement")}} interface indicates the x-coordinate of the {{HTMLElement("img")}} element's left border edge relative to the root element's origin.
+
+The `x` and {{domxref("HTMLImageElement.y", "y")}} properties are only valid for an image if its {{cssxref("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 {{HTMLElement("col")}} or {{HTMLElement("colgroup")}}.
 
 ## Value
 
-An integer value indicating the distance in pixels from the left edge of the element's
-nearest root element and the left edge of the {{HTMLElement("img")}} element's border
-box. The nearest root element is the outermost {{HTMLElement("html")}} element that
-contains the image. If the image is in an {{HTMLElement("iframe")}}, its `x`
-is relative to that frame.
+An integer value indicating the distance in pixels from the left edge of the element's nearest root element and the left edge of the {{HTMLElement("img")}} element's border box. The nearest root element is the outermost {{HTMLElement("html")}} element that contains the image. If the image is in an {{HTMLElement("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.
+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](boxmodel-3.png)
 
-> [!NOTE]
-> The `x` property is only valid if the computed
-> value of the image's {{cssxref("display")}} property is either
-> `table-column` or `table-column-group`; in other words, either
-> of those are set directly on the {{HTMLElement("img")}} or they're inherited from a
-> containing element or by being located within a column described by either
-> {{HTMLElement("col")}} or {{HTMLElement("colgroup")}}.
-
 ## Example
 
-The example below demonstrates the use of the `HTMLImageElement` properties
-`x` and {{domxref("HTMLImageElement.y", "y")}}.
+The example below demonstrates the use of the `HTMLImageElement` properties `x` and {{domxref("HTMLImageElement.y", "y")}}.
 
 ### HTML
 
-In this example, we see a table showing information about users of a website,
-including their user ID, their full name, and their avatar image.
+In this example, we see a table showing information about users of a website, including their user ID, their full name, and their avatar image.
 
 ```html
 
@@ -76,8 +52,7 @@ including their user ID, their full name, and their avatar image.
 
 ### JavaScript
 
-The JavaScript code that fetches the image from the table and looks up its
-`x` and `y` values is below.
+The JavaScript code that fetches the image from the table and looks up its `x` and `y` values is below.
 
 ```js
 const logBox = document.querySelector("pre");
@@ -94,19 +69,11 @@ log(`Image's global X: ${image.x}`);
 log(`Image's global Y: ${image.y}`);
 ```
 
-This uses the {{HTMLElement("table")}}'s {{domxref("HTMLTableElement.rows", "rows")}}
-property to get a list of the rows in the table, from which it looks up row 1 (which,
-being a zero-based index, means the second row from the top). Then it looks at that
-{{HTMLElement("tr")}} (table row) element's {{domxref("HTMLTableRowElement.cells", "cells")}}
-property to get a list of the cells in that row. The third cell is taken from
-that row (once again, specifying 2 as the zero-based offset).
+This uses the {{HTMLElement("table")}}'s {{domxref("HTMLTableElement.rows", "rows")}} property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top). Then it looks at that {{HTMLElement("tr")}} (table row) element's {{domxref("HTMLTableRowElement.cells", "cells")}} property to get a list of the cells in that row. The third cell is taken from that row (once again, specifying 2 as the zero-based offset).
 
-From there, we can get the `` element itself from the cell by
-calling {{domxref("Element.querySelector", "querySelector()")}} on the
-{{domxref("HTMLTableCellElement")}} representing that cell.
+From there, we can get the `` element itself from the cell by calling {{domxref("Element.querySelector", "querySelector()")}} on the {{domxref("HTMLTableCellElement")}} representing that cell.
 
-Finally, we can look up and display the values of the `HTMLImageElement`'s
-`x` and `y` properties.
+Finally, we can look up and display the values of the `HTMLImageElement`'s `x` and `y` properties.
 
 ### CSS
 
@@ -147,3 +114,10 @@ The resulting table looks like this:
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{cssxref("display")}}
+- {{HTMLElement("col")}}
+- {{HTMLElement("colgroup")}}
+- {{domxref("HTMLImageElement.y")}}
diff --git a/files/en-us/web/api/htmlimageelement/y/index.md b/files/en-us/web/api/htmlimageelement/y/index.md
index 156801495c0c603..d07e2a3ec1f3a7e 100644
--- a/files/en-us/web/api/htmlimageelement/y/index.md
+++ b/files/en-us/web/api/htmlimageelement/y/index.md
@@ -8,40 +8,18 @@ browser-compat: api.HTMLImageElement.y
 
 {{APIRef("HTML DOM")}}
 
-The read-only {{domxref("HTMLImageElement")}} property
-**`y`** indicates the y-coordinate of the
-{{HTMLElement("img")}} element's top border edge relative to the root element's
-origin.
-
-The {{domxref("HTMLImageElement.x", "x")}} and `y` properties are only valid
-for an image if its {{cssxref("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
-{{HTMLElement("col")}} or {{HTMLElement("colgroup")}}.
+The read-only **`y`** property of the {{domxref("HTMLImageElement")}} interface indicates the y-coordinate of the {{HTMLElement("img")}} element's top border edge relative to the root element's origin.
+
+The {{domxref("HTMLImageElement.x", "x")}} and `y` properties are only valid for an image if its {{cssxref("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 {{HTMLElement("col")}} or {{HTMLElement("colgroup")}}.
 
 ## Value
 
-An integer value indicating the distance in pixels from the top edge of the element's
-nearest root element to the top edge of the {{HTMLElement("img")}} element's border
-box. The nearest root element is the outermost {{HTMLElement("html")}} element that
-contains the image. If the image is in an {{HTMLElement("iframe")}}, its
-`y` is relative to that frame.
+An integer value indicating the distance in pixels from the top edge of the element's nearest root element to the top edge of the {{HTMLElement("img")}} element's border box. The nearest root element is the outermost {{HTMLElement("html")}} element that contains the image. If the image is in an {{HTMLElement("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.
+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](boxmodel-3.png)
 
-> [!NOTE]
-> The `y` property is only valid if the computed
-> value of the image's {{cssxref("display")}} property is either
-> `table-column` or `table-column-group`; in other words,
-> either of those are set directly on the {{HTMLElement("img")}} or they're
-> inherited from a containing element or by being located within a column described
-> by either {{HTMLElement("col")}} or {{HTMLElement("colgroup")}}.
-
 ## Example
 
 See [`HTMLImageElement.x`](/en-US/docs/Web/API/HTMLImageElement/x#example) for example code that demonstrates the use of the `HTMLImageElement.y` (and `HTMLImageElement.x`).
@@ -53,3 +31,10 @@ See [`HTMLImageElement.x`](/en-US/docs/Web/API/HTMLImageElement/x#example) for e
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{cssxref("display")}}
+- {{HTMLElement("col")}}
+- {{HTMLElement("colgroup")}}
+- {{domxref("HTMLImageElement.x")}}
diff --git a/files/en-us/web/api/htmllinkelement/fetchpriority/index.md b/files/en-us/web/api/htmllinkelement/fetchpriority/index.md
index a35048682d3fb13..2c46f5bf2768891 100644
--- a/files/en-us/web/api/htmllinkelement/fetchpriority/index.md
+++ b/files/en-us/web/api/htmllinkelement/fetchpriority/index.md
@@ -9,30 +9,11 @@ browser-compat: api.HTMLLinkElement.fetchPriority
 {{APIRef("HTML DOM")}}
 
 The **`fetchPriority`** property of the {{domxref("HTMLLinkElement")}} interface represents a hint to the browser indicating how it should prioritize fetching a particular resource relative to other resources of the same type.
-It reflects the [`fetchpriority`](/en-US/docs/Web/HTML/Reference/Elements/link#fetchpriority) attribute of the corresponding {{htmlelement("link")}} element.
-
-The property allows a developer to signal that fetching a particular resource early in the loading process has more or less impact on user experience than a browser can reasonably infer when assigning an internal priority, in particular when preloading resources.
-This in turn allows the browser to increase or decrease the priority, and potentially load the resource 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](/en-US/docs/Web/HTML/Reference/Attributes/rel/preload), allowing a developer to boost the priority of a resource ahead of less-impactful resources that are by default preloaded with a higher priority.
-For example, if a particular image significantly contributes to the website's {{glossary("Largest Contentful Paint")}} (LCP) it might be set to be preloaded and with a high fetch priority.
-
-Note that both the internal priority of any fetch operation, and the impact of `fetchPriority` on the priority, are entirely browser dependent.
+It reflects the `` element's [`fetchpriority`](/en-US/docs/Web/HTML/Reference/Elements/link#fetchpriority) content attribute.
 
 ## Value
 
-A string representing the priority hint.
-Possible values are:
-
-- `high`
-  - : Fetch the resource at a high priority relative to other resources of the same type and internal prioritization.
-- `low`
-  - : Fetch the resource at a low priority relative to other resources of the same type and internal prioritization.
-- `auto`
-  - : Don't set a preference for the fetch priority.
-    This is the default.
-    It is used if no value is set or if an invalid value is set.
+A string. For the permitted values, see the HTML [`fetchpriority`](/en-US/docs/Web/HTML/Reference/Attributes/fetchpriority) attribute.
 
 ## Examples
 
diff --git a/files/en-us/web/api/htmlscriptelement/fetchpriority/index.md b/files/en-us/web/api/htmlscriptelement/fetchpriority/index.md
index c5fc8c0b7de82fb..ffbc7733a5c80ce 100644
--- a/files/en-us/web/api/htmlscriptelement/fetchpriority/index.md
+++ b/files/en-us/web/api/htmlscriptelement/fetchpriority/index.md
@@ -9,29 +9,11 @@ browser-compat: api.HTMLScriptElement.fetchPriority
 {{APIRef("HTML DOM")}}
 
 The **`fetchPriority`** property of the {{domxref("HTMLScriptElement")}} interface represents a hint to the browser indicating how it should prioritize fetching an external script relative to other external scripts.
-It reflects the [`fetchpriority`](/en-US/docs/Web/HTML/Reference/Elements/script#fetchpriority) attribute of the {{HTMLElement("script")}} element.
-
-The property allows a developer to signal that fetching a particular script early or late 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 script earlier or later than it would otherwise.
-The property should be used sparingly, as excessive or incorrect prioritization can degrade performance.
-
-The fetch priority allows you to decrease the priority of late-body scripts, or to increase the priority of `async` scripts without having to use [preloading](/en-US/docs/Web/HTML/Reference/Attributes/rel/preload).
-When early loading of a script is important, the priority can be used to complement preloading, boosting the priority ahead of less-impactful resources that have a higher default priority.
-
-Note that both the internal priority of any fetch operation, and the impact of `fetchPriority` on the priority, are entirely browser dependent.
+It reflects the `