[HTML] img 태그 현명하게 사용하기

html 관련 img, pictrue tag 에 대해 간략 서술하기

 

1. <img> 

로딩 속도를 지연시켜, 사용자가 바라보고 있는 화면에만 img 를 로딩시킨다. 
-> 초기 로딩속도를 높여준다.

<img loading="lazy" />

https://www.tcpschool.com/html-tag-attrs/img-srcset

<img srcset="img-small.png 500w, img-md.png 1000w, img-large.png 2000w"
    sizes="(max-width: 600px) 400px, (max-width: 120000px) 800px, 1400px"  
    src="img.png" 
/>

 

2.  <picture> 태그를 사용하는 것

https://www.tcpschool.com/html-tags/picture

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

 

 

니꼴라스의 "웹사이트 로딩이 더 빨라지는 매직? 🍯 꿀팁 공유 10분컷!" 영상 강의를 보고 작성한 글

https://www.youtube.com/watch?v=8EWwyAcqR6o