圖像豐富的內容推動網(wǎng)站參與度，使訪問者可以細讀它們的樂趣。但是，即使只是首頁上的圖像，也要確保將所有面向視覺的內容質量最大化。因為無論您是處理照片、插圖還是視頻，拉伸、擠壓或裁剪不當?shù)膱D像，都會給訪問者留下不好的印象，并影響他們在網(wǎng)站上的整體體驗。

確保這些圖像正確顯示是設計的關鍵部分。確定寬、高、比，在各種設備上獲得最佳觀看效果對設計師來說既是一件苦差事，也是一項挑戰(zhàn)。但今天的響應式設計工具和一系列免費的寬高比計算器，可以確保圖像和視頻文件在任何地方都以最佳視覺顯示。

什么是縱橫比?

在最基本的方式中，縱橫比是圖像的寬度和高度之間的關系。因為縱橫比反映的是圖像的比例，而不是它的大小，所以縱橫比無論大小都保持不變。

例如，正方形圖像的縱橫比為 1:1，因為其高度和寬度相同。無論圖像有多大，該比率都將保持不變。320x320px 的圖像與 1080x1080px – 1:1 的圖像具有相同的縱橫比。

對于非正方形的圖像，即各種尺寸的水平或垂直矩形，縱橫比可能會有所不同。攝影、視頻和其他，基于圖像的設計工作中使用的常見縱橫比包括 4:3、3:2 或 16:9，這是許多寬屏設備，如電視和臺式計算機的基本比例。

雖然圖像的縱橫比來自其高度和寬度的關系，但該比例的多個子集也有助于定義圖像比例。

像素縱橫比

像素縱橫比 (PAR) 是指構成圖像的單個像素的比例。像素通常是方形的，這導致像素長寬比為 1:1。但是針對某些類型的顯示器優(yōu)化的圖像也可以具有長寬比為 4:3 或類似的矩形像素。

顯示縱橫比

顯示縱橫比 (DAR) 是與設計師最相關的一種縱橫比，也是最常與通用術語相關聯(lián)的一種。顧名思義，顯示縱橫比是指圖像在各種屏幕上顯示的比例。

某些設備(例如相機和電視)具有固定的 DAR，因此為了使圖像在這些設備上顯示良好，它們需要針對特定的縱橫比進行優(yōu)化。例如，要在監(jiān)視器或電視屏幕上顯示的寬屏視頻的典型顯示縱橫比是 16:9。

當在這些設備上顯示具有不同縱橫比的圖像時，它們看起來會失真。數(shù)碼單反相機傳感器還具有固定的顯示縱橫比，用于控制相機拍攝圖像的保存和顯示方式。

存儲縱橫比

存儲縱橫比 (SAR) 是一個縱橫比公式，專門適用于編碼的數(shù)字視頻文件。SAR 是指視頻幀大小的寬度和高度關系，它需要在所有單個幀之間保持一致，才能正確顯示完整的視頻。在常用的公式中，對于大多數(shù)寬屏視頻，SAR x PAR = DAR。

縱橫比影響UI/UX設計

縱橫比在任何涉及以正確方式捕獲和顯示照片、視頻或其他類型的基于圖像的文件項目中都發(fā)揮著重要作用。

對于攝影師來說，相機的固定縱橫比會對照片的構圖以及稍后在其他設備上的顯示產生相當大影響。對于攝像師和任何處理幻燈片、動畫和其他運動項目的人來說，縱橫比是在寬屏和移動設備上正確顯示的關鍵因素。

轉向響應式網(wǎng)頁設計，確保內容在所有設備上正確顯示，有助于解決為單個圖像設置縱橫比的許多問題。

但即使在這些環(huán)境中，也可能出現(xiàn)問題，例如無法在不影響其內容或質量的情況下調整圖像以進行顯示。一個簡單的例子是當一個長寬比為 1:1 的方形圖像需要適合網(wǎng)站頁面上的矩形框時。為了適應不同的圖像尺寸要求，可能需要調整比例和尺寸。

在日益由圖像驅動的數(shù)字世界中，即使看起來稍微不成比例的視頻和圖像也會導致訪問者對網(wǎng)站產生負面印象——而那些明顯被迫采用錯誤配置的視頻和圖像甚至會干擾網(wǎng)站的可用性。

比例不當?shù)漠a品圖片或用戶指南視頻太長而看不清會影響訪問者的意愿和他們使用網(wǎng)站的能力。設計師、開發(fā)人員和任何處理圖像的人都需要知道縱橫比的工作原理以及如何操縱它們獲得最佳視覺效果。為了簡化這個過程，網(wǎng)絡上出現(xiàn)了許多免費和付費的縱橫比計算器。

解決方案：縱橫比計算器

借助一些簡單的數(shù)學運算，當然可以計算圖像的縱橫比并手動調整其大小。但是在處理來自多個來源的許多圖像時，這變得效率低下。

在眾多在線縱橫比計算器之一的幫助下，您可以為多種不同格式的任何圖像確定最佳縱橫比，從而使設計人員能夠充分優(yōu)化每張圖像以獲得最佳觀看效果。

這里推薦一個在線的網(wǎng)址：https://www.omnicalculator.com/other/aspect-ratio#how-to-calculate-aspect-ratio

要使用該平臺，您需要知道以像素為單位的圖像分辨率并選擇圖像出現(xiàn)的環(huán)境類型。然后計算器將結果作為最佳縱橫比返回。這不單對于圖像處理、對于視頻編輯也特別有用。

圖像編輯器具有縱橫比工具

其他圖像管理工具也可以幫助獲得正確的縱橫比。Photoshop等圖像編輯器提供的模板設計時考慮了最佳縱橫比，適用于典型情況，例如設計網(wǎng)站橫幅、標題或社交媒體配置文件。大多數(shù)標準視頻編輯軟件還允許用戶確定和調整要作為視頻中單獨幀包含的圖像的縱橫比。

比例正確、顯示良好且性能良好的圖像是各種企業(yè)的強大工具。獲得正確的縱橫比可以使圖像無論在何處顯示都看起來不錯。無論您是網(wǎng)頁設計、APP設計、處理照片、插圖或視頻都可以吸引訪問者并保持他們的活躍度與留存率。

通過這種方式可以輕松確保圖像的大小和比例正確。

使用圖像填充，您可以從多種設置中進行選擇，這些設置允許您調整圖像大小或裁剪圖像，同時保留其縱橫比以實現(xiàn)完美定位。