3個實用線上圖片壓縮工具

3個實用線上圖片壓縮工具

網站中的圖檔大小會影響到網站的載入速度,如果檔案太大,可能會花更多時間讀取圖片,如果檔案太小,給人模糊的感覺,又會影響使用者體驗。因此圖檔大小是需要去想辦法改善,又不能流失畫質。以下介紹線上圖片壓縮工具網站,讓你可以輕鬆壓縮圖片,放到你的網站中。

圖片壓縮工具整理

Tinypng

Tinypng 圖片壓縮
Tinypng

TinyPNG 可以直接上傳圖片拉進行壓縮,可以壓縮jpg與png兩種檔案,並可以批次對圖片進行檔案壓縮,但最高上限是一次 20 張,且圖片檔案大小不能超過 5MB 。有透明背景的png檔,也可以進行壓縮,透過減少顏色數量,可以將24位PNG文件轉換成更小的8位索引顏色圖像,丟掉所有不必要的元數據,留下支持100%透明度的更好的PNG文件。號稱可減少 70% 以上的大小,有推出 Word Press 外掛版本。

Squoosh

Squoosh 圖片壓縮
Squoosh

由 Google 於 2018 年推出的線上工具,非常具有實用性,名為 Squoosh ,是專門用來壓縮照片圖檔的線上工具,可支援各式類型的圖檔格式,與各種不同的瀏覽器。不需要另外下載或安裝任何軟體,只要透過瀏覽器,進入到 Squoosh 的網站,把照片直接拖曳到頁面上,透過設定介面,可以調整調整壓縮品質、畫素、重設圖片大小,設定後直接在線上預覽不同壓縮演算法對於原始圖片造成的變化。

特別的是, Squoosh 可以在載入網頁後離線使用,圖片壓縮是在使用者裝置上進行,不會傳輸任何資料到伺服器。無論在電腦或行動裝置(手機、平板電腦)都能使用。

Google Squoosh 免費高質量圖片壓縮工具

iLoveIMG

iLoveIMG 圖片壓縮
iLoveIMG

此網站提供多種常用的基礎編輯功能,可以處理的圖片格式為 JPG 、 GIF 、 PNG 或 RAW ,並提供以下可能會用到的功能:圖片壓縮、調整圖片尺寸、裁剪圖片及圖片轉檔,當然它的特色就是可直接從瀏覽器進行操作,再將處理好的成果下載到電腦。

未註冊的免費用戶可以同時上傳 15 個檔案、大小總合不能超過 130 MB,免費註冊後的用戶可以同時上傳 30 個檔案、大小總合不能超過 200 MB。

除此之外,還有其他強大的線上軟體,例如: iLovePDF 線上 PDF 編輯工具,提供包括轉檔、壓縮及解除密碼和浮水印等功能,因為是線上工具,使用者無須額外下載或安裝軟體,直接從瀏覽器就能進行相關操作。

延伸閱讀:好用的付費圖庫大整理

精選3個超實用免費影片素材網站

超實用免費影片素材網站

很多網站首頁會採用最上面的滿版輪播展現品牌形象或是最新消息,有時候光靠圖片也很難吸引使用者繼續往下滑。那麼,除了大圖輪播之外,我們也可以試試看嵌入影片來讓使用者產生興趣,增加網站的動態性,有時候一個適合網站的影片比多張圖片輪播更能留住使用者的眼球。

以下介紹3個網站,提供你可商用的免費影片素材,不只可以用在網站上,也可以用在影片編輯等等其他需求唷。

免費影片素材網站介紹

Pexels Videos

pexels video 1
免費影片素材網站 Pexels Video

Pexels Videos 提供可商用的授權影片,使用者可以免費下載,對影片進行編輯或修改,也能免費用於個人或商業用途無須取得原作者授權,而且也不用標註來源,所有影片皆能用於合法用途上,大部分為 MP4 格式。

