[WEB] UI | 이미지 렌더링 속도 관리 | 이미지 태그의 src 속성

UI란?

user interface (UI) is the space where interactions between humans and machines occur. -Wikipedia

User Interface의 약자로, 인간과 기계가 상호작용하는 공간을 의미합니다. 디스플레이 화면 뿐 아니라 키보드, 마우스, 애플리케이션 또는 웹사이트와 사용자가 시각적 및 음향 요소(예: 폰트 스타일, 아이콘, 버튼, 애니메이션, 소리)를 통해 상호작용하는 방법도 포함되는 개념입니다. 좋은 UI를 위해서는 사용자가 쉽게 인터페이스를 탐색하고 목적에 맞게 사용할 수 있도록 설계해야 합니다.

이미지 렌더링 속도

• 이미지 크기가 큰 경우 렌더링 속도가 느려지게 되는데 이를 개선할 수 있는 방법이 무엇이 있는가?

1. 이미지를 최적화
   • 이미지의 용량을 줄이는 방법입니다. 이미지 데이터를 가능한 한 많이 압축하고 불필요한 메타데이터를 제거해 용량을 줄일 수 있습니다.
2. 이미지 스프라이트 활용
   • CSS 스프라이트를 활용해 여러 작은 이미지 파일을 하나의 큰 이미지로 결합해 로딩하는 방법입니다. 이렇게 하면 브라우저는 하나의 파일만 로드하면 되므로 로딩 시간을 단축할 수 있습니다.
3. 적절한 파일 포맷 선택
   • 이미지 유형에 적합한 파일 포맷을 선택합니다. 예를 들어, WebP는 크기를 줄이고 품질을 유지하는 데 효과적인 포맷입니다. 또한, JPG는 일반 사진과 스크린샷에 적합하며, PNG은 높은 세부 사항과 해상도를 요구하는 경우에 사용됩니다.

4 . 캐싱

• 정적 이미지 요청을 줄이기 위해 캐싱을 이용해 로딩 시간을 줄일 수 있습니다.

5. 이미지 리사이즈

• 브라우저 처리를 줄이기 위해 이미지를 적절한 크기로 리사이징하는 방법이 있습니다. 모바일 장치에서의 사용성 개선에 유용합니다.

6. CDN 사용

• CDN으로 사용자 위치에 가장 가까운 서버에서 콘텐츠를 제공해 로딩 시간을 줄입니다.

이미지 태그의 src 속성 사용 이유

src 속성은 웹페이지에 이미지를 삽입할 때 필수입니다. 이미지의 URL을 지정하여 src 속성을 사용하며, 브라우저가 웹 페이지에서 표시할 이미지 파일의 위치를 나타냅니다.

목적과 이점 

GPT 답변

• 이미지 참조: src 속성을 사용하여 <img> 태그는 실제로 이미지를 웹 페이지에 삽입하지 않고, 대신 이미지를 참조합니다. 이는 이미지 파일이 실제로 어디에 저장되어 있는지에 관계없이 웹 페이지에서 이미지를 표시할 수 있음을 의미합니다.
• 브라우저 호환성: src 속성은 모든 현대 브라우저에서 지원되며, 이미지의 URL을 정확하게 지정하는 데 사용됩니다. 이는 다양한 브라우저 환경에서도 이미지의 올바른 표시를 보장합니다.
• 접근성 및 SEO 이점: src 속성은 이미지의 대체 텍스트(alt 속성)를 지정하는 데 사용될 수 있으며, 이는 시각적으로 어려움을 겪는 사용자에게 이미지의 내용을 설명하는 데 도움이 됩니다. 또한, 이미지의 src 속성은 검색 엔진이 이미지의 콘텐츠를 인덱싱하는 데 사용되므로, 웹 사이트의 SEO를 향상시키는 데도 기여합니다.
• 효율적인 이미지 관리: src 속성을 사용하여 이미지의 URL을 지정함으로써, 개발자는 이미지의 크기와 형식을 최적화하여 웹 페이지의 로딩 시간을 줄이고, 사용자 경험을 개선할 수 있습니다. 이는 특히 모바일 장치에서의 사용성을 향상시키는 데 중요합니다.

참고자료

User interface - Wikipedia

What Is a User Interface (UI)? | Definition from TechTarget

빠른 로드 시간  |  web.dev

How To Optimize Images for Web and Performance