카드 관리 페이지(/manage-my-card)에서 Swiper를 사용한 카드 슬라이드를 구현했습니다. 새로운 디자인 이미지를 전달받아 적용하는 과정에서 사용자 조작 시 버벅거림이 심해지는 성능 문제를 발견했습니다.
"같은 이미지인데, 포맷(SVG vs PNG)과 렌더링 방식(background vs img tag)에 따라 성능이 달라질까?"
이 질문에 답하기 위해 체계적인 성능 테스트를 진행했습니다.
4가지 조합을 비교 테스트했습니다:
| # | 이미지 포맷 | 렌더링 방식 | 구현 방법 |
|---|---|---|---|
| 1 | PNG | <img> tag |
HTML img 요소 |
| 2 | PNG | CSS background | background-image |
| 3 | SVG | <img> tag |
HTML img 요소 |
| 4 | SVG | CSS background | background-image |