포트폴리오 사이트 만들었는데 이미지가 많아서 그런지 처음 로딩이 너무 느려요. 개발자 도구 네트워크 탭 보니까 사진 하나가 몇 MB씩 되더라고요. 찾아보니 webp로 바꾸고 lazy loading 하라는 얘기가 많던데 각각 정확히 어떻게 하는 건지 잘 모르겠습니다.
일단 webp는 jpg나 png보다 용량이 작은 이미지 포맷이라는 것 같은데, 그냥 확장자만 png를 webp로 바꾸면 되는 건 아니죠? 변환 툴을 따로 써야 하는 건가요? 그리고 옛날 브라우저에서 webp 안 뜨면 어떡하나 걱정도 되고요.
lazy loading은 화면에 안 보이는 이미지는 나중에 로딩한다는 개념인 것 같은데, 요즘은 그냥 이렇게 속성 하나 붙이면 된다고 들었어요.
<img src="photo.webp" loading="lazy" alt="사진">
이거 진짜 이것만 붙이면 되는 건가요? 뭔가 너무 간단해서 오히려 의심이 들어요. 그리고 맨 위에 처음부터 보이는 이미지에도 lazy 붙이면 오히려 늦게 뜨는 거 아닌가 싶기도 하고요. webp 변환이랑 lazy loading을 실제로 어떤 식으로 적용하는 게 좋은지, 추가로 신경 써야 할 것들이 있으면 알려주세요.