[HTML][新手] 13. Img tag - 圖片介紹
[HTML][新手] 13. Img tag - 圖片介紹
此文章也有影片介紹，可以搭配影片一起學習！
這一堂課我們來練習如何在網頁上放圖片，一種方式是從網路上取得連結位址，另一種方式是從本地端上傳圖片。
語法如下：
從網路上取得圖片連結位址
例如在合法圖庫網站上取得圖片連結位址，以PEXELS(www.pexels.com)圖庫網站為例，按下滑鼠右鍵「複製圖片位址」，
並將圖片連結位址貼在<img src="">裡，
輸出結果：
這樣就能簡單貼上圖片了！不過如果你仔細看圖片的網址，它會是跟Pexel有關的。所以其實這張圖片並不在我們的電腦裡面喔！
這包含了一層意義，就是其實一個網站不需要把全部的資源都放在同一個主機上面，甚至不需要是同一個人擁有的。只要你拿到連結，都有可以讓你的網站顯示該”資源“(這篇用資源是因為包含：圖片、聲音檔、影片檔、CSS、JavaScript檔)。
如果是你取用別人的網址，那當然有好處，你的電腦主機的負擔會比較輕鬆。畢竟傳圖片就是會佔掉頻寬，所以如果佔掉別人的頻寬不就等於節省自己的頻寬嗎？但是別人也可能對你的網站這樣做，所以這邊會提到兩個技術名詞，雖然還不適合新手，但是可以先大概知道。
1. 有些服務商就是提供減緩你的網站的頻寬的服務，讓你把你的資源放在他的電腦上面，都從他那邊送到使用者上面，這些服務商叫做CDN服務商，全名為Content delivery network 內容傳遞網路 服務商。
延伸閱讀：為何Netflix等跨國商業網站因為地理位址而影響服務速度？關鍵在於CDN
2. 如果怕別人盜連你的網站圖片，可以啟用 Access-Control-Allow-Origin 防護功能，這一般是設在網路伺服器上面，也就是你要正式架設網站後才有可以設定的地方。一般是Apache 或是 Nginx。
相關線上課程：Linux雲端伺服器，用AWS暸解Apache與Nginx
圖片在本地端資料夾
如果是同層資料夾的話，例如照片名稱為photo1.jpeg，
我們可以直接這樣寫：
輸出結果：
會顯示原尺寸照片，
不過這張照片實在太大了，我們加上CSS樣式修改大小：
輸出結果：
這個100%並不是顯示圖片本身的原始大小，而是上一層100%的寬度，例如本範例的上一層是<main>，所以圖片的寬度會跟<main>一樣寬，就算他本來沒有那麼寬也是。所以如果照片解析度不夠的話不建議拉寬，否則照片會被放大失真而感覺到模糊喔！
雖然剛剛是直接放在HTML檔的旁邊，不過在真實情況，當網頁和圖片數量越來越多，我們會另建一個資料夾來專門放置圖片，例如images資料夾：
在檔名前加上資料夾名稱與斜線符號「/」，
代表的意思是在images資料夾，裡面的photo1.jpeg
輸出結果：
圖片正常出現了。
除了最常用的JPEG圖片檔外，<img>標籤也可以加入PNG(無失真點陣圖)、GIF動畫、SVG(向量圖)等圖形格式，例如下圖為SVG向量圖，即使放到很大也不會失真，是最近很流行的繪圖格式。
為圖片設替代文字
如果連結的圖片很不幸連結失效或錯誤時，瀏覽器會產生破圖的圖示，
如果希望在無法顯示圖像時出現替代文字，或是讓視覺障礙用戶也能使用輔具閱讀時，我們可以加入alt屬性：
輸出結果：
小叮嚀：若要發布網站時，請務必確認張圖片的來源都是合法的，以免侵犯智慧財產權。(Pexel 是 CC0授權，可以免費商用喔！)
最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!!
圖文系列教學: HTML 新手網站基礎教學
進度條編輯群