【 架網站-11 】為部落格、網頁建立圖庫、新增圖片

將直式圖片拼成橫式、將圖片壓上浮水印、將圖片解壓縮、建立圖庫、輸入語法

以下是我自己的步驟：

(大家參考就好，可以再試看看有沒有更有效率的方式

STEP1：將直式圖片拼成橫式：

• 旅行時我大多拍直式照片，那時候沒想太多只是因為喜歡，結果在放圖片時就遇到困難，若全放直式圖片會將網頁拉的很長，不方便閱讀，最後的解決方法是我把兩張直式圖片拼在一起，變成橫式的，這樣版面看起來舒服許多。
• 我是把圖片拉進PowerPoint裡面拼，因為可以接著做下一步的浮水印。

STEP2：將圖片壓上浮水印：

• 可以自己先製作好浮水印，把它變成圖片。

• 使用PowerPoint的話，點選「插入-圖片」，就可以把先前製作好的浮水印圖片直接放上去，還可以調整透明度

  

• 若本身就是橫式圖片不需要拼圖的話，不一定要放入PowerPoint內，有些網站或app可以免費壓浮水印，但要注意可能有隱私外洩問題，也有看到有網路教學說「iPhone」可以不用下載app，透過手機本身就能壓浮水印（例如選擇圖片後點選「圖示為筆的編輯按鈕」，按「加入簽名檔」，或自己事先做好浮水印圖片，點選「加入貼圖」，壓在圖片上，但這能不能批量編輯又是另一回事），這些大家都可以查看看。

STEP3：將圖片解壓縮：

• 解壓縮前原本圖片的大小平均在2MB以上，一開始我沒解壓縮就直接放上圖片，結果因為圖片放蠻多張，導致網頁運行的速度變得很慢，圖片跑很久才能顯示出來，為了優化閱讀體驗我把每張圖片大小限縮在300KB左右（當然壓縮完還是要檢查一下，如果有些圖片本身比較大，如5MB的話，壓縮到這麼小圖片可能會失真），看到失真的圖片我會單獨挑出來另外壓縮，但最大不會超過500KB。
• 目前我是透過免費的網頁來解壓縮，有找到可以一次將一整個資料夾的圖片解壓縮，而且速度很快，但因為不知道有沒有資安問題所以不敢亂推薦給各位。
• 如果解完壓縮發現圖片霧霧的不清楚，可以直接點開圖片，調一下清晰度

STEP4：建立圖庫：

• 我是選Imgur，目前所有部落格上的圖片都放在裡面，但我覺得這個平台出包率蠻高的，例如平台本身可以選擇發佈「公開貼文」或是「隱藏貼文」，我前面都有成功發布公開貼文，但幾天後公開貼文的欄位都變空了，無法查看，而後接連幾天無論是發佈哪種貼文，都出現失敗的通知，並且所有貼文都無法點開。

  

• 雖然有上面的BUG（至今仍無解決），但對於只需要圖片連結的人來說，影響不大，雖然無法查看「post」，但點選「Images」也可以複製圖片的網址，進而將圖片網址放入語法中，寫入部落格，所以目前我仍然繼續在使用，畢竟我只需要圖片網址。

  

• 複製圖片網址-從「post」：
  在「post」功能還正常時可使用，點選圖片按右鍵，選擇複製圖片網址

  

• 複製圖片網址-從「Images」：
  於「post」功能失常時可使用，雖然「post」發布失敗，但圖片仍會建立在「Images」的相簿內，（我「post」功能失常好幾天了，但我都繼續一直上傳圖片），點開照片後選取「Direct Link」就可以

  

STEP5：輸入語法：

• 我是選擇「Visual Studio Code」（簡稱VSC）作為編寫程式碼的工具，它是免費的編輯器，介面很清楚。

• 語法一：直接將圖片貼上
  不同的尺寸圖片放上後會有不同的大小（這是我圖片解壓縮前實驗的，解壓縮後沒有測試過）

  ![Imgur](圖庫中圖片的網址)

• 語法二：調整照片百分比
  可以把不同張圖片分別調整不同的百分比，數字都可以自己修改

  <img src="圖庫中圖片的網址" width="70%" height="70%">