網站收錄的影片類型多元,包括大自然、夜景、動物、縮時攝影、天空、城市、海洋、食物等等,可以用英文關鍵字去搜尋,橫式或直式的影片都有,雖然內容不如免費圖庫那麼豐富、龐大,但對於需要影片又無法親自錄製的人來說,無疑是一個很棒的素材網站。

Coverr

Coverr
免費影片素材網站 Coverr

Coverr 網站提供許多精美的影片,可以免費用於個人與商用用途,網站以一週七隻新影片的數量持續上傳供大家使用,內容包括許多類別,例如,科技、動物、動畫效果、風景與人物等等,可以使用英文關鍵字搜尋影片,可以找到更適合你的影片。影片質量高,甚至有螢幕的影片也有綠幕十字線可以供合成再使用。

Coverr所有的影片都是 MP4 格式的高清影片,有時也提供 4K 畫質,提供用戶可以免費下載。

Mixkit

mixkit
免費影片素材網站 Mixkit

Mixkit 有最新拍攝的高畫質影片素材,作品媲美商業廣告片段,根據各種常見生活主題分類。影片數量雖然不多但持續更新中,並且都提供完全免費、 1080p 高畫質的 mp4 檔案直接下載,網站上所有的影片都可免費下載,並且授權可商業使用,也可以重新修改、剪輯或加上自己的內容。

網站影片內容以幾種生活主題分類:商務、交通、城市、自然、運動、咖啡等等。影片長度大概是 30 秒左右的片段,可以當作正片中穿插的片段,或是網站首頁橫幅的影片。除了影片素材,也有免費音樂素材、免費音效素材可以下載,可以搭配使用,讓影片效果更佳。

延伸閱讀:8個網頁設計素材網站報你知

超過1年的SSL不被信任?SSL憑證最長有效期限縮短

超過1年的 SSL 不被信任?

蘋果在憑證機構瀏覽器論壇(Certification Authority Browser Forum,CA/Browser Forum)大會上宣布這項新政策,CA/B Forum 是憑證機構與瀏覽器業者、軟體公司參加的業界論壇,在蘋果的新政策下,新網站若包含效期超過13個月的SSL憑證將被Safari、以及iOS、Mac OS系統(iPhone、iPad及Mac電腦)上視為不安全。但是Safari仍然會接受9月1日以前發出,即效期825天的 SSL/TLS 憑證。

SSL safari
Safari 瀏覽器 (Apple

9月1日後,Safari 只接受小於398天效期的 SSL 憑證

假設原網站 SSL 數位憑證的到期日在 9 月 1 日之後,當憑證到期失效後,為了符合蘋果的新規範,之後續約更新的憑證都只能註冊一年,才會受到 Safari 信任,並維持網站在瀏覽器的安全顯示。如果還是想註冊多年期 SSL 數位憑證,可以提早於今年 (2020年) 9 月前先完成申請和續約更新,如此一來就不會受到影響,並能在有效期限內繼續使用。

人力時間成本提高,需每年續約更新

為了讓所申請的憑證都能受到 Safari 信任並視為有效憑證,公司企業必須每年進行續約更新,這將會增加網站管理員的人力與時間成本。

若目前只有 Safari 有這項新規定,大家一定要跟進嗎?目前,雖然 Chrome、Mozilla 及其他瀏覽器都還認可多年期憑證,但 Chrome 和 Mozilla 在去年的 CA/Browser Forum大會上,就有提案要將憑證有限期縮短,因此,未來 SSL 數位憑證政策有可能朝向全部瀏覽器都只接受一年期 SSL

憑證效期縮短是未來趨勢

目前的憑證有效期限是27個月, Safari 要求398 天,大約 13 個月,憑證的有效期限越來越短,從最早的 8 年、5 年、39 個月、到現在。 SSL 數位憑證的核發目的,主要是做為網站的身分驗證,讓瀏覽者能確認網站的合法正當性、安全性,非釣魚網站,因此我們可以從憑證確認企業身分。假設 SSL 數位憑證有效期過長,且缺乏定期的驗證機制,有可能會形成安全漏洞,讓有心人士或駭客有機可乘,因此,憑證有效期才會不斷縮減,藉此提高安全性

面對現在資安危機、網路安全等警示,SSL 憑證的定期更新維護,也越來越重要,藉由每年固定的續約與審核,維護企業網站安全,並帶給客戶更安心、放心的瀏覽空間。

延伸閱讀:

6個配色網站報你知!你的網站配色靈感來源

6個配色網站報你知

不管你本身是設計師或是從事需要跟設計師溝通的行業,了解一些基本的配色工具和方法都會很有幫助的,以下介紹六個好用的配色工具和網站,幫助大家在配色時不會沒有靈感或是胡亂配色。

Color Tool

Google Color Tool
Color Tool

Color Tool 是由 Google 開發專門提供給 UI設計師或前端工程師參考的配色網站,可以選擇網站上提供的色票去選擇主要想搭配的顏色或是自己輸入想要顏色的色號都可以,網站還提供各種不同常見版型的配色呈現參考,也能針對網頁上的字體顏色和透明度對於需要做網頁色彩搭配的人可以說是神器。

Adobe Color

Adobe Color
Adobe Color

可以在網站中使用調色盤,自己移動、配色,也可以上傳圖片,吸取圖片中的顏色,製作色票,製作好了之後可以下載色票檔至 Photosop 使用。它除了提供各種配色方案、高度自由的調整空間之外,還可以直接搭配 Adobe 軟體同步使用,提升工作效率。另外,有「探索」的頁面,可以看看其他配色盤,可能會給你更多的靈感。

Coolors

Coolors
Coolors

Coolors 是一款簡單、快速、無須安裝就能使用的色彩工具,它主打的是超快速為你產生配色,每次會為你挑選由五種顏色組合而成的調色盤,並顯示顏色的代碼,使用者可以快速選取使用,或是鎖定其中的幾種顏色。

Material UI

Material UI
Colors & Palettes.

Social Colors 是 Material UI 網站旗下的一個項目,就它名稱來說你可以知道主要是以表示社群網站的標準色為主,它能精確告訴你 Facebook 藍色、Twitter 淡藍色是什麼色票,也有一些台灣較多人使用的服務,例如 YouTube、LINE、Instagram。

Material UI 還有各種顏色色票表,例如 Google 的 Material Design 配色、Flat Design 使用者介面配色、微軟的 Metro 配色、HTML 色彩,此外網站還提供 Material Design 圖示、選色器和 Unicode 特殊符號檢索工具。

Color Palette Generator

Color Palette Generator
Color Palette Generator

在此網站輸入圖像的網址,可以獲取與圖像匹配的調色板,這對於提出與客戶要使用的庫存照片相匹配的網站配色方案很有用,或是想要以圖像中的顏色做搭配的畫面配色或網站配色也非常方便。

咭片皇

咭片皇
咭片皇

此網站以各種中文及英文形容詞作顏色分類,多達160種分類,若是客戶說想要柔和一點的顏色或是恍惚的顏色,你們可以一起看看這個網站,形容詞內的顏色是不是符合你的形容詞想要帶給人們的感覺呢?

延伸閱讀:6大類網頁設計配色

4點比較告訴你:為什麼要經營購物車網站?使用電商平台不好嗎?

為什麼要經營自己的購物車網站

大家可能都會先從大型電子商務平台開始開店,例如Yahoo拍賣、露天、蝦皮或 PCHome 商店街等電商購物平台。但上面賣家眾多,競爭激烈,還要給平台手續費……,許多考量因素讓你不知道如何選擇?以下幫大家分析經營自己的購物車網站比較,還是使用常見的電商平台比較好呢?

你擁有自己的品牌嗎?

購物車網站
4點比較告訴你:為什麼要經營購物車網站?使用電商平台不好嗎? 20

若你只是想以個人名義賣賣二手商品、初階的選物商店,可以先從大型電商平台開始,例如蝦皮、Yahoo拍賣,這類型的網路商店,可以輕易跟買家做溝通、買賣,賣得成功之後,有固定客源、消費者後,可以考慮成立品牌。成立品牌電商相較於依賴電商平台,多了更多的自主性及彈性,賣家也能透過獨立官網掌握更詳細的消費者資訊。最重要的是,想成為一個被許多顧客記住並願意回購甚至介紹給朋友的店家,具有鮮明品牌形象是致勝關鍵。

購物車網站 vs 電商平台

電商平台購物車網站
商品展示固定規則與格式受限自行規劃與風格自由編排
品牌競爭力品牌特色難以呈現完整呈現品牌特色
數據分析電商平台掌握數據網站管理員掌握數據
成交手續費
總結優勢:方便建立商店
劣勢:無法展現商店價值,平台有手續費,每筆訂單需平台會抽成、平台掌握數據
優勢:無手續費抽成、可自由編排網頁/設定促銷活動、店家完全掌握數據
劣勢:需建構網站

商品展示

電商平台的優勢就是他什麼都幫你準備好了,你只需要加入會員、上架商品,就可以開始做生意。雖然新手賣家會認為這樣比較方便、好上手,但如果想讓商品展現特殊規格或介紹,電商平台會無法滿足你的需求。舉例來說:如果我們要新增產品細節介紹,希望增加圖片、在影片旁配上文字,使用電商平台就能只有固定規劃與設定,不能想動什麼就動什麼,須遵守他的規則;但如果使用購物車網站,就能依照我們需求的面板,讓商品特色依照你的想法完整呈現,不僅商品介紹更全面,網站也能讓消費者感受到我們的專業與特色

電商平台像是網路世界的百貨公司,如果你是賣家,你的網路商店就像是一個專櫃,但因為隸屬平台,就必須遵守平台訂的規則。如果使用購物車網站,我們就是一個自營店家,永有自己的領地,可以任意規劃自己的想呈現的風貌。

品牌競爭力

許多人會認為電商有「流量大」的優勢,但換個思維討論也就是「競爭大」。生為電商平台的愛用者,是不是也很喜歡產品最下方或左側,常常會有其他相似商品的推播呢?如果不是最便宜的產品,電商平台還會很貼心整理競爭對手的產品給買家看,這對買家是實用的功能,賣家可就苦哈哈了,好不容易到手的消費者就這麼去別的商家消費了。電商平台競爭者眾多,若無法在搜尋結果中取得前面排名,不易在眾多品牌中脫穎而出。受限電商網站的設定,小店家難以展現品牌差異性,無法表現品牌價值,最後多以削價競爭。

若使用自建的購物網站,能避免在大型電商平台同時和其他競爭對手互相比較。而且,透過網頁設計、銷售圖加上文案和圖片的形式,也更容易打造獨特、符合消費者體驗的購物情境,凸顯產品與品牌的特色。並透過改善網站架構,結帳流程等方式提升搜尋排名。

數據分析

電商平台設置的商店,所經營的銷售數據會直接貢獻給電商平台,開店者無法全權掌握所有數據,生意的擴展也因此失去了重要的依據。但如果我們使用購物車,所有數據都會在自己網站後台清楚的顯現,我們可以透過後台看到的數據分析資料,掌握客群來源、廣告效果與商品喜好,全盤掌握數據分析,再進行下一步的行銷規劃。

成交手續費

使用電商平台除了要繳交使用費之外,成交的商品也會被抽成。雖然電商平台的上手門檻很低,但加入之後每筆成交的訂單都會被電商平台抽成,當然使用者付費是正常的,對於一般中小型企業這一點手續費是沒有問題,但若是成交量比較大或者是利潤較低的商家來說,這一點手續費累積下來不是很可觀就是會不斷侵蝕商家獲利

延伸閱讀: