이미지 용량이 중요한 이유
웹페이지 로딩 속도에 이미지 용량이 큰 영향을 미칩니다. 무거운 이미지는 사용자 이탈과 SEO에 악영향을 줘요. 최적화가 필수입니다.
압축 방법
TinyPNG, Squoosh 같은 온라인 도구가 편합니다. 화질 손실이 거의 없으면서 용량을 크게 줄여줘요. 이미지 압축 도구를 습관적으로 사용하세요.
포맷 선택
WebP 포맷이 PNG, JPG보다 효율적입니다. 최신 브라우저는 대부분 지원해요. 상황에 맞는 포맷을 선택하세요. 다양한 이미지 도구들을 활용해서 웹사이트를 최적화하세요.
손실 압축 vs 무손실 압축
JPG는 손실 압축이라 화질이 조금 떨어집니다. PNG는 무손실이라 화질 그대로예요. 용도에 따라 선택하세요. 사진은 JPG, 로고나 아이콘은 PNG가 적합합니다. 이미지 최적화 도구로 적절한 설정을 찾아보세요.
Lazy Loading
페이지 로드 시 모든 이미지를 불러오면 느려집니다. 스크롤해서 보이는 시점에 로드하는 게 Lazy Loading이에요. 최신 브라우저는 기본 지원합니다. loading 속성을 lazy로 설정하면 됩니다.
이미지 CDN을 활용하면 자동으로 포맷 변환과 리사이즈를 해줍니다. Cloudflare Images, imgix 같은 서비스가 있어요. 트래픽이 많은 사이트에서 효율적입니다. 비용 대비 효과를 따져보세요.
Next.js나 Gatsby 같은 프레임워크는 이미지 최적화를 자동으로 해줍니다. 빌드 시점에 여러 크기로 변환하고 WebP도 생성해요. 최신 기술을 활용하면 작업이 편해집니다.
Next.js나 Gatsby 같은 프레임워크는 이미지 최적화를 자동으로 해줍니다. 빌드 시점에 여러 크기로 변환하고 WebP도 생성해요. 최신 기술을 활용하면 작업이 편해집니다.