Table of contents
1. 글의 목적
웹 개발을 하다 보면, 실제로 표시될 크기보다 훨씬 큰 이미지 파일을 준비해야 하는 상황이 자주 발생한다. 예를 들어, 800px 너비의 배너 이미지를 표시할 때 1600px 이상의 이미지를 사용하는 경우가 있다. 이런 상황에서 ‘왜 딱 맞는 이미지를 사용하지 않을까? 용량만 커지지 않을까?’라는 의문을 가져본 적이 있을 것이라고 생각한다. 이 글에서는 이미지 크기, 해상도, PPI에 대한 개념을 이해하고, 웹에서 일관된 품질을 제공하기 위한 이미지 최적화 전략을 살펴보겠다.
2. 해상도와 PPI/DPI의 이해
2-1. 해상도(Resolution)란?
해상도(Resolution)는 화면이나 이미지를 이루는 전체 픽셀의 수를 의미한다. 해상도가 높을수록 이미지가 더 선명하게 표현된다. 그러나 이와 혼동하기 쉬운 개념이 PPI(Pixels Per Inch)다. PPI는 1인치당 얼마나 많은 픽셀이 밀집해 있는지를 나타내며, 해상도보다 픽셀의 밀도를 측정하는 데 중점을 둔다. 따라서 높은 해상도가 항상 고화질을 의미하지는 않으며, PPI가 높아야 세밀한 표현이 가능하다.
2-2. PPI(Pixels Per Inch)와 DPI(Dots Per Inch)의 차이
PPI(Pixels Per Inch)는 디지털 화면에서 해상도의 밀도를 나타내는 단위로, 1인치당 얼마나 많은 픽셀이 배치되는가를 의미한다. PPI가 낮으면 픽셀의 경계가 두드러져 이미지가 거칠어 보이지만, PPI가 높으면 더욱 부드럽고 선명한 이미지를 표현할 수 있다. 예를 들어, 6인치 스마트폰과 27인치 모니터가 동일한 FHD 해상도를 갖고 있더라도, 스마트폰의 PPI가 훨씬 높아 더 정교한 이미지를 보여준다.
DPI(Dots Per Inch)는 인쇄물에서 사용되는 개념으로, 1인치당 도트의 수를 나타낸다. 실제 인쇄에서는 CMYK 4가지 색상의 잉크가 겹쳐지며 다양한 색상을 표현하는데, DPI가 높을수록 인쇄물의 선명도와 디테일이 증가한다. 웹에서 주로 사용하는 이미지는 일반적으로 72dpi로 설정되지만, 인쇄물에서는 최소 150dpi, 보통 300dpi 이상을 요구한다. 그러나 웹 이미지에서는 DPI가 출력에 영향을 미치지 않으며, PPI가 중요한 역할을 한다. 같은 픽셀 해상도에서는 72dpi나 300dpi나 웹에서의 이미지 품질에는 차이가 없기 때문이다.
2-2-1. PPI와 DPI 개념의 혼용 이유
자료를 조사하다 보니 DPI라는 용어가 실제로는 PPI 개념을 설명할 때 혼용되는 경우가 많았다. 이 두 용어는 각각 디지털 디스플레이와 인쇄물의 해상도를 나타내지만, 아래와 같은 몇 가지 이유들로 혼용이 발생하는 것 같았다. 단어 자체 보다도 문맥에 맞게 의미를 구별하는 것이 중요한 것 같다.
안드로이드 환경 : 안드로이드 기기에서는 다양한 해상도에서 일관된 사용자 경험을 제공하기 위해 DPI 개념을 사용한다. 이로 인해 디지털 환경에서도 DPI라는 용어가 흔히 사용되며, PPI와 DPI의 구분이 모호해졌다.
역사적 관습 : DPI는 원래 인쇄 산업에서 사용되었고, 디지털 시대에 접어들면서도 익숙한 용어로 남아있게 되었다.
개념적 유사성 : PPI와 DPI는 둘 다 "1인치당 얼마나 많은 요소가 있는가"를 측정하기 때문에 혼동이 발생하기 쉽다.
언어적 편의성 : 일반 사용자에게는 두 용어의 차이가 중요하지 않아, 하나의 용어로 통일해 사용하는 경향이 있다.
3. 왜 필요한 사이즈보다 큰 이미지를 사용할까?
다양한 디바이스와 고해상도 디스플레이 지원 : 현대 웹 환경에서는 다양한 해상도와 화면 크기를 가진 디바이스를 지원해야 한다. 특히 모바일 기기는 작은 화면에서도 높은 PPI를 가지므로, 고해상도 디스플레이에서 선명한 이미지를 제공하기 위해 원본 이미지가 더 큰 경우가 많다.
크기 조정 시 품질 유지 : 이미지를 확대할 때도 최대한 일관된 품질을 유지하려면, 원본보다 큰 고해상도 이미지를 사용하는 것이 유리하다. 화면의 크기를 조정해도 품질이 저하되지 않으며, 항상 선명한 이미지를 제공할 수 있다.
사용자 경험 향상 : 고해상도 이미지를 사용하면 디바이스에 관계없이 일관된 시각적 품질을 제공할 수 있어 사용자 경험이 향상된다. 이는 특히 비주얼 중심의 콘텐츠에서 중요한 요소가 되며, 사용자에게 긍정적인 시각적 경험을 제공한다.
4. 해상도 대응과 이미지 최적화 전략
웹에서의 이미지 최적화는 단순히 파일 크기를 줄이는 것을 넘어서, 다양한 해상도와 디스플레이 환경에 맞게 이미지를 조정하는 것이 핵심이다. 이는 웹 페이지의 로딩 속도 뿐만 아니라 사용자 경험에 큰 영향을 미친다.
4-1. 해상도에 따른 이미지 대응 전략
<img src="image@2x.png" alt="High-resolution example" class="responsive-img">
.responsive-img {
width: 100%;
height: auto; /* 비율을 유지하며 너비에 맞게 높이를 조정 */
max-width: 500px; /* 최대 너비를 설정해 원하는 크기로 제한 */
}
위와 같이 CSS를 사용해 이미지 크기를 조정하면, 다양한 화면 크기에 맞춰 이미지의 비율을 유지하면서 최적화된 결과를 얻을 수 있다. 특히, width: 100%와 height: auto를 적용하면 화면 크기 또는 부모 요소의 크기에 따라 자동으로 이미지 크기가 조정된다.
<picture>
<source srcset="image@2x.png" media="(min-width: 800px)">
<source srcset="image@1x.png" media="(max-width: 799px)">
<img src="image@1x.png" alt="Responsive Image">
</picture>
picture 태그를 사용하면 각 디바이스와 화면 해상도에 맞는 이미지를 사전에 지정할 수 있다. 브라우저는 이를 통해 자동으로 가장 적합한 이미지를 선택하여 로드하게 되므로, 성능 최적화와 이미지 품질을 동시에 유지할 수 있다.
4-2. 이미지 포맷 선택과 최적화
이미지 포맷은 웹 성능에 큰 영향을 미치므로 목적에 맞는 포맷을 선택하는 것이 중요하다. 각 포맷은 서로 다른 압축 방식과 특성을 가지고 있어, 목적에 맞게 적절한 포맷을 선택해야 한다.
4-2-1. 주요 이미지 포맷 비교
JPG/JPEG: 손실 압축 방식을 사용하며, 색상이 복잡한 사진에 적합하다. 파일 크기가 작지만, 압축 과정에서 일부 품질이 손실된다.PNG: 무손실 압축을 지원하며, 투명 배경이 필요한 로고나 아이콘에 적합하다. 파일 크기는 JPG보다 크지만, 이미지의 선명도를 유지한다.SVG: 벡터 그래픽 포맷으로, 해상도에 상관없이 선명하게 표현된다. 아이콘, 로고, 일러스트레이션 등에 주로 사용된다.GIF: 256색 팔레트를 사용하는 애니메이션 이미지 포맷이다. 간단한 애니메이션이나 저용량 이미지를 표현할 때 적합하다.WEBP: 구글에서 개발한 포맷으로, JPG와 PNG를 대체할 수 있다. 더 작은 파일 크기로 비슷한 품질을 제공한다.AVIF: AOMedia에서 개발한 최신 이미지 포맷으로, 뛰어난 압축률과 고품질 이미지를 동시에 제공한다. WEBP보다 파일 크기가 30-50% 더 작으며, HDR, 와이드 컬러 게멋 등 고급 이미지 기능을 지원한다.
4-2-2. 포맷 선택 기준
이미지 포맷을 선택할 때는 파일 크기, 투명도 지원 여부, 해상도에 따른 품질 유지 등을 고려해야 한다. 예를 들어, 로고나 아이콘 같은 단순 그래픽 요소에는 PNG나 SVG가 적합하고, 복잡한 사진에는 JPG가 적합하다. 또한, WEBP는 JPG와 PNG의 장점을 결합한 효율적인 대안이 될 수 있다.
4-2-3. 벡터 이미지의 장점 활용
SVG와 같은 벡터 이미지는 해상도에 구애받지 않고 선명하게 표현되므로, 아이콘이나 로고 같은 그래픽 요소에 매우 적합하다. 벡터 이미지는 크기에 상관없이 품질이 유지되기 때문에, 추가적인 이미지 파일을 준비할 필요 없이 다양한 해상도에 대응할 수 있는 장점이 있다.
4-3. 최적화된 에셋 추출과 관리
디자인 툴을 사용해 다양한 해상도에 맞는 이미지 에셋을 추출하는 것도 중요하다. 동일한 이미지를 원하는 배수 크기로 추출해 고해상도 디바이스에서도 품질이 저하되지 않도록 한다. 이 과정에서 파일 크기를 최소화하면서도 이미지 품질을 유지하는 것이 최적화의 핵심이다.
5. 마무리하며
해상도와 PPI의 개념을 이해하고, 다양한 디바이스 환경에 맞춰 이미지를 최적화함으로써 웹에서 일관된 품질을 유지할 수 있다. 각 포맷의 특징과 장점을 활용해 적절한 에셋을 준비하고 이미지 품질을 최적화하는 것은 사용자 경험을 높이는 중요한 요소다. 하지만 고해상도 이미지를 무리하게 사용하는 것보다, 용량과 품질 사이의 균형을 잘 맞추는 것이 더 중요하다.