.jpg)
src屬性的路徑類型有5種：1.絕對url，2.相對url，3.根相對url，4.data url，5.JavaScript生成的url；優(yōu)化img標(biāo)簽性能的方法包括選擇合適圖像格式、壓縮圖像、使用響應(yīng)式圖像、cdn、懶加載、設(shè)置圖像尺寸及優(yōu)化alt屬性；img標(biāo)簽常用屬性有alt、width/height、title、srcset/sizes、loading、crossorigin、usemap和ismap。
html 標(biāo)簽用于在網(wǎng)頁中嵌入圖像，src 屬性指定圖像的 URL，告訴瀏覽器從哪里加載圖像。這是在網(wǎng)頁上展示圖片最基本也是最常用的方法。
在 HTML 中， 標(biāo)簽是網(wǎng)頁中顯示圖像的關(guān)鍵元素。它本身并不包含圖像數(shù)據(jù)，而是通過 src 屬性指定圖像的來源（URL），讓瀏覽器去獲取并顯示圖像。理解
標(biāo)簽和 src 屬性的用法，對于構(gòu)建視覺豐富的網(wǎng)頁至關(guān)重要。
src 屬性的路徑類型有哪些？
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
src 屬性可以接受不同類型的 URL，主要分為以下幾種：
-
絕對 URL: 指向一個(gè)完整的網(wǎng)絡(luò)地址，例如 https://www.example.com/images/logo.png。 這種方式直接指向互聯(lián)網(wǎng)上的資源，確保任何用戶都能訪問到該圖像，但缺點(diǎn)是依賴于外部服務(wù)器的穩(wěn)定性。
-
相對 URL: 相對于當(dāng)前 HTML 文件的路徑。例如，如果 HTML 文件位于 https://www.example.com/pages/about.html，而圖像文件位于 https://www.example.com/images/logo.png，那么 src 可以設(shè)置為 ../images/logo.png。 相對 URL 的優(yōu)點(diǎn)是當(dāng)整個(gè)網(wǎng)站移動(dòng)到不同的服務(wù)器或目錄時(shí)，鏈接仍然有效，只要文件結(jié)構(gòu)保持不變。
-
根相對 URL: 以斜杠 / 開頭，相對于網(wǎng)站的根目錄。例如 /images/logo.png。 這種方式在大型網(wǎng)站中非常有用，因?yàn)闊o論 HTML 文件位于哪個(gè)子目錄，鏈接都會(huì)指向網(wǎng)站根目錄下的相同圖像。
-
Data URL: 將圖像數(shù)據(jù)直接嵌入到 HTML 中，使用 data: 協(xié)議。例如：
這種方式避免了額外的 HTTP 請求，可以提高頁面加載速度，但會(huì)增加 HTML 文件的大小。通常只適用于小型圖像，因?yàn)榇笮蛨D像會(huì)顯著增加文件大小。
-
使用 JavaScript 生成的 URL: src 屬性可以通過 JavaScript 動(dòng)態(tài)設(shè)置，例如從用戶上傳的文件或通過 canvas 生成的圖像數(shù)據(jù)。 這種方式允許更靈活的圖像處理和顯示，例如實(shí)現(xiàn)圖像預(yù)覽或動(dòng)態(tài)圖像生成。
如何優(yōu)化 img 標(biāo)簽的性能？
圖像優(yōu)化是提高網(wǎng)頁性能的關(guān)鍵一環(huán)。以下是一些常用的優(yōu)化技巧：
-
選擇合適的圖像格式: 不同的圖像格式適用于不同的場景。JPEG 適合照片類圖像，體積小，但有損壓縮；PNG 適合需要透明背景或包含大量文本和線條的圖像，無損壓縮，但體積相對較大；WebP 是 Google 開發(fā)的現(xiàn)代圖像格式，兼具 JPEG 和 PNG 的優(yōu)點(diǎn)，壓縮率高，支持透明度，但兼容性不如 JPEG 和 PNG。
-
壓縮圖像: 使用圖像壓縮工具（如 TinyPNG、ImageOptim）可以減小圖像文件的大小，從而加快頁面加載速度。 壓縮圖像可以在不顯著降低圖像質(zhì)量的前提下，減少文件大小。
-
使用響應(yīng)式圖像: 通過 srcset 和 sizes 屬性，可以根據(jù)不同的屏幕尺寸和設(shè)備分辨率加載不同大小的圖像。 這樣可以避免在小屏幕設(shè)備上加載大圖，節(jié)省帶寬并提高加載速度。 例如：
@@##@@
這段代碼告訴瀏覽器，根據(jù)屏幕寬度選擇合適的圖像。
-
使用 CDN: CDN (Content Delivery Network) 可以將圖像存儲(chǔ)在全球各地的服務(wù)器上，用戶可以從離自己最近的服務(wù)器加載圖像，從而加快加載速度。 CDN 通常具有緩存機(jī)制，可以進(jìn)一步提高性能。
-
懶加載: 對于頁面上不立即顯示的圖像（例如，位于頁面底部的圖像），可以使用懶加載技術(shù)，在圖像進(jìn)入視口時(shí)再加載。 這樣可以減少頁面初始加載時(shí)間，提高用戶體驗(yàn)。 可以使用 loading=”lazy” 屬性來實(shí)現(xiàn)懶加載：
@@##@@
-
設(shè)置圖像尺寸: 在
標(biāo)簽中明確指定圖像的寬度和高度，可以避免瀏覽器在加載圖像后重新計(jì)算布局，從而提高頁面渲染速度。 即使使用 css 來調(diào)整圖像大小，也應(yīng)該在 HTML 中設(shè)置 width 和 height 屬性。 -
優(yōu)化圖像的 alt 屬性: alt 屬性不僅用于在圖像無法加載時(shí)顯示替代文本，還可以提高網(wǎng)站的可訪問性，并有助于搜索引擎優(yōu)化。 確保 alt 屬性包含圖像的描述信息。
img 標(biāo)簽還有哪些常用的屬性？
除了 src 屬性，
標(biāo)簽還有許多其他有用的屬性：
-
alt: 指定圖像的替代文本，當(dāng)圖像無法加載時(shí)顯示，并提高網(wǎng)站的可訪問性。 alt 屬性對于 SEO 也很重要。
-
width 和 height: 指定圖像的寬度和高度，單位是像素。 建議始終設(shè)置這兩個(gè)屬性，以避免瀏覽器重新計(jì)算布局。
-
title: 指定圖像的標(biāo)題，當(dāng)鼠標(biāo)懸停在圖像上時(shí)顯示。
-
srcset 和 sizes: 用于實(shí)現(xiàn)響應(yīng)式圖像，根據(jù)不同的屏幕尺寸和設(shè)備分辨率加載不同大小的圖像。
-
loading: 指定圖像的加載方式，可以設(shè)置為 lazy 實(shí)現(xiàn)懶加載。
-
crossorigin: 用于處理跨域圖像的權(quán)限問題。 當(dāng)從不同的域名加載圖像時(shí)，可能需要設(shè)置 crossorigin 屬性，以允許 JavaScript 訪問圖像數(shù)據(jù)。
-
usemap: 將圖像與圖像地圖關(guān)聯(lián)起來，允許用戶點(diǎn)擊圖像的不同區(qū)域來觸發(fā)不同的操作。
-
ismap: 將圖像定義為服務(wù)器端圖像地圖。 當(dāng)用戶點(diǎn)擊圖像時(shí)，點(diǎn)擊坐標(biāo)會(huì)發(fā)送到服務(wù)器。 這種方式已經(jīng)很少使用，通常使用客戶端圖像地圖代替。
正確使用這些屬性可以更好地控制圖像的顯示效果和性能，提升用戶體驗(yàn)。
.png)
