이미지 크기가 클 때는 어떻게 해야 할까? 🤔
1. 이미지 포맷 최적화
우리는 보통 이미지를 사용할 때 JPEG나 PNG를 사용한다. 하지만 이것들은 이미지 파일의 크기가 크다는 단점이 존재하는데 이때 WebP나 AVIF를 사용하면 이를 해결할 수 있다.
WebP와 AVIF는 압축 효율이 높은 최신 포맷으로 이미지의 품질은 유지하면서 파일의 크기를 줄여준다는 장점을 갖고 있다.
하지만 구버전의 브라우저에서는 지원하지 않는다는 단점이 존재한다...!
그럼 이건 해결을 못하는 걸까?
<picture>HTML에서 위의 요소를 통해서 fallback 이미지를 적용할 수 있다. 위의 요소 내부에서 WebP나 AVIF와 같이 고효율 포맷을 설정한 후 이를 지원하지 않을 경우에 JPEG나 PNG와 같은 기본 포맷을 로드하게 할 수 있다.
ex)<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Image description"> </picture>AVIF -> Webp -> JPG 순서대로 이미지를 지원하는지 확인하면서 로드
2. 이미지 사이즈 조정
화면에 노출되는 크기에 비해서 이미지가 너무 크면 우리는 이미지를 작게 리사이징 할 수 있다. 필요한 크기만큼 잘라서 서버에서 내려줄 수 있다.
또한 srcset과 sizes 속성을 활용할 수 있는데 이 속성은 다양한 디바이스 해상도에 대응하기 위한 Responsive Images 기술이다. 이 속성을 활용하면 브라우저가 현재 화면 크기에 최적화된 이미지를 선택해서 로드할 수 있다.
3. 지연 로딩 (Lazy Loading)
loading="lazy"이 속성을 사용하면 화면을 스크롤할 때 해당 위치에 도달하는 이미지가 로드되도록 설정할 수 있다. 지연 로딩을 사용하면 초기 로딩 속도를 개선할 수 있고, 불필요한 이미지 로드 또한 방지할 수 있는 장점을 갖고 있다.
4. CDN (Content Delivery Network)
CDN은 사용자가 지리적으로 가까운 서버에서 이미지를 다운로드하게 만들어 로딩 속도를 단축시킬 수 있다.
