테스트 사이트 - 개발 중인 베타 버전입니다

이미지 lazyload 방법의 종류들

· 5년 전 · 1126 · 4

3535239587_1596207992.434.gif

 

 

 

얼마전에 링크1에 있는 그누보드5.4에 lazyload 적용하기라는 팁을 작성했는데요.

 

링크2에 보니 생각보다 방식이 여러가지더라구요.

 

 

링크1에 소개드린 내용은 loading.gif나 대신할 투명이미지를 넣고

 

스크롤해서 이미지가 보여질 때 다운로드 받는 형식이었습니다.

 

 

스크롤할때 보여지는 방식은 똑같구요.

 

처음 보여질 이미지에 대한 내용이 중요한 듯 합니다.

 

1. 지배적인 색깔을 뽑아서 같은 이미지 크기로 보여주다가 원본 이미지 출력

 

3530095165_1596525432.142.gif

 

 

 

 

 

 

 

2. 초저화질의 이미지 썸네일(LQIP)을 생성해서 보여주다가 원본 이미지 출력

 

 

 

 

 

 

두가지가 제일 무난한 것 같습니다.

 

워드프레스에서는 LQIP 형식을 지원하는 플러그인이 활성화되어 있습니다.

 

물론 유료죠 ㅎㅎ

 

특이하게도 openlitespeed 웹서버를 쓰면 LSCACHE 플러그인에서 무료로 지원하기도 하지만요.

 

 

그누보드 플러그인으로도 이런 방식의 이미지 관리 도구가 나오면 좋을 것 같습니다.

 

https://glad.ml/

 

위 링크는 오픈라이트스피드 웹서버에 LSCACHE 플러그인으로 LQIP 형식으로 지원되는 예시입니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 4개

저런 기능의 플러그인을 만들면... 음... 제가 쓸게요 ^^
유료라면... 음... 음... 음... 몇 만원이라면 투자할 가치는 있을 듯요 ^^
@만수킴 게시판 스킨의 뷰어를 수정해야하니깐.. 게시판 스킨 자체가 나올지도 모르겠네요.
5년 전
https://appelsiini.net/projects/lazyload/
제가 예전에 썼던 방식입니다.

여기다가 기본 이미지를 동글동글 돌아가는 이미지를 넣었었죠..
@똥싼너구리

네. 제가 쓴 링크1에 있는 팁이 그 방법으로 만든 것입니다.

게시글 목록

번호 제목
1716888
1716864
1716861
1716856
1716851
1716850
1716848
1716843
1716841
1716834
1716830
1716828
1716821
1716819
1716815
1716811
1716809
1716808
1716795
1716791
1716784
1716783
1716781
1716773
1716765
1716761
1716759
1716743
1716734
1716733