首頁?>?知識?資訊?>?加快網(wǎng)頁速度,節(jié)省60% 以上的空間,可以用這個方法?>?正文

加快網(wǎng)頁速度,節(jié)省60% 以上的空間,可以用這個方法

2019/11/12 0:00:00 · 稿源:傳誠信

2019 網(wǎng)頁大小已接近4MB,是2016 的2 倍,比起2011 更達(dá)到4 倍以上。歸功于頻寬、4G 網(wǎng)路的普及,載入網(wǎng)頁的速度沒有像網(wǎng)頁大小一樣呈倍數(shù)成長,但隨著預(yù)期心理提升,人們?yōu)g覽網(wǎng)頁時等待的耐心變得比以往更少了!

Page-Size-1024x641.png

(圖片來源)

雖然網(wǎng)頁速度不是最直接影響到網(wǎng)頁成效、SEO的項目,但一般通則是超過「3秒」,使用者就很有可能跳出正在讀取的頁面。之前CTK小記也講過許多優(yōu)化網(wǎng)頁速度的文章,要檢測網(wǎng)站速度,可以使用Google PageSpeed Insights或是GTmetrix來找出拖慢網(wǎng)站速度的原因,加以改進(jìn)。

今天和大家談的,是最簡單,卻也最重要的調(diào)整:「適當(dāng)?shù)膱D片」。

這里只說到圖片,是因為包含圖片尺寸(解析度)、檔案格式、壓縮比例。牽扯到SEO 等還關(guān)系于alt 項目設(shè)定等等,就先來看最重要的「圖片大小」:

最簡單卻也最必要的調(diào)整:輸出適當(dāng)?shù)膱D片

企業(yè)好不容易請了商業(yè)攝影師,拍了漂亮細(xì)致的形象圖、示意/空間圖,要放到官網(wǎng),呈現(xiàn)產(chǎn)品或企業(yè)形象概念,卻常顧慮:「我放這么小的圖,不會看不清楚嗎?」(網(wǎng)頁設(shè)計公司都會提示:「圖片大小在100kb內(nèi)為佳,卻常常收到用云端空間傳來一張10MB的圖檔……)

來示范給大家看,實際壓縮、縮小后的圖檔,在你的電腦/手機(jī),是不是真的可以辨別出來?

別急著往下看解答,點擊放大下面三張圖片,你覺得哪張是壓縮過的,分別的檔案大小又是如何呢?

A

B

C




圖片A:壓縮50%,jpg 檔,檔案大小246 KB,解析度有縮放,為:1996X1171

圖片B:原圖,檔案大小1.8MB,解析度2674X1569

圖片C:壓縮50%,jpg 檔,檔案大小397 KB,解析度2674X1569

–(解析度上傳時還是有壓縮)

如何?有選到覺得是最正確的圖片嗎?如果你不放大來看(或什至你的螢?zāi)桓静粔蚝茫?,是不是很難分辨這之間的區(qū)隔呢?要是真的放大三張圖來看,在網(wǎng)頁或手機(jī)上,真的看得出來嗎?



A

B

C

由圖片A 到圖片C 分別是(這里只擷取300 x 300 px 大小,故檔案大小不容易超過):

圖片A:原檔未壓縮,檔案大小94KB

圖片B:壓縮至70%,檔案大小53KB

圖片C:壓縮至30%,檔案大小41KB

其實網(wǎng)頁顯示顏色時,因為RGB代碼,一般是16位元(例如#ff0000,就是紅色,# 008000是綠色),約有一千六百萬色(甚至是因為裝置的限制,某些裝置只能顯示256色/ 8位元),圖片的壓縮細(xì)節(jié)損失,才沒有那么容易看出來勒!

圖片壓縮工具選擇

網(wǎng)頁在上搞(圖片時),最大的NG就是放了不可思議大小的圖片檔!一個首頁以5MB計算,圖片可能占了90%的網(wǎng)站大小,若有10張近500KB的圖片來說,全部壓縮到100KB以下,網(wǎng)站整體大小可能縮減70%以上!

以這篇文章范例來說,是使用illustrator圖片編輯轉(zhuǎn)存時設(shè)置壓縮。若沒有專業(yè)的影像編輯軟體也沒關(guān)系,上網(wǎng)搜「壓縮圖片」其實有許多免費(fèi)的線上版本可以幫助你縮圖,像是Tinyjpg,或是WordPress的外掛如WP Smush都可以達(dá)到類似的效果。(這邊還是會建議在作圖或是輸出時,就設(shè)定完畢,減少圖檔可能失真的機(jī)會)

若是企業(yè)Logo 這種可能需要去背的圖片,就必須存為png 檔,若能有向量檔,如svg 檔,在圖片空間節(jié)省上也是很有幫助,且svg 檔更有著放大看也不會出現(xiàn)模糊的優(yōu)勢,更適合當(dāng)做網(wǎng)頁中Logo 的檔案格式使用。

總之若是可以提供壓縮檔、原檔(一般是psd, ai 檔),給網(wǎng)頁設(shè)計公司,上稿時應(yīng)萬無一失;若是需要自行上稿也別擔(dān)心,照著上面的提示,找到適合的大小還是可以壓縮出符合規(guī)格的圖片的。

?











大小對了,網(wǎng)頁圖片格式也要正確

列出網(wǎng)頁設(shè)計中,常見的圖片格式/大小給大家參考:

  • ?一般圖片:jpg檔
    ?需要有透明背景的圖檔:png, svg檔
    ?需要有動畫效果:gif, svg檔

  • ?網(wǎng)頁中全版Banner寬度建議:1920px
    ?大面積Banner寬度建議:1440px以上
    ?一般大圖寬度建議:1024以上
    ?中型圖片寬度建議:800以上

*高度可依照圖片比例調(diào)整,但不宜超出「一個螢?zāi)豢娠@示之范圍」為準(zhǔn)。

細(xì)節(jié)決定了網(wǎng)頁設(shè)計的精致度

一系列「給客戶看的網(wǎng)頁設(shè)計」文章下來,以新文章來說,自然流量都不錯。第一個是希望想要制作網(wǎng)頁的企業(yè)/公司,找到適合的網(wǎng)頁設(shè)計公司,而非用預(yù)算衡量,如此許多看不到的地方、沒想到的地方,就這樣被遺漏過去,最終制作了網(wǎng)站,也難以達(dá)到預(yù)期成效。

以圖片相關(guān)的網(wǎng)頁設(shè)計細(xì)節(jié)還有下面這些,列出以供參考:

  • ???jpg壓縮圖片時,很容易將文字邊緣破壞得模糊不清(又稱為破壞性壓縮)
    ??圖片命名盡可能還是以不要太長,且有意義的英文為主
    ??太大的圖片,除了讀取速度,也可能增加主機(jī)的負(fù)擔(dān)
    ???svg檔案輸出時,要格外注意(大小/陰影等)
    ??提供照片時,盡可能不使用手機(jī)照出來之成品(感光元件限制)
    ???RWD設(shè)計時,圖片注意事項


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354