HTML에 img 요소로 이미지 표시하기 2020년 버전

기본형

<img src="sample.jpg" alt="画像">

기본형은 매우 간단하네요.

반응형 이미지 1: srcset 속성

<img src="sample.jpg"
     srcset="[email protected] 2x, [email protected] 3x"
     alt="画像">

srcset 속성을 사용하면 Retina 디스플레이/고해상도 디스플레이에 해당하는 이미지를 넣을 수 있습니다.

참고

반응형 이미지 - MDN

반응형 이미지 2: sizes 속성

<img srcset="sample-320w.jpg 320w,
             sample-480w.jpg 480w,
             sample-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="sample-800w.jpg"
     alt="画像">

sizes 속성을 사용하면 다양한 디스플레이 크기를 지원할 수 있습니다.

참고

반응형 이미지 - MDN

반응형 이미지 3: 아트 디렉션(이미지 전환)

<picture>
  <source media="(max-width: 799px)"
          srcset="sample-480w-sp.jpg">
  <source media="(min-width: 800px)"
          srcset="sample-800w.jpg">
  <img src="sample-800w.jpg"
       alt="画像">
</picture>

picture 요소와 source 요소를 조합하면 디스플레이 크기 등 조건별로 완전히 다른 이미지를 분리할 수도 있다.

참고

아트 디렉션 - MDN

반응형 이미지 4: webp 사용

<picture>
  <source type="image/webp"
          srcset="sample.webp">
  <img src="sample.png"
       alt="画像">
</picture>

webp는 Google이 개발한 이미지 형식으로, jpeg 등 종래형 이미지 형식보다 경량이기 때문에 web 퍼포먼스면에서 유리하게 된다. 전술의 아트 디렉션과 같은 방법으로 표시 전환 가능. IE와 Safari는 현재 webp 비대응.

참고

반응형 이미지의 기본 지원 다른 이미지 형식 로드 - html5rocks

반응형 이미지 5: 화면 크기 및 해상도별 분배와 webp/png 분배를 율의적으로 가본다

<picture>
  <source type="image/webp"
          media="(min-width: 1200px)"
          srcset="sample-lg.webp 1x, [email protected] 2x">
  <source type="image/webp"
          media="(max-width: 1199px)"
          srcset="sample-md.webp 1x, [email protected] 2x">
  <source type="image/webp"
          media="(max-width: 380px)"
          srcset="sample-sm.webp 1x, [email protected] 2x">
  <source type="image/png"
          media="(min-width: 1200px)"
          srcset="sample-lg.png 1x, [email protected] 2x">
  <source type="image/png"
          media="(max-width: 1199px)"
          srcset="sample-md.png 1x, [email protected] 2x">
  <source type="image/png"
          media="(max-width: 380px)"
          srcset="sample-sm.png 1x, [email protected] 2x">
  <img src="sample.png"
       alt="画像">
</picture>

이미지 한 장을 표시하기 위해 HTML 설명이 놀라울수록 증가합니다

서버 측에서 webp 분배 설정을하는 방법

전항과 같이 HTML의 기술량이 증가하는 것을 방지하기 위해서, 서버측의 설정 변경으로 대응하는 방법이 있습니다. Apache/.htaccess를 사용하는 방법과 Nginx를 사용하는 방법에 대해서는 아래가 매우 도움이 되었습니다.

참고

2. htaccess로 파일 바꾸기 - WebP 대응을 하면 사이트가 가벼워졌기 때문에 가장 대응하기 쉬운 방법을 설명합니다.

nginx에서 WebP 이미지의 선택적 응답을 설정하는 방법

decoding 속성

<img src="sample.jpg"
     decoding="async"
     alt="画像">

decoding="async" 지정된 경우 이미지는 비동기 적으로 디코딩됩니다. HTML Living Standard 표준화 사양으로, IE 이외의 주요 브라우저로 사용 가능.
화상의 디코딩(디코딩)을 비동기화함으로써, 표시 시간이 단축된다.

참고

decoding="async" VS loading="lazy" — 블로그 | 주식회사 Spelldata

loading 속성

<img src="sample.jpg"
     loading="lazy"
     width="640"
     height="360"
     alt="画像">

loading="lazy" 지정된 이미지 지연을 읽을 수 있습니다.

HTML Living Standard 표준화 사양입니다만, IE와 Safari는 현재까지 비대응.

사양상 width/height 속성을 써 주지 않으면 동작하지 않는다.

참고

decoding="async" VS loading="lazy" — 블로그 | 주식회사 Spelldata

Firefox 75, HTML 지정만으로 동작하는 이미지 지연 로드(loading="lazy")에 공식 대응 - WWW Watch

Native image lazy-loading for the web! - Addy Osmani

【HTML】loading 속성으로 “lazy”를 지정하는 경우, width와 height 속성이 필요

decoding="async"와 loading="lazy"를 모두 작성하면 어떻게 됩니까?

<img src="sample.jpg"
     decoding="async"
     loading="lazy"
     width="640"
     height="360"
     alt="画像">

decoding="async"와 loading="lazy"는 병기해도 양립하지 않는다. 둘 다 쓰면 loading="lazy"가 우선합니다.

loading="lazy"가 지정되어 있어도 페이지를 읽을 때 뷰포트의 이미지는 지연없이로드됩니다.

라고 하는 것은 대량의 이미지가 있어 스크롤 하는 페이지에서는 loading="lazy" , 그렇지 않으면 decoding="async" 라고 하는 상태에 케이스에 의해 구분하는 것이 좋지 않은가 (자신 없음)

참고

decoding="async" VS loading="lazy" — 블로그 | 주식회사 Spelldata

【중요】width/height 속성의 사양 변경

<img
    src="sample.jpg"
    width="640"
    height="360"
    alt="画像">

2019년 10월에 WHATWG가 표준화.width/height 속성을 기술하는 것으로 layout Shift(이미지 로드시의 표시의 흔들림)가 일어나지 않게 된다. 종래 width/height 속성은 픽셀 단위의 사이즈이었지만, 사양 변경에 의해 동시에 애스펙트비를 나타낼 수 있게 되었다.

layout Shift(이미지 로드시 표시의 흔들림)

실제의 움직임은 이쪽을 참조.

Optimize Cumulative Layout Shift - web.dev

Layout Shift는 Lighthouse v6보다 새로운 지표 CLS로서 퍼포먼스 계측 대상이 되고 있다.
참고

이미지로 Layout Shift가 없어지는 웹이 온다 - mizdra's blog

Cumulative Layout Shift (CLS) - web.dev

【중요】 코어 웹 바이탈이란? 구글의 UX 지표 LCP/FID/CLS의 의미나 기준치를 알기 쉽게 해설【SEO 정보 정리】 - Web 담당자 Forum

【2020년 여름】img 태그에는 width와 height 속성을 쓰는 것이 좋다

모두를 위해 최적화 해보십시오.

반응형 이미지 + webp 대응 + 비동기 복호화 + Layout Shift 대책 모두에서 이미지를 최적화한 코드는 다음과 같습니다.

<picture>
  <source type="image/webp"
          srcset="full_optimized.webp 1x, [email protected] 2x, [email protected] 3x">
  <img src="full_optimized.png"
       srcset="[email protected] 2x, [email protected] 3x"
       decoding="async"
       width="640"
       height="360"
       alt="画像">
</picture>