Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具

Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具

免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot GuruFull Page Screen Capture 都能透過瀏覽器建立網頁擷圖。

使用 Wayback Machine 完整備份網頁畫面,建立可永久使用的引用來源

使用 Wayback Machine 完整備份網頁畫面,建立可永久使用的引用來源
Copyright : rawpixel / 123RF Stock Photos

幾天前我介紹了「以網頁時光機 Wayback Machine 比較不同時間點的網頁內容差異」,也就是大家很熟悉的 Internet Archive 最近推出的新功能,這項服務確實非常好用,除了可以回溯查看某個網站在不同時間點樣貌,對於已經被刪除或編輯後的網頁內容也有保存紀錄或回復的效果。順帶一提,記得之前還看過付費服務可以協助網站管理員從 Wayback Machine 將以前的網頁資料恢復(因為這些備份還是得經過處理才能變回一般網頁),若網頁放在虛擬主機又沒續費而被刪除是可以救回資料的方法。

ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果

早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。

Full Page Screen Capture 線上產生網頁長擷圖,正常顯示中文內容無廣告

Full Page Screen Capture 線上產生網頁長擷圖,正常顯示中文內容無廣告

無論是電腦或行動裝置其實都有內建螢幕擷取功能,也就是透過特定的快速鍵組合就能將畫面抓下來,儲存成常見圖片格式,抓圖的功能大家應該不陌生。有時候內建的工具並不一定能滿足一些進階使用者需求,例如要拿來抓取工作上使用的圖片時就會選擇其他更專業的擷圖軟體,我個人很喜歡 Jing,但是 macOS 10.15 後只支援 64 位元應用程式,TechSmith Screenshot 將成為 Jing 的替代方案。

Scrola 建立自動捲動網站效果的影片,設計網頁或簡報都很好用

Scrola

儘管有很多可以建立網站擷圖的軟體或網路服務,卻很少有人工具能幫你製作出動態效果的網頁畫面,這是什麼意思呢?簡單來說,就像是使用者實際在瀏覽網頁的感覺,會透過捲動方式慢慢往下瀏覽頁面,將這段過程錄製為影片格式,可以在網頁設計或投影片簡報中作為範例,雖然以螢幕錄影工具可以做到,但免不了需要花點時間編輯後製,還好科技就是用來解決問題,而現在已經有網路服務能幫你製作出網站瀏覽影片。

Screen Guru 輸入網址線上立即製作截圖,附帶 Mac 視窗和陰影效果

Screen Guru

無論你是使用電腦或行動裝置,現在都有所謂的「螢幕擷圖」功能,可透過快捷鍵快速保存當前畫面,對於用來儲存、備份內容或製作資料來說會很有用。當然你可能也有自己慣用的螢幕擷圖工具,但都沒關係,只要找個自己方便的方式即可。不過如果剛好需要製作網站縮圖,手邊又沒有適當軟體,線上工具就是最快、最簡便的解決方案,例如「Screenshot Guru」在輸入網址後就能將網站快速轉為 PNG 格式。

Screenshot Guru 免費網站截圖工具,填入網址直接將頁面轉為 PNG 圖片

Screenshot Guru 免費網站截圖工具,填入網址直接將頁面轉為 PNG 圖片

無論你是使用 Windows 或 macOS 都有不少好用的免費螢幕擷圖軟體,例如 FastStone CaptureWinSnapPicPickJing(Mac),如果是智慧型手機或平板電腦也有內建畫面抓圖功能,相信大家有抓取過畫面的經驗,只是內建截圖工具沒辦法擷取整個網頁畫面,還是得有自動捲動網頁才行,而之前介紹過的 Web-Capture 就是一款可快速將某個網址轉為圖片輸出線上「網頁快照」服務。

Web-Capture 線上「網頁快照」服務,輸入網址完整擷取頁面轉圖片

Web-Capture 線上「網頁快照」服務,輸入網址完整擷取頁面轉圖片

現今常見的作業系統像 Windows、macOS 或行動裝置 iOS、Android 都有內建擷圖功能,而且使用上也非常簡單,Windows 直接按下鍵盤上的抓圖按鍵就會自動擷取到剪貼簿,而 Mac 則是透過 Shift-Command-3 快捷鍵拍攝螢幕快照,但有時候需要比較精確的截圖範圍就必須使用擷圖軟體達成,好消息是現在瀏覽器也都開始提供截圖功能,例如 Firefox Screenshots 或「使用 Chrome 內建工具製作網頁長截圖,擷取網站畫面免安裝下載外掛」都能擷取畫面。

Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形

Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形
(Copyright: rido / 123RF Stock Photo

記得幾年前架設 WordPress 網站時,會透過行動版外掛功能來打造更適合手機或平板電腦閱讀的環境,這個作法通常是將手機使用者引導至另一個佈景主題,專為行動裝置特別設計,無論在網頁大小或載入速度上都會比桌面版更適合行動裝置使用者閱讀。雖然看起來是個很不錯的解決方案,但其實也會出現一些問題,例如:不一定適合所有螢幕大小的行動裝置、必須維護兩個不同的佈景主題等等,因此後來趨勢就逐漸轉為使用「自適應網頁設計」(Responsive Web Design)替代。

Perma.cc 免費網頁網址備份工具,輕鬆將重要鏈結完整保留

Perma.cc 免費網頁網址備份工具,輕鬆將重要鏈結完整保留

有時候會遇到必須保留網頁內容的情形,通常一般人可能直接螢幕擷圖,使用抓圖功能保存為圖片,不過這會有些問題,例如你很難證明網頁時間,圖片無法編輯或取用文字內容,因此最好的方法還是將整個網頁包含動態、靜態內容通通複製起來。之前我介紹過「Archive.is 線上備份網頁工具,可下載完整網頁內容或將畫面轉為擷圖」就是一個很好的選擇,此外,Internet Archive 的 Wayback Mahine 堪稱是網頁時光機,完整記錄近一二十年來網路發展變化。