如何在圖文文章中調整照片尺寸與版面配置

從照片的作用開始著手

在移動或調整照片尺寸之前，請先確定讀者應從中獲得什麼。它是讀者需要仔細檢視的證據、讓段落更容易理解的範例，還是單純的裝飾？這種區分比直接從預設的圖片寬度切入更為實用。

如果照片承載了文字中沒有的資訊，請給予足夠的空間，使相關細節清晰可讀。若讀者無法看清細節，那麼文件、物件或流程的小圖可能就無法發揮其主要作用。如果照片只是單純用來說明文字中已解釋的觀點，較小的尺寸可能就足夠了——甚至可能不需要這張圖。這是一條從照片目的推導出的實用設計法則，而非通用的尺寸標準。GOV.UK 設計系統的圖片指引同樣指出，圖片應滿足使用者的真實需求並作為視覺輔助，而必要資訊仍應以文字形式呈現。其建議是針對政府線上服務所撰寫，因此請將其視為有用的參考，而非適用於所有類型文章的硬性規定。

一個實用的決策輔助方法是為每張照片分配三種角色之一：檢視、說明或裝飾。「檢視」通常需要較大的顯示尺寸，並配以說明文字或圖說引導讀者注意相關細節。「說明」通常可以以適中的尺寸放置在所支援的段落旁。「裝飾」則不承擔任何資訊功能；可以考慮將其省略或保持低調的視覺呈現。這些分類是一種實用的編輯工具，而非來源文獻所規定的術語。

根據重要性與可用空間選擇尺寸

請以文章的文字欄寬作為起始基準。橫跨整個欄寬的照片容易引起注意，並為細節豐富的內容提供更多空間；請將這種處理方式保留給重要性足以讓讀者停下視線的圖片。尺寸較小、與欄寬對齊的照片可以輔助附近的觀點，而不會與標題或正文爭奪注意力。避免僅僅因為原始檔案較大就選擇大尺寸：顯示的尺寸應契合排版版面以及讀者需要看到的資訊。

這裡提供一個決策範例，而非經測試的既定範本：假設在 700 像素寬的內容欄中有一張照片，顯示一個由兩部分組成的物件，且兩者差異是該段落的核心內容。接近全欄寬度的顯示方式可能有助於更輕鬆地進行比對。如果同一張照片僅是交代一般場景，且該段落已包含詳細解釋，那麼較窄的顯示尺寸可以保留給文字更多重點。700 像素的數值僅為欄寬範例，並非推薦標準。

當照片在寬螢幕上與文字並排顯示時，請將兩者視為一組搭配單元。給予圖片足夠的寬度以展現主題，並為文字保留足夠空間以維持舒適的閱讀體驗。如果兩者出現擁擠擠壓的情況，請改為上下堆疊排列，而不是縮小照片並將文字壓縮成狹窄的細條。在較小的螢幕上，單欄順序通常是最清晰的排列方式：文字，接著是相關照片，然後是下一段文字。W3C 對 WCAG 2.2 重排（Reflow）的說明介紹了許多文章頁面如何自適應為單欄，並解釋了避免普通閱讀內容出現雙向滾動的目標。它還指出了意義或用途需要二維排版內容的例外情況。文章排版的核心在於確保圖文搭配不會強迫讀者左右滑動來閱讀文字。

將每張照片放置在關聯明確的位置

將照片放置在解釋其出現原因的句子或段落附近。如果讀者必須滾動瀏覽數個無關的段落才能找到該圖片，它們之間的關聯可能會變得模糊不清。同樣地，在句子的論述中間插入大尺寸照片可能會打斷邏輯。乾淨明瞭的排版通常是在介紹主題的第一個段落之後，或在需要該圖片的步驟之前直接放置。

當圖說能補充具體內容時再使用：標明主體、指出細節或解釋該圖片為何重要。不要使用圖說逐字重複周圍的句子。如果照片需要仔細檢視，請在鄰近文字以及圖說中說明要觀察的重點；讀者不應該僅憑擺放位置來推測重點。

照片與文字之間的關係對非視覺閱讀也至關重要。W3C 的圖片教學指出，資訊型圖片需要提供能傳達其核心資訊的替代文字，而裝飾型圖片可以使用空的替代文字，以便輔助技術可以直接略過。W3C 的資訊型圖片指引強調，替代文字應在語境中表達圖片的含義，而不僅僅是列出可見的物體。作為實際的檢驗標準，請思考：如果有人看不到這張照片，他們會錯過什麼資訊？將重要資訊放在文章文字中，並為圖片提供適當的替代文字。如果圖片沒有在鄰近文字之外增添任何新資訊，重複其描述可能就沒有必要。

保留照片具實用價值的構圖比例

照片的長寬比（寬度與高度的比例）會影響其佔用的空間以及保留可見的內容。首先嘗試將整張照片容納在所選區域內。僅在主體依然清晰且裁切不會移除讀者所需細節的情況下進行裁切。橫向裁切可能適合寬幅的主圖；直向圖片在欄內以較小寬度呈現時效果可能更好。這些是構圖上的取捨，而非固定不變的規範。

如果裁切移除了背景資訊、改變了原本的含意，或是隱藏了文章中討論的細節，請使用不同的裁切方式或依原始比例顯示。對於圖表、標籤或文件，請檢視最終的顯示尺寸：嵌入照片中的文字可能會變得太小而無法閱讀。GOV.UK 圖片指引通常建議不要在圖片中嵌入文字，因為文字會難以閱讀、複製、調整大小或由螢幕報讀軟體讀取；當文字對圖片不可或缺時，也請在鄰近的文字內容中提供其含義。

在讀者實際使用的尺寸下檢查排版

請在寬幅的桌機版面和狹窄的行動裝置寬度下預覽文章。檢查照片是否超出文字欄、遮擋內容，或導致旁邊的文字過於擁擠。按照從標題到段落再到照片的閱讀順序：當版面改為上下堆疊時，圖片仍應出現在其所說明的段落附近。此外，也請以實際顯示尺寸檢查圖說以及圖片中的任何重要細節。

對於網頁而言，顯示尺寸與檔案大小是分開考慮的決策。大尺寸顯示可能需要較大的原始檔案，但向較小的螢幕傳送不必要的大圖檔案會浪費流量。Google 的 web.dev 響應式圖片指南解釋了瀏覽器如何針對不同的顯示條件選擇合適的圖片尺寸，並指出並沒有所謂單一正確的圖片版本數量。這是網頁發布的實作指引；它並不決定圖片在文章中的位置。

快速決策步驟

明確其作用。這張照片是用於檢視細節、說明文字，還是僅作為頁面裝飾？

找到其依附錨點。確認介紹它或依賴它的段落，然後將照片放置在該段落旁。

設定顯示寬度。為關鍵證據留出足夠空間；若細節並非核心重點，輔助照片可佔用較少空間。

檢查裁切方式。確保主體和所有相關背景資訊清晰可見。

依序朗讀排版。在窄螢幕上確認文字與照片仍以合理的順序呈現，且文字依然清晰易讀。

描述資訊內容。在有助於理解時新增圖說，並根據圖片的角色提供替代文字。

實用的原則非常簡單：讓重要性決定顯眼程度，讓相關文字決定擺放位置，並透過窄螢幕預覽來檢視配置是否依然合理。如果照片在所選尺寸下難以看懂，請將其放大、簡化裁切，或在文字中解釋相關細節。

繼續探索這個主題