이미지와 미디어

docs.scrimba.com

웹 페이지에는 텍스트가 많이 담기지만, 그것만은 아닙니다. 사진, 다이어그램, 삽화, 비디오 클립, 소리도 모두 콘텐츠이며, HTML에는 각각을 위한 요소들이 있습니다. 이 장에서는 페이지에 미디어를 올리는 마크업에 관해 다룹니다. 이미지 파일을 지정하는 방법, 볼 수 없는 사람들을 위해 설명하는 방법, 그리고 누구의 데이터도 낭비하지 않으면서 올바른 파일을 올바른 화면에 제공하는 방법입니다.

이미지 요소

페이지에 사진을 올릴 때는 **이미지 요소**를 사용하며, <img>로 표기합니다. 콘텐츠가 없고 닫는 태그도 없습니다. 대신 속성을 통해 두 가지를 지정합니다. 어떤 파일을 보여줄지, 그리고 그 사진이 무엇인지입니다.

<img src="golden-retriever.jpg" alt="A golden retriever sitting in tall grass">

src는 소스(source)로, 이미지 파일의 경로 또는 웹 주소입니다. alt는 대체 텍스트(alternative text)로, 사진에 대한 짧은 설명입니다. 이미지를 불러올 수 없거나 누군가가 화면 읽기 프로그램으로 페이지를 듣고 있다면, alt 텍스트가 그 역할을 합니다. 따라서 전화 통화 중에 친구에게 사진을 설명하듯이 작성하세요.

<img> 요소는 외부 파일을 페이지로 가져옵니다. void 요소이므로 닫는 태그가 없으며, 필요한 모든 것이 속성에 들어갑니다. 두 가지가 중요합니다.

<img src="/images/team-photo.jpg" alt="The five members of the design team at their desks">

src는 파일의 경로(상대 경로 또는 절대 URL)입니다. alt는 **대체 텍스트**로, 이미지가 표시되지 않거나 볼 수 없을 때 대신할 단어들입니다.

alt를 올바르게 작성하는 것이 사람들이 건너뛰는 부분이며, 건너뛰면 안 되는 부분입니다. 파일 세부 사항이 아닌 이미지의 콘텐츠와 목적을 설명하세요. "2023년과 2024년 사이에 매출이 두 배가 된 것을 보여주는 막대 그래프"는 독자에게 그래프가 무엇을 말하는지 알려주지만, "chart.png"는 아무것도 알려주지 않습니다. 한 문장 정도로 유지하고, "Image of"로 시작하지 마세요. 브라우저가 이미 이것이 이미지라고 알려주니까요.

<img>는 외부 리소스를 불러오고 기본적으로 텍스트와 함께 인라인으로 배치하는 void 요소입니다. src(리소스 URL)와 alt(텍스트 대체)라는 두 속성이 실제 작업을 합니다. 이 섹션의 나머지는 alt에 관한 것입니다. 이미지의 접근성과 정확성이 실제로 여기에 있기 때문입니다.

alt 속성은 캡션도 아니고 파일에 대한 설명도 아닙니다. 이것은 대체입니다. 이미지가 없을 때 브라우저가 이미지 자리에 렌더링하는 텍스트이고, 스크린 리더(볼 수 없는 사람들을 위해 페이지를 소리내어 읽어주는 소프트웨어)가 사진 대신 말하는 텍스트입니다. 테스트는 기능적 동등성입니다. 이미지를 제거하고 alt 텍스트를 흐름에 넣었을 때, 문장이 여전히 말이 되고 같은 정보를 담고 있을까요? 좋은 alt는 이 테스트를 통과합니다. "photo1"은 통과하지 못합니다.

이것으로부터 두 가지 규칙이 따릅니다. 첫째, 픽셀이 아닌 목적을 설명하세요. 검색 버튼 안의 돋보기 아이콘은 alt="magnifying glass"가 아니라 alt="Search"입니다. 그 일이 페이지에서 그리는 것이 아니라 행동이기 때문입니다. 둘째, 장식용 이미지는 빈 alt를 사용합니다. 사진이 정보를 추가하지 않을 때(배경 장식이나 구분선), alt=""를 따옴표 사이에 아무것도 없이 작성하세요. 이것은 alt를 생략하는 것과 같지 않습니다. 빈 alt는 보조 기술에 "이것을 건너뛰세요, 의미가 없습니다"를 전달하고, 누락된 alt는 스크린 리더가 파일 이름을 소리내어 읽게 하는데, 이는 침묵보다 더 나쁩니다.

