이미지와 미디어

docs.scrimba.com

텍스트는 웹 페이지의 많은 부분을 담당하지만 전부는 아닙니다. 사진, 도표, 삽화, 동영상, 소리도 콘텐츠이며, HTML에는 이들 각각을 위한 요소가 있습니다. 이 장에서는 페이지에 미디어를 배치하는 마크업을 다룹니다. 이미지 파일을 어떻게 가리키는지, 보이지 않는 사람들을 위해 어떻게 설명하는지, 그리고 아무도 데이터를 낭비하지 않으면서 적절한 화면에 적절한 파일을 어떻게 제공하는지 살펴봅니다.

이미지 요소

페이지에 그림을 넣을 때는 이미지 요소, 즉 <img>를 사용합니다. 이 요소에는 콘텐츠도, 닫는 태그도 없습니다. 대신 속성을 통해 두 가지를 알려줍니다. 어떤 파일을 보여줄지, 그리고 그 그림이 무엇에 관한 것인지입니다.

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

src는 소스, 즉 이미지 파일의 경로나 웹 주소입니다. alt는 대체 텍스트로, 그림을 말로 짧게 설명한 것입니다. 이미지가 로드되지 않거나, 누군가 화면을 보는 대신 스크린 리더로 페이지를 듣고 있다면 alt 텍스트가 그 사람이 얻는 정보의 전부입니다. 그러니 전화로 친구에게 그림을 설명해준다고 생각하고 작성하세요.

<img> 요소는 외부 파일을 페이지로 가져옵니다. 빈 요소(void element)이므로 닫는 태그가 없으며, 필요한 모든 정보는 속성 안에 들어 있습니다. 그중 두 가지가 핵심입니다.

<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"는 아무것도 전달하지 못합니다. 한 문장 정도로 짧게 쓰고, "이미지:"로 시작하지 마세요. 브라우저는 이미 그것이 이미지라는 것을 알려주기 때문입니다.

<img>는 외부 리소스를 로드하고 기본적으로 텍스트와 함께 인라인으로 배치되는 빈 요소입니다. 실제로 중요한 작업을 하는 속성은 두 가지, src(리소스 URL)와 alt(대체 텍스트)입니다. 이 절의 나머지 부분은 alt에 관한 내용인데, 이미지의 접근성과 정확성이 실제로 좌우되는 지점이 바로 여기이기 때문입니다.

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

여기서 두 가지 규칙이 나옵니다. 첫째, 픽셀이 아니라 목적을 설명하세요. 검색 버튼 안에 있는 돋보기 아이콘은 alt="검색"이지 alt="돋보기"가 아닙니다. 페이지에서 그 아이콘의 역할은 그림이 아니라 동작이기 때문입니다. 둘째, 장식용 이미지에는 빈 alt를 씁니다. 배경 장식이나 구분선처럼 그림이 아무 정보도 더하지 않을 때는 따옴표 사이에 아무것도 넣지 않고 alt=""라고 씁니다. 이는 alt를 아예 생략하는 것과 다릅니다. 빈 alt는 보조 기술에게 "이건 건너뛰어도 된다, 의미가 없다"고 알려주는 반면, alt가 아예 없으면 스크린 리더가 대신 파일 이름을 소리 내어 읽는데, 이는 아무 소리도 나지 않는 것보다 나쁩니다.

<!-- Meaningful: describe what it communicates -->
<img src="revenue-2024.png" alt="Revenue rose from 1.2 to 2.4 million across 2024">

<!-- Decorative: empty alt, so assistive tech skips it -->
<img src="corner-flourish.svg" alt="">

Juno이미지 요소 이미지에는 두 가지가 필요합니다. 보여줄 파일을 나타내는 src와, 그림을 말로 설명하는 alt입니다. alt는 전화로 누군가에게 사진 속 내용을 알려준다고 생각하고 작성하세요. 가장 많이 생략되는 부분이면서, 가장 중요한 부분이기도 합니다.

