이미지 최적화로 용량 99% 감소시키기

이미지 최적화를 통해 6.4MB -> 63KB로 이미지 크기를 약99% 감소시킨 경험을 공유하려고 합니다. 최근 웹 사이트를 개발하면서 페이지 초기 로딩 시 이미지가 뚝뚝 끊겨 나오는 문제가 발생했습니다. 이러한 문제는 웹 사용자에게 불편함을 느끼게 할 뿐만 아니라, 웹 페이지에서 큰 용량을 차지하는 이미지 파일은 웹 성능에 부정적인 영향을 미칠 수 있습니다. 이미지를 최적화하는 방법으로는 1. 뛰어난 압축과 품질을 제공하는 webp, avif 포맷 사용하기 2. responsive image : 모바일에는 모바일 사이즈에 맞는 이미지, 데스크탑에서는 데스크탑 사이즈에 맞는 이미지 보여주기 3. img와 background-image의 이해하며 사용하기 4. 이미지의 width, height는 화면에 노출될 max width, max height의 2배 정도로 하기 5. lazy loading으로 이미지를 불러오는 웹사이트를 최적화하기 6. lqip 이용하기 7. 스프라이트 이미지 사용하기 8. CDN 사용하기 이렇듯 여러가지가 있습니다. 저는 PNG에서 JPG로, 그리고 WebP로 이미지 포맷을 변환했고 크로스 브라우징 고려하여 picture 태그, source 태그, media 속성 활용했으며 img와 background-image를 검색 노출과 성능, 디자인을 고려하여 적절히 선택해서 사용하는 방식으로 최적화를 진행하였습니다. 저는 6.4MB -> 63KB로 이미지 크기가 약 99% 감소하는 결과가 있었습니다! 더불어 Google의 Lighthouse 도구를 활용하면서 이미지 최적화를 진행하였는데 아래의 링크에 더 자세히 설명해놓았으니 참고해주세요🙂 https://jeongeuni.tistory.com/111