Change History
Message: [講義] 圖檔尺寸調整《圖片請盡量縮小至100K以下》
Changed By: JinJin
Change Date: November 08, 2011 09:55PM
[講義] 圖檔尺寸調整《圖片請盡量縮小至100K以下》
很多人喜歡使用圖片來美化網頁,增加網站的吸引力,可是大量圖片,以及大量體積龐大的圖片,卻會讓網站像大象一樣很難行走,越來越慢,降低瀏覽效率,也會讓人缺乏耐心,即使設得再好看,也達不到網站瀏覽效果。
因此網站瘦身是很重要的事,如何讓網站既美麗又有效率,請執行以下步驟:
<h2>檢視與修改圖檔大小的步驟:</h2>
<h3>1.準備好圖片之後,請開啟資料夾檢查檔案大小</h3>
<b>開始資料夾→檢視→詳細資料</b>
若發現超過100K 的圖檔就要執行瘦身動作,單一檔案最好能降低到50K以下,圖檔寬度,非必要不要超過500K
若發現超過100K 的圖檔就要執行瘦身動作,單一檔案最好能降低到50K以下,圖檔寬度,非必要不要超過500px
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-00.jpg[/IMG]
<h3>2.若超過100K以上檔案,請以Photoshop開啟</h3>
<b>檔案→儲存為網頁與裝置用</b>
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-01.jpg[/IMG]
<h3>3.檢視目前檔案檔格式、大小及速率</h3>
範例圖檔原為PNG檔,521.7K,以2M的上網速度,下載本圖需要4秒
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-04.jpg[/IMG]
<h3>4.以其他格式或降低色彩數目,來調整圖片檔案大小</h3>
選擇JPG圖檔,品質60,則檔案降低為80.67K,以2M的上網速度,下載本圖需要1秒
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-05.jpg[/IMG]
[hr]
請同學務必牢記網頁圖檔瘦身的原則,隨時檢查有無檔案尺寸過大的圖檔,發現即將之修改,如此將更能朝更有效率也更專業的網站前進。
Original Message
作者: JinJin
Date: November 08, 2011 09:54PM
[講義] 圖檔尺寸調整《圖片請盡量縮小至100K以下》
很多人喜歡使用圖片來美化網頁,增加網站的吸引力,可是大量圖片,以及大量體積龐大的圖片,卻會讓網站像大象一樣很難行走,越來越慢,降低瀏覽效率,也會讓人缺乏耐心,即使設得再好看,也達不到網站瀏覽效果。
因此網站瘦身是很重要的事,如何讓網站既美麗又有效率,請執行以下步驟:
檢視與修改圖檔大小的步驟:
1.準備好圖片之後,請開啟資料夾檢查檔案大小
開始資料夾→檢視→詳細資料
若發現超過100K 的圖檔就要執行瘦身動作,單一檔案最好能降低到50K以下,圖檔寬度,非必要不要超過500K
若發現超過100K 的圖檔就要執行瘦身動作,單一檔案最好能降低到50K以下,圖檔寬度,非必要不要超過500px
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-00.jpg[/IMG]
2.若超過100K以上檔案,請以Photoshop開啟
檔案→儲存為網頁與裝置用
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-01.jpg[/IMG]
3.檢視目前檔案檔格式、大小及速率
範例圖檔原為PNG檔,521.7K,以2M的上網速度,下載本圖需要4秒
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-04.jpg[/IMG]
4.以其他格式或降低色彩數目,來調整圖片檔案大小
選擇JPG圖檔,品質60,則檔案降低為80.67K,以2M的上網速度,下載本圖需要1秒
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/resize-05.jpg[/IMG]
[hr]
請同學務必牢記網頁圖檔瘦身的原則,隨時檢查有無檔案尺寸過大的圖檔,發現即將之修改,如此將更能朝更有效率也更專業的網站前進。