Juno이미지 요소<img>는 빈 요소입니다. 닫는 태그가 없고 모든 정보는 속성 안에 있습니다. 파일이 아니라 이미지가 전달하는 내용을 설명하고, "이미지:"로 시작하지 마세요. 브라우저는 이미 그것이 이미지라는 걸 알고 있으니까요. 차트의 alt는 그 차트가 말하는 숫자를 알려줘야 합니다.

Juno이미지 요소 좋은 alt는 캡션이 아니라 대체물입니다. 문장 속에 넣었을 때도 의미가 살아 있어야 합니다. 그림이 아니라 역할을 설명하세요. 그래서 검색 아이콘은 검색이라고 씁니다. 그리고 장식용 이미지에 쓰는 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>를 사용합니다. 이를 통해 아트 디렉션(art direction, 너비에 따라 다르게 자른 이미지를 제공하는 것)과 최신 파일 형식을 다룰 수 있습니다.

<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 디스크립터로 고유 너비(픽셀 단위)를 표시하고, 다양한 분기점(breakpoint)에서 이미지가 얼마나 넓게 렌더링될지를 알려주는 sizes 값을 함께 제공합니다. 분기점이란 레이아웃이 바뀌는 화면 너비 기준값입니다. 브라우저는 여러분이 제공한 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"는 파일 전체를 가져올 수도 있습니다. 화면 아래쪽에 있는 콘텐츠에는 기본값을 metadata나 none으로 두세요. 자동으로 로드되는 동영상은 페이지가 조용히 저지를 수 있는 가장 무거운 일 중 하나이기 때문입니다. 그리고 autoplay에 대해서도 같은 주의사항이 적용됩니다. 브라우저는 소리가 켜진 자동 재생을 차단하므로, 자동 재생되는 동영상은 반드시 muted여야 하며, 이것이 바로 자막이 중요한 또 다른 이유입니다.

Juno동영상과 오디오<video>는 영상을 재생하고 <audio>는 소리를 재생합니다. 플러그인은 필요 없습니다. controls를 추가하지 않으면 재생 버튼이 없어서 방문자가 아무것도 할 수 없습니다. 둘 다 닫는 태그가 있는데, 이미지와 달리 그 안에 설정이나 대체 텍스트를 넣을 수 있기 때문입니다.

Juno동영상과 오디오 항상 controls를 추가하고, poster를 설정해 플레이어가 검은 사각형으로 보이지 않게 하고, <source> 요소들을 나열해 여러 형식을 제공하세요. autoplay는 영상이 muted일 때만 작동하니 이 둘은 함께 씁니다. 오디오도 시각적 속성만 없을 뿐 같은 방식입니다.

Juno동영상과 오디오 자막이 담긴 <track>을 추가하세요. 대부분의 사람은 음소거 상태로 시청하고, 검색 엔진은 볼 수 없는 대신 텍스트를 읽습니다. 화면 아래쪽 콘텐츠는 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를 설정하면 레이아웃 이동, 즉 이미지가 로드되면서 콘텐츠가 이리저리 밀리는 현상을 막을 수 있습니다. 크기를 선언해두면, 브라우저는 이미지를 없는 것처럼 접어뒀다가 파일이 도착하면 확장하는 대신 즉시 그 공간을 확보합니다.

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

loading="lazy" 속성은 독자가 스크롤해서 그 이미지가 화면에 들어오기 직전까지 다운로드하지 말라고 브라우저에 지시합니다. 긴 페이지 아래쪽에 있는 이미지라면 데이터를 절약하고 첫 화면 표시 속도를 높일 수 있습니다. 한 가지 규칙은, 방문자가 페이지 맨 위에서 가장 먼저 보게 되는 이미지는 지연 로딩하지 말아야 한다는 것입니다. 그 이미지는 최대한 빨리 로드되어야 하므로 loading을 아예 넣지 않거나 loading="eager"로 설정하세요.