<!-- 의미 있음: 무엇을 전달하는지 설명 -->
<img src="revenue-2024.png" alt="Revenue rose from 1.2 to 2.4 million across 2024">

<!-- 장식용: 빈 alt, 보조 기술이 건너뜀 -->
<img src="corner-flourish.svg" alt="">

Juno이미지 요소 이미지에는 두 가지가 필요합니다. src는 보여줄 파일이고, alt는 사진을 단어로 설명합니다. alt를 전화 통화 중에 누군가에게 사진에 무엇이 있는지 말하듯이 작성하세요. 가장 많이 건너뛰는 부분이며, 가장 중요한 부분입니다.

Juno이미지 요소<img>는 void 요소입니다. 닫는 태그가 없고, 모든 것이 속성에 있습니다. 파일이 아닌 이미지가 전달하는 것을 설명하고, Image of로 시작하지 마세요. 브라우저가 이미 이미지라는 것을 알고 있습니다. 차트의 alt는 그 차트가 만드는 수치를 누군가에게 알려줘야 합니다.

Juno이미지 요소 좋은 alt는 캡션이 아니라 대체입니다. 문장에 넣어도 의미가 살아남아야 합니다. 그리기가 아니라 일을 설명하세요. 그래서 검색 아이콘은 Search로 읽힙니다. 그리고 장식용 이미지의 alt=""은 진정한 선택입니다. 스크린 리더에 건너뛰라고 말하는 반면, 누락된 alt는 파일 이름을 소리내어 읽게 합니다.

반응형 이미지

노트북에서 선명하게 보이는 사진은 휴대폰에서 필요한 것보다 훨씬 클 수 있습니다. 그 전체 크기 파일을 작은 화면으로 보내는 것은 방문자의 데이터를 낭비하고 페이지를 느리게 합니다. HTML을 사용하면 같은 사진의 몇 가지 버전을 제공하고 브라우저가 맞는 것을 선택하도록 할 수 있습니다.

시작할 때 모든 이미지에 이것이 필요한 것은 아닙니다. 합리적인 파일이 있는 하나의 <img>로도 충분합니다. 하지만 이 개념이 존재한다는 것을 아는 것이 도움이 됩니다. 같은 사진이 여러 크기로 올 수 있고, 브라우저가 선택합니다.

<img src="beach-800.jpg" alt="Waves rolling onto a quiet beach at sunset">

**반응형 이미지**는 브라우저가 화면을 기반으로 파일을 선택하도록 합니다. 하나의 소스를 하드코딩하는 대신, srcset으로 여러 개를 나열하고 sizes로 이미지가 얼마나 넓게 표시될지 설명합니다. 브라우저가 계산해서 최고의 일치를 다운로드합니다.

<img
  src="beach-800.jpg"
  srcset="beach-400.jpg 400w, beach-800.jpg 800w, beach-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Waves rolling onto a quiet beach at sunset">

srcset에서 각 항목은 파일을 실제 픽셀 너비와 쌍으로 만듭니다(400w는 파일이 400 픽셀 넓이라는 뜻입니다). sizes에서는 이미지가 차지할 공간을 브라우저에 알립니다. 여기서 화면이 600 픽셀 이하인 경우 전체 뷰포트 너비(100vw)를 채우고, 그 외의 경우 절반 너비(50vw)를 채웁니다. src는 오래된 브라우저를 위한 폴백으로 유지됩니다. alt는 한 번만 작성되며 모든 소스에 적용됩니다. 같은 사진이기 때문입니다.

한 크기 이상으로 교환이 필요하면 <picture>를 사용하세요. 여러 <source> 요소와 하나의 <img>를 감싸며, 브라우저는 일치하는 첫 번째 <source>를 사용합니다. 이것은 아트 디렉션(다양한 너비에서 다르게 자른 이미지를 제공)과 현대적인 파일 형식을 처리합니다.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Two cyclists climbing a mountain road at dawn">
</picture>

