이미지

버튼의 배경 그라데이션이나 콘텐츠 섹션 또는 전체 페이지의 배경 이미지와 같은 장식 이미지는 표현용이므로 CSS를 사용하여 적용해야 합니다. 이미지가 문서에 맥락을 추가하는 경우 콘텐츠이므로 HTML로 삽입해야 합니다.

이미지를 포함하는 기본 방법은 이미지 리소스를 참조하는 src 속성과 이미지를 설명하는 alt 속성이 있는 <img> 태그를 사용하는 것입니다.

<img src="images/eve.png" alt="Eve">

<img>의 srcset 속성과 <picture> 요소는 각각 대체 이미지 소스와 연결된 미디어 쿼리를 사용하여 여러 이미지 소스를 포함하는 방법을 제공하므로 기기의 해상도, 브라우저 기능, 뷰포트 크기에 따라 가장 적절한 이미지 파일을 제공할 수 있습니다. srcset 속성을 사용하면 해상도와 sizes 속성, 브라우저 뷰포트 크기에 따라 여러 이미지 버전을 제공할 수 있습니다.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

<picture> 요소와 <source> 하위 요소를 함께 사용하여 이 작업을 수행할 수도 있습니다. 이 경우 <img>이 기본 소스로 사용됩니다.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

이러한 내장 HTML 반응형 이미지 메서드 외에도 HTML을 사용하면 다양한 속성을 통해 이미지 렌더링 성능을 개선할 수 있습니다. <img> 태그와 그래픽 제출 버튼 <input type="image">에는 콘텐츠 레이아웃 이동을 줄이기 위해 이미지의 가로세로 비율을 설정하는 height 및 width 속성이 포함될 수 있습니다. lazy 속성은 지연 로드를 사용 설정합니다.

HTML은 <svg>를 직접 사용하여 SVG 이미지 포함도 지원하지만 .svg 확장자가 있는 SVG 이미지 (또는 data-uri)는 <img> 요소를 사용하여 삽입할 수 있습니다.

최소한 각 전경 이미지에는 src 및 alt 속성이 포함되어야 합니다.

src 파일은 삽입된 이미지의 경로와 파일 이름입니다. src 속성은 이미지의 URL을 제공하는 데 사용됩니다. 그러면 브라우저가 애셋을 가져와 페이지에 렌더링합니다. 이 속성은 <img>에 필요합니다. 이 파일이 없으면 렌더링할 항목이 없습니다.

alt 속성은 이미지의 대체 텍스트를 제공하여 화면을 볼 수 없는 사용자 (검색엔진, 지원 기술, Alexa, Siri, Google 어시스턴트 등)에게 이미지에 대한 설명을 제공하며, 이미지가 로드되지 않으면 브라우저에 표시될 수 있습니다. 네트워크가 느리거나 대역폭이 제한된 사용자 외에도 많은 사용자가 이메일 애플리케이션에서 이미지를 차단하므로 alt 텍스트는 HTML 이메일에서 매우 유용합니다.

<img src="path/filename" alt="descriptive text" />

이미지가 SVG 파일 형식인 경우 VoiceOver 버그로 인해 필요한 role="img"도 포함합니다.

<img src="switch.svg" alt="light switch" role="img" />

효과적인 alt 이미지 설명 작성

대체 속성은 짧고 간결해야 하며, 이미지가 전달하는 모든 관련 정보를 제공하면서 문서의 다른 콘텐츠에 중복되거나 유용하지 않은 정보는 생략해야 합니다. 텍스트를 작성할 때 어조는 사이트의 어조를 반영해야 합니다.

효과적인 대체 텍스트를 작성하려면 페이지 전체를 볼 수 없는 사람에게 읽어준다고 상상해 보세요. 시맨틱 <img> 요소를 사용하면 화면 리더 사용자 및 봇에 요소가 이미지임을 알릴 수 있습니다. alt에 '이 이미지는/스크린샷은/사진은'을 포함하는 것은 중복됩니다. 사용자는 이미지가 있다는 사실을 알 필요는 없지만 이미지가 전달하는 정보는 알아야 합니다.

일반적으로 '빨간 모자를 쓴 개의 거친 이미지입니다'라고 말하지는 않습니다. 대신 문서의 나머지 부분의 맥락과 관련하여 이미지가 전달하는 내용을 전달해야 합니다. 전달하는 내용은 주변 텍스트의 맥락과 내용에 따라 달라집니다.

