웹페이지에서 이미지를 불러오는방법

면접에서 웹페이지에서 이미지를 불러오는 방법을 말해보라는 질문이 있었다. 뭔가 되게 쉬우면서도 뭔가 중요한게 있을꺼 같다는 생각이 들어서 말해놓고도 찜찜했다.(떨어진것은 함정😭)

1. <img> 태그

• 기본적으로 많이 사용되는 방식

  <img src="sample72.jpg" alt="기본이미지"
  width="400"
  height="500"
  srcset="sample144.jpg 400w"
  srcset="sample480.jpg 600w"
  srcset="sample720.jpg 800w"
  />

• src경로에 이미지가 없거나 피치못할 사정으로 이미지를 불러오는게 어렵다면, alt속성에 이미지의 설명을 작성. 필수는 아니지만, 스크린리더가 alt의 내용을 읽어서 설명하기 위해 작성하는것을 지향.

• width,height 속성을 통해 픽셀 단위의 정수값을 넣어 이미지 크기 지정 가능하다.

• srcset 속성을 통해 뷰포트에 따른 이미지를 제공한다.(이미지 파일 다음 w단위가 들어가면 src속성은 무시)

  width가 400 이하는 sample144.jpg 사용
  width가 401~600사이는 sample480.jpg 사용
  width가 600이상은 sample720.jpg 사용

  srcset을 통해 뷰포트에 따른 이미지 규칙을 제공을 하였더라도 브라우져가 width에 따라 이미지제공이 다르게 될수도있다.

  2.background-url

• CSS 속성중 하나로 영역 배경이미지를 삽입하는 속성이다.

  <style>
     .background {
         background-image: url(./images/sample.png);
         width: 600px;
         height: 600px;
         background-repeat: no-repeat;
     }
  </style>
  <div class="background">
  </div>

• css url함수를 통해 상대 경로를 지정하면 경로에 해당하는 이미지가 나온다.

• 요소의 크기가 url안의 이미지 크기보다 크면 반복되어 나오기때문에 background-repeat:no-repeat 속성을 넣는것이 중요.

3.<picture> 태그

• HTML5부터 새로나온 반응형 이미지 표현을 위한 태그이며, 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용 (IE 미제공)

<picture>
        <source media="(min-width: 700px)" srcset="/images/sample_medium.png">
        <source media="(min-width: 400px)" srcset="/images/sample_small.png">
        <img src="/images/sample.png" alt="People">
    </picture>

• picture태그는 기본적인 img 태그와 0개이상의 source태그로 구성.
• 브라우져는 source태그의 media속성에 만족하는 이미지를 사용한다. 만약에 조건에 맞지않는다면 img태그의 이미지를 사용.(img태그는 가장 마지막에 위치해야한다.)

출처

HTML <picture> 태그
<img>: 이미지 삽입 요소
HTML IMG의 srcset과 sizes 속성(updated)
background-image