이미지 삽입 | Minstudio

이미지 삽입과 최적화 (img 태그)

웹 페이지에 시각적인 사진이나 일러스트를 넣을 때 사용합니다.
이미지 태그 <img>는 요소 그 자체가 콘텐츠(사진)를 품고 있기 때문에, 내부 텍스트를 감쌀 필요가 없어 닫는 태그가 없는 대표적인 빈 태그(Empty Tag)입니다.

💡 초보자가 가장 많이 실수하는 alt 속성

alt 속성은 네트워크 오류로 이미지가 깨졌을 때 대신 보여줄 텍스트입니다.
가장 중요한 점은, 시각 장애인들이 스크린 리더기로 웹을 탐색할 때 그림을 소리로 읽어주는 유일한 수단이라는 것입니다. 또한, 구글 검색 엔진 로봇(Bot)은 이미지를 눈으로 볼 수 없으므로 alt 값을 보고 이 이미지가 어떤 내용인지 파악합니다. 따라서 접근성과 SEO를 위해 반드시 작성해야 하는 필수 속성입니다.

1. 이미지 삽입 핵심 속성

단순 삽입을 넘어 레이아웃 붕괴 현상(CLS)을 막고 성능을 최적화하기 위한 속성들입니다.

속성명	사용 예시	설명 및 역할
`src`	`src="dog.jpg?v=1778809388267"`	(필수) 화면에 표시할 이미지 파일의 실제 경로(URL)를 지정합니다.
`alt`	`alt="뛰어노는 강아지"`	(필수) 대체 텍스트(Alternate text)로, 이미지가 보이지 않는 상황에서 출력됩니다.
`width / height`	`width="400" height="300"`	브라우저가 이미지를 로딩하기 전에 미리 공간을 확보하게 하여 화면이 덜컹거리는 현상(CLS)을 방지합니다. 단위 없이 숫자만 적습니다.
`loading`	`loading="lazy"`	사용자가 스크롤을 내려 이미지가 화면에 보일 때쯤 지연 로딩(Lazy loading)을 하여, 초기 로딩 속도와 데이터 소모량을 혁신적으로 줄여줍니다.

2. 반응형 이미지 태그 (picture)

모바일 기기에서는 작은 이미지를, PC 화면에서는 큰 해상도의 이미지를 브라우저가 알아서 골라 다운로드하게 해주는 모던 HTML 태그입니다.

태그명	설명 및 역할
`<picture>`	아래의 `source`와 `img` 태그를 감싸는 부모 래퍼(Wrapper) 역할을 합니다.
`<source>`	조건(media 속성)에 따라 다른 이미지(srcset 속성)를 제공합니다. 조건에 맞지 않으면 브라우저는 이 이미지를 다운로드조차 하지 않아 데이터를 절약합니다.
`<img>`	모든 `source` 조건에 맞지 않거나, 브라우저가 최신 태그를 지원하지 않을 때 최후의 보루(Fallback)로 출력될 기본 이미지입니다.

속성명

사용 예시

설명 및 역할

src

src="dog.jpg?v=1778809388267"

(필수) 화면에 표시할 이미지 파일의 실제 경로(URL)를 지정합니다.

alt

alt="뛰어노는 강아지"

(필수) 대체 텍스트(Alternate text)로, 이미지가 보이지 않는 상황에서 출력됩니다.

width / height

width="400" height="300"

브라우저가 이미지를 로딩하기 전에 미리 공간을 확보하게 하여 화면이 덜컹거리는 현상(CLS)을 방지합니다. 단위 없이 숫자만 적습니다.

loading

loading="lazy"

사용자가 스크롤을 내려 이미지가 화면에 보일 때쯤 지연 로딩(Lazy loading)을 하여, 초기 로딩 속도와 데이터 소모량을 혁신적으로 줄여줍니다.

태그명

설명 및 역할

<picture>

아래의 source와 img 태그를 감싸는 부모 래퍼(Wrapper) 역할을 합니다.

<source>

조건(media 속성)에 따라 다른 이미지(srcset 속성)를 제공합니다. 조건에 맞지 않으면 브라우저는 이 이미지를 다운로드조차 하지 않아 데이터를 절약합니다.

<img>

모든 source 조건에 맞지 않거나, 브라우저가 최신 태그를 지원하지 않을 때 최후의 보루(Fallback)로 출력될 기본 이미지입니다.