다섯 가지 원인 한눈에
선명한 사진이 업로드 후 흐려 보이는 것은 대개 다섯 가지 이유 중 하나입니다. 당신의 증상을 찾고, 아래의 해당 섹션을 읽으세요.
| 원인 | 알아보는 법 | 해결 |
|---|---|---|
| 플랫폼 재압축 | 업로드 후 흐림, 전에는 선명 | 품질 85 이상으로 업로드 |
| 슬롯보다 작은 이미지 | 흐리거나 블록 모양; 브라우저가 확대함 | 적어도 표시 크기의 소스를 사용 |
| 레티나 불일치 | 데스크톱에서 선명, 폰에서 흐림 | CSS 표시 너비의 2배를 제공 |
| JPEG 결함 | 가장자리와 그라데이션 주변의 색 노이즈 | 품질을 올리거나 WebP로 전환 |
| DPI 혼동 | DPI를 바꿔도 나아지지 않음 | DPI는 무시; 픽셀 치수만 중요 |
원인 1：플랫폼의 재압축
대부분의 웹 플랫폼 — 소셜 미디어, 사이트 빌더, CMS 시스템, 전자상거래 플랫폼 — 은 저장 비용을 줄이고 페이지 로드 시간을 개선하기 위해 업로드 후 이미지를 압축합니다. 적용되는 압축은 흔히 공격적이고, 당신의 특정 이미지가 아니라 평균적인 파일 크기 감소에 최적화되어 있습니다.
결과는 두 번의 압축을 거친 당신 사진의 버전입니다: 한 번은 카메라나 편집기에서 내보냈을 때, 다시 한 번은 플랫폼이 재압축했을 때. 각 손실 압축은 기존 위에 새 결함을 더합니다. 부드러운 그라데이션에 밴딩이 생깁니다. 선명한 가장자리가 부드러워집니다. 미세한 디테일이 사라집니다. 완화 전략:
- 필요하다고 생각하는 것보다 높은 품질로 업로드하세요. 재압축하는 플랫폼은 당신의 업로드 버전으로 작업합니다. JPEG 품질 95로 업로드하면, 플랫폼의 재압축은 품질 70으로 업로드할 때보다 더 깨끗한 기준선에서 시작합니다.
- 표시 치수를 안다면 그 정확한 치수로 업로드하세요. 이미 목표 크기의 이미지를 받는 플랫폼은 크기 조정을 건너뛰거나 줄일 수 있고, 이는 저하 단계 중 하나를 피합니다.
- 권장 업로드 사양에 대해 플랫폼의 문서를 확인하세요. 많은 플랫폼이 최고 품질을 위해 권장하는 치수와 형식을 공개합니다.
원인 2：표시 크기보다 작은 이미지를 업로드
600픽셀 너비 이미지를 업로드하고 1200픽셀 너비로 표시되면, 브라우저는 컨테이너에 맞추려고 그것을 확대해야 합니다. 이미지를 원래 치수를 넘어 확대하는 것 — 업스케일링 — 은 바탕의 픽셀 격자를 드러냅니다. 이미지는 스케일링 알고리즘에 따라 무르게, 흐리게, 또는 블록 모양으로 보입니다. 해결은 적어도 표시 크기만큼 크고, 가급적 고밀도(레티나) 화면을 위해 2배 큰 소스 이미지를 쓰는 것입니다. 레티나 화면의 800 CSS 픽셀 표시 너비는 선명하게 보이려면 1600픽셀 이미지가 필요합니다. 이는 다음 때 일어납니다:
- 업로드 전에 사진을 지나치게 공격적으로 줄여, 표시 크기보다 작아짐
- 저해상도 카메라의 오래된 기기로 찍은 사진을 사용
- 비 레티나 디스플레이에서 스크린샷을 찍어 레티나 맥락에서 표시
- 이미지의 썸네일 크기 버전을 그것을 크게 보이는 슬롯에 업로드
원인 3：레티나／고밀도 디스플레이 불일치
레티나와 고밀도 디스플레이(HiDPI 또는 2× 디스플레이라고도 함)는 각 CSS 픽셀을 표시하는 데 두 개의 물리 픽셀을 씁니다. 표준 100×100 CSS 픽셀 영역은 이 화면들에서 200×200 물리 픽셀 격자를 씁니다. 200×200이 필요한 슬롯에 100×100 픽셀짜리 이미지만 제공하면, 표준 디스플레이에서는 괜찮아 보이는 한편 레티나 기기에서는 흐려 보입니다.
대부분의 현대 노트북, iPhone, iPad, 고급 Android 폰, 많은 데스크톱 모니터가 고밀도 디스플레이입니다. 당신의 청중이 현대 기기를 쓰고 당신의 이미지가 자기 모니터에서는 선명하지만 다른 사람이 볼 때 흐리다면, 레티나 불일치가 유력한 원인입니다.
해결: CSS 표시 치수의 2배로 이미지를 제공하세요. 400픽셀 너비 CSS 슬롯에는 800픽셀 너비 이미지를 업로드하세요.
원인 4：잘못된 형식이 흐림처럼 보이는 시각적 결함을 유발
심한 JPEG 압축은 블록 모양보다 흐림으로 나타나는 결함을 만들 수 있습니다 — 특히 하늘, 피부, 초점이 나간 배경 같은 부드러운 그라데이션 영역에서. 흐린 이미지처럼 보이는 것이 사실은 미세한 디테일이 양자화로 제거된, 심하게 압축된 JPEG일 수 있습니다.
테스트: 이미지의 선명한 가장자리(글자, 고대비 윤곽)로 확대하세요. 가장자리가 무르게 보이고 색 노이즈에 둘러싸였다면, 문제는 JPEG 압축 결함입니다. 가장자리는 선명한데 전체 이미지에 디테일이 부족하다면, 문제는 불충분한 해상도입니다.
JPEG 결함은 더 높은 품질 설정으로 업로드하거나, 동등한 파일 크기에서 그라데이션을 더 깨끗하게 다루는 WebP로 변환해 고치세요.
원인 5：DPI 혼동
이미지 편집기는 파일 설정에 흔히 "DPI"나 "PPI" 값을 표시합니다. 어떤 사람들은 이 값을 줄이면 파일 크기가 줄거나 화면에서 이미지가 보이는 방식이 바뀐다고 생각해 줄입니다. 둘 다 하지 않습니다. DPI(인치당 점)는 인쇄에만 의미가 있습니다 — 프린터에 잉크를 얼마나 빽빽이 깔지 알려줍니다. 화면은 인치당 점이 아니라 픽셀을 쓰며, JPEG나 PNG의 DPI 값은 모든 브라우저가 무시합니다.
이미지 편집기에서 이미지를 300 DPI에서 72 DPI로 줄여도 화면에서 더 작아지거나 흐려지지 않습니다 — 편집기가 동시에 픽셀 치수를 재샘플링(크기 조정)하지 않는 한. 픽셀 치수가 바뀌었는지 확인하세요. 바뀌지 않았다면, DPI 변경은 웹 버전에 효과가 없었습니다.
예방 체크리스트
- 레티나 선명도를 위해 CSS 표시 너비의 2배로 이미지를 업로드
- 플랫폼 재압축 전에 JPEG 품질 85+ 또는 WebP 품질 82+로 업로드
- 업로드 전에 플랫폼의 권장 이미지 치수를 확인
- 작은 이미지를 큰 슬롯을 채우려고 확대하지 말 것 — 고해상도 소스에서 시작
- 플랫폼이 허용하는 곳에서는 JPEG 대신 WebP나 AVIF를 사용 — 품질 압축을 더 우아하게 다룸