圖片讀取太久,使用者抱怨流量都被吃光了-解析度篇

2020-04-24
    Article outline

當你在使用架設自己的網站時,有想過為什麼自己的網站讀取速度為什麼會比別人慢上一截嗎?

看看這圖片讀取數量及圖片大小,光是要下載完這些圖片就花了將近26秒的時間,圖片大小也來到了100多MB,這樣網站讀取速度想當然是非常的慢。但別擔心,現在就教你如何壓縮圖片,及剪裁在網站上圖片該有的尺寸。

現在先抓張圖片給大家做示範,此圖片有經過馬賽克處理,先來看看這張圖片的錯誤示範,第一個問題就是圖片的解析度太大了,由於多數人的螢幕解析度都在1920x1080,就算圖片的解析度再大,使用者的螢幕解析度沒跟上的話,那他還是只能看到1920x1080的解析度,而且人眼的辨識率也不會那麼清楚,不如犧牲點解析度來換取更曉得圖片大小,這樣對於使用者會有更好的使用體驗。

那這邊就推薦大家一個好用的圖片解析度調整的網站, iLoveIMG
網址:
https://www.iloveimg.com/zh-tw/resize-image

這網站方便的地方就在於,同時包含了各種圖片處理的工具,例如:壓縮圖片、調整解析度、圖片剪裁及轉換格式等等,而今天要用的就是調整解析度。

那下方就是一張8MB的圖片,解析度是3666x5446,剛剛也說明了大多數人電腦螢幕的解析度落在1920x1080附近,那為什麼我這邊設定的圖片解析度是727x1080,而不是1920x2852呢?

這邊的話就要看你的網站是甚麼取向了,你看一張圖片是希望一張圖片完整地呈現在螢幕上,但解析度稍微差一點;還是希望看一張圖片要一直上下滑動才能看到完整的圖片,但解析度比較好,那這邊就是取決於個人的使用習慣了,而圖片大小也就是在這地方會有巨大的落差了。

看看這檔案大小的落差,727x1080只需要348KB,而原始大小的圖片卻要8MB,差了20倍的大小,如果一頁10張這樣落差的圖片,那從原本可能80MB大小的頁面就大幅縮減成3.4MB左右,網站的速度自然就會快上許多。


2020-05-28

上班族必備 - 各式免費線上工具分享

    Article outline

相信很多人一定時常遇到一些辦公問題:文件之間轉檔、影片格式不對、照片檔案過大、照片沒有PS卻想簡單去背處理...等等,其實這些問題使用線上工具都有的解!重點是...免費!

 

1.Convertio 線上免費轉檔工具,文件、音檔、圖片、影片,轉檔就靠他!

一般文件轉檔時,往往都要安裝特定的軟體應用,像是最常用到的 PDF 轉 DOC 或是 DOC 轉 JPG、PDF。還有也常常會遇到圖片之間的轉檔,例如PNG轉JPG。也常會有影片或音檔需要轉成 MP3 格式…等。有這些需求總共都不知道要安裝多少程式了...現在你可以到「Convertio」這個網站就能幾乎一次滿足你所有的需求其支援包含文件、音檔、圖片、影片、電子書…等 90 種的檔案格式互轉。

 

該網站提供電腦上傳、Dropbox、Google Drive 或是貼上檔案網址等方式上傳檔案,就可以選擇你要轉出的格式內容囉!

2.更專業的線上影片格式轉檔工具Online Video Converter

有的朋友可能會說上一個線上工具針對影片的部份格式選擇不夠多,這時候你可以試試Online Video Converter,它針對了市面上近乎你能找到的影片格式,讓格式彼此之間都可以線上轉檔並下載,同樣不需透過安裝軟體就可以做到。網站支援 MP4、AVI、MPEG、FLV、3GP、MKV、Webm、WMV 或 MOV 等格式相互轉換,且可對影片的解析度進行設定,讓免費也能轉出清晰的影片品質。

網站中文介面,操作簡單,相信你也很快就可以上手的!快來試試看吧!

 

3.Google官方推出免費圖片壓縮工具「Squoosh」,照片壓縮減肥又不失真

現在人手一機的智慧型手機相機講求高畫質、高像素,有時候照片檔案真的好大,手機記憶體一下就被塞滿...或是當你想上傳到相關社群網站、部落格的時候也因為相片容量太大感到困擾的話,不仿試試由Google推出的免費圖片壓縮工具「Squoosh」吧!

Squoosh強調的是照片壓縮瘦身的同時,也能確保照片不失真。雖然 Squoosh 尚未提供中文介面,但選項都很直覺易懂,並且更特別的是網站載入後,它是可以離線作業使用的!無論電腦或是手機平板皆可使用。

 