브라우저가 위에서 아래로 읽고, 이해할 수 있는 첫 번째 형식을 선택하고, 어느 것도 일치하지 않으면 일반 <img>로 폴백합니다. 내부의 <img>는 필수입니다. 실제로 렌더링되는 것이고 alt가 있는 곳입니다.

반응형 이미지는 해상도 전환 문제를 해결합니다. 같은 이미지, 다양한 디스플레이를 위한 다양한 픽셀 크기, 다운로드 전에 브라우저가 선택하므로 볼 수 없는 픽셀에 대해 비용을 지불하는 사람은 없습니다. 두 가지 도구가 있으며, 각각 다른 질문에 답합니다.

srcset과 sizes는 "어떤 해상도?"라는 질문에 답합니다. 브라우저에 후보 파일 집합을 제공하며, 각각은 w 설명자를 사용하여 픽셀 단위의 내재 너비로 태그 지정되고, sizes 값은 다양한 breakpoint에서 이미지가 렌더링될 너비를 알려줍니다. Breakpoint는 레이아웃이 변경되는 화면 너비 임계값입니다. 브라우저는 sizes 힌트와 디바이스의 픽셀 밀도를 결합하여 여전히 선명해 보이는 가장 작은 파일을 선택합니다.

<img
  src="product-800.jpg"
  srcset="product-400.jpg 400w, product-800.jpg 800w, product-1200.jpg 1200w"
  sizes="(max-width: 700px) 100vw, 350px"
  alt="Leather backpack shown from the front">

<picture> 요소는 다른 질문에 답합니다. "어떤 소스?"입니다. 이것은 스케일이 아니라 파일 자체가 변경되어야 하는 경우를 위한 것입니다. 두 가지 일반적인 이유가 있습니다. 아트 디렉션은 넓은 배너가 좁은 화면에서 세로 초상화로 자르므로 주체가 보이도록 유지되려면 한 파일 축소가 아니라 다양한 이미지 파일이 필요합니다. 그리고 형식 협상은 폴백이 있는 현대적인 형식을 제공하려면 브라우저가 해석할 수 있는 것으로 선택해야 합니다.

<picture>
  <source media="(max-width: 600px)" srcset="hero-portrait.avif" type="image/avif">
  <source media="(max-width: 600px)" srcset="hero-portrait.jpg">
  <source srcset="hero-wide.avif" type="image/avif">
  <img src="hero-wide.jpg" alt="Chef plating a dish in a busy kitchen">
</picture>

순서가 중요합니다. 브라우저가 media와 type을 만족하는 첫 번째 <source>를 취하므로, 가장 선호하고 가장 제한된 옵션을 먼저 넣으세요. 마지막 <img>는 필수이며 페이지가 실제로 렌더링하는 요소입니다. 소스의 srcset과 sizes가 이를 공급하지만, alt, width, height, 로딩 동작은 모두 내부 <img>에 속합니다.

Juno반응형 이미지 같은 사진이 몇 가지 크기로 올 수 있고, 브라우저가 화면에 맞는 것을 선택해서 휴대폰이 노트북 크기의 파일을 다운로드하지 않습니다. 첫날부터 이것이 필요하지는 않습니다. 일반 <img>로도 충분합니다. 페이지가 모바일에서 무거워지기 시작할 때를 위해 이 옵션이 있습니다.

Juno반응형 이미지 브라우저가 크기를 선택하게 하려면 srcset과 sizes를 사용하고, 다양한 자르기나 현대적인 형식을 위해 파일 자체를 교환하려면 <picture>를 사용하세요. <picture> 내부의 <img>는 필수이며 alt가 있는 곳입니다. alt를 한 번 작성하세요. 모든 소스는 같은 사진입니다.

Juno반응형 이미지 두 가지 다른 일. srcset 플러스 sizes는 해상도를 선택하고, <picture>는 아트 디렉션이나 형식 협상을 위해 전체 소스를 선택합니다. 소스는 위에서 아래로 읽고, 첫 번째 일치가 이기므로, 가장 제한된 것을 먼저 정렬합니다. 렌더링되는 모든 것은 여전히 내부 <img>에서 나오므로, 그곳이 alt와 크기 조정이 가는 곳입니다.

