HTML 圖片 <img> 標籤 (tag)

<img> tag 用來在 HTML 文件中加入圖片 (images)。

<img> 主要是搭配 src 屬性來指定圖片位址，使用範例：

<img src="https://example.com/media/photo.jpg" with="600" heigh="400" alt="一張圖片">

效果如下：

<img> 是個空元素不需要 closing tag。

<img> 標籤有下面這些屬性 (attributes)

src

指定圖片位址 (URL)，只有這個屬性是必需要有的。

width

一個整數值，指定圖片寬度像素 (pixels)，有指定的好處是可以避面頁面渲染時的跳動，因為瀏覽器不用等圖片下載完才能計算圖片寬度。

heigh

一個整數值，指定圖片高度像素 (pixels)，有指定的好處是可以避面頁面渲染時的跳動，因為瀏覽器不用等圖片下載完才能計算圖片高度。

alt

圖片替代文字 (alternate text)，當圖片無法顯示時，瀏覽器會顯示此文字。這文字說明對 SEO 也很有助益，所以建議圖片都需要有 alt。

title

可以指定一段文字，在當滑鼠滑過圖片時，會自動顯示這段文字。

響應式圖片 (Responsive images) - `srcset` 及 `sizes` 屬性

srcset 和 sizes 屬性 (attribute) 用在使瀏覽器 (browser) 自動判斷當在不同的螢幕寬度 (display width) 或不同的螢幕解析度 (pixel density, display density) 像是高清 retina 螢幕下，自動載入不同大小 (size) 的圖片，這技巧也常用在響應式網頁設計 (Responsive web design, RWD) 或手機行動版網頁設計。

srcset

srcset 屬性用來指定多張不同尺寸大小的圖片，指定大小可以用實際圖片寬度或螢幕解析度 pixel density 當單位。

srcset 語法是「"檔案路徑 URL" 空一格 "大小單位"」，而用逗點 (comma-separated) 來分隔開不同尺寸的圖片。

舉個例子，如果你想用實際圖片寬度當單位，單位的語法是圖片寬度後面接 w:

<img srcset="image-480w.jpg 480w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     src="image-fallback.jpg"
>

寬度是一個整數數字，表示真實圖片的原始寬度，實際單位是相素 (pixel)，不要被 srcset 的單位語法 w 搞混了。

繼續進一步說明一下上面的例子，我們告訴瀏覽器有三種不同的圖片尺寸，寬度分別是 480, 800 和 1200 pixel，告訴瀏覽器可以自己選擇最適用的圖片，那瀏覽器用什麼資訊去判斷哪張圖片尺寸最適用呢？就是這張圖片的排版寬度，也就是從你 CSS 樣式中設定的 img 寬度，或從 img 標籤的 width 屬性判斷得知！

當你有用 srcset 建議也要同時設定好 width 或下面會提到的 sizes 屬性，目的是幫助瀏覽器有足夠資訊判斷應該要下載哪個尺寸的圖片。

那如果不支援 srcset 的老舊瀏覽器 (IE) 會怎麼樣啊？不支援的瀏覽器就會直接乎略 srcset 這屬性，只會去讀 src 這個屬性值；相反的，支援 srcset 的瀏覽器則會忽略 src 屬性。

再來，我們也可以用螢幕解析度也就是 pixel density 來當單位，像是現在的智慧型手機的 retina 螢幕解析度有著高於一般螢幕 2x 3x 4x 的解析度，對網頁設計的影響來說，就是如果你直接用桌機網站的圖片放到手機上看就會變得「糊糊的」！

如果你不清楚什麼是 pixel density，用簡單的方式來說明就是一個 CSS pixel 背後實際上是有幾個實體 pixel，可以想像越高清的螢幕是用更多、更密的像素點來顯示畫面。

我們可以根據不同的 pixel density 指定使用不同尺寸的圖片，單位的語法是一個 pixel density 數字後面接 x，舉個例子：

<img srcset="flower-1x.jpg 1x,
             flower-2x.jpg 2x,
             flower-3x.jpg 3x"
     src="flower-fallback.jpg"
>

上面的例子就是告訴瀏覽器，當設備 (device) 的 pixel density 是 1 (也就是正常一般螢幕) 就用 flower-1x.jpg 這張圖，如果 pixel density 是 2 (例如 iPhone 8) 就用 flower-2x.jpg 這張圖片，如果 pixel density 是 3 (例如 iPhone X) 則用 flower-3x.jpg 這張圖片。

用 pixel density x 當單位，相對於用圖片實際寬度 w 當單位，好處是瀏覽器只要知道設備的 pixel density 就知道要去下載哪張圖片，很單純又快速的判斷邏輯。

sizes

sizes 屬性是用來輔助 srcset 屬性給瀏覽器提示，告訴瀏覽器在不同的螢幕大小 (media query) 條件下，分別該使用多大尺寸的圖片。

但如果你的 srcset 是使用 pixel density 當單位，你就不需要指定 sizes 了。

sizes 的值是指原始圖片的實際尺寸，只是用來告訴瀏覽器該下載哪個 size 的圖片，不是用來排版 (layout) 圖片在畫面中的寬高，要排版圖片還是一樣是使用 CSS 喔。

sizes 的語法是「"media query 條件" 空一格 "建議使用的圖片實際寬度"」，而用逗點 (comma-separated) 來分隔開不同的條件。

舉個實際使用例子：

<img srcset="cat-160.jpg 160w,
             cat-320.jpg 320w,
             cat-640.jpg 640w,
             cat-1280.jpg 1280w"
     
     sizes="(max-width: 480px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     
     src="cat-fallback.jpg"
>

寬度的單位可以使用 CSS 中可以用的單位，像是 px, vw 或甚至是 calc()。

上面的例子中 sizes 告訴瀏覽器，當螢幕寬度小於 480px 時，圖片原始寬度需要有 100vw 螢幕寬；當螢幕寬度小於 900px 時，圖片原始寬度需要有 33vw 螢幕寬；當沒指定 media query 條件時，像是範例中的 254px 則是用來當前述條件都不符合時的預設值，即圖片原始寬度需要有 254px。

瀏覽器會從所有 sizes 條件中，最左邊的條件依序判斷到最右邊 (最後一個) 的條件，當條件符合時就會使用這個值，不會再往下繼續判斷下去，所以 sizes 裡面的順序很重要喔。

而當螢幕的 pixel density 如果不是 1 時，瀏覽器會自動乘上 pixel density 來當作需要的圖片原始寬度。舉個例子當 ritena 螢幕 pixel density 是 2 時，上面的 100vw 瀏覽器會解讀成 200vw；33vw 會解讀成 66vw；254px 則變成是 508px。

更進階的，如果你想在不同情況下載入完全不一樣的圖片，像是針對手機行動網頁直向 portrait 和橫向 landscape 做處理，或在不同瀏覽器載入不同格式的圖片等，你可以使用 <picture> 標籤。

延遲載入圖片 (lazy loading images) - `loading` 屬性

lazy load 技巧是說先不載入使用者視線 (viewport) 以外看不到的圖片，待圖片將要出現在使用者視線之前再來動態載入圖片，lazy load 可以用來提升網頁效能同時節省非必要的頻寬花費。

以前都要用 JavaScript 寫 code 來實作 lazy load，而因為 lazy load 太常見了，現在新的瀏覽器已經直接內建支援，只需要在 <img> 上加上 loading 屬性，並指定其屬性值為 lazy！

使用範例：

<img src="image.png" loading="lazy">