고밀도 픽셀의 디스플레이가 빠르게 표준이 되고 있습니다. 콘텐츠 크리에이터는 이러한 사실에 적응해야 합니다. 이 가이드에서는 아직 구현되지 않은 폴리필, JavaScript, CSS 해킹, 브라우저 기능 없이 웹에서 고품질 이미지를 제공하는 방법을 간단히 설명합니다. 한마디로 워크플로를 크게 변경하지 않고도
현재 많은 반응형 이미지 제안서가 있으며, 그중 상당수는 웹 개발자에게 상당한 변화를 가져옵니다. 표준 트랙 srcset
<img> 속성은 특히 srcset의 추가 표시 영역 기반 선택의 복잡성으로 인해 구현하기 어렵습니다.
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
image-set CSS 속성은 devicePixelRatio만 사용하여 로드할 이미지를 결정하지만, 개발자가 모든 이미지에 대해 많은 추가 마크업을 작성해야 합니다.
<picture> 요소와 같은 다른 제안서는 더 상세합니다.
또한 표준 트랙이 아니므로 srcset 속성보다 더 광범위하게 사용 가능해질 때까지는 시간이 더 걸립니다. JavaScript 및 서버 측 솔루션이 유일한 대안이지만, 이러한 방법에는 다른 도움말에 설명된 대로 자체적인 단점이 있습니다.
이 문서에서는 웹에서 일반적으로 볼 수 있는 이미지의 여러 가지 용도를 살펴보고 픽셀 밀도가 높은 화면은 물론 일반 화면뿐만 아니라 픽셀 밀도가 높은 화면에서도 작동하는 간단한 솔루션을 제안합니다. 이 논의의 목적상 window.devicePixelRatio이 1보다 큰 기기는 고DPI로 간주할 수 있습니다. CSS 픽셀이 기기 픽셀과 다르고 이미지가 확대되고 있기 때문입니다.
요약하면 다음과 같습니다.
- 가능하면 래스터 이미지보다는 CSS/SVG를 사용하세요.
- 기본적으로 고밀도 디스플레이에 최적화된 이미지를 사용합니다.
- 간단한 그림과 픽셀 아트(예: 로고)에는 PNG를 사용합니다.
- 다양한 색상이 있는 이미지(예: 사진)에는 압축된 JPEG를 사용하세요.
- 모든 이미지 요소에 항상 명시적 크기(CSS 또는 HTML 사용)를 설정합니다.
간단한 그림 및 픽셀 아트
CSS 기능이나 SVG를 사용하면 작은 이미지를 완전히 피할 수 있는 경우가 많습니다.
예를 들어 border-radius CSS 속성이 광범위하게 지원되므로 모서리가 둥근 이미지를 사용할 필요가 없습니다. 마찬가지로 맞춤 글꼴도 광범위하게 지원되므로 '이미지화된' 텍스트를 사용하는 것은 좋지 않습니다.
그러나 로고와 같은 일부 경우에는 이미지만 가능할 수 있습니다. 예를 들어 이 Chrome 로고의 자연 크기는 256x256입니다. Retina 디스플레이에서는 대각선과 곡선에서 선 모자이크 현상을 볼 수 있으며, 특히 선명하게 렌더링된 텍스트와 비교하면 덩어리지고 좋지 않게 보입니다.
자연스러운 크기: 256x256px, 확장 소재 크기: 31 kB, 형식: PNG
확신하셨나요? 잘하셨어요 이제 고밀도 이미지를 사용해 보겠습니다. 로고를 JPEG로 저장하여 공간을 절약하고 싶을 수 있지만, 로고와 기타 그래픽을 손실이 있는 형식으로 저장하면 아티팩트가 발생하는 경향이 있으므로 좋은 방법은 아닙니다. 이 경우 매우 높은 압축을 사용하여 문제를 과장했지만 그라데이션의 밴딩, 흰색 배경의 반점, 지저분한 선을 확인합니다.
자연스러운 크기: 512x512px, 확장 소재 크기: 13 kB, 형식: JPEG
비교적 작은 이미지의 경우 2x PNG를 사용하는 것이 좋습니다. 1x와 2x PNG의 크기 차이는 일반적으로 매우 높습니다 (이 경우 52KB). 하지만 로고의 경우 웹사이트의 얼굴로 방문자가 가장 먼저 보게 됩니다. 크기를 늘리기 위해 품질을 너무 소홀히 하면 방문자가 가장 마지막으로 보게 되는 콘텐츠가 될 수도 있습니다.
다음은 2배 디스플레이에 사용할 수 있도록 원래 크기의 절반 크기로 축소한 Chrome 로고입니다.
자연스러운 크기: 512x512px, 확장 소재 크기: 83 kB, 형식: PNG
위의 렌더링을 위한 마크업은 다음과 같습니다.
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
이미지에 너비와 높이를 지정했습니다. 이는 원래 이미지 크기가 512픽셀이기 때문에 필요합니다. 렌더링 엔진이 요소의 크기를 잘 파악하고 계산하기 위해 너무 많은 작업을 하지 않아도 되므로 성능에도 좋습니다.
24비트 PNG를 팔레트가 적용된 8비트 PNG로 줄이는 것이 도움이 될 수 있습니다. Chrome 로고를 포함하여 색상이 적은 이미지에 적합합니다. 이 최적화를 수행하려면 http://pngquant.org/와 같은 도구를 사용하면 됩니다. 약간의 번인이 보이지만 이 파일의 크기는 13KB에 불과하므로 원래 512x512 PNG에 비해 크기가 무려 6배나 줄었습니다.
자연 크기: 512x512px, 애셋 크기: 13 kB, 형식: PNG,
8-bit palette
다양한 색상의 이미지
다양한 반응형 이미지 기법을 살펴보는 HTML5Rocks 도움말을 작성하고 1x 및 2x JPEG 압축과 결과 크기 및 시각적 품질 비교에 관한 조사를 진행했습니다. 다음은 위 도움말의 카드 중 하나입니다.
이미지에 압축 수준 (JPEG 품질로 표시), 크기 (바이트) 및 비교 시각적 충실도 (숫자 순으로 정렬)에 관한 나의 주관적 의견으로 라벨을 지정했습니다. 여기서 흥미로운 점은 고도로 압축된 2x 이미지 (라벨 3)가 크기가 더 작고 압축되지 않은 1x 이미지 (라벨 4)보다 더 보기 좋다는 점입니다. 즉, 이미지 4와 3 사이에서 각 크기를 두 배로 늘리고 압축을 크게 늘려 이미지 품질을 개선하는 동시에 크기를 2KB 줄였습니다.
압축, 크기, 시각적 품질
압축 수준, 이미지 크기, 시각적 품질, 이미지 크기 간의 장단점에 대해 좀 더 자세히 알아보고자 했습니다. 위의 연구를 바탕으로 다음과 같은 가설을 세우고 연구를 진행했습니다.
가설
충분히 압축하면 2x 이미지는 다른 (더 낮은) 압축 시 1x 크기에서 동일한 이미지와 동일하게 보입니다. 그러나 이 경우 고도로 압축된 2x 이미지는 1x 이미지보다 크기가 작습니다.
절차
- 2x 이미지가 주어졌으면 1x 이미지를 생성합니다.
- 두 이미지를 다양한 수준에서 압축합니다.
- 두 이미지 세트를 나란히 표시하는 테스트 페이지를 만듭니다.
- 두 세트에서 이미지가 동일한 위치를 찾습니다.
- 동일한 이미지 크기와 압축 수준을 참고하세요.
- 1x 디스플레이와 2x 디스플레이에서 모두 시도해 보세요.
Lightroom의 비교 보기와 유사한 이미지 나란히 비교 앱을 빌드했습니다. 1x 이미지와 2x 이미지를 나란히 표시하는 동시에 이미지의 섹션을 확대하여 세부정보를 확인할 수 있도록 하기 위함입니다. JPEG와 WebP 형식 중에서 선택하고 압축 품질을 변경하여 파일 크기와 이미지 품질을 비교할 수도 있습니다. 여러 이미지에서 설정을 조정하고, 압축 품질, 크기 조정, 형식과 이미지 품질 사이의 균형점을 파악한 후 모든 이미지에 이 설정을 사용하는 것입니다.
이 도구 자체는 사용해 볼 수 있습니다. 확대할 하위 영역을 선택하여 이미지를 확대할 수 있습니다.
분석
이미지 품질은 주관적이라는 점을 미리 말씀드리겠습니다. 또한 특정 사용 사례에 따라 시각적 충실도와 파일 크기 스펙트럼 중 우선순위가 어느 정도일 수 있습니다. 또한 다양한 이미지 특징은 크기 조정 및 압축 품질에 다르게 반응하므로 일률적인 솔루션이 여기에서 반드시 작동하지는 않을 수도 있습니다. 이 도구의 목적은 이미지 품질 압축, 크기, 형식에 대한 직관을 쌓는 데 도움이 되는 것입니다.
이미지 확대/축소 도구를 사용해 보니 몇 가지 사항이 바로 눈에 들어왔습니다. 첫째, 세부사항을 높이기 위해 quality=90
dpr=1x 이미지보다 quality=30 dpr=2x 이미지를 선호합니다. 이러한 이미지는 파일 크기도 비슷합니다. 플레인의 경우 압축된 2x 이미지는 76KB인 반면 압축되지 않은 1x 이미지는 80KB입니다.
그라디언트가 있는 고도로 압축된 (quality<30) 이미지는 이 규칙의 예외입니다. 이러한 이미지는 색상 밴딩이 발생하는 경향이 있으며, 이는 이미지 크기와 관계없이 마찬가지로 좋지 않습니다. 도구에 있는 새와 자동차 샘플이 그 예입니다.
WebP 이미지는 특히 압축 수준이 낮을 때 JPEG보다 훨씬 선명하게 보입니다. 이 색상 밴딩은 훨씬 적은 문제인 것으로 보입니다. 마지막으로, WebP 이미지는 훨씬 더 작습니다.
주의사항 및 마무리
고밀도 디스플레이에서 이미지를 제대로 표시하는 것은 화면의 큰 변화로 인해 발생하는 이미지 관련 문제의 절반에 불과합니다. 경우에 따라 표시 영역 크기에 따라 완전히 다른 이미지를 게재할 수 있습니다. 예를 들어 오바마의 얼굴 사진은 휴대전화 크기의 화면에 적합할 수 있지만, 그 앞에 있는 스탠드와 뒤에 있는 깃발은 노트북 디스플레이에 더 적합할 수 있습니다.
고해상도 이미지에만 집중하기 위해 이 '아트 디렉션' 주제를 의도적으로 피했습니다. 이 문제는 미디어 쿼리 및 배경 이미지를 사용하거나, JavaScript를 통해, image-set와 같은 몇 가지 새로운 기능을 통해, 또는 서버에서 다양한 방식으로 해결할 수 있습니다. 이 주제는 가변 픽셀 밀도를 위한 높은 DPI 이미지에서 다룹니다.
미해결 문제 몇 가지를 안내해 드리겠습니다.
- 높은 압축이 성능에 미치는 영향 고도로 압축된 이미지를 디코딩하면 어떤 불이익이 있나요?
- 2x 이미지가 1x 디스플레이에 로드될 때 이미지 크기를 줄여야 하는 경우 성능이 저하되는 이유는 무엇인가요?
요약하자면 래스터 이미지를 사용하는 대신 CSS 및 SVG를 선택하세요. 래스터 이미지가 엄격하게 필요한 경우 팔레트가 제한되어 있고 단색이 많은 이미지에는 PNG를 사용하고 색상과 그라데이션이 많은 이미지에는 JPEG를 사용합니다. 이 접근 방식의 장점은 마크업이 거의 변경되지 않는다는 점입니다. 웹 개발자가 해야 할 일은 2배 확장된 애셋을 생성하고 DOM에서 이미지 크기를 적절하게 조정하는 것뿐입니다.
자세한 내용은 이와 유사한 주제에 대한 Scott Jehl의 기사를 참조하세요. 이미지가 선명하고 모바일 데이터 사용량이 적기를 바랍니다.