예를 들어 반려견 사진은 맥락에 따라 다르게 설명됩니다. Fluffy가 Yuckymeat 반려견 사료 리뷰 옆에 있는 아바타인 경우 alt="Fluffy"로 충분합니다.

사진이 동물 보호소 웹사이트의 Fluffy 입양 페이지에 포함된 경우 타겟 잠재고객은 예비 반려견 보호자입니다. 텍스트는 이미지에 전달되는 정보 중 도입자와 관련이 있고 주변 텍스트에 중복되지 않는 정보를 설명해야 합니다. alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth"과 같은 긴 설명이 적합합니다. 입양 페이지의 텍스트에는 일반적으로 입양 가능한 반려동물의 종, 품종, 나이, 성별이 포함되므로 대체 텍스트에서 이를 반복할 필요가 없습니다. 하지만 강아지의 서면 약력에는 털 길이, 색상, 장난감 선호도가 포함되지 않을 것입니다.

중요한 점은 이미지를 완전히 설명하지 않았다는 것입니다. 잠재적인 반려견 소유자는 반려견이 실내에 있는지 실외에 있는지, 빨간색 목걸이와 파란색 리드줄을 착용하고 있는지 알 필요가 없습니다.

아이콘에 이미지를 사용하는 경우 alt 속성이 접근 가능한 이름을 제공하므로 이미지 설명이 아닌 아이콘의 의미를 전달하세요. 예를 들어 돋보기 아이콘의 alt 속성은 search입니다. 집 모양의 아이콘에는 home이 대체 텍스트로 있습니다. 5인치 플로피 디스크 아이콘의 설명은 save입니다. 권장사항과 비권장사항을 나타내는 데 사용되는 Fluffy 아이콘이 두 개 있는 경우 녹색 베레모를 쓴 웃는 개는 alt="good"가 설정되어 있고 빨간색 베레모를 쓴 으르렁거리는 개는 alt="bad"로 표시될 수 있습니다. 표준 아이콘만 사용하고, 좋은 플러피와 나쁜 플러피와 같은 비표준 아이콘을 사용하는 경우 범례를 포함하여 아이콘이 UI 요소의 의미를 해독하는 유일한 방법이 아닌지 확인하세요.

이미지가 스크린샷이나 그래프인 경우 외관을 설명하는 대신 이미지에서 알 수 있는 내용을 작성합니다. 이미지가 천 마디 말의 가치를 지닐 수 있지만 설명은 학습한 모든 내용을 간결하게 전달해야 합니다.

사용자가 이미 컨텍스트에서 알고 있으며 콘텐츠에서 달리 알 수 있는 정보는 생략합니다. 예를 들어 브라우저 설정 변경에 관한 튜토리얼 페이지에 있고 페이지가 브라우저 크롬에서 아이콘을 클릭하는 것에 관한 내용인 경우 스크린샷의 페이지 URL은 중요하지 않습니다. alt을 현재 주제인 설정 변경 방법에만 국한해 줘.

alt는 '설정 아이콘이 검색창 아래의 탐색 메뉴에 있습니다.'일 수 있습니다. 사용자가 스크린샷임을 알 필요가 없고 기술 작성자가 안내를 작성할 때 어디를 탐색했는지 알 필요가 없으므로 '스크린샷' 또는 'machinelearningworkshop'을 포함하지 마세요. 이미지 설명은 이미지가 포함된 이유의 맥락을 기반으로 합니다.

화면 캡처에 chrome://version/로 이동하여 브라우저 버전 번호를 찾는 방법이 표시되는 경우 페이지 콘텐츠에 URL을 안내로 포함하고 이미지가 주변 텍스트에 없는 정보를 제공하지 않으므로 대체 텍스트 속성으로 빈 문자열을 제공합니다.

이미지가 추가 정보를 제공하지 않거나 순전히 장식용인 경우에도 속성은 빈 문자열로 있어야 합니다.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com에는 전경 이미지가 7개 있으므로 alt 속성이 있는 이미지가 7개 있습니다. 부활절 달걀 스위치, 수동 아이콘, Hal과 Eve의 전기 사진 2개, 믹서기, 진공 청소기, 토스터의 아바타 3개입니다. 잡지처럼 보이는 전경 이미지만 순전히 장식용입니다. 페이지에는 배경 이미지도 두 개 있습니다. 이러한 이미지는 장식용이며 CSS를 사용하여 추가되었으므로 액세스할 수 없습니다.

이 잡지는 순전히 장식용이므로 alt 속성이 비어 있고, 이미지는 순전히 표현용 SVG이므로 role이 none입니다. 의미가 있는 경우 SVG 이미지에는 role="img"이 포함되어야 합니다.

