안녕하세요 36기 WEB 파트 YB 김정은입니다 :)
검색 엔진이 웹사이트 순위를 결정할 때 페이지 로딩 속도가 고려된다는 사실을 아시나요? 이미지 파일의 크기를 줄이면 페이지 로딩 속도를 개선할 수 있고, 검색엔진 최적화에 영향을 미치게 돼요. 또, 빠른 로딩 속도는 사용자 경험을 향상하고 느린 네트워크 환경에서 유의미한 차이를 만들어요.
그래서 사용자 경험 개선과 SEO 최적화에 중요한 이미지 최적화에 대해 알아보려고 해요.
💡 압축 방식
손실 압축 (Lossy Compression)
정보를 손실하면서 압축하는 방식으로 원본 데이터 그대로 가져갈 수는 없어요. JPEG, MP3와 같은 형태가 손실 압축의 예시로 볼 수 있어요. 품질이 살짝 저하되지만 압축률이 높아 용량을 줄일 수 있어요.
무손실 압축 (Lossless Compression)
데이터를 압축할 때 정보를 손실하지 않고 압축하는 방식이에요. 원본 데이터를 완벽하게 복원할 수 있고 ZIP, PNG, FLAC 등이 포함돼요. 압축률이 낮기 때문에 손실 압축에 비해 크기가 크지만 원본 데이터를 보존하기 때문에 완전한 데이터가 필요한 경우에 적합해요.
보편적으로 많이 사용되는 이미지 포맷은 PNG, JPEG, WebP가 있는데요, 각 포맷의 특성과 차이점을 비교해 보면서 어떤 게 좋을지 알아볼게요!
| 손실 / 무손실 | 브라우저 | 투명도 | 애니메이션 | 크기(상대적) | |
| PNG | 무손실 | 전체 지원 | O | X | 크다 |
| JPEG | 손실 | 전체 지원 | X | X | 중간 |
| WebP | 손실, 무손실 모두 지원 | 95% 이상 지원 | O | O | 작다 |
PNG
투명도를 지원하는 무손실 이미지 포맷이에요. 손실 없는 원본 데이터를 가져요. 로고와 같이 배경이 투명한 이미지를 원한다면 png를 사용할 수 있어요. JPEG와 WebP보다 큰 파일크기를 가지며 애니메이션을 지원하지 않아요. PNG는 다양한 색상을 지원하기 때문에 색상의 품질이 중요한 경우 많이 사용해요. 일부 오래된 브라우저에서는 지원하지 않는 기능이 있어서 고려해줘야 해요.
JPEG
손실 이미지 포맷으로 작은 파일 크기를 가져요. 압축하면서 색상 정보를 제거하며 파일 크기를 줄여요. 모든 브라우저에서 사용 가능하기 때문에 가장 많이 사용되는 이미지 포맷이에요. 투명도를 지원하지 않고 이미지에 대한 부가적인 정보가 필요한 이미지에서는 적절하지 않아요. 또, 픽셀마다 압축되기 때문에 선이나 글자가 흐려지는 경우가 생겨서 그림이나 텍스트보다는 사진에 사용하는 것이 좋아요. 사진이나 복잡한 이미지에 적합해요. 손실 압축은 여러 번 저장되면서 품질이 저하되기 때문에 고려하여 사용해야 해요.
⭐️ WebP
2010년에 구글에서 최근에 개발한 이미지 포맷으로 손실과 무손실 둘 다 지원해요.
높은 품질을 가지지만 파일 크기를 줄일 수 있고 무손실, 손실 둘 다 투명도를 지원해요. GIF와 같은 애니메이션 이미지 또한 WebP로 사용 가능해요.
WebP는 PNG, JPEG 보다 파일 크기가 작아 더 빠른 로딩속도를 가져요. GIF와 같이 애니메이션도 형식도 WebP를 사용한다면 훨씬 작은 크기와 바이트로 이루어져요.
WebP와 JPEG 모두 파일을 압축하지만 WebP의 파일이 JPEG보다 훨씬 작아요. 동일한 이미지를 기준으로 비교하면 WebP가 PNG보다는 26%, JPEG보다는 25~34% 작다고 해요.
WebP는 품질은 유지하면서 크기를 줄여서 사이트 속도를 증가시킬 수 있어요. 이미지 크기가 작을수록 로딩 속도가 빨라지고 웹사이트 탑색 속도가 빨라지기 때문에 사용자 경험을 향상할 수 있어요.
서버에 저장되는 이미지 크기도 줄어들기 때문에 서버 용량에 대한 부담도 줄어들어요.
크롬, 엣지, 사파리 등 다양한 브라우저에서 WebP를 지원하고 있어요. 약 95%의 브라우저에서 WebP 형식을 지원해요. 하지만 옛날 브라우저에서는 지원하지 않는 경우가 있기 때문에 별도로 처리가 필요할 수 있어요.
넷플릭스, 아마존, 핀터레스트와 같은 기업도 WebP 형식을 사용하고 있고, 카카오톡의 이모티콘도 WebP로 되어 있는 경우가 있어요.
✏️ WebP를 사용하면 좋은 이유를 정리하면
- 이미지 파일 크기 최적화 가능
- 서버에서 차지하는 용량 감소
- 페이지 로딩 속도 향상
저는 이러한 이유로 이미지 파일을 사용해야 할 때 WebP 포맷을 사용해요!
⚠️ 유의사항
PNG나 JPEG를 WebP로 변환했는데 크기가 더 커지는 경우가 있어요. 아래와 같은 경우 변환한 파일의 크기가 더 클 수 있기 때문에 확인해 주는 것이 좋아요.
- 단순하거나 색상이 작은 PNG -> 손실 압축하는 경우 (압축 과정에서 색상 정보 왜곡)
- 손실 포맷 -> 무손실 포맷으로 변환하는 경우 (압축 효율 저하)
- 손실 포맷 -> 고품질 손실 포맷으로 변환하는 경우 (품질 설정)
https://developers.google.com/speed/webp/faq#can_a_webp_image_grow_larger_than_its_source_image
자세한 내용은 위의 링크에서 확인할 수 있어요.
또, WebP는 GIF보다 작은 용량을 갖지만, 디코딩할 때 CPU 사용량이 약 1.5~2.2배 더 클 수 있어요. 성능에 영향을 줄 수 있으므로 상황을 고려하며 사용해야 효과적으로 사용할 수 있어요.
다양한 포맷이 있지만 이미지를 최적화하여 성능을 향상 시켜보는 건 어떨까요?? 읽어주셔서 감사합니다 🙌🙌
ref:
https://www.adobe.com/kr/creativecloud/file-types/image/raster/webp-file.html
https://developers.google.com/speed/webp?hl=ko
https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
'1주차' 카테고리의 다른 글
| HTTP/1.1 vs HTTP/2 vs HTTP/3: 개념과 차이점 정리 (0) | 2025.04.11 |
|---|---|
| HTML/CSS로 구현하는 반응형 웹의 기본 구조 (0) | 2025.04.11 |
| Utility-First-CSS (0) | 2025.04.11 |
| 웹 스토리지 (Web Storage) (0) | 2025.04.11 |
| 🧐 브라우저에 www.google.com을 입력하면 어떤 일이 일어날까? (0) | 2025.04.10 |
