ABBO 기술 블로그

이미지를 로딩하면서 가져올 때 하나의 큰 이미지를 각각 뿌려주는 방법으로 이미지를 처리하곤 했는데요, 이렇게 되면 리소스적인 낭비가 있을 수 있습니다. 1. 각 해상도별 이미지 출력 그래서 이런 부분을 개선하고자 img 태그에서는 아래와 같은 방법으로 보여줄 수 있습니다. 2. Lazy Loading 그리고 이미지를 각 브라우저에 맞게 스크린에서 보여주는 방법이 있습니다. 이미지가 한 화면에서 100개정도 로드를 해야 하는 경우 모든 리소스를 브라우저에서 호출하기 때문에 다운로드를 진행하는 동안 다른 이미지가 보이지 않는 문제가 발생하는데 이런 경우에는 지금 보고 있는 화면에서 불러오는 이미지만 표시하는 방법도 있습니다. 이렇게 loading="lazy" 옵션을 적용하게 되면 abbo-1 이미지가 호출된..