影像與照片·社交影像調整器
為什麼社交圖片中的小文字在調整大小後變得難以閱讀
· 為什麼它很重要
影像品質 版式 輔助功能
一旦影像縮小到手機大小並壓縮,在設計畫布上可讀的文字可能會變得難以辨認。這篇文章解釋了易讀性背後的像素演演算法以及如何在發布之前對其進行測試。
沒人能讀懂的資訊圖表-手機螢幕上密集設計的具體失敗
資訊圖表可以在寬闊的設計畫布上完全可讀,但在作為手機大小的社交圖片交付時會失敗。單字沒有改變,但可用於描述每個字母的輸出像素數量發生了變化。在觀眾有機會閱讀之前,密集的支撐副本就變成了紋理。
測試匯出的檔案,而不僅僅是原始佈局。 Social Image Resizer 以目標預設尺寸渲染,並提供產生的 Blob 供下載。此導數是易讀性審查的正確工件,因為它包含瀏覽器所做的實際取樣和本地編碼決策。
文字也是像素-縮小如何縮小字母高度,以及為什麼筆畫比像素模糊或消失
圖片內的文字不再是語意類型。它是彩色像素。當整個藝術作品縮小時,字母高度和筆劃寬度與其他所有內容一起縮小。跨越多個來源像素的筆畫只能貢獻輸出像素的一小部分,迫使重採樣器將其與背景混合。
高對比邊緣使損失變得明顯,但在計數器關閉或相鄰筆劃合併後,僅靠對比度無法挽救結構。畫布平滑旨在避免鋸齒狀別名,因此微小的字體可能會變得柔軟而不是急劇破裂。效果取決於比例、字體、粗細、對比度和瀏覽器實作。
有損局部編碼可以柔化精細細節;目的地壓縮不在這個證據範圍內
JPEG 和 WebP 匯出在此工具中是有損的,並它們的品質參數會影響精細的影像細節。 PNG 避免了有損輸出階段,但它不會恢復縮小過程中已經混合的資訊。為刻字選擇 PNG 可以刪除一個變量,同時保持基本像素預算不變。
此工作簿將另一個最後步驟歸功於社群平台。 ToolAcre 不測試目標編碼器,因此本文不承諾每個服務以一種方式壓縮文字。將核准的本地匯出與真實的目標預覽進行比較,以區分上傳之前發生的情況與之後觀察到的情況。
根據顯示尺寸進行設計 — 在實際顯示的像素高度檢查類型,而不是在畫布尺寸
設計審查應包括像素尺寸和人們實際遇到影像的比例。在相關手機上以正常簡報大小開啟下載的檔案,而不是縮放,直到文字變得可讀。大顯示器預覽可以透過為藝術品提供更多的實體空間來隱藏失敗。
將一對一的像素檢查作為診斷,而不是作為觀眾體驗。它可以揭示模糊的界限,但接受的問題是訊息是否在上下文中毫不費力地閱讀。沒有規定通用的字體大小截止值,因為裝置、佈局和創意選擇會改變結果。
更少的字數,更大的字體 - 將細節移到標題或連結頁面中,並保留標題的圖片
當文字失敗時,請先減少字數,然後再嘗試其他匯出品質。宣傳一個標題,刪除限定詞並將詳細資訊移至貼文標題或連結頁面中。較大的字體和較少的行數為每個字元提供了更多的像素,並讓圖片發揮其視覺作用,而不是模仿檔案。
也簡化了與措詞競爭的細規則、小圖示和裝飾圖案。它们消耗相同的有限輸出網格。如果圖形必須包含詳細說明,請提供專為閱讀而設計的可存取頁面或文件,而不是依賴單一光柵社交圖片。
工作範例:比較最終大小的文字,而不宣告通用的倖存點大小
準備一份 16:9 公告,其中包含標題、副標題和密集的頁腳。以目前 1920×1080 工具預設匯出它,然後以手機上目標的正常顯示比例查看它。請注意哪個層次結構可以立即讀取,哪個層次結構需要縮放或推理。
建立字數較少、筆畫較大的修訂版,然後透過相同路徑匯出。比較應該由讀者來判斷,而不是根據發明的最小像素高度來判斷。記錄目標尺寸、格式和品質,以便將來的修訂可以重現通過的條件。
這不包括什麼 - 螢幕閱讀器輔助功能;圖片中的文字需要替代文字,無論其大小如何,這是發布步驟,而不是調整大小的步驟
可讀像素不會使螢幕閱讀器能夠存取影像文字。替代文字、字幕和任何特定目的地的可存取欄位仍然是發布步驟的一部分。 Social Image Resizer 適用於影像像素,並未創作這些語意描述。
避免僅將長的基本說明僅放置在影像內。使用輔助科技或翻譯工具的人也可能無法辨識大字體。裁剪器可以幫助產生清晰的圖形,但可訪問性需要點陣圖之外的等效資訊以及保存它的發布工作流程。
重點:測試最終尺寸的易讀性 - 社交圖片調整器為您提供調整大小的檔案,以便您可以在發布前在手機上檢查它
在最終尺寸下測試易讀性,並將失敗視為內容設計問題,然後再將其視為編碼器問題。更簡潔的措辭、更強的層次結構和更大的筆劃通常會創建更強大的工件,因為它們將有限的像素網格分配給必須理解的部分。
ToolAcre 提供該審核所需的確切輸出。匯出、在相關裝置上開啟檔案、比較任何目標預覽並從母版進行修改。僅在編輯器中放大時才有效的設計尚未準備好適應其本來要服務的小螢幕。