웹 디자인을 위해 이미지를 72DPI로 유지해야합니까?


50

1 년 이상 웹 배너를 디자인 해 왔지만 DPI는 고려하지 않았습니다.

기본 72DPI를 사용하고 있었지만 이제 72DPI에서 웹 디자인을 만들어야하는지 알고 싶습니다. 200DPI와 같이 그 이상을 사용하면 어떻게됩니까?

DPI가 많을수록 이미지 품질이 높아지고 DPI가 높은 이유를 알고 있지만 최근에는 웹 배너의 경우 72DPI를 사용해야한다는 점을 읽었습니다. 나는 그것이 필수인지 알고 싶고 어떤면에서 부정적인 영향을 미칩니 까?

답변:


84

웹 이미지에는 PPI (Pixels Per Inch) 설정이 사용되지 않습니다. 웹, 망막 디스플레이 등의 이미지는 PPI / DPI 설정이 아닌 픽셀 크기 (너비 및 높이)로 표시됩니다. 실제로 png, gif, jpg와 같은 많은 웹 이미지는 내부 데이터에 ppi 설정을 저장하지 않고 너비 및 높이 설정에 의존 할 수도 있습니다.

PPI / DPI 설정에 관계없이 100 픽셀 x 100 픽셀 이미지가 웹에서와 같이 표시됩니다.

그렇기 때문에 망막 디스플레이 용 이미지는 ppi 설정을 높이기보다는 2 배 크기로 저장합니다. 망막 디스플레이 의 픽셀 밀도 는 더 높지만 화면 상태가 PPI 설정을 기반으로하지 않는 이미지의 너비와 높이에 관계없이 이미지를 표시합니다.

실제로, 픽셀 밀도 72ppi를 사용하는 모니터는 1980 년대 초 중반부터 보이지 않았습니다. 72ppi는 거의 30 년 동안 정확하지 않았습니다. 실제로 Windows는 픽셀 밀도에 기본값 96ppi를 사용하기 때문에 Windows 시스템에서는 정확하지 않았습니다.

나를 믿지 않습니까? 직접 해보십시오. Photoshop에서 100 픽셀 x 100 픽셀의 두 이미지를 만듭니다. 한 이미지를 72ppi로 만들고 다른 이미지를 300ppi로 만듭니다. 둘 다 웹용으로 저장하십시오. 웹 브라우저에서 다른 점이 있습니까? 아니. 여전히 100 x 100 픽셀 이미지입니다.

DPI (인치당 도트 수) 설정은 이미지를 인쇄 할 때만 적용 할 수 있습니다. DPI는 화면으로 향하는 이미지와 관련이 없습니다. DPI는 1 인치 이내에 인쇄기가 배치 할 잉크 도트 / 스팟의 양을 나타냅니다. Earth의 디스플레이에는 잉크가 사용되지 않으므로 DPI는 디스플레이 화면과 관련된 모든 용어에 사용되는 잘못된 용어입니다.

일부 모바일 제조업체는 때때로 DPI로 단축되는 DPIx 또는 xDPI라는 용어를 사용하기로 선택했습니다. 이것은 약어의 전통적인 형태 가 아니며 제조업체는 단순히 물에 많은 영향을 미쳤습니다. 모바일 화면 해상도와 관련하여 DPI가 표시되면 효과적인 PPI 에 대해 말하고 실제로 인치당 도트 수를 참조하는 것이 아닙니다 . 모든 디스플레이와 같은 모바일 화면은 잉크가 아닌 픽셀을 사용하기 때문에 xPPI 또는 PPIx가 더 적절한 약어입니다.

웹 이미지에 사용하는 ppi 설정에 차이가 없습니다. 중요한 이미지의 (픽셀) 너비와 (픽셀) 높이입니다.

여러 이미지로 작업 할 때는 일관성을 유지하는 것이 중요합니다. 이미지간에 조각을 이동할 경우 화면의 크기를 조정하거나 크기를 조정하지 않도록 모든 이미지를 동일한 ppi로 설정해야합니다. 72, 96, 200 또는 145.8ppi를 사용하든 상관없이 모든 이미지를 동일하게 설정해야합니다.


