lazy loading
-
[HTML] img 태그의 loading="lazy" 이해 :: 마이구미HTML, CSS 2024. 1. 14. 16:31
이 글은 img 태그의 loading 속성에 대해 알아본다. 속성을 보면, 이미지를 lazy 로딩할 수 있게 도와주는 속성으로 쉽게 이해할 수 있을 것이라 생각한다. 이 글에서의 핵심은 왜 사용하는지? 어떻게 사용하는지? 보다는 주의사항을 한번 알아본다. img loading attribute - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading img 태그의 loading 속성은 꽤나 유용하게 사용할 수 있다. 큰 작업없이 loading="lazy" 선언만으로 우리가 원하는 동작을 이끌어낼 수 있다. (더 많은 것들을 원한다면, 해당 속성만을 통해 제어하는 것이 힘들 수 있음) 브라우저 지원도 현재로써는 큰 이슈 없을만큼 대부분..
-
효과적인 이미지 로딩 구현 방식 :: 마이구미HTML, CSS 2018. 3. 5. 00:19
이 글은 이미지 로딩에 관한 방법들을 알아본다.로딩 이미지는 요청의 처리에 대한 응답이 완료되기전까지의 지연 시간을 위해 사용된다.즉, 이미지 로딩은 이미지 다운로드로 인해 지연되는 시간으로 인한 대안을 나타낸다.참고 링크 - https://jmperezperez.com/medium-image-progressive-loading-placeholder/ 현재 이미지 로딩을 위한 많은 방식이 존재한다.크게 3가지로 분류하면 다음과 같다. Lazy LoadingPlaceholderTailored image sizes Blur up Lazy Loading 은 지연 로딩으로 불리는 방식이다.사진첩과 같은 한번에 많은 수의 이미지를 보여주는 곳에서 많이 사용된다.예를 들어, 사진첩 페이지에 접속하면 바로 모든 이미..