<img src="svg/magazine.svg" alt="" role="none" />

페이지 하단에는 포스터 이미지가 포함된 리뷰가 3개 있습니다. 일반적으로 alt 텍스트는 사진에 나온 사람의 이름입니다.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

대신 농담 페이지이므로 시력이 낮은 사용자가 유머를 놓치지 않도록 명확하지 않을 수 있는 내용을 전달해야 합니다. 캐릭터 이름을 사용하는 대신 원래 머신 기능을 alt로 사용합니다.

<img src="images/blender.svg" alt="blender" role="img" />

강사 사진은 아바타가 아니라 약력 이미지이므로 더 자세한 설명이 제공됩니다.

실제 사이트라면 예비 학생이 교실에 들어갈 때 교사를 알아볼 수 있도록 교사의 최소한의 설명을 제공해야 합니다.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

이 사이트는 농담 사이트이므로 농담 맥락과 관련된 정보를 대신 제공하세요.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

전화로 친구에게 페이지를 읽어주는 경우 친구는 빨간 점이 어떻게 생겼는지 신경 쓰지 않습니다. 이 경우 영화 참조의 기록이 중요합니다.

설명 텍스트를 작성할 때는 이미지에서 전달하는 정보 중 사용자에게 중요하고 관련성이 있는 정보를 고려하여 포함하세요. 이미지의 alt 속성 내용은 컨텍스트에 따라 다릅니다. 시각 장애인이 액세스할 수 있고 컨텍스트와 관련된 이미지에 전달된 모든 정보가 전달되어야 합니다. 그 이상은 필요하지 않습니다. 짧고 정확하며 유용하게 작성하세요.

src 및 alt 속성은 삽입된 이미지의 최소 요구사항입니다. 논의해야 할 다른 속성이 몇 가지 있습니다.

반응형 이미지

표시 영역 크기와 화면 해상도는 매우 다양합니다. 대형 화면 모니터에 적합한 이미지를 모바일 사용자에게 제공하여 모바일 사용자의 대역폭을 낭비하고 싶지는 않지만, 일반 화면 해상도의 4배인 작은 기기에는 더 높은 해상도의 이미지를 제공하고 싶을 수 있습니다. 표시 영역 크기와 화면 해상도에 따라 다른 이미지를 제공하는 방법은 몇 가지가 있습니다.

속성 <img> srcset개

srcset 속성을 사용하면 여러 이미지 파일을 제안할 수 있으며, 브라우저는 표시 영역 크기 및 화면 해상도를 비롯한 여러 미디어 쿼리를 기반으로 요청할 이미지를 선택합니다.

<img> 요소당 하나의 srcset 속성이 있을 수 있지만 srcset는 여러 이미지에 연결될 수 있습니다. srcset 속성은 쉼표로 구분된 값 목록을 허용하며 각 값은 애셋의 URL과 공백, 해당 이미지 옵션의 설명자로 구성됩니다. 너비 설명자를 사용하는 경우 마지막 옵션을 제외한 각 srcset 옵션에 미디어 쿼리 또는 소스 크기가 있는 sizes 속성도 포함해야 합니다. srcset를 사용한 반응형 이미지와 설명 구문을 다루는 학습 섹션을 읽어 보세요.

일치하는 항목이 있으면 srcset 이미지가 src 이미지보다 우선합니다.

<picture> 및 <source>

여러 리소스를 제공하고 브라우저가 가장 적절한 애셋을 렌더링하도록 허용하는 또 다른 방법은 <picture> 요소를 사용하는 것입니다. <picture> 요소는 무제한의 <source> 요소와 하나의 필수 <img> 요소에 나열된 여러 이미지 옵션의 컨테이너 요소입니다.

<source> 속성에는 srcset, sizes, media, width, height이 포함됩니다. srcset 속성은 img, source, link에 공통적이지만 일반적으로 소스에서 약간 다르게 구현됩니다. 미디어 쿼리는 <srcset>의 미디어 속성에 대신 나열될 수 있기 때문입니다. <source>는 type 속성에 정의된 이미지 형식도 지원합니다.

브라우저는 각 하위 <source> 요소를 고려하고 그중 가장 적합한 요소를 선택합니다. 일치하는 항목이 없으면 <img> 요소의 src 속성 URL이 선택됩니다. 액세스 가능한 이름은 중첩된 <img>의 alt 속성에서 가져옵니다. <picture> 요소와 처방적 구문을 다루는 학습 섹션도 읽어볼 만합니다.

추가 성능 기능

사이트의 성능을 개선할 수 있는 다양한 추가 이미지 기능이 있습니다.

지연 로드

loading 속성은 JS 지원 브라우저에 이미지를 로드하는 방법을 알려줍니다. 기본값인 eager는 이미지가 표시 영역 밖에 있더라도 HTML이 파싱될 때 이미지가 즉시 로드됨을 의미합니다. loading="lazy"을 설정하면 이미지가 표시 영역에 표시될 때까지 이미지 로딩이 지연됩니다. '가능성'은 이미지가 표시 영역에서 얼마나 떨어져 있는지에 따라 브라우저에서 정의합니다. 사용자가 스크롤하면 업데이트됩니다. 지연 로드를 사용하면 대역폭과 CPU를 절약하여 대부분의 사용자의 성능을 개선할 수 있습니다. 보안상의 이유로 JavaScript가 사용 중지된 경우 모든 이미지는 기본적으로 eager로 설정됩니다.

<img src="switch.svg" alt="light switch" loading="lazy" />

가로세로 비율

브라우저는 HTML을 수신하면 렌더링을 시작하고, HTML에서 애셋이 발견되면 애셋을 요청합니다. 즉, 브라우저가 <img> 태그를 발견하고 요청을 보낼 때 이미 HTML을 렌더링하고 있습니다. 이미지를 로드하는 데 시간이 걸릴 수 있습니다. 기본적으로 브라우저는 alt 텍스트를 렌더링하는 데 필요한 크기 외에는 이미지용 공간을 예약하지 않습니다.

<img> 요소는 항상 단위가 없는 height 및 width 속성을 지원했습니다. 이러한 속성은 CSS를 선호하여 사용되지 않게 되었습니다. CSS는 이미지 크기를 정의할 수 있으며, 가로세로 비율이 유지되도록 max-width: 100%;와 같은 단일 크기를 설정하는 경우가 많습니다.

CSS는 일반적으로 <head>에 포함되므로 <img>가 발견되기 전에 파싱됩니다. 하지만 height 또는 가로세로 비율을 명시적으로 나열하지 않으면 예약된 공간은 alt 텍스트의 높이 (또는 너비)입니다.

개발자가 너비만 선언하면 이미지를 수신하고 렌더링할 때 누적 레이아웃 시프트가 발생하여 웹 vitals에 해를 끼칩니다. 이 문제를 해결하기 위해 브라우저에서는 이미지 가로세로 비율을 지원합니다. <img>에 height 및 width 속성을 포함하면 크기 조정 힌트 역할을 하여 브라우저에 가로세로 비율을 알리고 최종 이미지 렌더링을 위해 적절한 공간을 예약할 수 있습니다. 브라우저가 50% 예와 같은 단일 크기를 발견하면 CSS 크기를 준수하고 다른 크기는 너비-높이 가로세로 비율을 유지하는 이미지를 위한 공간을 저장합니다.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

CSS가 반응형으로 설정되어 있다면 이미지는 반응형입니다. 예, 포함된 단위 없는 height 및 width 값은 CSS로 재정의됩니다. 이러한 속성을 포함하는 목적은 올바른 가로세로 비율로 공간을 예약하여 레이아웃 이동을 줄여 성능을 개선하는 것입니다. 페이지가 로드되는 시간은 거의 동일하지만 이미지가 화면에 그려질 때 UI가 갑자기 이동하지 않습니다.

기타 이미지 기능

<img> 요소는 crossorigin, decoding, referrerpolicy 속성도 지원하며 Blink 기반 브라우저에서는 fetchpriority 속성도 지원합니다. 이미지가 서버 측 지도의 일부인 경우 거의 사용되지 않습니다. ismap 불리언 속성을 포함하고 포인팅 기기가 없는 사용자를 위해 링크에 <img>을 중첩합니다.

ismap 속성은 <input type="image" name="imageSubmitName">에서 필요하지 않으며 지원되지도 않습니다. 클릭 위치의 x 및 y 좌표가 양식 제출 중에 전송되어 값이 입력 이름에 추가되기 때문입니다. 예를 들어 사용자가 이미지를 클릭하여 제출하면 &imageSubmitName.x=169&imageSubmitName.y=66와 같은 항목이 양식과 함께 제출됩니다. 이미지에 name 속성이 없으면 x와 y가 전송됩니다(&x=169&y=66).

이해도 확인

이미지에 대한 지식을 테스트해 보세요.