網頁要有豐富的內容，除了文字外，一定還要有圖片。在網頁中置入合適的圖片，採用美感的編排，將會讓網頁更生動。 我們可以過設定幫網頁設定背景顏色，或是以圖片當成背景，當然可以在合適的位置加入圖片。
網頁的背景色 <body bgcolorr>
雖然HTML5建議不要在body中使用各種屬性，但是還是有些網頁用這方法，可以學起來，以備不時之需。 <body bgcolor="#a8e8e2"> 用了這個標籤後，整個版面的背景就會呈現#a8e8e2這個顏色，如下圖 
網頁背景圖片 <body background>
background的屬性可以設定網頁的背景圖片，用法如下 <body background="img/photo.jpg"> 當body設定用圖片當成背景時，呈現的畫面如下圖 
加入圖檔 <img src=" ">
文字旁若要加入圖片，使用img標籤就可以把圖片匯入網頁中。在VScode編輯器，只要鍵入img，就會出現img的emmet提醒，點選img就會出現<img src="" alt="">，可以減少HTML輸入的繁複。src後面要填入的是圖片檔案的位置，alt屬性為圖片無法顯示時會改以填入文字代替。 <img src="img/img10.jpg" alt="swimming">
夏季泳池畔曬太陽悠閒自在
設定圖片大小 <img height width>
目前的網頁趨勢是具有RWD的功能，可以在不同裝置中瀏覽時，版面自動調整成適合閱讀的樣式。但若要把圖片固定在某一大小，則可以採用這兩個屬性。 <img src="img/img10.jpg" height="140px" width="250px> 縮小圖片為250x140px可以用於網頁的圖檔格式
瀏覽器目前支援的圖片檔案種類，主要有jpeg（或jpg）、gif、以及png三種。只要副檔名為這三種格式，就可以在網頁裡正常顯示。 若不是這三種，那就必須先用繪圖軟體或影像處理軟體先轉檔。特別說明PNG檔，Portable Network Graphics中譯為可攜式的網路圖片。這個較新的圖檔格式結合了JPEG和GIF兩種格式的優點。採用和GIF一樣不會破壞畫質的壓縮方式，同時和JPEG相同 可以支援全彩的影像，PNG支援去背的圖案，但是沒有GIF的動畫功能。
PNG圖片的特性
- 採用比gif更高效率的非破壞式壓縮
- 灰階圖形可以達16位元，全彩圖形可以達48位元
- 含gamma校正值，讓圖片在不同的平台仍有一致的顯示效果
- 支援alpha channel，支援透明效果（去背圖），總共可以支援65536層不同的透明效果。