이미지

장식 이미지(예: 버튼의 배경 그라데이션 또는 콘텐츠 섹션 또는 전체 페이지의 배경 이미지) 프레젠테이션용이며 CSS를 사용하여 적용해야 합니다. 이미지가 문서에 맥락을 더하는 것은 콘텐츠이며 삽입됩니다.

이미지를 포함하는 기본 메서드는 src가 포함된 <img> 태그입니다. 이미지 리소스를 참조하는 속성과 이미지를 설명하는 alt 속성.

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

각 포그라운드 이미지에는 최소한 src 및 alt 속성이 포함되어야 합니다.

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

alt 속성은 이미지의 대체 텍스트를 제공하여 이미지를 볼 수 없는 사용자에게 이미지 설명을 제공합니다. 브라우저에서 표시할 수 있습니다. 이미지 캡션 파일을 생성할 수 있습니다. alt 텍스트는 네트워크가 느리거나 대역폭이 제한된 사용자 외에도 HTML에서 매우 유용합니다. 많은 사용자가 이메일 애플리케이션에서 이미지를 차단하기 때문입니다.

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

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

<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입니다. Fluffy 아이콘을 두 개 사용하면 초록색 베레모를 입고 웃고 있는 강아지는 alt="good" 'alt="bad"'라고 표시될 수 있습니다. 그렇지만 표준 아이콘만 사용하고 좋은 쪽과 나쁜 Fluffy를 모두 구분하고, 범례를 포함하고, 아이콘이 UI 요소의 의미를 해독하는 유일한 방법이 아닌지 확인합니다.

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

사용자가 맥락에서 이미 알고 있거나 콘텐츠에서 알고 있는 정보는 생략합니다. 예를 들어 브라우저 설정 변경에 대한 튜토리얼 페이지가 있고 페이지가 브라우저 Chrome의 아이콘을 클릭하는 것이라면 URL 중요한 것은 아닙니다. alt을 당면한 주제(설정 변경 방법)로 제한합니다. alt는 '설정 아이콘은 검색창 아래의 탐색 메뉴에 있습니다.' '스크린샷'을 포함하지 않음 또는 'machinelearningworkshop' 사용자가 스크린샷인지 알 필요가 없고 글쓰기 당시 테크라이터가 어디에서 서핑했는지 알 필요가 없기 때문입니다. 안내를 따르세요. 이미지에 대한 설명은 이미지가 애초에 포함된 이유에 대한 맥락을 기반으로 합니다.

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

이미지가 추가 정보를 제공하지 않거나 전적으로 장식용일 경우 속성은 빈 문자열과 마찬가지로 그대로 있어야 합니다.

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

MachineLearningWorkshop.com에는 포그라운드 이미지가 7개 있으므로 Alt 속성이 있는 이미지 7개(이스터 에그 조명 스위치, 수동 아이콘, 할과 이브의 전기 사진 2장, 믹서기, 진공청소기, 토스터의 아바타 3개 이 잡지처럼 보이는 전경 이미지만 장식용입니다. 이 페이지에는 두 개의 백그라운드 이미지 이것들은 장식용이며 CSS를 사용하여 추가되기 때문에 액세스할 수 없습니다.

전적으로 장식용인 잡지에 빈 alt 속성이 있습니다. 이미지가 순수한 것이므로 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과 공백, 설명어를 추가해야 합니다. 너비 설명자를 사용하는 경우 미디어와 함께 sizes 속성도 포함해야 합니다. 각 srcset 옵션에 대한 쿼리 또는 소스 크기가 포함됩니다. srcset가 포함된 반응형 이미지와 설명 문법을 다루는 알아보기 섹션을 읽어 보세요.

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

<picture> 및 <source>

여러 리소스를 제공하고 브라우저가 가장 적절한 애셋을 렌더링할 수 있는 또 다른 방법은 <picture> 요소 <picture> 요소는 컨테이너임 무제한 <source>에 나열된 여러 이미지 옵션의 요소 요소 및 단일 필수 <img> 요소가 포함됩니다.

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

브라우저는 각 하위 <source> 요소를 고려하여 그중에서 가장 일치하는 항목을 선택합니다. 일치하는 항목이 없으면 URL <img> 요소의 src 속성이 선택되어 있습니다. 액세스 가능한 이름은 중첩된 <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는 이미지 크기를 정의할 수 있으며, 가로세로 비율이 유지되도록 max-width: 100%;와 같은 단일 크기를 설정하는 경우가 많습니다. CSS는 일반적으로 <head>에 포함되므로 <img>가 발견되기 전에 파싱됩니다. 그러나 height 또는 가로세로 비율인 경우 예약된 공간은 alt 텍스트의 높이 (또는 너비)입니다. 대부분의 개발자는 너비만 선언하므로 이미지를 수신하여 렌더링하면 레이아웃 변경이 누적되어 Web 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도 지원하며 블링크 기반 브라우저에서는 fetchpriority 속성 드물게 사용됩니다. 이미지가 서버 측 지도의 일부인 경우 ismap 부울 속성을 포함합니다. 포인팅 기기 없이 사용자를 위해 링크에 <img>를 중첩할 수 있습니다.

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

이해도 확인

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