웹 이미지 dpi - web imiji dpi

이 게시글은 공부하면서 정리한 내용입니다.

잘못된 정보는 제보해주시면 매우 감사드리겠습니다.

***

해상도와 밀도 기준

*해상도(Pixel): 화면(또는 이미지)을 이루는 픽셀 수의 정도를 뜻한다.

같은 크기의 화면을 기준으로 픽셀*이 많아지면 해상도가 올라가고 화면은 선명해진다. (PPI 참고)

*픽셀(Pixel): 그림 원소(Picture element)란 뜻으로, 줄여서 px이다.

화면(또는 이미지)의 가로, 세로 해상도를 표현하는 단위로 쓰인다. (예: 1920*1080 px )

빛의 삼원색인 R, G, B 값을 표현하는 서브픽셀(Subpixel)로 이루어져 있으며 비트(bit)로 정보가 표시된다.

1 bit는 2의 1승으로 2개의 컬러 값을 가지고, 8 bit는 2의 8승으로 256개의 컬러 값을 가진다.

이런 식으로 컴퓨터에선 8, 16, 32, 64 bit로 나뉜다.

*PPI(Pixels per Inch):  1 인치당 가로, 세로를 이루는 픽셀 수로, 픽셀의 밀도를 나타낸다.

당연히 밀도가 높아질수록(PPI가 높아질수록) 선명해진다.

디바이스가 같은 해상도여도 화면의 크기가 다르면 PPI도 달라지는데, 더 작은 화면일수록 ppi가 높다고 볼 수있다.

웹 이미지 dpi - web imiji dpi
PPI 비교 예시: 10 PPI(왼쪽)보다 20 PPI(오른쪽)가 더 정밀함을 알 수 있다.

PPI의 계산 방법은 피타고라스 정리를 따르며,  화면의 가로 한 변 픽셀 수를 a,  세로 한 변 픽셀 수 b로, 대각선 픽셀 수를  c로 정했을 때, a²+b²=c²으로 c²에 대각선 길이(Inch)를 나누면 된다.

*DPI(Dots per Inch): 1 인치당 가로, 세로를 이루는 점의 수로, 보통 이미지와 인쇄물의 밀도를 나타낸다.

또한, 안드로이드 디스플레이의 밀도를 나타내기도 한다.

*PPI, DPI 계산 웹사이트: www.sven.de/dpi/

 왜 PC보다 스마트폰이 더 선명해야 할까?

LG 경제연구원의 <인지 한계 해상도 공식>에 의하면,

스마트폰은 20~30cm 거리에서 437 ppi까지, 모니터는 50~60cm 거리에서 185 ppi까지 구분할 수 있다고 한다.

이는 가까운 거리에서 높은 밀도의 PPI를 인지할 수 있고, 화면의 선명도에 차이가 있다는 것을 의미한다.

때문에 고밀도 디바이스의 등장은 <인지 한계 해상도 공식>에 따르면 당연한 흐름이라고 볼 수 있다.

그래서 상대적으로 저밀도인 TV는 PPI보다 전체 픽셀 수로 해상도를 표현한다. (예: Full HD - 1920*1080, Ultra HD - 3840*2160)

 그런데, 왜 웹용 이미지는 72 dpi로 내보낼까?

그 이유는 초기 PC 디스플레이가 72 ppi로 제작되었기 때문이다.

그래서 해당 PPI에 맞게 1:1 수치로 정한 것이다. 

하지만 웹에서는 픽셀 해상도(전체 픽셀 수)를 인식하여 DPI가 72이든 96이든 동일하게 보여준다. (인쇄 환경과 다름)

예를 들면, 360*360px(픽셀 해상도)인 이미지를 72 dpi, 96 dpi로 각각 내보내 웹에 업로드하면 둘 다 똑같아 보인다.

즉, 웹에서의 이미지는 DPI가 높다고 선명해보이지 않으므로 최소 기준인 72 dpi로 제작하면 된다.

*웹과 DPI에 관한 글: apptools.com/examples/dpi.php

해상도와 밀도 기준에 대해 알아보았다. 다음은 논리적 픽셀에 대한 포스팅이다.

mesign.tistory.com/10