비디오와 오디오

HTML은 플러그인 없이 비디오와 소리를 재생할 수 있습니다. 클립의 경우 <video> 요소를 사용하고, 소리의 경우 <audio>를 사용합니다. controls 속성을 추가하면 브라우저가 재생 버튼, 타임라인, 볼륨 제어를 무료로 제공합니다.

<video src="tutorial.mp4" controls></video>

<audio src="podcast-episode.mp3" controls></audio>

이미지와 달리 이들은 닫는 태그를 가지고 있습니다. 열기와 닫기 태그 사이에 폴백 텍스트 또는 추가 설정을 넣을 수 있기 때문입니다. 초기 단계에서 기억할 가장 중요한 것은 항상 controls을 포함해야 한다는 것입니다. 그렇지 않으면 방문자가 재생을 누를 방법이 없습니다.

<video>와 <audio> 요소는 페이지에 네이티브 미디어 플레이어를 임베드합니다. controls 속성은 브라우저의 내장 재생, 일시 정지, 찾기 및 볼륨 인터페이스를 표시합니다. 이것이 없으면 컨트롤이 전혀 없습니다.

<video src="product-demo.mp4" controls width="640" poster="demo-cover.jpg"></video>

몇 가지 속성이 자리를 잡습니다. poster는 비디오가 재생되기 전에 표시되는 정지 이미지를 설정하므로 플레이어가 검은색 상자가 아닙니다. width는 플레이어의 크기를 예약합니다. autoplay, loop, 그리고 muted도 추가할 수 있지만, 대부분의 브라우저는 비디오도 muted일 때만 autoplay를 허용하므로 이 두 가지는 함께 이동합니다.

하나 이상의 파일 형식을 제공하려면 src를 제거하고 대신 내부에 <source> 요소들을 나열하세요. 브라우저가 할 수 있는 첫 번째를 재생합니다.

<video controls width="640" poster="demo-cover.jpg">
  <source src="product-demo.webm" type="video/webm">
  <source src="product-demo.mp4" type="video/mp4">
  Your browser cannot play this video.
</video>

소스 뒤의 텍스트는 폴백 콘텐츠로, 브라우저가 그들을 재생할 수 없는 경우에만 표시됩니다. <audio>는 같은 방식으로 작동하며, 같은 controls 및 <source> 패턴을 사용하되, poster 및 width와 같은 시각적 속성은 없습니다.

<video>와 <audio>는 제3자 플러그인 없이 브라우저의 네이티브 미디어 파이프라인, 디코딩, 버퍼링 및 내장 플레이어 UI를 임베드합니다. 둘 다 controls를 취합니다(네이티브 UI 표시). 둘 다 여러 <source> 자식을 수용합니다. 그래서 여러 코덱(비디오 또는 오디오 파일이 인코딩된 압축 형식)을 제공하고 브라우저가 해석할 수 있는 첫 번째를 선택하도록 할 수 있습니다.

<video controls width="640" height="360" poster="demo-cover.jpg" preload="metadata">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo-captions.en.vtt" srclang="en" label="English" default>
  Your browser cannot play this video.
</video>

두 가지 프로덕션 관심사가 여기를 지배합니다. 첫 번째는 접근성으로, 미디어를 볼 수 없거나 들을 수 없는 사람이 사용 가능하게 하는 것입니다. 그것이 <track>의 목적입니다. 시간 지정된 텍스트 파일(일반적으로 WebVTT 형식, 일반 텍스트 캡션 형식, .vtt로 끝나는 파일)을 미디어에 첨부합니다. kind="captions"은 음성 및 중요한 소리에 대한 텍스트 버전을 청각 장애인이거나 음소거 설정 상황(대부분의 사람들이 공개적으로 스크롤할 때)의 시청자에게 제공합니다. kind="subtitles"은 대사를 다른 언어로 번역합니다. default 속성은 사용자가 사냥하지 않고 한 트랙을 켭니다. 캡션이 없는 비디오는 실제 시청자 층을 제외하며, 캡션은 또한 비디오를 볼 수는 없지만 기록을 읽을 수 있는 검색 엔진을 돕습니다.