미디어는 보통 페이지에서 가장 무거운 부분이므로, 로딩을 제어하는 속성들은 장식이 아니라 성능 제어 수단입니다. 중요한 세 가지가 있습니다.

첫째, 누적 레이아웃 이동(cumulative layout shift)은 페이지가 로드되는 동안 눈에 보이는 콘텐츠가 얼마나 이리저리 움직이는지를 측정하는 지표입니다. 흔한 원인은 크기가 선언되지 않은 이미지입니다. 브라우저가 그 이미지에 높이 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"는 화면 밖 이미지의 다운로드를 독자가 가까이 다가올 때까지 미뤄, 긴 페이지의 초기 전송량을 줄여줍니다. 중요한 예외는 LCP 요소(Largest Contentful Paint, 스크롤 없이 보이는 화면에서 가장 큰 이미지나 블록이며, 브라우저와 검색 순위가 주시하는 지표)입니다. 이 이미지를 지연 로딩하면 그 지표가 측정하려는 바로 그 대상 자체가 늦어지므로, 화면 상단의 히어로 이미지는 즉시 로드되어야 합니다.

셋째, decoding="async"는 브라우저가 메인 스레드 밖에서 이미지를 디코딩하게 해서, 압축된 바이트를 픽셀로 바꾸는 작업이 다른 렌더링을 막지 않게 합니다. 화면에서 가장 먼저 보이지 않는 이미지에는 작지만 안전한 이득입니다.

포맷도 또 하나의 지렛대입니다. WebP와 AVIF는 같은 화질에서 JPEG나 PNG보다 훨씬 작게 압축되는 최신 이미지 포맷입니다. 파일 크기에서는 보통 AVIF가 앞서고, 브라우저 지원과 인코딩 속도에서는 WebP가 앞섭니다. 여기서 문제가 되는 것은 호환성과 도구 지원인데, 이는 정확히 type 소스를 사용한 <picture>가 관리하도록 만들어진 부분입니다. AVIF를 먼저, WebP를 그다음, 마지막으로 JPEG나 PNG를 대체 수단으로 제공하면, 모든 브라우저가 자신이 실제로 디코딩할 수 있는 최선의 파일을 받게 됩니다.

Juno크기 지정, 지연 로딩, 성능 모든 이미지에 width와 height를 지정하면 사진이 로드되면서 페이지가 이리저리 흔들리는 일이 사라집니다. 파일의 실제 픽셀 크기를 사용하세요. CSS로 화면에서의 크기는 여전히 줄일 수 있습니다. 이 습관 하나로 로딩 중 가장 거슬리는 문제를 해결할 수 있습니다.

Juno크기 지정, 지연 로딩, 성능width와 height는 공간을 미리 확보해서 이미지가 로드될 때 아무것도 밀리지 않게 하고, loading="lazy"는 이미지가 화면에 들어오기 직전까지 다운로드를 미룹니다. 지연 로딩하지 말아야 할 유일한 이미지는 페이지 맨 처음에 나오는 이미지입니다. 그건 바로 로드되어야 합니다.

Juno크기 지정, 지연 로딩, 성능width와 height를 선언하거나(혹은 aspect-ratio를 설정해서) 브라우저가 공간을 미리 확보해 레이아웃이 흔들리지 않게 하세요. 픽셀이 도착하기 전에 비율만 알 수 있으면 됩니다. 화면 상단의 히어로 이미지를 제외한 모든 이미지는 지연 로딩하세요. 가장 크게 보이는 이미지를 지연 로딩하면 그 이미지를 감시하는 지표 자체가 느려집니다. 그리고 <picture>와 JPEG 대체 수단을 통해 AVIF나 WebP를 제공하면, 모든 브라우저가 자신이 디코딩할 수 있는 가장 작은 파일을 받게 됩니다.