UI·UX 디자이너를 위한 가이드 - DP·SP와 디스플레이

이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 고밀도 디스플레이 초기 PC 디스플레이는 72 ppi로 제작되었다. 인쇄된 글자가 화면에서도

mesign.tistory.com

웹 이미지 dpi - web imiji dpi

갤러리 이슈박스, 최근방문 갤러리

개념글 리스트

  • [단독] 김성태 전 쌍방울 회장 귀국 의사 타진 내막 AZ3811
  • 예구 성장일기3 - 몬스터가 되어버린 아가도마뱀 싸움이제안함
  • 한동훈, 조선족 지방선거 투표권 없앤다.jpg ㅇㅇ
  • 순도 100% 중국 아이돌 쥐징이 화력이부족햄
  • SPC 불매 근황 ㅇㅇ

갤러리 본문 영역

웹에 올릴때 72dpi로 작업하는 이유앱에서 작성

ㅇㅇ(39.7) 2018.10.11 22:55:32

조회 3084 추천 1

왼쪽은 300DPI로 인쇄한 사진이고, 오른쪽은 72DPI로 인쇄한 사진이다. 전자가 밀도가 높기에 더 선명하다.

프린터 인쇄물 등을 편집할 때 (포토샵 등에서 새 파일을 만들 때 설정에서) 종종 볼 수 있다. 지금은 모니터 해상도가 높아져서 옛 이야기가 되었지만, 과거 모니터 기준으로 72dpi(ppi)가 기준 해상도였었다. 타이포그래피의 포인트 단위를 보면 알 수 있듯 포토샵, 아크로뱃 등에서 72라는 숫자가 종종 보이는 것은 이 때문이다. 최근에는 96dpi가 많이 보이는데, 1920×1080 해상도의 23인치 모니터에 해당하는 수치이다.

종이와 달리 해상도가 결정되어 있는 모니터에서는 "dpi(해상도)가 높은 문서/이미지/영상" = "큰 사이즈의 문서/이미지/영상" 처럼 동급 취급되는데, 인쇄물에서는 사이즈(cm, inch 등)가 지정되어 있기 때문에 "dpi(해상도)가 높은 문서/이미지/영상" = "선명한 문서/이미지/영상"이 된다. 저 dpi에서는 이미지가 모자이크처럼 뭉개져 보이고, 고 dpi에서는 세밀한 표현이 그대로 표현된다. 그걸 어떤(고급/저급) 프린터로 인쇄하느냐에 따라 또 달라기진 하지만(...)

가정용, 개인용의 경우 일반적으로 150dpi 정도면 무난한 품질의 이미지를 볼 수 있고, 300dpi 정도면 별 문제 없는 출력물을 얻을 수 있다. 세밀하게 표현할수록 화질이 좋다고 할 수 있겠지만, 눈이 인지하지 못할 정도로 세밀한 문서나 이미지는 과하게 비싼 프린터나 비싼 모니터를 써야 한다던가, 전기를 더 소모한다던가, 문서나 이미지의 용량을 더 차지한다던가 하는 등의 효율성이 떨어지는 문제가 있어 특정 목적이 아닌 이상 이정도 선에서 수렴하고 있다. 다만 본격 출판물에서는 600dpi이상을 많이 사용하며 1200dpi이상을 쓰는 경우도 매우 흔하다. 600dpi 이상은 불필요하다는 의견도 있지만, 토너를 사용하기에 도트가 번지는 일이 없는 레이저 프린터로 출력한 결과물들을 비교해보면 체감할 수 있는 차이가 난다. 평범한 용도에서 그정도까지 고화질을 사용해야 할 이유가 별로 없을 뿐이지, 육안을 통한 구분 자체가 불가능한 것은 아니다.

추천 비추천

1

웹 이미지 dpi - web imiji dpi
0

원본 첨부파일 1

  • 2053336958ca026d6715deea7698b6f45ff16d6b4fbc95002894a0779767de252d12d3075fa82da7dfff32b696e2543d7bd5851943976e6f7d17856c3955746c15c861e268466b8055deee2b64877b66.jpeg

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 내부 검색

오른쪽 컨텐츠 영역