DPI–美工與工程師的溝通障礙

「明明就跟美工說了,我要一張1024 DPI的圖,結果她還是給我一張3千多的!」

網頁設計的工作,常會碰到工程師和美工設計的溝通上,出現這樣的問題,其實,圖片的尺寸在工程師和美工的理解上,經常都有著不同的理解。

在工程師的世界裏

網頁、App是工程師最常會用到圖片的地方;工程師因為各種瀏覽器、手機、平板的螢幕解析度與密度的不同,會接觸到如px, dp, sp等單位,這些單位的意義:

  • px指的是pixel,即點陣圖中的寬、高計算單位,圖片放大後的每一個點就是一個pixel
  • dp指的是Density independent Pixel,通常在高解析度的螢幕中,螢幕的密度會是1.5或2.0倍,所以可以顯示出較細緻的畫面;當某一張圖片被設定為以400 x 400 dp的大小,那麼在螢幕密度為2.0裝置上,必須提供實際大小是800 x 800 px的圖片。
  • sp指的是Scale-independent Pixel,在行動裝置上可以設定字體放大、縮小比例,而這個單位是在行動裝置上,配合使用者自訂的字體大小,而自動跟著縮放的單位。

在美工的世界裏

許多美工是從平面設計起步,逐步接觸網頁或App設計,才開始與工程師合作的;美工人口中說的DPI,如400 DPI,乍聽之下與400 dp、400 px都很像,也因此在溝通上常發生誤解;工程師以為美工說的400 DPI,就是400 px;而美工則以為工程師要一張400 px的圖,就是出一張400 DPI的圖給他?

  • DPI指的是dots per inch,指的是當圖片列印出來的時候,每一英寸裏有多少點,換言之,DPI數值越大,列印出來的圖片越精細,圖片的解析度也就越高。

因此,當工程師要一張400 x 400 px的圖,要告訴美工:「我要寬、高各400個像素(pixel)的圖片」;而美工則請不要再跟工程師談DPI了,這是平面設計在用的東西,網頁/App的切版完全不管這個單位,所以工程師是聽不懂的!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *