이미지

버튼의 배경 그라데이션 또는 콘텐츠 섹션 또는 전체 페이지의 배경 이미지와 같은 장식 이미지는 눈에 잘 띄며 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" />

<img>를 기본 소스로 사용하는 <source> 하위 요소와 함께 <picture> 요소를 사용하여 실행할 수도 있습니다.

<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 확장자가 있는 (또는 data-uri로) SVG 이미지는 <img> 요소를 사용하여 삽입할 수 있습니다.

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

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

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

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

이미지가 SVG 파일 형식인 경우 VoiceOver bugs로 인해 필요한 role="img"도 포함하세요.

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

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

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

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

일반적으로는 '빨간 모자를 쓴 강아지의 거친 이미지입니다.'라고 말하지 않습니다. 대신 이미지의 나머지 부분의 컨텍스트와 관련하여 이미지가 전달하는 내용을 전달하며, 전달하는 내용은 주변 텍스트의 맥락과 콘텐츠에 따라 달라집니다.

예를 들어 개 사진은 상황에 따라 다른 방식으로 설명됩니다. Yuckymeat 애완견 사료 리뷰 옆에 플러피가 아바타인 경우 alt="Fluffy"로 충분합니다.

사진이 플러피의 동물 보호소 웹사이트에 있는 입양 페이지에 포함된 경우 타겟층은 강아지를 키우고자 하는 대상입니다. 텍스트는 어답터와 관련이 있으며 주변 텍스트와 중복되지 않는, 이미지로 전달되는 정보를 설명해야 합니다. alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth"와 같은 긴 설명이 적절합니다. 입양 페이지의 텍스트에는 일반적으로 입양 가능한 반려동물의 종, 품종, 연령, 성별이 포함되므로 대체 텍스트에서 이를 반복하지 않아도 됩니다. 하지만 강아지가 쓴 전기에는 머리 길이, 색깔, 장난감 선호도가 포함되어 있지 않을 수 있습니다. 여기서는 이미지를 설명하지 않았습니다. 반려견 주인은 반려견이 실내에 있는지 야외에 있는지 알 필요가 없습니다.

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

이미지가 스크린샷이나 그래프인 경우 모양을 설명하기보다는 이미지에서 학습한 내용을 적습니다. 한 이미지는 백 마디 말보다 훨씬 효과적일 수 있지만, 설명에서는 학습한 모든 내용을 간결하게 전달해야 합니다.

사용자가 맥락에서 이미 알고 있거나 다른 방식으로 콘텐츠에서 정보를 받는 정보는 생략합니다. 예를 들어 브라우저 설정 변경에 관한 튜토리얼 페이지를 사용 중이며 이 페이지가 Chrome 브라우저의 아이콘을 클릭하는 것에 관한 내용이라면 화면 캡처에 있는 페이지의 URL은 중요하지 않습니다. alt를 현재 주제(설정 변경 방법)로 제한합니다. alt는 '설정 아이콘은 검색창 아래의 탐색 메뉴에 있습니다'일 수 있습니다. 사용자가 스크린샷인지 알 필요가 없고 기술 작성자가 안내를 작성할 때 어디에서 서핑을 했는지 알 필요가 없으므로 '스크린샷' 또는 '머신러닝 워크숍'은 포함하지 않습니다. 이미지에 대한 설명은 처음에 이미지가 포함된 이유를 기반으로 합니다.

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

이미지가 추가 정보를 제공하지 않거나 순전히 장식용인 경우 속성은 빈 문자열처럼 계속 존재해야 합니다.

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

MachineLearningWorkshop.com에는 전경 이미지가 7개 있으므로 Alt 속성이 있는 이미지 7개(이스터 에그 조명 스위치, 수동 아이콘, 핼와 이브의 전기 사진 2장, 믹서기, 진공청소기, 토스터 아바타 3개)가 있습니다. 잡지처럼 보이는 포그라운드 이미지는 완전히 장식용입니다. 페이지에는 배경 이미지도 2개 있습니다. 이 이미지는 장식용이므로 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이 수신되면 렌더링을 시작하며, 발견 시 애셋을 요청합니다. 즉, 브라우저가 <img> 태그를 만나 요청을 할 때 이미 HTML을 렌더링하고 있습니다. 이미지가 로드되는 데 시간이 걸릴 수 있습니다. 기본적으로 브라우저는 alt 텍스트를 렌더링하는 데 필요한 크기 외에 다른 이미지 공간을 예약하지 않습니다.

<img> 요소는 항상 단위가 없는 height 및 width 속성을 지원했습니다. 이러한 속성은 더 이상 사용되지 않고 CSS로 대체되었습니다. CSS는 이미지 크기를 정의할 수 있으며, 가로세로 비율을 유지하기 위해 max-width: 100%;와 같은 단일 크기를 설정하는 경우가 많습니다. CSS는 일반적으로 <head>에 포함되므로 <img>가 발생하기 전에 파싱됩니다. 그러나 height 또는 가로세로 비율을 명시적으로 나열하지 않으면 예약된 공간은 alt 텍스트의 높이 또는 너비입니다. 대부분의 개발자가 너비만 선언하므로 이미지를 수신하고 렌더링하면 레이아웃 변경이 발생하여 웹 바이탈에 악영향을 미칩니다. 이 문제를 해결하기 위해 브라우저에서 이미지 가로세로 비율을 지원합니다. <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도 지원하고 블링크 기반 브라우저에서는 fetchpriority 속성도 지원합니다. 이미지가 서버 측 지도의 일부인 경우, ismap 부울 속성을 포함하고 포인팅 기기가 없는 사용자를 위해 링크에 <img>를 중첩하는 경우는 거의 없습니다.

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

이해도 테스트

이미지에 대한 지식을 테스트합니다.