유용한 경우에 대비하여 웹 사이트에서 높은 DPI 버전의 이미지를로드하도록 지시 할 수있는 NB : stackoverflow.com/a/43823483/32453
rogerdpack

2
실제로 @rogerdpack 당신은 더 큰 이미지 (픽셀 폭 및 픽셀 높이) 를로드하도록 브라우저에 지시 할 수 있습니다 . 즉 2x 또는 3x. 그래도 여전히 PPI 설정을 읽지 않습니다.
Scott

5

예를 들어 "dpi"가 실제로 의미하는 바에 대해 자세히 설명하겠습니다. 그것으로, 당신은 대답을 직접 볼 수 있습니다. :

요컨대, 이미지는 서로 인접한 컬러 도트로 구성됩니다. 그러나 물리적 의미로는 크기가 없습니다.

이제 화면에 이미지를 표시 할 때 일반적으로 이미지의 도트 색상을 화면에 표시 할 수있는 색상 사각형의 래스터에 넣습니다. 여기서 "도트"라고 부르는 사각형과 사각형을 "픽셀"이라고 부릅니다. 그러나 자세히 보면 서로 다릅니다.

화면에 자연스럽게 이미지를 표시하면 크기를 측정 할 수 있습니다.
예를 들어, 이미지의 너비는 500 도트이며, 화면의 색상 사각형에 넣고 너비는 5 인치입니다. 그런 다음 인치당 100 개의 사각형이 생겨 인치당 100 개의 점이 표시됩니다.
즉, 이미지는 화면에 100dpi입니다.
그러나 이미지 파일의 dpi 값조차 보지 못했습니다!

이제 파일을 보면 이미지가 200dpi라고 말할 수 있습니다! dpi 값은 화면 너비 또는 높이의 인치당 몇 개의 컬러 도트가 표시되는지에 관한 것입니다. 따라서 이미지의 dpi 값 은 사실이 아니라 약속으로 표시 될 때 이미지의 폭 2.5 인치 가 될 것임을 알려줍니다 .

이미지 점을 화면에 할당 할 때 이미지를 표시 하고 이미지의 화면 표현의 실제 물리적 dpi측정 했기 때문에 그 점에 대해서는 신경 쓰지 않았습니다 .
보시다시피 약속은 잘못되었습니다 . 그리고 아무도 신경 쓰지 않습니다! 관련이 없기 때문입니다.

이 파일은 200dpi라고 말함으로써 "약 2.5 인치 폭"으로 표시 될 것으로 예상됩니다. 그런 다음 5 인치 너비의 화면을 사용했습니다. 실제 화면이 무엇인지 알기 때문에 알 수 있습니다.
일반적으로 최종 사용자가 디스플레이로 무엇을 사용할지조차 모르므로 어쨌든 추측 할 수 있습니다.

따라서 이제 의미가 있습니다.

  • 우리는 화면을 알지 못했기 때문에 화면에 표시된 이미지가 가질 dpi를 알지 못했습니다.
  • 그러나 우리는 그것이 대략이 크기와 비슷해야한다는 생각을 가졌습니다. 그렇다면 약 200dpi 정도가 필요합니다. 파일에 "200dpi"를 저장했습니다
  • 나중에 화면을보고 실제로 100dpi 인 것으로 측정했습니다.

이미지가 표시 될 수있는 화면은 하나뿐이 아니라 크기가 다를 수 있으므로 이미지 파일을 만들 때 실제 dpi 값을 알 수 없습니다.

"픽셀"이란 정확히 무엇입니까? 에 대한 내 답변도 참조하십시오 . .


위의 내용을 바탕으로 직접 질문하십시오.

이미지 파일에 dpi를 지정하면 결국 이미지 쇼의 품질과 직접 관련이 없습니다.
그러나 의도와 관련하여 이미지 품질에 대해 의사 소통하는 데 사용될 수 있습니다. "이 이미지를 200dpi 화면에 표시하고 싶습니다"라고 말할 수 있습니다.

이 이미지를 보여주고 싶을 때는 200dpi 화면을 찾아서 살펴볼 수 있습니다. 아니면 내 책상에있는 오래된 75dpi 화면을 사용했을 수도 있습니다. 이미지가 꽤 큰 것, 나는 스크롤해야 -하지만 그건 내 문제, 그리고 : 당신도 정말 사용되고 있는지 확인하지 않습니다 - 200dpi 이상 값이 이미지 품질을 설정 제어하지 않았다 - 그것이 바로 표시하는 방법을 전달 "권리를 내가 신경 쓰면 "


이미지에 포함 된 DPI가 차이를 만드는 컨텍스트가 있습니다. 예를 들어 이미지를 Microsoft Word로 가져 오는 경우 인쇄 된 페이지에서 측정 할 때 이미지가 DPI가 암시하는 크기로 조정됩니다. 귀하의 답변은 정확하지만 DPI는 훨씬 더 자주 무시됩니다.
마크 랜섬

좋은 지적. 따라서 이미지는 출력 장치의 DPI에 맞게 조정됩니다. 이론적으로 올바른 작업입니다. 실제로, 적응 된 dpi 값은 다른 출력 장치 (스크린 및 프린터)에 대한 것이며 호환되지 않습니다. 센티미터와 인치로 길이 값을 추가하는 것과 유사하게 다른 단위로 표현 된 값과 유사
Volker Siegel

평판 스캐너와 같은 일부 장치는 실제로 의미있는 DPI 값을 제공 할 수 있습니다. 카메라가 아닙니다.
마크 랜섬

4

PPI는 중요하지 않지만 웹 및 앱 디자인에 중요한 픽셀 크기이지만 디자인 응용 프로그램 사용 및 PPI 설정 혼합에 매우주의해야합니다. 이유는 다음과 같습니다.

그러나 각 문서에 Photoshop과 다른 픽셀 밀도를 사용하려는 경우 문서간에 레이어를 드래그하고 레이어 스타일을 복사하면 레이어 스타일의 배율이 조정됩니다. 326PPI Retina iPhone 문서에서 264PPI Retina iPad 문서로 레이어를 드래그하면 모든 레이어 스타일의 크기가 조정됩니다 20 % (가장 가까운 정수로 반올림). 그리고 그것은 아마도 당신이 원하는 것이 아닙니다. 또한 OS X의 미리보기는 설정 한 방식에 관계없이 72PPI 이미지를 정확한 크기로 표시합니다.

인치당 픽셀은 태그 일뿐입니다.

이러한 이유로 모든 디자인 문서에 72PPI를 할당하고 동일한 작업을 수행하는 것이 좋습니다. 이미지 데이터의 크기를 조정하지 않고 Photoshop 문서의 픽셀 밀도를 변경하려면 이미지 크기 대화 상자를 열고 이미지 크기 조정을 선택 취소하고 원하는 픽셀 밀도를 입력하십시오.


0

방금 Photoshop으로 만든 두 개의 이미지 사본을 테스트했습니다. 그러나 하나는 72dpi로, 다른 하나는 720dpi로 설정하여 사용하는 브라우저 중 하나가 화면에서 다른 크기로 렌더링되는지 확인합니다.

하나를 제외한 모든 브라우저에서 크기와 품질이 동일하게 보입니다. 그러나 Chrome을 사용하면 72에서 만든 것이 잘 보이지만 720에서 만든 것은 1/10 크기와 같이 매우 작습니다.

맙소사. 이는 웹 페이지 내에서 제한되지 않은 모든 독립형 이미지를 72 개에 배치하는 데 대한 논거처럼 보입니다. 사실상 수백 개에 달하는 거의 모든 것이 120dpi입니다. Chrome에서 여전히 충분히 커 보이지만 해당 브라우저를 염두에두고 72 개로 설정해야합니다. Chrome 환경 설정의 글씨 어딘가에 해결책이있을 수 있습니다.


1
이 테스트를 온라인 어딘가에 넣었습니까? 아니면 HTML이없는 순수한 이미지입니까?
Michael Schumacher '12
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.