사이트 내 웹 페이지의 로딩시간이 오래 걸려 해당 이슈에 대해 여러가지를 확인하다. 페이지 내에서 제공하는 이미지의 크기가 커서, 로딩시간이 오래 걸리는 부분을 확인하였습니다.
웹사이트에 이미지를 올릴 때, 이미지의 품질과 로딩 속도를 균형 있게 유지하기 위해 적절한 파일 크기를 설정하는 것이 중요합니다. 각 이미지 포맷과 사이즈에 따라 파일 크기를 적절히 조절하는 기준을 정리해보겠습니다.
JPEG 파일 크기 설정 기준
JPEG 포맷은 압축률이 높아 파일 크기가 작으면서도 비교적 높은 품질을 유지할 수 있습니다. 주로 사진이나 복잡한 이미지를 저장할 때 사용합니다.
- 1024×1024 (Square)
- 저해상도 (웹용): 100-200 KB
- 중해상도 (갤러리, 블로그): 200-400 KB
- 고해상도 (포트폴리오, 상세 이미지): 400-600 KB
- 1792×1024 (Wide)
- 저해상도 (웹용): 150-300 KB
- 중해상도 (갤러리, 블로그): 300-600 KB
- 고해상도 (포트폴리오, 상세 이미지): 600-900 KB
- 1024×1792 (Full-body Portrait)
- 저해상도 (웹용): 150-300 KB
- 중해상도 (갤러리, 블로그): 300-600 KB
- 고해상도 (포트폴리오, 상세 이미지): 600-900 KB
PNG 파일 크기 설정 기준
PNG 포맷은 무손실 압축을 사용하므로 파일 크기가 비교적 큽니다. 주로 투명도가 필요하거나 그래픽과 같은 선명한 이미지를 저장할 때 사용합니다.
- 1024×1024 (Square)
- 저해상도 (웹용): 300-500 KB
- 중해상도 (갤러리, 블로그): 500-800 KB
- 고해상도 (포트폴리오, 상세 이미지): 800 KB – 1 MB
- 1792×1024 (Wide)
- 저해상도 (웹용): 400-700 KB
- 중해상도 (갤러리, 블로그): 700 KB – 1 MB
- 고해상도 (포트폴리오, 상세 이미지): 1-1.5 MB
- 1024×1792 (Full-body Portrait)
- 저해상도 (웹용): 400-700 KB
- 중해상도 (갤러리, 블로그): 700 KB – 1 MB
- 고해상도 (포트폴리오, 상세 이미지): 1-1.5 MB
추가 고려사항
- 이미지 최적화 : 웹사이트 속도를 최적화하기 위해 이미지 압축 도구(예: TinyPNG, JPEG-Optimizer)를 사용하여 파일 크기를 줄일 수 있습니다.
- 반응형 이미지 : 다양한 디바이스에서 적절하게 보이도록 반응형 이미지를 제공하는 것도 중요합니다.
- Lazy Loading : 페이지 로딩 속도를 향상시키기 위해 스크롤에 따라 이미지를 로드하는 기술(Lazy Loading)을 사용할 수 있습니다.
- CDN 사용 : 콘텐츠 전송 네트워크(CDN)를 사용하여 이미지 로딩 시간을 단축시킬 수 있습니다.
이 기준은 일반적인 가이드라인이며, 실제로는 웹사이트의 특성과 요구사항에 따라 조정이 필요할 수 있습니다.