<img>: ็ปๅๅใ่พผใฟ่ฆ็ด
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itโs been available across browsers since โจ2015ๅนด7ๆโฉ.
* Some parts of this feature may have varying levels of support.
<img> ใฏ HTML ใฎ่ฆ็ด ใงใๆๆธใซ็ปๅใๅใ่พผใฟใพใใ
่ฉฆใใฆใฟใพใใใ
<img
class="fit-picture"
src="/shared-assets/images/examples/grapefruit-slice.jpg"
alt="Grapefruit slice atop a pile of other slices" />
.fit-picture {
width: 250px;
}
ไธ่จใฎไพใงใฏใ <img> ่ฆ็ด ใฎไฝฟใๆนใ็คบใใฆใใพใใ
srcๅฑๆงใฏๅฟ ้ ใงใๅใ่พผใฟใใ็ปๅใธใฎใในใๅ ฅใใพใใaltๅฑๆงใฏใใใฎ็ปๅใฎใใญในใใซใใไปฃๆฟๆ ๅ ฑใไฟๆใใพใใใใใฏๅฟ ้ ใงใใใใขใฏใปใทใใชใใฃใซ้ๅธธใซๅฝน็ซใคใใฎใงใใในใฏใชใผใณใชใผใใผใฏใใใฎๅฑๆงๅคใใฆใผใถใผใซ่ชญใฟไธใใใฎใงใ็ปๅใฎๆๅณใๅใใใพใใใพใใใใใใฏใผใฏใจใฉใผใใณใณใใณใใฎใใญใใฏใใชใณใฏๅใ็ญใฎ็็ฑใง็ปๅใ่ชญใฟ่พผใใชใใฃใๅ ดๅใซใไปฃๆฟใใญในใใ่กจ็คบใใใพใใ
ไปใซใใๆงใ ใช็ฎ็ใงๆๅฎใงใใๅฑๆงใใใใใใใใพใใ
- ใปใญใฅใชใใฃใจใใฉใคใใทใผใฎใใใฎใชใใกใฉใผ/CORS ๅถๅพกใ
crossoriginใใใณreferrerpolicyใๅ็ งใใฆใใ ใใใ widthใจheightใฎไธกๆนใไฝฟ็จใใฆ็ปๅใฎๅบๆใฎๅฏธๆณใ่จญๅฎใใใจใ็ปๅใ่ชญใฟ่พผใๅใซๅ ดๆใ็ขบไฟใใใณใณใใณใใฎใฌใคใขใฆใใ็งปๅใใใใจใ้ฒใใใจใใงใใพใใsizesใใใณsrcsetใไฝฟ็จใใใฌในใใณใทใ็ปๅใฎใใณใ (<picture>่ฆ็ด ใจใฌในใใณใทใ็ปๅใฎใใฅใผใใชใขใซใใ่ฆงใใ ใใ)ใ
ๅฏพๅฟใใฆใใ็ปๅๅฝขๅผ
HTML ๆจๆบใงใฏใๅฏพๅฟใใ็ปๅๅฝขๅผใๆๅฎใใฆใใชใใฎใงใใฆใผใถใผใจใผใธใงใณใใซใใฃใฆๅฏพๅฟใใ็ปๅๅฝขๅผใฏ็ฐใชใใพใใ
ใกใข: ็ปๅใใกใคใซใฎ็จฎ้กใจๅฝขๅผใฌใคใ ใซใฏใ็ปๅใใกใคใซใจใฆใงใใใฉใฆใถใผใฎๅฏพๅฟใซ้ขใใๅ ๆฌ็ใชๆ ๅ ฑใใใใพใใ ใใฎ็ฏใฏๆฆ่ฆใฎใฟใงใใ
ใฆใงใใงๆใใใไฝฟใใใ็ปๅใใกใคใซๅฝขๅผใฏใไปฅไธใฎ้ใใงใใ
- APNG (Animated Portable Network Graphics) โ ๅฏ้ๆงใฎใใใขใใกใผใทใงใณใทใผใฑใณในใซ้ฉใใฆใใพใ๏ผGIF ใฏใใใฉใผใใณในใๅฃใ๏ผ
- AVIF (AV1 Image File Format) โ ้ซใๆง่ฝใซใใใ็ปๅใจใขใใกใผใทใงใณใฎไธกๆนใซ้ฉใใฆใใพใใ
- GIF (Graphics Interchange Format) โ ใทใณใใซใช็ปๅใใขใใกใผใทใงใณใซ้ฉใใฆใใพใใ
- JPEG (Joint Photographic Expert Group image) โ ้ๆญข็ปใฎ้ๅฏ้ๅง็ธฎใซ้ฉใใฆใใพใ๏ผ็พๅจๆใๆฎๅใใฆใใพใ๏ผใ
- PNG (Portable Network Graphics) โ ้ๆญข็ปใฎๅฏ้ๅง็ธฎใซ้ฉใใฆใใพใ๏ผJPEG ใใ่ฅๅนฒ็ป่ณชใ่ฏใ๏ผใ
- SVG (Scalable Vector Graphics) โ ใใฏใฟใผ็ปๅๅฝขๅผใ็ฐใชใใตใคใบใงใๆญฃ็ขบใซๆ็ปใใๅฟ ่ฆใใใ็ปๅใซไฝฟ็จใใพใใ
- WebP (Web Picture format) โ ็ปๅใจใขใใกใผใทใงใณใฎไธกๆนใซๅชใใ้ธๆใงใใ
WebP ใ AVIF ใชใฉใฏใPNGใJPEGใGIF ใใใฏใใใซๆง่ฝใ่ฏใใ้ๆญข็ปใจๅ็ปใฎไธกๆนใงไฝฟใใใฎใงใใใใใใพใใ
SVG ใฏใ็ฐใชใใตใคใบใงใๆญฃ็ขบใซๆ็ปใใๅฟ ่ฆใใใ็ปๅใซๆจๅฅจใใใๅฝขๅผใงใใใใจใซๅคใใใฏใใใพใใใ
็ปๅ่ชญใฟ่พผใฟใจใฉใผ
็ปๅใฎ่ชญใฟ่พผใฟใพใใฏๆ็ปใฎ้ใซใจใฉใผใ็บ็ใใๅ ดๅใงใใใค onerror ใคใใณใใใณใใฉใผใ error ใคใใณใใๆฑใใใ่จญๅฎใใใฆใใๅ ดๅใฏใใคใใณใใใณใใฉใผใๅผใณๅบใใใพใใใใใฏไพใใฐๆฌกใฎใใใซใๆงใ
ใช็ถๆณใง็บ็ใใพใใ
srcๅฑๆงใ็ฉบ ("") ใพใใฏnullใงใใใ- ๆๅฎใใใ
srcใฎ URL ใ็พๅจใฆใผใถใผใใใใใผใธใฎ URL ใจๅใใงใใใ - ๆๅฎใใใ็ปๅใไฝใใใฎ็็ฑใง่ชญใฟ่พผใฟใๅฆจๅฎณใใใไธญๆญขใใใใ
- ๆๅฎใใใ็ปๅใฎใกใฟใใผใฟใใๅฏธๆณใๅใๅใใใจใใงใใชใใชใฉใฎ็็ฑใง่ชญใฟ่พผใฟใไธญๆญขใใใใใค
<img>่ฆ็ด ใฎๅฑๆงใซๅฏธๆณใๆๅฎใใใฆใใชใใฃใๅ ดๅใ - ๆๅฎใใใ็ปๅใใใฆใผใถใผใจใผใธใงใณใใๅฏพๅฟใใฆใใๅฝขๅผใงใฏใชใๅ ดๅใ
ๅฑๆง
ใใฎ่ฆ็ด ใซใฏใฐใญใผใใซๅฑๆงใใใใพใใ
alt-
ใใผใธๅ ใฎ็ปๅใ็ฝฎใๆใใใใจใใงใใใใญในใใๅฎ็พฉใใพใใ
ใกใข: ใใฉใฆใถใผใฏๅธธใซ็ปๅใ่กจ็คบใใใใใงใฏใใใพใใใใใฉใฆใถใผใ็ปๅใ่กจ็คบใใชใ็ถๆณใฏใใใคใใใใใพใใ
- ่ฆ่ฆใใฉใฆใถใผไปฅๅคใฎใใฉใฆใถใผ๏ผ่ฆ่ฆ้็ข่ ๅใใฎใใฎใๅซใ๏ผใง้ฒ่ฆงใใใๅ ดๅ
- ใฆใผใถใผใ็ปๅใ้่กจ็คบใซ่จญๅฎใใฆใใๅ ดๅ๏ผๅธฏๅใฎ็ฏ็ดใใใฉใคใใทใผไธใฎ็็ฑ๏ผ
- ็ปๅใ็กๅนใงใใฃใใๆชๅฏพๅฟใฎ็ปๅๅฝขๅผใงใใฃใใใใๅ ดๅ
ใใฎใใใชๅ ดๅใใใฉใฆใถใผใฏใ็ปๅใใใฎ่ฆ็ด ใฎ
altๅฑๆงใงๅฎ็พฉใใใๆๅญๅใซ็ฝฎใๆใใพใใใใฎใใใช็็ฑใใใaltใซใฏๅฏ่ฝใช้ใๅฝนใซ็ซใคๅคใๆๅฎใใในใใงใใใใฎๅฑๆงใซ็ฉบๆๅญๅใ่จญๅฎใใใจ (
alt="")ใใใฎ็ปๅใใณใณใใณใใซใใใฆ้่ฆใช็ฎๆใงใฏใชใใใจใ็คบใใ่ฆ่ฆใใฉใฆใถใผใงใฏใชใๅ ดๅใฏใฌใณใใชใณใฐใ็็ฅใใใใจใใใใพใใ่ฆ่ฆใใฉใฆใถใผใงใฏใaltๅฑๆงใ็ฉบๆฌใงใ็ปๅใฎ่กจ็คบใซๅคฑๆใใๅ ดๅใฏใๅฃใใ็ปๅใฎใขใคใณใณใฎ่กจ็คบใ็็ฅใใใๅ ดๅใใใใพใใใใฎๅฑๆงใฏ็ปๅใใใญในใใซใณใใผ๏ผใใผในใใใๅ ดๅใใใชใณใฏใใใ็ปๅใใใใฏใใผใฏใซไฟๅญใใใจใใซใไฝฟ็จใใใพใใ
attributionsrcExperimental-
ใใฉใฆใถใผใซ็ปๅใชใฏใจในใใจใจใใซ
Attribution-Reporting-Eligibleใใใใผใ้ไฟกใใใใใซๆๅฎใใพใใใตใผใใผๅดใงใฏใใใฎๆฉ่ฝใไฝฟ็จใใฆใ
Attribution-Reporting-Register-SourceใพใใฏAttribution-Reporting-Register-Triggerใใใใผใใฌในใใณในใง้ไฟกใใใใใใ็ปๅใใผในใฎๅธฐๅฑใฝใผในใพใใฏๅธฐๅฑใใชใฌใผใ็ป้ฒใใพใใใฉใฎใฌในใใณในใใใใผใ้ใ่ฟใในใใใฏใ็ป้ฒใใใชใฌใผใใAttribution-Reporting-Eligibleใใใใผใฎๅคใซใใฃใฆ็ฐใชใใพใใใใฉใฆใถใผใ็ปๅใใกใคใซใๅซใใฌในใใณในใๅไฟกใใใจใๅฏพๅฟใใใฝใผในใพใใฏใใชใฌใผใคใใณใใใชใใซใชใใพใใ
ใกใข: ่ฉณใใใฏๅธฐๅฑใฌใใผใ API ใๅ็ งใใฆใใ ใใใ
ใใฎๅฑๆงใซใฏใ่จญๅฎใงใใใใผใธใงใณใ 2 ใคใใใพใใ
- ่ซ็ๅฑๆงใใใชใใก
attributionsrcๅใฎใฟใใใใฏใAttribution-Reporting-Eligibleใใใใผใsrcๅฑๆงใๆใ็คบใใฎใจๅใใตใผใใผใซ้ไฟกใใใใใจใๆๅฎใใพใใใใใฏใๅธฐๅฑๅ ใใใชใฌใผ็ป้ฒใๅใใตใผใใผใงๅฆ็ใใๅ ดๅใซ้ฉใใฆใใพใใๅธฐๅฑใใชใฌใผใ็ป้ฒใใๅ ดๅใใใฎใใญใใใฃใฏไปปๆใงใใใ็็ฅใใๅ ดๅใฏ่ซ็ๅคใไฝฟ็จใใใพใใ - 1 ใคไปฅไธใฎ URL ใๅซใๅคใไพใใฐๆฌกใฎใใใชใใฎใงใใ
html<img src="image-file.png" alt="My image file description" attributionsrc="https://a.example/register-source https://b.example/register-source" />ใใใฏใใชใฏใจในใใใใใชใฝใผในใ็ฎก็ไธใฎใตใผใใผใซใชใๅ ดๅใใๅฅใฎใตใผใใผใงใฎๅธฐๅฑๅ ใฎ็ป้ฒใๅฆ็ใใใๅ ดๅใซไพฟๅฉใงใใใใฎๅ ดๅใ
attributionSrcใฎๅคใจใใฆ1ใคใพใใฏ่คๆฐใฎURLใๆๅฎใใใใจใใงใใพใใใชใฝใผในใธใฎใชใฏใจในใใ็บ็ใใใจใAttribution-Reporting-Eligibleใใใใผใใใชใฝใผในใฎใชใชใธใณใซๅ ใใฆใattributionSrcใงๆๅฎใใใ URL ใซ้ไฟกใใใพใใใใใใฎ URL ใฏใ็ป้ฒใๅฎไบใใใใใซใAttribution-Reporting-Register-SourceใพใใฏAttribution-Reporting-Register-Triggerใใใใผใ้ฉๅใซ่ฟใใใจใใงใใพใใใกใข: ่คๆฐใฎ URL ใๆๅฎใใใจใๅใๆฉ่ฝใซ่คๆฐใฎๅธฐๅฑๅ ใ็ป้ฒใใใใจใใงใใพใใไพใใฐใๆๅใๆธฌๅฎใใใใจใใฆใใ็ฐใชใใญใฃใณใใผใณใใใใ็ฐใชใใใผใฟใซใคใใฆ็ฐใชใใฌใใผใใ็ๆใใๅฟ ่ฆใใใๅ ดๅใชใฉใงใใ
- ่ซ็ๅฑๆงใใใชใใก
crossorigin-
็ปๅใๅๅพใใ้ใซ CORS ใไฝฟ็จใใชใใใฐใชใใชใใใฉใใใ็คบใใพใใ CORS ใชใฏใจในใใใ่ฟใใใCORS ใๆๅนใช็ปๅใฏใ
<canvas>่ฆ็ด ใงใๆฑๆใใใใใใจใชใๅๅฉ็จใใใใจใใงใใพใใcrossoriginๅฑๆงใๆๅฎใใใฆใใชใๅ ดๅใฏใ (Originใชใฏใจในใใใใใผใใชใ) CORS ไปฅๅคใฎใชใฏใจในใใ้ไฟกใใใใใฉใฆใถใผใฏ็ปๅใๆฑๆใใใใใฎใจใใฆใใผใฏใใใใฎ็ปๅใใผใฟใธใฎใขใฏใปในใๅถ้ใใฆใ<canvas>่ฆ็ด ใงใฎไฝฟ็จใ้ฒใใพใใcrossoriginๅฑๆงใๆๅฎใใใฆใใๅ ดๅใฏใ(Originใชใฏใจในใใใใใผใไผดใ) CORS ใชใฏใจในใใ้ไฟกใใใพใใใใใใใตใผใใผใใชใชใธใณใฎใตใคใใซใใ็ปๅใใผใฟใธใฎใชใชใธใณ้ใขใฏใปในใ่จฑๅฏใใใใจใใชใใใคใณใใชใๅ ดๅ (Access-Control-Allow-Originใฌในใใณในใใใใผใไธๅ้ไฟกใใใฆใใชใใใ้ไฟกใใใAccess-Control-Allow-Originใฌในใใณในใใใใผใซใตใคใใฎใชใชใธใณใๅซใพใใฆใใชใๅ ดๅ)ใใใฉใฆใถใผใฏ็ปๅใ่ชญใฟ่พผใใใจใใใญใใฏใใ้็บใใผใซใฎใณใณใฝใผใซใซ CORS ใจใฉใผใ่จ้ฒใใพใใ่จฑๅฏใใใฆใใๅค:
anonymous-
CORS ใชใฏใจในใใฏใ่ณๆ ผๆ ๅ ฑใ็็ฅใใฆ (ใคใพใใใฏใใญใผใX.509 ่จผๆๆธใ
Authorizationใชใฏใจในใใใใใผใชใใง) ้ไฟกใใใพใใ use-credentials-
CORS ใชใฏใจในใใฏใ่ณๆ ผๆ ๅ ฑ (ใคใพใใCookieใX.509 ่จผๆๆธใ
Authorizationใชใฏใจในใใใใใผ) ใๅซใพใใ็ถๆ ใง้ไฟกใใใพใใใตใผใใผใๅ ใฎใตใคใใจใฎ่ณๆ ผๆ ๅ ฑใฎๅ ฑๆใ้ธๆใใ (Access-Control-Allow-Credentials: trueใฌในใใณในใใใใผใ้ใ่ฟใ) ใใจใใใชใใฃใๅ ดๅใใใฉใฆใถใผใฏ็ปๅใๆฑๆใใใใใฎใจใใฆใใผใฏใใใใฎ็ปๅใใผใฟใธใฎใขใฏใปในใๅถ้ใใพใใ
ใใฎๅฑๆงใฎๅคใ็กๅนใงใใๅ ดๅใฏใๅๆๅใฎใญใผใฏใผใใซ
anonymousใๆๅฎใใใใใฎใจใใฆๆฑใใใพใใ่ฉณใใใฏCORS ่จญๅฎๅฑๆงใๅ็ งใใฆใใ ใใใ decoding-
ใใฎๅฑๆงใฏใใใฉใฆใถใผใ็ปๅใฎใใณใผใใไปใฎ DOM ใณใณใใณใใฎใฌใณใใชใณใฐใจไธ็ทใซ่กใใใใใๆญฃใใใ่ฆใใใใใซใใใฎใ (
sync)ใใใใจใไปใฎ DOM ใณใณใใณใใๅ ใซใฌใณใใชใณใฐใใฆ่กจ็คบใใ็ปๅใใใณใผใใใฆๅพใง่กจ็คบใใใฎใ (async) ใฎใใณใใๆไพใใพใใๅฎ้ใซใฏใasyncใฏๆฌกใฎๆ็ปใ็ปๅใฎใใณใผใใๅพ ใใชใใใจใๆๅณใใพใใ้็ใช
<img>่ฆ็ด ใซdecodingใไฝฟ็จใใๅ ดๅใ้ก่ใชๅนๆใ่ช่ญใใใใจใฏๅฐ้ฃใงใใ็ปๅใใกใคใซใ๏ผใใใใฏใผใฏใใญใฃใใทใฅใใ๏ผๅๅพใใใ้ใๆๅใฏ็ฉบใฎ็ปๅใจใใฆใฌใณใใชใณใฐใใใใใฎๅพใฏ็ฌ็ซใใฆๅฆ็ใใใใใใใณใณใใณใใฎๆดๆฐใฎใๅๆใใฏใใพใๆ่ญใใใพใใใใใใใใใณใผใไธญใซใฌใณใใชใณใฐใใใญใใฏใใใใใจใฏใ้ๅธธใซๅฐใใใใจใๅคใใใฎใฎใ่จๆธฌๅฏ่ฝใงใใใใ่ฉณ็ดฐใชๅๆใซใคใใฆใฏใ็ปๅใใณใผใๅฑๆงใฏๅฎ้ใซไฝใใใฆใใใฎใ ใๅ็ งใใฆใใ ใใ (tunetheweb.com, 2023)ใ็ฐใชใ
decodingใฟใคใใไฝฟ็จใใใจใ JavaScript ใไฝฟใฃใฆๅ็ใซ<img>่ฆ็ด ใ DOM ใซๆฟๅ ฅใใ้ใซใใใ้ก่ใช้ใใ็ใใพใ - ่ฉณใใใฏHTMLImageElement.decodingใๅ็ งใใฆใใ ใใใ่จฑๅฏใใใฆใใๅคใฏๆฌกใฎ้ใใงใใ
sync-
ไปใฎ DOM ใณใณใใณใใฎใฌใณใใชใณใฐใจๅๆใใฆ็ปๅใใใณใผใใใใในใฆใไธ็ทใซ่กจ็คบใใพใใ
async-
ไปใฎ DOM ใณใณใใณใใใฌใณใใชใณใฐใใฆ่กจ็คบใใๅพใ้ๅๆใซ็ปๅใใใณใผใใใพใใ
auto-
ใใณใผใใขใผใใฎๅชๅ ้ ไฝใฏใใใพใใใใใฉใฆใถใผใใฆใผใถใผใซใจใฃใฆๆ้ฉใชใใฎใๆฑบๅฎใใพใใใใใฏๆขๅฎๅคใงใใ
elementtiming-
PerformanceElementTimingAPI ใซใใ็ฃ่ฆใฎใใใซ็ปๅใใใผใฏใใพใใๆๅฎใใใๅคใฏใ็ฃ่ฆใใใ็ปๅ่ฆ็ด ใฎ่ญๅฅๅญใซใชใใพใใelementtimingๅฑๆงใฎใใผใธใๅ็ งใใฆใใ ใใใ fetchpriority-
็ปๅใๅๅพใใ้ใซไฝฟ็จใใ็ธๅฏพ็ใชๅชๅ ้ ไฝใฎใใณใใๆไพใใพใใ่จฑๅฏใใใฆใใๅคใฏๆฌกใฎ้ใใงใใ
high-
ไปใฎ็ปๅใจๆฏ่ผใใฆ้ซใๅชๅ ๅบฆใง่ชญใฟๅใใพใใ
low-
ไปใฎ็ปๅใจๆฏ่ผใใฆไฝใๅชๅ ๅบฆใง่ชญใฟๅใใพใใ
auto-
ใใงใใๅชๅ ๅบฆใซๅชๅ ้ ไฝใ่จญๅฎใใชใใงใใ ใใใ ใใใๆขๅฎๅคใงใใ ๅคใใชใๅ ดๅใ็กๅนใชๅคใ่จญๅฎใใใฆใใๅ ดๅใซไฝฟ็จใใใพใใ
่ฉณใใใฏ
HTMLImageElement.fetchPriorityใๅ็ งใใฆใใ ใใใ height-
็ปๅๅบๆใฎ้ซใใใใฏใปใซๅคใงๆๅฎใใพใใๅไฝใฎใชใๆดๆฐใงใชใใใฐใชใใพใใใ
ใกใข:
heightใจwidthใ่จ่ผใใใใจใงใ็ปๅใ่ชญใฟ่พผใๅใซใใฉใฆใถใผใ็ปๅใฎใขในใใฏใๆฏใ่จ็ฎใใใใจใใงใใใใใซใชใใพใใใใฎใขในใใฏใๆฏใฏใ็ปๅใ่กจ็คบใใใใใซๅฟ ่ฆใช็ฉบ้ใ็ขบไฟใใใใใซไฝฟ็จใใใ็ปๅใใใฆใณใญใผใใใฆ็ป้ขใซ่กจ็คบใใใจใใฎใฌใคใขใฆใใฎใใใ็ธฎๅฐใใใใ้ฒๆญขใใใใใใใจใใงใใพใใใฌใคใขใฆใใฎใใใ็ธฎๅฐใใใใจใฏใ่ฏใไฝฟใๅๆใจใฆใงใใใใฉใผใใณในใฎไธป่ฆใชๆงๆ่ฆ็ด ใงใใ ismap-
่ซ็ๅฑๆงใงใใใฎ็ปๅใใตใผใใผใตใคใใใใใฎไธ้จใงใใใใ็คบใใพใใใใใงใใๅ ดๅใฏใใฏใชใใฏไฝ็ฝฎใฎๆญฃ็ขบใชๅบงๆจใใตใผใใผใซ้ไฟกใใพใใ
loading-
ใใฉใฆใถใผใใฉใฎใใใซ็ปๅใ่ชญใฟ่พผใใใ็คบใใพใใ
eager-
็ปๅใ็พๅจๅฏ่ฆใใฅใผใใผใใซๅ ฅใฃใฆใใใใฉใใใซใใใใใใ็ดใกใซ็ปๅใ่ชญใฟ่พผใฟใพใ (ใใใๆขๅฎๅคใงใ)ใ
lazy-
็ปๅใใใฉใฆใถใผใงๅฎ็พฉใใใใใฅใผใใผใใใใฎ่ท้ขใซ้ใใใพใงใ็ปๅใฎ่ชญใฟ่พผใฟใ้ ๅปถใใใพใใใใใฏใ็ปๅใๅฟ ่ฆใจใใใใฎใๅ็็ใซ็ขบๅฎใซใชใใพใงใๅฆ็ใซๅฟ ่ฆใชใใใใฏใผใฏใในใใฌใผใธใฎๅธฏๅๅน ใไฝฟ็จใใชใใใใซใใใใใงใใใใใฏไธ่ฌ็ใซใใปใจใใฉใฎๅ ธๅ็ใชไฝฟ็จๆณใซใใใฆใใณใณใใณใใฎๆง่ฝใๅไธใใใใใจใใงใใพใใ
ใกใข: ่ชญใฟ่พผใฟใๅปถๆใใใใฎใฏ JavaScript ใๆๅนใซใชใฃใฆใใใจใใ ใใงใใใใใฏใใฉใใญใณใฐๅฏพ็ญใงใใใในใฏใชใใใ็กๅนใซใชใฃใฆใใใจใใซใฆใผใถใผใจใผใธใงใณใใ้ ๅปถ่ชญใฟ่พผใฟใซๅฏพๅฟใใฆใใๅ ดๅใงใใใตใผใใผใใใคไฝๆใฎ็ปๅใ่ฆๆฑใใใใใ่ฟฝ่ทกใงใใใใใซใใผใธใฎใใผใฏใขใใใซ็ปๅใๆฆ็ฅ็ใซ้ ็ฝฎใใใใจใงใใตใคใใใปใใทใงใณๅ จไฝใ้ใใฆใฆใผใถใผใฎใใใใใฎในใฏใญใผใซไฝ็ฝฎใ่ฟฝ่ทกใใใใจใๅฏ่ฝใซใชใใใใงใใ
ใกใข: ็ปๅใฎ
loadingใlazyใซ่จญๅฎใใใฆใใใจใใใจใ่ชญใฟ่พผใฟใซใใฃใฆ่กจ็คบใๅคๆดใใใใจใใฆใใๅฏ่ฆ่ฆ็ด ใจไบคๅทฎใใชใๅ ดๅใฏๆฑบใใฆ่ชญใฟ่พผใพใใพใใใๆช่ชญใฟ่พผใฟใฎ็ปๅใฏwidthใใใณheightใ0ใงใใใใใงใใ้ ๅปถ่ชญใฟ่พผใฟใฎ็ปๅใซwidthใใใณheightใ่จญๅฎใใใจใใใฎๅ้กใ่งฃๆฑบใใใไปๆงใงๆจๅฅจใใใฆใใใในใใใฉใฏใใฃในใจใชใใพใใใพใใใฌใคใขใฆใใฎใใใ้ฒใใใจใซใๅฝน็ซใกใพใใ referrerpolicy-
ใชใฝใผในใ่ชญใฟ่พผใ้ใซใใฉใฎใชใใกใฉใผใไฝฟ็จใใใใ็คบใๆๅญๅใงใใ
no-referrer:Refererใใใใผใ้ไฟกใใชใใใจใ่กจใใพใใno-referrer-when-downgrade: ใใใชใชใธใณใธTLS (HTTPS) ใไฝฟ็จใใใซ็งปๅใใๅ ดๅใซใRefererใใใใผใ้ไฟกใใชใใใจใ่กจใใพใใorigin: ้ใใใใชใใกใฉใผใฏใๅ็ งใใฆใใใใผใธใใผใธใฎใชใชใธใณใใใชใใกในใญใผใ ใใในใๅใใใผใ็ชๅทใฎใฟใจใชใใพใใorigin-when-cross-origin: ็ฐใชใใชใชใธใณใธใฎ็งปๅใงใฏใใชใใกใฉใผใในใญใผใ ใใในใใใใผใใฎใฟใซๅถ้ใใพใใๅไธใฎใชใชใธใณใธใฎ็งปๅใงใฏใใชใใกใฉใผใฎใใซใในใๅซใใพใใsame-origin: ใชใใกใฉใผใฏๅใใชใชใธใณใซๅฏพใใฆใฏ้ไฟกใใใพใใใใชใชใธใณ้ใชใฏใจในใใงใฏใชใใกใฉใผๆ ๅ ฑใๅ ฅใใพใใใstrict-origin: ใใญใใณใซใฎใปใญใฅใชใใฃใฌใใซใๅ็ญ (HTTPSโHTTPS) ใงใใๅ ดๅใฏใใชใใกใฉใผใจใใฆใใฎๆๆธใฎใชใชใธใณใ้ไฟกใใใพใใใๅฎๅ จๆงใฎไฝใๅฎๅ (HTTPSโHTTP) ใซใฏ้ไฟกใใใพใใใstrict-origin-when-cross-origin๏ผๆขๅฎๅค๏ผ: ๅไธใชใชใธใณใชใฏใจในใใ่กใ้ใซใฏๅฎๅ จใช URL ใ้ไฟกใใใปใญใฅใชใใฃใฌใใซใๅ็ญ (HTTPSโHTTPS) ใฎๅ ดๅใฏใชใชใธใณใฎใฟใ้ไฟกใใๅฎๅ จๆงใฎไฝใๅฎๅ (HTTPSโHTTP) ใซใฏใใใใผใ้ไฟกใใพใใใunsafe-url: ใชใใกใฉใผใซใฏใชใชใธใณใจใในใๅซใใใใจใ่กจใใพใ๏ผใใ ใใใใฉใฐใกใณใใใในใฏใผใใใฆใผใถใผๅใฏๅซใใพใใ๏ผใใใฎๅคใฏๅฎๅ จใงใฏใใใพใใใใชใชใธใณใใในใฎๆ ๅ ฑใ TLS ใงไฟ่ญทใใใใชใฝใผในใใๅฎๅ จใงใชใใชใชใธใณใธๆผใใใใใใใงใใ
sizes-
ใฝใผในใฎใตใคใบใฎใปใใใ็คบใใใซใณใๅบๅใใฎๆๅญๅใ1ๅไปฅไธไธฆในใใชในใใงใใใใใใใฎใฝใผในใตใคใบใฎๆงๆใฏไปฅไธใฎใจใใใงใใ
- ใกใใฃใขๆกไปถใใชในใๅ ใฎๆๅพใฎใขใคใใ ใงใฏ็็ฅใใชใใใฐใชใใพใใใ
- ใฝใผในใตใคใบๅคใ
ใกใใฃใขใฎ็ถๆ ใฏใใฅใผใใผใใฎใใญใใใฃใง่จ่ฟฐใใใใฎใงใใใ็ปๅใฎใใญใใใฃใงใฏใใใพใใใไพใใฐใ
(max-height: 500px) 1000pxใฏใใใฅใผใใผใใฎ้ซใใ 500px ไปฅไธใงใใใฐ 1000px ๅน ใฎใฝใผในใไฝฟ็จใใใใจใๆๆกใใพใใใฝใผในใตใคใบๅคใฏใ็ปๅใฎ่กจ็คบใตใคใบใๆๅฎใใใใฎใงใใใฆใผใถใผใจใผใธใงใณใใฏ
srcsetๅฑๆงใงไธใใใใใฝใผในใใใฒใจใคใ้ธๆใใใใใซใ็พๅจใฎใฝใผในใตใคใบใไฝฟ็จใใพใใใใฎใจใใใฝใผในใฏๅน ่จ่ฟฐๅญ ('w') ใไฝฟ็จใใฆ่ชฌๆใใพใใ้ธๆใใใฝใผในใตใคใบใฏ็ปๅใฎๅบๆใฎๅฏธๆณ๏ผCSS ในใฟใคใซใ้ฉ็จใใใฆใใชใๅ ดๅใฎใ็ปๅใฎ่กจ็คบใตใคใบ๏ผใซๅฝฑ้ฟใใพใใsrcsetๅฑๆงใใชใๅ ดๅใใใใใฏๅน ่จ่ฟฐๅญ (w) ใๆใคๅคใใชใๅ ดๅใฏใsizesๅฑๆงใฎๅนๆใฏใใใพใใใ src-
็ปๅใฎ URL ใงใใ
<img>่ฆ็ด ใซๅฟ ้ ใงใใsrcsetใซๅฏพๅฟใใใใฉใฆใถใผใงใฏsrcใใ็ป็ด ๅฏๅบฆ่จ่ฟฐๅญ1xใฎๅ่ฃ็ปๅใงใใใใใซๆฑใใพใใใใ ใใใใฎ็ป็ด ๅฏๅบฆ่จ่ฟฐๅญใsrcsetใงๅฎ็พฉๆธใฟใงใใใใพใใฏsrcsetใซ 'w' ่จ่ฟฐๅญใๅซใพใใฆใใๅ ดๅใ้คใใพใใ srcset-
ใฆใผใถใผใจใผใธใงใณใใไฝฟ็จๅฏ่ฝใชใฝใผใน็ปๅใฎใปใใใ็คบใใใซใณใๅบๅใใงๆๅญๅใ 1 ๅไปฅไธไธฆในใใชในใใงใใๅใ ใฎๆๅญๅใฎๆงๆใฏไปฅไธใฎใจใใใงใใ
- ็ปๅใฎ URL
- ไปปๆใงใใใฏใคใในใใผในใฎๅพใซไปฅไธใฎใใใใใ่จ่ฟฐใใพใใ
- ๅน
่จ่ฟฐๅญ๏ผๆญฃใฎๆดๆฐใฎ็ดๅพใซ
wใไปๅ ใใใใฎ๏ผใๅน ่จ่ฟฐๅญใฏๅฎ้ใฎ็ป็ด ๅฏๅบฆใ่จ็ฎใใใใใซใsizesๅฑๆงใงไธใใใใใฝใผในใตใคใบใงๅฒใใใพใใ - ็ป็ด ๅฏๅบฆ่จ่ฟฐๅญ๏ผๆญฃใฎๆตฎๅๅฐๆฐ็นๆฐใฎ็ดๅพใซ
xใไปๅ ใใใใฎ๏ผใ
- ๅน
่จ่ฟฐๅญ๏ผๆญฃใฎๆดๆฐใฎ็ดๅพใซ
่จ่ฟฐๅญใๆๅฎใใชใๅ ดๅใฏใใฝใผในใๆขๅฎใฎ่จ่ฟฐๅญ
1xใซๅฒใๅฝใฆใพใใๅน ่จ่ฟฐๅญใจ็ป็ด ๅฏๅบฆ่จ่ฟฐๅญใๅไธใฎ
srcsetๅฑๆงใซๆททๅจใใใใจ็กๅนใซใชใใพใใ้่คใใ่จ่ฟฐๅญ๏ผไพใใฐใฒใจใคใฎsrcsetใซ2ใคใฎใฝใผในใใใใใฉใกใใ '2x' ใจใใ๏ผใ็กๅนใซใชใใพใใsrcsetๅฑๆงใๅน ใฎ่จ่ฟฐๅญใไฝฟ็จใใๅ ดๅใsizesๅฑๆงใๆๅฎใใชใใใฐใชใใพใใใใใใงใชใใใฐใsrcset่ชไฝใ็ก่ฆใใใพใใใฆใผใถใผใจใผใธใงใณใใซใฏใๅฉ็จๅฏ่ฝใชใฝใผในใใใฒใจใคใ้ธๆใใ่ฃ้ใใใใพใใใใใฏใใฆใผใถใผ่จญๅฎใๅธฏๅๅน ใฎๆกไปถใชใฉใซๅบใฅใใฆ้ธๆใ้ฉๅใใใใใใชใใใชใใฎ่ฃ้ใไธใใใใฆใใพใใไพใจใใฆใฏใฌในใใณใทใ็ปๅใฎใใฅใผใใชใขใซใใ่ฆงใใ ใใใ
width-
็ปๅๅบๆใฎๅน ใใใฏใปใซๅคใงๆๅฎใใพใใๅไฝใฎใชใๆดๆฐใงใชใใใฐใชใใพใใใ
usemap-
่ฆ็ด ใซ้ข้ฃใฅใใใใใคใกใผใธใใใใฎ้จๅ็ใช URL ('
#' ใงๅงใพใ) ใงใใ
้ๆจๅฅจใฎๅฑๆง
align้ๆจๅฅจ;-
ๅจๅฒใฎใณใณใใญในใใซๅฏพใใ็ปๅใฎ้ ็ฝฎใๆๅฎใใพใใไปฃใใใซ CSS ใฎ
floatใใญใใใฃใvertical-alignใใญใใใฃใไฝฟ็จใใฆใใ ใใใไฝฟ็จใงใใๅคใฏๆฌกใฎ้ใใงใใtop-
vertical-align: top;ใพใใฏvertical-align: text-top;ใจ็ญไพกใงใใ middle-
vertical-align: -moz-middle-with-baseline;ใจ็ญไพกใงใใ bottom-
ๅคใฎๆขๅฎๅคใฏใชใ
vertical-align: unset;ใพใใฏvertical-align: initial;ใจ็ญไพกใงใใ left-
float: left;ใจ็ญไพกใงใใ right-
float: right;ใจ็ญไพกใงใใ
border้ๆจๅฅจ;-
็ปๅใฎๅจใใฎๅข็็ทใฎๅน ใๆๅฎใใพใใไปฃใใใซ CSS ใฎ
borderใใญใใใฃใไฝฟ็จใใฆใใ ใใใ hspace้ๆจๅฅจ;-
็ปๅใฎๅทฆๅณใซๆฟๅ ฅใใ็ฉบ้ใฎๅน ใใใฏใปใซๅไฝใงๆๅฎใใพใใไปฃใใใซ CSS ใฎ
marginใใญใใใฃใไฝฟ็จใใฆใใ ใใใ longdesc้ๆจๅฅจ;-
็ปๅใฎ่ฉณ็ดฐใช่ชฌๆใธใฎใชใณใฏใงใใๆๅนใชๅคใฏใ URL ใพใใฏ่ฆ็ด ใฎ
idใงใใใกใข: ใใฎๅฑๆงใฏใๆๆฐใฎ W3C ใฎใใผใธใงใณใงใใ HTML 5.2 ใงใ่จๅใใใฆใใพใใใ WHATWG ใฎ HTML Living Standard ใงใฏๅฎๅ จใซๅ้คใใใฆใใพใใๅฐๆฅใไธ็ขบๅฎใชใฎใงใไปฃใใใซใ
aria-describedbyใพใใฏaria-detailsใฎใใใช WAI-ARIA ใฎไปฃๆฟๆๆฎตใไฝฟ็จใใฆใใ ใใใ name้ๆจๅฅจ;-
่ฆ็ด ใฎๅๅใงใใไปฃใใใซ
idๅฑๆงใไฝฟ็จใใฆใใ ใใใ vspace้ๆจๅฅจ;-
็ปๅใฎไธไธใซๆฟๅ ฅใใ็ฉบ้ใฎๅน ใใใฏใปใซๅไฝใงๆๅฎใใพใใไปฃใใใซ CSS ใฎ
marginใใญใใใฃใไฝฟ็จใใฆใใ ใใใ
CSS ใงใฎในใฟใคใซไปใ
<img> ใฏ็ฝฎๆ่ฆ็ด ใงใใ display ใฎๅคใๆขๅฎใง inline ใงใใใๆขๅฎใฎๅฏธๆณใฏๅใ่พผใพใใ็ปๅใฎๅ
้จ็ใชๅคใงๅฎ็พฉใใใพใใ็ปๅใซใฏ border/border-radius, padding/margin, width, height, ใชใฉใฎใใญใใใฃใ่จญๅฎใใใใจใใงใใพใใ
<img> ใซใฏใใผในใฉใคใณใใใใพใใใใคใพใ vertical-align: baseline ใไผดใใคใณใฉใคใณๆดๅฝขใณใณใใญในใๅ
ใงไฝฟ็จใใใจใใซใ็ปๅใฎไธ็ซฏใฏใณใณใใใผใฎใใผในใฉใคใณใซๆใใใใพใใ
object-position ใใญใใใฃใไฝฟ็จใใฆใ่ฆ็ด ใใใฏในๅ
ใฎ็ปๅใฎไฝ็ฝฎใๆๅฎใใใใ object-fit ใใญใใใฃใไฝฟ็จใใฆใใใใฏในๅ
ใฎ็ปๅใฎๅฏธๆณใ่ชฟๆดใใใ๏ผไพใใฐใใฏใชใใใณใฐใๅฟ
่ฆใชๆใซ็ปๅใใใใฏในใซๅใใใใๅใใใ๏ผใใใใจใใงใใพใใ
็ปๅใฎ็จฎ้กใซๅฟใใฆใๅบๆใฎๅฏธๆณใๆใคใใจใใงใใพใใใใ ใใๅบๆใฎๅฏธๆณใๅฟ
้ ใงใฏใชใ็ปๅๅฝขๅผใใใใพใใไพใใฐ SVG ็ปๅใฏใๅบๆใฎๅฏธๆณใๆใกใพใใใใคใพใใ SVG ็ปๅใซใฏ <svg> ่ฆ็ด ใซ width ใพใใฏ height ใ่จญๅฎใใใฆใใชใ้ใใๅบๆใฎๅฏธๆณใฏใใใพใใใ
ใขใฏใปใทใใชใใฃ
ๆๅณใฎใใไปฃๆฟ่ชฌๆใๆธใ
alt ๅฑๆงใฎๅคใฏๆ็ขบใง็ฐกๆฝใซ็ปๅใฎๅ
ๅฎนใ่ชฌๆใใใใฎใซใใฆใใ ใใใ็ปๅใใฎใใฎๅญๅจใ่ชฌๆใใใใฎใงใใฃใใใ็ปๅใฎใใกใคใซๅใงใใฃใใใใในใใงใฏใใใพใใใ็ปๅใ่จ่ใง่ชฌๆใงใใใใฎใงใฏใชใใ alt ๅฑๆงใๆๅณ็ใซ็็ฅใใๅ ดๅใฏใ็ปๅใไผใใใใจใใฆใใใใจใฎๅ
ๅฎนใไปใฎๆนๆณใง่กจใใใใซ่ๆ
ฎใใฆใใ ใใใ
ๆชใไพ
<img alt="็ปๅ" src="penguin.jpg" />
่ฏใไพ
<img alt="ๆตทๅฒธใซ็ซใฃใฆใใใคใฏใใใใณใฎใณ" src="penguin.jpg" />
็ฐกๅใชใขใฏใปใทใใชใใฃใฎใในใใจใใฆใalt ๅฑๆงใฎๅ
ๅฎนใใใใฎๅๅพใฎใใญในใใณใณใใณใใจไฝตใใฆ่ชญใฟใ็ปๅใจๅใๆๅณใไผใใใใฉใใใ็ขบ่ชใใฆใใ ใใใไพใใฐใ็ปๅใฎๅใซใๆ
่กไธญใๅฐใใใฆใใใใๅ็ฉใ่ฆใคใใพใใใใใจใใๆใใใๅ ดๅใใๆชใไพใใงใฏในใฏใชใผใณใชใผใใผใซใใฃใฆใๆ
่กไธญใๅฐใใใฆใใใใๅ็ฉใ่ฆใคใใพใใใ็ปๅใใจ่ชญใฟไธใใใใพใใใใใใฏๆๅณใใชใใพใใใไธๆนใใใใไพใใงใฏในใฏใชใผใณใชใผใใผใซใใฃใฆใๆ
่กไธญใๅฐใใใฆใใใใๅ็ฉใ่ฆใคใใพใใใๆตทๅฒธใซ็ซใฃใฆใใใคใฏใใใใณใฎใณใใจ่ชญใฟไธใใใใๆๅณใใชใใพใใ
ไพใใฐใใขใฏใทใงใณใ่ตทๅใใใใใซไฝฟ็จใใใ็ปๅ๏ผ<a> ใ <button> ่ฆ็ด ๅ
ใซใในใใใใ็ปๅ๏ผใซใคใใฆใฏใalt ๅฑๆงๅคๅ
ใซ่ตทๅใใใใขใฏใทใงใณใ่จ่ฟฐใใใใจใ่ใใฆใใ ใใใไพใใฐใalt="ๅณๅใ็ขๅฐ" ใฎไปฃใใใซ alt="ๆฌกใฎใใผใธ" ใจ่จ่ฟฐใงใใพใใใพใใtitle ๅฑๆงๅ
ใซไปปๆใงใใใซ่ฉณใใ่ชฌๆใ่ฟฝๅ ใใใใจใๆค่จใงใใพใใใใใฏใใฆใผใถใผใ่ฆๆฑใใๅ ดๅใซในใฏใชใผใณใชใผใใผใซใใฃใฆ่ชญใฟไธใใใใๅ ดๅใใใใพใใ
็ปๅใซ alt ๅฑๆงใๆๅฎใใใฆใใชใๅ ดๅใไธ้จใฎในใฏใชใผใณใชใผใใผใงใฏไปฃใใใซ็ปๅใฎใใกใคใซๅใ่ชญใฟไธใใใใใใจใใใใพใใใใกใคใซๅใ็ปๅใฎๅ
ๅฎนใ้ฉๅใซ่กจใใฆใใชใๅ ดๅใๆททไนฑใๆใๅฏ่ฝๆงใใใใพใใ
SVG ใ็ปๅใจใใฆ่ญๅฅ
VoiceOver ใฎใใฐใซใใใVoiceOver ใฏ SVG ็ปๅใ็ปๅใจใใฆๆญฃใใใขใใฆใณในใใพใใใSVG ใฎใฝใผในใใกใคใซใๆใคใในใฆใฎ <img> ่ฆ็ด ใซ role="img" ใ่จ่ผใใๆฏๆดๆ่กใ SVG ใ็ปๅใณใณใใณใใจใใฆๆญฃใใใขใใฆใณในใใใใใซใใฆใใ ใใใ
<img src="mdn.svg" alt="MDN" role="img" />
title ๅฑๆง
title ๅฑๆงใ alt ๅฑๆงใฎไปฃใใใซๅฉ็จใใใใจใฏใงใใพใใใๅ ใใฆใ alt ๅฑๆงใฎๅคใๅใ็ปๅใฎ title ๅฑๆงใซ่ค่ฃฝใใฆๅฎฃ่จใใใใจใฏ้ฟใใฆใใ ใใใใใฎใใใซใใใจใ่ชญใฟไธใใฝใใใ่ชฌๆใไบๅ่ชญใฟไธใใๆไฝใๆททไนฑใใใๅฏ่ฝๆงใใใใพใใ
title ๅฑๆงใฏใ็ปๅใฎ alt ใฎ่ชฌๆใจ็ตใฟๅใใใ่ฃๅฉ็ใช่ชฌๆใจใใฆไฝฟ็จใใในใใงใใใใพใใใ็ปๅใซใญใฃใใทใงใณใๅฟ
่ฆใงใใใฐใ figure ใใใณ figcaption ่ฆ็ด ใจ็ตใฟๅใใใฆไฝฟ็จใใฆใใ ใใใ
title ๅฑๆงใฎๅคใฏใใใใใผใซใใใใจใใฆใ็ปๅใฎไธใงใซใผใฝใซใๅๆญขใใใๅพใง้ใใชใ่กจ็คบใใใพใใใใใฏใฆใผใถใผใซ่ฟฝๅ ใฎๆ
ๅ ฑใๆไพใใใใจใใงใใพใใใใฆใผใถใผใๅฟ
ใ่ฆใใจไปฎๅฎใใฆใฏใใใพใใใใฆใผใถใผใฏใญใผใใผใใใฟใใใใใซใใๆใฃใฆใใชใใใใใใพใใใใฆใผใถใผใ่ฆใใใจใ็นใซ้่ฆใพใใฏๆ็ใงใใๆ
ๅ ฑใใใใฎใงใใใฐใไธ่จใฎ title ใไฝฟ็จใใใฎใงใฏใชใใไฝใใใฎๆนๆณใง่กๅ
ใซ่กจ็คบใใในใใงใใ
ไพ
ไปฃๆฟใใญในใ
ไปฅไธใฎ็ฐกๅใชไพใงใฏใใใผใธใซ็ปๅใๅใ่พผใฟใใขใฏใปใทใใชใใฃใๅไธใใใใใใซไปฃๆฟใใญในใใๅซใใฆใใพใใ
<img src="/shared-assets/images/examples/favicon144.png" alt="MDN" />
็ปๅใชใณใฏ
ใใฎไพใฏๅๅใฎใๅๅฐใซใ็ปๅใใชใณใฏใซใใๆนๆณใ็คบใใฆใใพใใใใใ่กใใฎใฏใจใฆใๅ็ดใงใใ <img> ใฟใฐใ <a> ใฎไธญใซ็ตใฟ่พผใใ ใใงใใไธใคใฎ่ๆ
ฎไบ้
ใจใใฆใใชใณใฏใๆใใชใฝใผในใ่ชฌๆใใไปฃๆฟใใญในใใไฝๆใใใใใซใใฆใใ ใใใ
<a href="https://developer.mozilla.org">
<img
src="/shared-assets/images/examples/favicon144.png"
alt="MDN ใตใคใใซใใใงใใ ใใ" />
</a>
srcset ๅฑๆงใฎไฝฟ็จ
ใใฎไพใงใฏใ srcset ๅฑๆงใซใใฃใฆ้ซ่งฃๅๅบฆ็ใฎใญใดใฎๅ็
งใๆๅฎใใฆใใพใใใใใงใ้ซ่งฃๅๅบฆใฎ็ซฏๆซใงใฏ src ็ปๅใฎไปฃใใใซใใกใใ่ชญใฟ่พผใพใใพใใ src ใงๅ็
งใใใ็ปๅใฏใ srcset ใซๅฏพๅฟใใฆใใใฆใผใถใผใจใผใธใงใณใใงใฏใ 1x ใฎๅ่ฃใจใใฆใซใฆใณใใใใพใใ
<img
src="/shared-assets/images/examples/favicon72.png"
alt="MDN ใญใด"
srcset="/shared-assets/images/examples/favicon144.png 2x" />
srcset ใใใณ sizes ๅฑๆงใฎไฝฟ็จ
src ๅฑๆงใฏใ srcset ใซๅฏพๅฟใใฆใใใฆใผใถใผใจใผใธใงใณใใง 'w' ่จ่ฟฐๅญใไฝฟ็จใใฆใใๅ ดๅใฏ็ก่ฆใใใพใใ (max-width: 600px) ใฎใกใใฃใขๆกไปถใซไธ่ดใใใจใ 200px ใฎๅน
ใฎ็ปๅ (200px ใซใใฃใจ่ฟใใใฎ) ใ่ชญใฟ่พผใพใใใใใงใชใใใฐไปใฎ็ปๅใ่ชญใฟ่พผใพใใพใใ
<img
src="clock-demo-200px.png"
alt="ๆ่จ"
srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw" />
ใกใข: ใใฎๅ ดใงๅคงใใใๅคๆดใใฆใฟใใซใฏใใใฎไพใๅฅใชใใผใธใง่กจ็คบใใใๅฟ ่ฆใใใใใใใใใฐใณใณใใณใ้ ๅใฎๅคงใใใๅฎ้ใซไฝฟ็จใใใใจใใงใใพใใ
ใปใญใฅใชใใฃใจใใฉใคใใทใผใฎ่ๆ ฎไบ้
<img> ่ฆ็ด ใฎๅคใใฏ็กๅฎณใชไฝฟ็จใงใใใใฆใผใถใผใฎใปใญใฅใชใใฃใจใใฉใคใใทใผใซๆใพใใใชใ็ตๆใใใใใๅฏ่ฝๆงใใใใพใใ่ฉณ็ดฐๆ
ๅ ฑใจ็ทฉๅ็ญใซใคใใฆใฏ Referer ใใใใผ: ใใฉใคใใทใผใจใปใญใฅใชใใฃใฎ่ๆ
ฎไบ้
ใๅ็
งใใฆใใ ใใใ
ๆ่ก็ๆฆ่ฆ
| ใณใณใใณใใซใใดใชใผ |
ใใญใผใณใณใใณใใ
่จ่ฟฐใณใณใใณใใ
ๅใ่พผใฟใณใณใใณใใ
็ฅ่ฆๅฏ่ฝใณใณใใณใใ่ฆ็ด ใ usemap ๅฑๆงใๆใคๅ ดๅใฏใๅฏพ่ฉฑๅใณใณใใณใใฎใซใใดใชใผใฎไธ่งใซใใชใใพใใ
|
|---|---|
| ่จฑๅฏใใใฆใใๅ ๅฎน | ใชใใใใใฏ็ฉบ่ฆ็ด ใงใใ |
| ใฟใฐใฎ็็ฅ | ้ๅงใฟใฐใฏๅฟ ้ ใ็ตไบใฟใฐใ่จ่ฟฐใใฆใฏใชใใพใใใ |
| ่จฑๅฏใใใฆใใ่ฆช่ฆ็ด | ๅใ่พผใฟใณใณใใณใใๅใๅ ฅใใใในใฆใฎ่ฆ็ด ใ |
| ๆ้ปใฎ ARIA ใญใผใซ |
|
| ่จฑๅฏใใใฆใใ ARIA ใญใผใซ |
|
| DOM ใคใณใฟใผใใงใคใน | HTMLImageElement |
ไปๆงๆธ
| Specification |
|---|
| HTML # the-img-element |
ใใฉใฆใถใผใฎไบๆๆง
Loadingโฆ
้ข้ฃๆ ๅ ฑ
<picture>,<object>,<embed>่ฆ็ด- ใใฎไปใฎ็ปๅใซ้ขใใ CSS ใใญใใใฃ:
object-fit,object-position,image-orientation,image-rendering,image-resolution - ใใฎ่ฆ็ด ใฎ
HTMLImageElementใคใณใฟใผใใงใคใน - HTML ใฎ็ปๅ
- ็ปๅใฎใใกใคใซๅฝขๅผใฎใฌใคใ
- ใฌในใใณใทใ็ปๅ