[성능최적화] 이미지 최적화 lazy Image / 최적화 size 만들기

🍒Jooooooo_eun🍒·2022년 2월 14일
0
post-thumbnail

lazy Image 정의

말 그대로 '게으른 이미지'를 뜻한다!
즉, 서버나 사이트가 실행될 때 모든 이미지들을 한번에 불러오는 것이 아닌, 페이지 렌딩에 따라 천천히 불러오는 방식이다.
이미지 최적화를 사용하면 초기 진입시 유저가 페이지를 더 빨리 접할 수 있고, 데이터의 낭비를 줄일 수 있다.

  • html 태그안에 넣기
  • unsplash에서 제공하는 파라미터 이용하기
  • CDN 활용하기
  • 이미지 용량 줄이기

1) html 태그안에 넣기

<img src="image.jpg" loading="lazy" alt="image" />

imgloading속성에 lazy를 넣으면 사용이 가능하다.
이 경우에는 다른 콘텐츠들이 이미지 추가에 따라 변경될 수 있기 대문에, img태그 안에 높이와 너비를 직접 주어야 한다.

2) unsplash에서 제공하는 파라미터 이용하기

hhttps://unsplash.com/documentation#supported-parameters

unsplash에서 제공하는 파라미터를 이용하면 동적으로 이미지 크기조정이 가능하다.
대신 해당 파라미터는 unsplash API를 사용하는 경우 사용이 가능하다

3) CDN 활용하기

https://imgix.com/

해당 사이트를 이용하여 img 최적화가 가능하다

4) 이미지 용량 줄이기

https://tinyjpg.com/

물론 여러가지 사이트가 존재하지만 해당 사이트가 가장 좋았다!

profile
먹은만큼 성장하고 싶은 초보 개발자의 끄적끄적 개발메모장 ✍

0개의 댓글