[WEB] <img /> 최적화하기

 

저번에 프로젝트를 하면서 어떻게하면 사이트를 더 최적화할 수 있을까에 대해서 고민하다가 유용한 팁을 발견해서 공유드리려고 합니다.

사실 노마드코더님 영상이라 볼 분들은 다 봤겠지만은...

 

우리는 흔히 html에서 사진을 넣고 싶을 때 그냥 <img />태그를 많이 사용합니다.

뭐 물론 img 태그 쓰는게 틀리진 않았다지만.. 더 좋은 방법이 있습니다

 

1. Lazy Loading 사용하기

<img> 태그에 lazy loading을 설정하는 것 만으로도 최적화에 도움을 줄 수 있습니다.

<img src="example.jpg" loading="lazy" />

lazy loading은 이미지를 처음에 다 불러오는게 아니라, 유저가 실제로 이미지를 볼 때 로딩하는 기법입니다.

처음에 모든 사진을 로딩하지 않으니 초기 로딩속도가 증가하겠죠?

 

2. <picture> 사용하기

<picture>
  <img src="example.jpg" alt="test" />
</picture>

사실 이렇게 쓰는것과 img 태그를 그냥 쓰는것의 퍼포먼스가 엄~청 차이나냐고 하면, 딱히 그렇진 않습니다

하지만 <picture>를 사용하면 미디어 유형과 해상도에 따라 다른 이미지를 제공할 수 있으므로 불필요한 데이터 전송을 줄일 수 있습니다.

 

반응형 디자인이 중요해지는 지금, 그냥 img 태그를 사용하는것보단 picture 태그를 사용하는게 더 좋겠죠?

 

---

 

이 외에도 많은 팁들이 있으니 한번 영상을 진득하게 봐보시면 좋을 것 같습니다!