在開發網頁或設計版型可能會需要放入圖片進行測試，除非你原本就有自行準備測試圖片，否則就需要使用佔位圖片（Placeholder），簡單來說，佔位圖就是依照使用者所需的長度寬度快速產生圖片，以填充特定的圖片空位，好處是不用手動裁切圖片，大多數的佔位圖片產生器都是透過圖片網址來指定要顯示的大小，有些還能加上特效、選擇不同類型的範例圖片，我覺得可以在圖片中顯示長寬尺寸對於要辨識來說也很有用。
網頁設計
Fluenticons 微軟 4000 個開放原始碼免費圖示下載，線上預覽風格配色
微軟（Microsoft）釋出超過 4000 個開放原始碼免費圖示「Fluent UI System Icons」，一系列大家都感到熟悉、友好和現代化的圖案設計，不過在 GitHub 取用這些圖案、瀏覽上並不是很方便，因此有國外開發者另外開發了一個「Fluenticons」網站做為 Microsofts fluent icons 檢視器，透過這個工具就能在線上預覽、搜尋特定的圖示圖案，也能切換淺色或深色背景，讓下載圖示變得更簡單。
Mesh 漸層色背景產生器，加入顏色以拖曳方式扭曲漸變效果
如果你喜歡 iPhone、Mac 漸層顏色背景圖片，其實也可以自己動手做，之前介紹過不少漸層色的背景產生器，像是「Gradient Backgrounds」就是一站式的漸層背景產生工具整合各種服務（有點像是 The Stocks 2 整合免費圖庫、影片、圖示和字型的感覺），或是 WebGradients 收錄超過 180 種漸層色背景免費下載，產生 CSS 3 語法在取用顏色更方便。 其他還有像是 Blend、ColorSpark、CoolHue 都是類似的圖案產生器服務。
Lineicons 超過 5000 個線條圖示，適合設計師或開發使用者介面
Lineicons 是一套收錄超過 5000 種圖案的圖示集，主要設計風格為手工製作線條圖示，適合使用於各種現代化使用者介面，例如網頁、行動裝置應用程式、桌面軟體等等，對於設計師或開發專案來說非常有用。其實類似的圖示資源還真不少，例如之前介紹過 Uicons、Unicons Icon Library、iconhub、Heroicons、IcoMoon App，這些圖示多半都已經完整覆蓋常見常用圖案，差異在於細節或是授權方式，如果需要尋找開發用的素材可找找免費圖示分類。
DOTOWN 前任天堂設計師開發免費點陣圖網站超過 600 種素材免費下載
之前介紹過「俐方體11號：免費、開放原始碼 11×11 中文點陣體字型下載」，一款帶有復古感覺的點陣免費字體，看起來非常有時代感，彷彿回到二十年前的 DOS 老遊戲風格，一格一格的營造出早期解析度不高的效果。如果你喜歡這種點陣圖設計，現在還有專門提供類似素材的網站（不過當然以日文為主），無論要使用於海報、投影片或是做為報告插圖，將它套用於實體商品都非常適合。
Alwane 網頁配色擷取工具，輸入網址就能取得顏色代碼相關資訊
如果想知道某個網站配色方式，除了打開開發人員工具或是檢視原始碼，也有第三方服務可以使用，即使無法完整複製別人的配色，也能快速得知網站使用的顏色代碼或配色模式，取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢？若你有類似的需求，接下來要介紹的服務或許可以滿足，這項服務會擷取特定網頁使用的顏色，讓顏色相關資訊更一目瞭然。
SEO Checker 專業 SEO 報告工具，找出各種網頁問題並提供解決方案
如果說到要怎麼改善搜尋引擎最佳化（SEO）成效，我通常會說先把程式碼寫對寫正確，然後檢查一下網站速度使用者體驗，尤其是 Google 已經將網站使用體驗核心指標（Core Web Vitals）列為搜尋排序的因素，如何最佳化三項指標：LCP、FID 和 CLS 就是目前最重要的工作，另一方面，必須要仔細閱讀「Google 搜尋引擎最佳化入門指南」有助於建立起正確的觀念。以往各項網站最佳化操作依然可行，也是網站管理者必須要注意而且時時刻刻檢視的項目，透過一些工具進行分析有助於找出並且釐清應該進行的相關操作。
Uicons 超過 4000 個免費圖示下載！適合網頁、應用程式開發者使用
很多年前介紹過「FlatIcon 超過 12000 個平面化圖示設計免費下載」設計資源，時至今日它已經是個非常龐大的素材庫，這家公司旗下還有包含 Freepik、Slidesgo 等知名的網站，前陣子剛推薦過 Icons Pattern 以 Flaticon 提供的圖示製作無接縫背景圖片工具，對於要產生重複拼接效果的素材很有用，接下來還要再推薦一個也是 Flaticon 旗下的免費工具，如果需要開發網站、軟體或應用程式可以研究一下。
How Big Is My Browser? 打開網頁顯示目前的瀏覽器可見範圍尺寸
因為工作需求我時常需要對螢幕進行擷圖，擷取瀏覽器、應用程式視窗畫面，透過 SizeUp 工具可快速調整視窗大小（SizeUp 不是免費軟體，Spectacle 是功能類似的免費替代方案），不過很難得知實際瀏覽器顯示解析度，如果是開發者或設計師想調整頁面，可能需要設定一個確切的顯示範圍進行更精準測試，接下來要介紹的小工具可以滿足類似需求。
Placy 線上佔位圖產生器，製作特定尺寸範例圖三種格式下載
在開發網站、測試網頁模版設計時經常會需要用到佔位圖（Placeholder），這是什麼呢？簡單來說就是範例圖片，用於填充一些可能要預留、之後顯示圖片的位置，既然是佔位圖片就要符合幾個要件，像是快速設定要產生特定尺寸大小、可以快速取用（甚至不用下載圖片、直接給使用者圖片鏈結），或是在圖片上方會清楚標示出這張佔位圖的尺寸，對於開發來說就會更方便更省時間。