[웹 로딩 속도 개선해보기] 1. 이미지 파일 최적화

안녕하세요~ 오늘도 퇴근 후 돌아온 jju_developer입니다.

이번에 반도체 관련 회사에 웹 플래폼 개발자로 이직을 하게 되었는데요,

역시나 제가 관심이 많은 부분은 웹 사이트 관련된 개선 사항이지 않을까 생각이 됩니다.

초급 개발자로써 웹사이트 로딩 시간 단축을 위해 생각해 보아야 할것이 무엇이 있을까요?

우선 페이지에 들어가는 사이즈가 큰것들을 생각해보면

보통 > 왼쪽 상단의 로고
메뉴들의 로고들을 제일 먼저 생각해볼 수 있습니다.

처음 딱 든 생각은 이미지가 대부분 크기가 크면 웹사이트 로딩 시간도 어느정도 관련이 있겠다 말이죠!

제가 이렇게 웹 로딩 속도에 관심이 많은 이유는 바로...!
고객의 불만 혹은 웹사이트 방문객이 5초만 되도 참지 않고 사이트를 꺼버리기 때문입니다~~~~
(저도 그럽니당...)

---

전문적인 프론트엔드 혹은 디자이너가 없는 회사에서는 이미지 파일 큰것을 다운로드 받고
그대로 넣으면 큰사진들을 억지로 작은 틀에 넣으니까 로드 시간이 더 걸리는 문제가 발생할 수 있겠죠.

가지고 있는 이미지 파일을 홈페이지용으로 적합하게 편집을 하는 최선의 방법은 무엇일까요?

 

자바, JSP, MyBatis, MySQL을 기준으로 이미지 파일을 효과적으로 편집하는 방법에 대해 설명드리겠습니다.

---

1. 이미지 파일 최적화

이미지 포맷을 어떤 것을 선택을 할것이냐~

• JPEG: 사진이나 복잡한 이미지에 적합. 압축률이 높고 품질 손실이 있지만, 파일 크기를 크게 줄일 수 있습니다.
• PNG: 투명한 배경을 지원하며, 로고나 아이콘 같은 단순한 이미지에 적합. 압축률은 낮지만 품질이 유지됩니다.
• WebP: 최신 포맷으로, JPEG보다 높은 압축률을 제공하며, PNG의 투명성도 지원합니다. 크로스 브라우저 호환성을 확인하는 것이 좋습니다.

이미지 리사이징

• 웹에서 사용되는 이미지의 크기는 화면 크기에 맞춰 리사이즈하는 것이 좋습니다.
  예를 들어, 데스크톱에서 1920x1080 픽셀 이미지를 모바일에서 사용할 필요는 없습니다.
  왜냐? 모바일이 화면이 훨씬 작기 때문이죠!
• 이를 위해 Photoshop, GIMP, 또는 온라인 도구인 Squoosh 등을 사용할 수 있습니다.

이미지 압축

• 압축 도구를 사용해 이미지 파일 크기를 줄일 수 있습니다. TinyPNG, ImageOptim, JPEGmini 등을 활용할 수 있습니다.

제가 여기서 사용하는것은 TinyPNG입니다.

 

PNG 이미지가 있을때 원본의 크기는 547KB 이였습니다,

 

이것을 간단하게 저 웹사이트에 드롭만 해준다면

tinyPNG 사진

 

파일을 압축하여 무려 165KB로 압축된거 보이시나요?!!! 70% 감소를 할 수 있습니다.

 

547KB > 165KB

압축한 파일 사진

 

안쓸이유? 없습니다.

 

당장 이미지 파일이 있으시다면,

 

꼭 압축해서 웹사이트에 적용하시기 바랍니다~

---

2. 자바와 JSP 단에서 뭔가 개선할 수 있는 방법이 있을까?

 

2탄은 다음시간에 계속...

 

 

TinyPNG – Compress WebP, PNG and JPEG images intelligently