말 그대로 '게으른 이미지'를 뜻한다!
즉, 서버나 사이트가 실행될 때 모든 이미지들을 한번에 불러오는 것이 아닌, 페이지 렌딩에 따라 천천히 불러오는 방식이다.
이미지 최적화를 사용하면 초기 진입시 유저가 페이지를 더 빨리 접할 수 있고, 데이터의 낭비를 줄일 수 있다.
<img src="image.jpg" loading="lazy" alt="image" />
img
의 loading
속성에 lazy를 넣으면 사용이 가능하다.
이 경우에는 다른 콘텐츠들이 이미지 추가에 따라 변경될 수 있기 대문에, img
태그 안에 높이와 너비를 직접 주어야 한다.
unsplash에서 제공하는 파라미터를 이용하면 동적으로 이미지 크기조정이 가능하다.
대신 해당 파라미터는 unsplash API를 사용하는 경우 사용이 가능하다
해당 사이트를 이용하여 img 최적화가 가능하다
물론 여러가지 사이트가 존재하지만 해당 사이트가 가장 좋았다!