두 번째 관심사는 대역폭입니다. preload는 브라우저가 재생 전에 미디어를 얼마나 적극적으로 가져오는지를 제어합니다. preload="none"은 사용자가 재생을 누를 때까지 아무것도 다운로드하지 않으며, preload="metadata"는 기간과 크기만 가져오고, preload="auto"는 전체 파일을 가져올 수 있습니다. fold 아래의 모든 항목에서 기본값을 metadata 또는 none으로 설정하세요. 자동 로딩 비디오는 페이지가 조용히 할 수 있는 가장 무거운 것 중 하나이기 때문입니다. 그리고 같은 autoplay 주의는 유지됩니다. 브라우저가 음성 자동 재생을 차단하므로, 자동 재생 비디오는 muted여야 하며, 이것이 캡션이 중요한 또 다른 이유입니다.

Juno비디오와 오디오<video>는 클립을 재생하고 <audio>는 소리를 재생하며, 플러그인이 필요하지 않습니다. controls를 추가하세요. 그렇지 않으면 재생 버튼이 없고 방문자가 막힙니다. 둘 다 닫는 태그를 가지고 있으므로, 이미지와 달리 안에 설정과 폴백 텍스트를 넣을 수 있습니다.

Juno비디오와 오디오 항상 controls를 추가하고, poster를 설정해서 플레이어가 검은 사각형이 아니며, <source> 요소들을 나열해서 하나 이상의 형식을 제공하세요. autoplay는 비디오도 muted인 경우에만 발생하므로, 이 두 가지는 함께 이동합니다. 오디오는 시각적 속성 없이 같은 패턴입니다.

Juno비디오와 오디오 캡션이 있는 <track>을 추가하세요. 대부분의 사람들은 음소거로 시청하고, 검색 엔진은 시청할 수 없는 텍스트를 읽습니다. fold 아래의 모든 것에 대해 preload를 metadata 또는 none으로 유지하세요. 자동 로딩 비디오는 페이지를 무겁게 하는 가장 조용한 방법 중 하나입니다. 그리고 음성 자동 재생은 차단되므로, 자동 재생은 음소거를 의미하며, 이것이 캡션을 하는 또 다른 이유입니다.

크기 조정, 지연 로딩 및 성능

이미지가 로드될 때, 페이지의 나머지 부분을 이동할 수 있습니다. 문단을 읽고 있는데, 사진이 위에서 로드 완료되면, 갑자기 텍스트가 아래로 점프합니다. 그 점프는 짜증나며, 이를 방지할 수 있습니다. width와 height로 미리 이미지의 크기를 브라우저에 알려주세요.

<img src="team-lunch.jpg" alt="The team sharing lunch on the office balcony"
     width="800" height="600">

그 숫자로 브라우저가 이미지가 도착하기 전에 올바른 공간을 예약하므로, 도착할 때 아무것도 점프하지 않습니다. 파일의 실제 픽셀 크기를 제공하고, CSS는 여전히 화면에서 크기를 조정할 수 있습니다.

이미지는 사용자로서 느끼는 두 가지에 영향을 줍니다. 로딩 중 페이지가 얼마나 이동하는지, 그리고 얼마나 많은 데이터를 끌어오는지입니다. HTML은 둘 다에 대한 속성을 제공합니다.

width와 height를 설정하면 **레이아웃 이동**을 방지합니다. 이미지가 로드될 때 콘텐츠가 이동합니다. 크기를 선언하면 브라우저가 파일이 도착하기 전에 즉시 그 공간을 예약하는 대신 이미지를 nothing으로 축소했다가 파일이 도착하고 실제 높이가 알려질 때 확장합니다.

<img src="article-header.jpg" alt="Overhead view of a busy newsroom"
     width="1200" height="675" loading="lazy">

loading="lazy" 속성은 독자가 이미지를 스크롤해서 보기로 가져올 때까지 브라우저가 이미지를 다운로드하지 않도록 알려줍니다. 긴 페이지 아래로 멀리 떨어진 이미지의 경우, 이것이 데이터를 절약하고 첫 번째 그림을 가속화합니다. 한 가지 규칙. 방문자가 처음 보는 이미지(페이지 상단)를 지연 로드하지 마세요. 그것은 가능한 한 빠르게 로드되기를 원하므로, loading을 그 위에서 생략하세요(loading="eager" 설정).

미디어는 보통 페이지에서 가장 무거운 부분이므로, 로딩을 지배하는 속성은 장식이 아닌 성능 제어입니다. 세 가지가 중요합니다.

첫째, 누적 레이아웃 이동은 페이지 로딩 중 얼마나 많은 가시 콘텐츠가 이동하는지 측정합니다. 일반적인 원인은 선언된 크기가 없는 이미지입니다. 브라우저가 0 높이를 지정하고, 그 아래 모든 것을 배치한 다음, 파일이 도착하고 실제 높이가 알려질 때 전체 열을 리플로우합니다. 이를 방지하려면 브라우저에 미리 종횡비를 제공하세요. width와 height를 파일의 실제 픽셀 크기로 설정하면, 브라우저가 비율을 계산하고 CSS가 디스플레이 크기를 조정하더라도 올바른 상자를 예약합니다.

<img src="feature.jpg" alt="Solar panels across a green field"
     width="1600" height="900" loading="lazy" decoding="async">

CSS의 aspect-ratio 속성으로 같은 의도를 표현할 수 있습니다. 중요한 것은 픽셀이 다운로드되기 전에 비율이 알려져야 한다는 것입니다.

둘째, loading="lazy"는 페이지 초기 payload를 줄이기 위해 독자가 화면 밖의 이미지 다운로드를 지연시킵니다. 중요한 예외는 LCP(Largest Contentful Paint, 스크롤 없이 표시되는 가장 크고 이 메트릭이 브라우저와 검색 순위를 지켜보는 가장 큰 이미지 또는 블록)입니다. 그 이미지를 지연 로드하면 메트릭이 측정하는 바로 그것이 지연되므로, fold 위의 hero는 적극적으로 로드되어야 합니다.

셋째, decoding="async"는 브라우저가 메인 스레드 밖에서 이미지를 디코딩하도록 합니다. 압축된 바이트를 픽셀로 변환하는 것이 다른 렌더링을 차단하지 않습니다. 화면 상단이 아닌 이미지에 대한 작지만 안전한 이득입니다.

형식은 다른 레버입니다. WebP와 AVIF는 JPEG 또는 PNG와 같은 시각적 품질에서 훨씬 더 작게 압축하는 현대적인 이미지 형식입니다. AVIF는 보통 파일 크기에서 이기고, WebP는 브라우저 지원과 인코딩 속도에서 이깁니다. 장점은 호환성과 도구 지정이며, 이것이 정확히 <picture>이 type 소스로 관리하기 위해 만들어진 것입니다. AVIF를 먼저 제공하고, WebP 다음에, 그리고 JPEG 또는 PNG 폴백을 마지막에 제공하면, 모든 브라우저가 실제로 디코딩할 수 있는 최고의 파일을 얻습니다.

Juno크기 조정, 지연 로딩 및 성능 모든 이미지에 width와 height를 제공하면 사진이 로드될 때 페이지가 점프하는 것을 중지합니다. 파일의 실제 픽셀 크기를 사용하세요. CSS는 여전히 화면에서 축소할 수 있습니다. 이 한 가지 습관이 가장 짜증나는 로딩 결함을 수정합니다.

Juno크기 조정, 지연 로딩 및 성능width와 height는 이미지가 로드될 때 공간을 예약해서 아무것도 이동하지 않으며, loading="lazy"는 이미지가 보기로 스크롤될 때까지 다운로드를 유지합니다. 지연 로드하지 않는 하나의 이미지는 페이지의 첫 번째입니다. 그것은 바로 로드되어야 합니다.

Juno크기 조정, 지연 로딩 및 성능width와 height를 선언하거나 (aspect-ratio 설정) 브라우저가 상자를 예약해서 레이아웃이 이동하는 것을 중지합니다. 비율이 픽셀이 내려올 때 알려져야 합니다. fold 위 hero를 제외한 모든 것을 지연 로드하세요. 가장 큰 가시 이미지를 지연 로드하는 것이 그것을 지켜보는 메트릭을 느리게 합니다. 그리고 AVIF 또는 WebP를 <picture>를 통해 JPEG 폴백으로 제공하면 모든 브라우저가 디코딩할 수 있는 가장 작은 파일을 얻습니다.