[Refactor/#461] 큰 일러 webp로 교체 및 대체이미지 설정

[moondda]

✨ 해당 이슈 번호 ✨

closed #461

todo

• 큰 이미지 확장자 webp로 변경
• 미지원 브라우저를 위한 대체 이미지 설정
• 사이즈 큰 일러중심으로 바꿨습니다!
• 에러페이지 일러 크기가 과하게 큰 걸로 import되어있어서 맞는 사이즈로 png 교체했습니다

📌 내가 알게 된 부분

• picture 태그로 감쌀때 맨 밑에 img가 있어야함
• source 에서 media라는 속성이 있는데 반응형 구현에서 사용된다고 함! ( 화면 크기에 따라 보여줘야 하는 이미지가 달라질때)

📌 일러 중에서 상대적으로 작은 로그인 일러

📌 일러가 많은 메인페이지!

📌 결론

확실히 용량은
작은 일러인 경우엔 반토막
큰 일러 경우엔 최대 91% 감소한 모습을 볼수 있으나

로드 속도는 차이가 없었습니다. 여러번 새로고침해봤는데 webp가 더 오래걸릴때도 있었어요. 흠흠

아 그리고 성능 1점 올라서 메인페이지 성능 100점 달성~!!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 3:15pm

[github-actions]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR might be rejected due to its size.

[ljh0608]

고생많으셨습니다 LGTM