進度條

[HTML][新手] 13. Img tag - 圖片介紹

[HTML][新手] 13. Img tag - 圖片介紹

作者: 進度條編輯群 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. Img tag - 圖片介紹 (所屬課程)


以下正式開始文章


這一堂課我們來練習如何在網頁上放圖片,一種方式是從網路上取得連結位址,另一種方式是從本地端上傳圖片。

語法如下:

 

 

從網路上取得圖片連結位址

例如在合法圖庫網站上取得圖片連結位址,以PEXELS(www.pexels.com)圖庫網站為例,按下滑鼠右鍵「複製圖片位址」,

 

 

並將圖片連結位址貼在<img src="">裡,

 

<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
 

注意,擺放的位置一定要在那邊,擺放位置會對應到路徑。


 


我們可以直接這樣寫:
 

<img src="photo1.jpeg">    

 

 

輸出結果:

會顯示原尺寸照片,

 

 

不過這張照片實在太大了,我們加上CSS樣式修改大小:

 

<img style="width 100%;"  src="photo1.jpeg">,

   

輸出結果:

 

 

 

這個100%並不是顯示圖片本身的原始大小,而是上一層100%的寬度,例如本範例的上一層是<main>,所以圖片的寬度會跟<main>一樣寬,就算他本來沒有那麼寬也是。所以如果照片解析度不夠的話不建議拉寬,否則照片會被放大失真而感覺到模糊喔!


 

 

雖然剛剛是直接放在HTML檔的旁邊,不過在真實情況,當網頁和圖片數量越來越多,我們會另建一個資料夾來專門放置圖片,例如images資料夾:
 

 

 

在檔名前加上資料夾名稱與斜線符號「/」,

 

<img style="width:50%; src="images/photo1.jpeg">    

 

代表的意思是在images資料夾,裡面的photo1.jpeg

 


輸出結果:

 

 

 

圖片正常出現了。

除了最常用的JPEG圖片檔外,<img>標籤也可以加入PNG(無失真點陣圖)、GIF動畫、SVG(向量圖)等圖形格式,例如下圖為SVG向量圖,即使放到很大也不會失真,是最近很流行的繪圖格式。

 

 

 

 

為圖片設替代文字

如果連結的圖片很不幸連結失效或錯誤時,瀏覽器會產生破圖的圖示,

 

 

如果希望在無法顯示圖像時出現替代文字,或是讓視覺障礙用戶也能使用輔具閱讀時,我們可以加入alt屬性:

 

<img style="width:50%; src="images/photo1.jpeg" alt="This is a rabbit picture">    


輸出結果:

 

 

小叮嚀:若要發布網站時,請務必確認張圖片的來源都是合法的,以免侵犯智慧財產權。(Pexel 是 CC0授權,可以免費商用喔!)

 

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