3줄 요약
1. img 태그를 이용한 lazy 로딩
2. React blurhash 비교
3. 고화질 사진에는 React blurhash를 사용해야 ux경험이 올라간다.
주변 프로젝트를 둘러보던 중 고화질 사진을 받아오는데
React-blurhash라는 라이브러리를 사용하는 것을 보고 관심을 가지게 되었다.
그래서 그 방법에 관심있어서 찾아보던 중
몇가지 흥미로운 내용들이 있어서 찾아보았다.
1. img 태그를 이용한 lazy 로딩
https://meetup.nhncloud.com/posts/183
https://web.dev/i18n/ko/browser-level-image-lazy-loading/
img src="cat.jpg" loading="auto"
img src="cat.jpg" loading="lazy"
img src="cat.jpg" loading="eager"
이런식으로 작성하며,
auto : 브라우저의 기본 lazy loading 동작입니다.
lazy : 뷰포트에 위치하게 되었을때 load 됩니다
eager : 페이지에서의 위치에 관계없이 리소스를 즉시 로드합니다.
3가지 방법으로 할 수 있다.
그리고 lazy loading이라서 width, height를 설정해줘야 레이아웃이 깔끔하게 작동한다고 한다.
또한 로드 되고나서 액션을 취할 수 있는 onLoad라는 이벤트도 있다.
https://velog.io/@dormahd114/image.onLoad-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0
const [loading, setLoading] = useState(true);
<img
src="myImage.png"
alt="유저이미지"
onLoad={() => setLoading(false)}
onError={() => alert("image load error")}
/>이런식으로 로드후에 이벤트 설정도 가능하다. 이것을 통해 UX를 통제할 수 있다.
https://okayoon.tistory.com/entry/%EC%95%84%EC%9D%B4%ED%94%84%EB%A0%88%EC%9E%84iframe
중간에 글을 읽다가
iframe이라는 것이 궁금해져서 찾아보게 되었다.
iframe은
효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다.
2. React blurhash 비교
https://www.youtube.com/watch?v=8viWcH5bUE4&t=304s
위 유투브에서 3가지 실험을 하는데
하나는 img loading을 이용한 방법과
react-lazy-load-image-component와 react-blurhash라는 라이브러리 두개를 비교한다.
위 사용한 결과로 보았을 때 react-blurhash가 더 부드럽게 작동하여 placeholder 역할도 제대로하여서
ux경험에 도움이 되어보였다.
<Blurhash
hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
width={400}
height={300}
resolutionX={32}
resolutionY={32}
punch={1}
/>위와 같은 방법으로 img 앞에 입력해주면 이쁘게 blur 처리가 가능하다.
결론적으로 img loading 이용하여 lazy 로딩은 라이브러리를 안쓴다는 점에서 좋아보였고, react-blurhash를 이용하면 좀 더 완벽하게 레이지 로딩을 처리 할 수 있었다.
특히 react-blurhash가 사용된 코드를 보니 고화질인 사진들은 부드럽게 blur 처리가 되어서 보기 편안했다.
