Img vs Object

January 14, 2025

문제점

SVG 이미지를 사용하던 중, ios 기기에서만 뿌옇게 이미지 화질이 떨어지는 문제 발견.

원래 SVG 파일의 장점은 고품질 벡터 그래픽인데, PC 브라우저에서는 깨지지 않게 보이고 모바일 ios 기기로 확인했을 때 깨지는 현상이 발생.

<img src="~~~.svg" className="어쩌구~~" alt="~~~" />

해결

SVG를 처리하는 방식을 변경하면 화질 깨짐 현상을 해결할 수 있다.

<img> 태그 대신에 <object> 태그를 사용하면 모바일 ios 기기에서도 더이상 SVG 이미지가 깨지지 않는다.

<object data="~~~.svg" type="image/svg+xml" className="어쩌구~">
  <img src="~~~.svg" alt="~~~" className="어쩌구~" />
</object>

변경 내용

변경한 부분은 다음과 같다

  1. <img> 태그를 <object> 태그로 변경

  2. src 속성 대신에 data 속성 사용

  3. type="image/svg+xml" 속성 추가

  4. 폴백으로 원래의 <img> 태그를 <object> 태그 내부에 포함

폴백(Fallback)이 있다면 다양한 환경에서 일관된 경험을 주는데 도움이 될 수 있다.SVG 파일이 손상되었다면 폴백 이미지가 대신 표시되고, SVG 파일이 큰 경우 로딩이 오래걸리는데 이 때 폴백 이미지가 먼저 표시된다.

img 태그와 object 태그의 차이

object 태그는 SVG 를 벡터 그래픽으로 직접 렌더링하여서 원본의 품질을 유지하여 문제를 해결.

  • img 태그로 SVG 렌더링을 하는 것과 object 태그로 SVG 렌더링을 하는 것에 무슨 차이가 있을까?

    • img 태그는 래스터화 과정을 거친다.

    • 대부분의 브라우저에서 img 태그로 SVG 를 불러오면, SVG를 일정 해상도의 비트맵 이미지로 변환(래스터화)하는데 이 과정에서 원본 SVG가 손실될 수 있다.

    • 하지만 object 태그는 SVG 를 벡터 형식 그대로 렌더링한다.

    • 따라서 벡터 그래픽이기 때문에 어떤 크기로 확대되어도 선명도가 유지된다.

  • 결론적으로, 고품질의 SVG 렌더링이 필요한 경우 object 태그를 사용하는 것이 적합할 수 있다.

object 태그의 주의사항

object 태그는 기본적으로 inline 속성을 가진다. inline 속성을 가지는 요소는 텍스트 기준선에 맞춰 정렬되기 때문에 img 태그를 그대로 대체하려고 하면 레이아웃 문제를 일으킬 수 있다.

따라서 object 태그에 display: block 을 적용하여 img 태그와 유사하게 사용할 수 있다.