웹용 디자인 및 개발 방법을 아무리 많이 학습했더라도 <img> 요소는 도입부가 거의 필요하지 않습니다.
1993년 Netscape('Mosaic', 1995년)에서 출시되었으며 1995년에 HTML 사양에 추가된 <img>은 오랫동안 웹 플랫폼 내에서 단순하지만 강력한 역할을 해왔습니다. 개발자는 이미지를 렌더링할 수 없거나 보조 기술이 대안을 요청하는 경우 src 속성이 있는 '소스' 이미지 파일을 추가하고 alt 속성을 사용하여 대체 텍스트를 제공합니다. 여기서 브라우저는 이미지 데이터를 가져와 가능한 한 빨리 렌더링하는 한 가지 작업만 수행합니다.
대부분의 웹 개발 역사에서 이미지 작업은 그렇게 복잡하지 않았습니다. 최신 웹의 복잡성에도 불구하고 이미지 작업의 기본은 변하지 않았습니다. 호환성을 위해 웹 친화적인 이미지 형식을 사용하고 대역폭을 보존하려면 적절한 압축을 사용하고 페이지 레이아웃에서 이미지가 차지할 공간에 적합한 크기를 사용하세요.
사용자가 웹을 경험하는 방식에 대해 더 많은 의견을 제시할 수 있었다고 생각했던 것처럼 고정 너비 레이아웃을 사용하여 이 프로세스를 복잡하지 않게 만들었습니다. 이미지 소스의 크기를 설정하는 것은 특히 쉬웠습니다. 너비가 500픽셀이고 높이가 300픽셀인 공간을 차지하는 이미지의 경우 동일한 크기로 소스 이미지를 지정해야 했습니다.
반응형 레이아웃의 이미지
유연한 레이아웃 및 CSS 미디어 쿼리 사용 외에도 '유연한 이미지 및 미디어'는 반응형 웹 디자인의 3가지 정의 요소 중 하나입니다. 이미지를 유연하게 만들기 위해 개발자는 CSS를 사용하여 이미지(또는 사이트 전체의 모든 이미지)에 max-width: 100%를 설정하여 이미지가 축소되어 상위 컨테이너를 오버플로하는 것을 방지하도록 브라우저의 렌더링 엔진에 알리기 시작했습니다. 시각적으로는 완벽하게 작동합니다. 즉, 래스터 이미지를 축소하면 시각적으로 매끄럽게 작동합니다. CSS 한두 줄로 축소한 이미지는 항상 그 크기로 표시되어야 하는 이미지 소스를 지정한 것처럼 보입니다.
렌더링 엔진에 레이아웃에서 이미지가 차지하는 공간에 필요한 것보다 더 많은 이미지 데이터가 제공되면, 축소된 이미지를 어떻게 렌더링할지 정보에 입각한 결정을 내릴 수 있으며, 이렇게 할 경우 시각적 아티팩트가 발생하거나 블러가 발생하지 않습니다.
일반적으로 이미지를 업스케일하지 않는 것이 좋습니다. 즉, <img>를 소스 이미지의 고유 크기보다 큰 크기로 렌더링합니다.
이렇게 하면 이미지가 흐릿하게 흐리게 보입니다.
img { max-width: 100% }를 사용하면 유연한 컨테이너의 크기가 조절될 때 이미지가 적절하게 축소됩니다.
더 엄격한 width: 100%를 설정하는 것과 달리 이렇게 하면 이미지가 고유 크기를 초과하여 확대되지도 않습니다.
오랫동안은 이미지 작업 규칙에 따랐습니다. 브라우저가 이해하는 형식을 사용하고 합리적인 수준의 압축을 사용하며 이미지를 위로 확장하지 않습니다.
그러나 이 접근 방식은 시각적으로 간단하면서도 효과적일 뿐 아니라 성능 면에서 엄청난 비용이 소요되었습니다. <img>는 이미지 데이터의 단일 소스만 지원했으므로 이 접근 방식에서는 표시할 수 있는 최대 크기만큼 고유 크기의 이미지 애셋을 제공해야 했습니다. 레이아웃에서 사용자의 표시 영역 크기에 따라 너비가 300px~2000px일 수 있는 이미지를 사용하려면 고유 너비가 2000px 이상인 이미지 소스가 필요합니다. 작은 표시 영역을 통해서만 페이지를 보는 사용자의 경우 모든 것이 예상대로 표시되며
이미지가 적절하게 조정됩니다. 렌더링된 페이지에서 크지만 축소된 소스 이미지는 적절한 크기의 소스 이미지와 다르지 않습니다. 그러나 여전히 2000px 너비의 이미지를 전송하고 렌더링하면서 엄청난 양의 대역폭과 처리 성능을 허비하고 별다른 이점 없이 처리합니다.
최초의 '레티나' 기기가 등장하면서 상황이 더욱 악화되었습니다. 디스플레이 밀도는 표시 영역 크기와 함께 우려되기 때문입니다. 고밀도 디스플레이에 맞추기 위해서는 이미지 소스가 훨씬 더 큰 고유 너비가 필요합니다. 간단히 말해 밀도가 두 배인 디스플레이에서 이미지를 최대한 선명하게 렌더링하려면 두 배 더 많은 이미지 픽셀이 필요합니다.
이 경우에도 개발자는 이미지를 시각적으로 축소하는 렌더링 엔진의 기능을 활용할 수 있었습니다. src의 800px 너비 소스 이미지를 브라우저에 제공한 다음 CSS를 사용하여 너비가 400px에 표시되도록 지정하면 결과적으로 픽셀 밀도의 두 배로 렌더링되는 이미지가 생성됩니다.
레이아웃과 고밀도 디스플레이에서 가능한 한 가장 큰 공간에 맞게 잘라낸 단일 소스 이미지는 시각적으로 모든 사용자에게 잘 어울립니다. 작은 저밀도 디스플레이에서 렌더링된 거대한 고해상도 이미지 소스는 다른 작은 저밀도 이미지와 비슷하게 보이지만 훨씬 느리게 느껴집니다. 사용자는 4, 000픽셀 너비의 방대한 이미지 소스에 따른 성능 비용을 모두 부담해야 하며, 이 경우 아무 소용이 없습니다.
오랫동안 <img>는 '이미지 데이터를 가져와서 화면에 표시'하는 한 가지 작업을 수행했습니다. 물론 합리적으로는 잘 작동했지만 <img>는 우리가 경험하고 있는 탐색 컨텍스트의 급격한 변화를 수용하는 역할을 하지 못했습니다. 반응형 웹 디자인은 주류 개발 방식이 되었지만 브라우저는 거의 20년 동안 img의 성능을 최적화했습니다. 그러나 권한이 가장 높은 사용자를 제외한 모든 사용자를 대상으로 페이지의 이미지 콘텐츠는 처음부터 비효율적이었습니다. 브라우저에서 이미지 소스를 얼마나 빨리 요청, 파싱, 렌더링하든 관계없이 이 애셋은 사용자가 필요로 하는 것보다 훨씬 클 가능성이 높습니다.