4.連我阿嬤都會用?號稱5秒快速照片去背線上工具「Remove.bg」

照片去背線上工具何其多?但基本上不外乎還是需要用類似筆刷工具對於人像的邊緣進行來回塗抹才能達到去背的效果,「Remove.bg」號稱使用的是AI技術、100%全自動,也就是說你完全不需要進行什麼操作,只需要圖片上傳、按下按鈕、去背完成圖檔下載,搞定!真的連我阿嬤都會用!

介面簡體中文,但沒有多餘按鈕、功能工具列之類的,你只需要把要去背的檔案準備好,點下上傳按鈕、或是直接拖來近來即可,值得一試!

這邊筆者也幫大家進行實測,分別是細毛很多的寵物貓、線條俐落的車子分別進行測試,我們可以看到成果實屬中上,只要不是背景複雜到一個不行、主角與背景色調過於接近的狀況,基本上去背效果是相當不錯的,當然專業的設計師們也可以將PNG檔下載下來再去PS進行微調,相信可以幫大家省去不少去背作業的時間!


2020-04-30

網站速度很慢,到底是哪邊出問題?如何改善網站速度

    Article outline

滿常收到客戶在上線後,反應自己的網站過慢,一進去客戶的網站一看,阿呀!全部都是大圖呢!

而通常也不知道到底犯了什麼錯誤所導致,以及從何改起?這時通常我們都會透過Google PageSpeed Insights,先大概看一下所列出來的圖片,當作"參考",讓你比較快的知道要從哪裡改善,應該絕大部分的用戶都會看到以下資料:提供next-gen格式的圖片

這時候就會有疑問了,什麼是next-gen格式的圖片?

白話來講,就是這三種圖片格式:JPEG2000、JPEG XR、Web P,以下簡單做介紹:

 

1.JPEG2000

JPEG2000是由聯合圖像專家小組創建和維護,通常被認為是未來取代JPEG的下一代圖像壓縮標準,副檔名大多是為.jp2,雖然JPEG 2000在技術上有一定的優勢,但普遍仍是較少使用的圖像文件。

與JPEG相較,JPEG 2000比較明顯的優點就是沒有JPEG壓縮中的馬賽克失真效果,主要為模糊失真。但在低壓縮比情形下(比如壓縮比小於10:1),JPEG圖像質量還是會比JPEG 2000要好,因此JPEG 2000適用在壓縮比較高的情形下,優勢才會明顯。

 

2.JPEG XR

JPEG XR由Microsoft開發,屬於Windows Media家族的一部分,用於替換JPEG2000,增加HDR支援。微軟公司宣稱JPEG XR「使用與JPEG算法相當的計算量與內存消耗可以得到明顯的與JPEG 2000相當的圖像品質。在有損壓縮的情況下可以得到明顯比JPEG好的品質並且文件大小減小一半」。不過仍然是較少使用的圖像文件格式。

 

3.Web P

Web P則由Google推出。跟JPEG採用同樣的壓縮技術,根據Google較早的測試,WebP的無失真壓縮比網路上找到的PNG檔少了45%的檔案大小,即使這些PNG檔在使用pngcrushPNGOUT處理過,WebP還是可以減少28%的檔案大小。也因為是Google本身自行推出,因此在主流瀏覽器Google Chrome是支援的,相對於前兩者來說,會較方便。

 

以上這些圖檔格式的壓縮效率雖然優於PNG或JPEG,能夠減少數據用量,較快的完成下載。但由於next-gen格式的圖片尚未這麼普遍,有些瀏覽器甚至未能支援,也可能因為高壓縮而導致圖片大大失真、色偏,因此這個只是改善方式之一,也能先從將網站內的PNG先轉為JPEG就好,除非圖片真的需要使用透明背景才有必要用PNG。

 

接下來再將JPEG圖檔壓縮、調整解析度,可參考以下兩篇文章的作法:

圖片讀取太久,使用者抱怨流量都被吃光了-解析度篇

圖片讀取太久,使用者抱怨流量都被吃光了-壓縮篇

 

總體而言,可以先從以下方式做好圖片的管理:

1. 若非需要使用透明背景,將圖檔儲存為JPEG格式

2. 圖片尺寸寬不超過1920px,以適當尺寸大小儲存,並且設定於72dpi即可

3. 壓縮檔案大小確保在1M以下

 

在管理網站圖片,可以依據上述重點來製作與上傳圖片,這樣子就可以為網站釋出更多流量,並且提升網站的效能哦!


Related information

Other Articles