如將圖片及影音檔完美上傳到官網教學及注意事項
發表一篇文章,最重要能吸引讀者眼球的重點就是…..漂亮的圖片
但當在經營網站時,許多人往往為了讓網站更為美觀細緻而上傳了許多精美而像素過大的影音檔案
殊不知….過大的影音檔案,不僅占用了許多網站空間,更大大的降低了訪問者進入您的網站速度,造成訪問者開啟頁面過於緩慢而退出網站的不良影響,是許多網站經營者忽略的重要因素之一
因此,解決方案是只要將在上傳之前將圖片最佳化,就能節省大量位元組,並提升網站的效能:瀏覽器要下載的位元組愈少,用戶端頻寬的爭用情況就越少,瀏覽器下載速度就可提升,並在螢幕上顯示實用的內容。
如要找出圖片的最佳設定,您需要仔細分析許多面向:例如檔案格式內容、像素等。 將圖像修剪至合適大小才能完整優化網站。
本文介紹了控製圖像文件大小的因素,及可用於優化圖像的網站供參考。
一張圖片基本內容包含:
- 文件尺寸(寬和高,以像素為單位)對於大多數網站,請確保您的文件不寬於網頁的寬度。如果您打算以全屏模式顯示圖像,可能需要規劃全尺寸圖像為1280像素或1920像素甚至更寬。
- 文件大小(KB或MB)這是為網站準備圖檔的最重要的部分。過大的圖檔需要較長時間才能下載到訪問者的瀏覽器,並拖緩您的網站速度。對於大多數滿版的網頁圖像,最理想的大小為80Kb-100Kb。如果圖像只是頁面的一部分(例如Blog文章的一半寬度),那20Kb-30Kb已經很好。將圖像質量下降到原始檔案大小的30-50%通常用肉眼不會有感到有任何的差異。所以您可以將2-3Mb的圖檔降低到80kb-120kb,您的眼睛並不會感覺出真正的質量變化。
關於圖像優化相關網站工具
除了簽幾篇介紹拍照的文章內有介紹過幾個影像編輯網站,如:fotor線上編輯網站外,以下提供一些可供您裁剪和調整圖像文件大小的網站。
- Mac:ImageWell是一款針對MAC系統所提供的編輯工具,使用預覽(使用工具,調整大小,然後導出保存為JPG)。
- Windows:FastStone是一款快速、穩定且容易使用的圖片瀏覽器、轉換器與編輯器。它有許多實用的功能,包含圖片瀏覽、管理、比對、去除紅眼、變更大小、剪裁、顏色調整等。
示例圖像
這張圖片原始版本是11.5MB和4,368像素寬。
底下有3個版本的相同的圖像如下所示 – 點擊查看完整版本。
- 第一版2000像素*1,333像素。這比大多數螢幕更寬,所以您的瀏覽器可能會自動調整大小,以適應您的窗口。文件大小為880KB。
- 第二個版本調整到800像素*533像素(將適合您的屏幕) – 只是減少寬高尺寸(沒有質量下降)將文件大小下降到196KB
- 第三個版本留下800像素寬,但變更文件大小,所以文件大小只有80KB。