디자인 외주를 맡기거나 블로그에 올릴 사진을 준비할 때, "웹용이니까 72 DPI로 맞춰주세요" 혹은 "인쇄용이니 300 DPI 고해상도로 주세요"라는 말을 흔히 듣게 됩니다. 그런데 막상 포토샵에서 300 DPI로 저장한 고화질 사진을 웹사이트에 올렸더니 사진 크기가 너무 작게 나오거나, 용량만 무식하게 커서 로딩이 느려지는 황당한 경험을 해보신 적 있으신가요?

이러한 문제는 화면을 구성하는 '픽셀(Pixel)'과 인쇄물의 선명도를 나타내는 'DPI'의 개념을 혼동하기 때문에 발생합니다. 오늘은 디자인 초보자와 웹 크리에이터를 위해 이 두 가지의 명확한 차이와 올바른 웹 업로드 최적화 방법을 짚어드립니다.

1. 절대적인 물리량, 픽셀(Pixel)

픽셀(Pixel, 화소)은 컴퓨터나 스마트폰 모니터 화면을 구성하는 가장 작은 네모난 점입니다. 모니터는 이 수백만 개의 점들이 모여서 하나의 이미지를 만들어 냅니다. 예를 들어, 여러분의 모니터 해상도가 '1920 x 1080'이라면, 가로로 1,920개의 픽셀과 세로로 1,080개의 픽셀이 빽빽하게 들어차 있다는 뜻입니다.

웹사이트 환경에서는 오직 이 '픽셀의 가로세로 개수'만이 사진의 절대적인 크기를 결정합니다. 1000 x 1000 픽셀짜리 이미지는 어떤 모니터에서 보든 정확히 가로 1000개, 세로 1000개의 화면 점을 차지하게 됩니다.

2. 웹에서는 아무 의미 없는 허상, DPI

DPI(Dots Per Inch)는 1인치(약 2.54cm)라는 실제 종이의 물리적인 길이 안에 잉크 점을 몇 개나 촘촘하게 찍어낼 것인가를 나타내는 '인쇄용 단위'입니다.

• 충격적인 진실: 가로세로 1000 x 1000 픽셀인 이미지가 있다고 가정해 봅시다. 이 사진을 포토샵에서 72 DPI로 설정하든, 300 DPI로 설정하든, 999 DPI로 설정하든 웹 브라우저 화면에서 보이는 크기와 선명도, 심지어 파일 용량까지 완벽하게 똑같습니다.
• 모니터는 오직 '픽셀 수(1000개)'만 읽어 들일 뿐, 종이에나 필요한 잉크 촘촘도(DPI) 수치는 아예 무시해버리기 때문입니다.

3. 올바른 웹 이미지 최적화 (픽셀 다이어트)

그렇다면 웹사이트 로딩 속도를 높이기 위한 '웹용 최적화'의 진짜 정답은 무엇일까요? DPI를 72로 내리는 헛수고를 할 것이 아니라, 이미지의 가로 픽셀 크기 자체를 줄이는 것(Resizing)입니다.

요즘 스마트폰 카메라는 4000 x 3000 픽셀이 넘는 초고해상도로 사진을 찍습니다. 하지만 네이버 블로그나 티스토리의 본문 가로 폭은 기껏해야 800 ~ 1000 픽셀입니다. 즉, 4000픽셀짜리 원본을 그대로 올려봤자 시스템이 강제로 화면에 맞게 쪼그려뜨려서 보여주며, 쓸데없이 데이터 용량만 낭비하게 됩니다.

결론을 내리겠습니다. "인쇄소에 넘길 명함이나 현수막을 만들 때는 300 DPI를 신경 쓰고, 블로그나 웹사이트에 올릴 때는 오직 가로세로 픽셀(Pixel) 크기와 파일 용량(MB)만 신경 써라." 이 원칙만 지키셔도 여러분의 웹사이트 로딩 속도는 남들보다 2배 이상 빨라질 것입니다.