웹 최적화 기법 - 이미지 사이즈 최적화

Properly size images

보통 이미지를 가공하지 않으면 지정된 크기 그대로 로딩된다.

그러므로 이미지 크기를 적당히 줄여줄 필요가 있는데, 보통 반응형을 고려하여 보여지는 이미지의 실제 크기에 2배 정도로 설정해준다.

 

이미지의 포맷

• 벡터 이미지 - SVG
• 비트맵 이미지
  • PNG
    • 무손실 압축 방식, 원본을 훼손 없이 압축하며 알파 채널을 지원하는 이미지 포맷
    • png는 알파 채널을 지원하므로 배경 색을 투명하게 할 수 있음
  • JPG. JPEG
    • 정보 손실이 발생하나 이미지를 좀더 작은 사이즈로 줄일 수 있음
    • 투명도 정보가 필요하지 않거나 고화질이 아니어도 될 때 사용
  • WebP
    • 무손실 압축과 손실 압축 둘다 제공하는 최신 이미지 포맷
    • 브라우저 호환성 때문에 PNG, JPG 보다 나은 효율을 가지고 있더라도 사용이 용이하지 않음
    • PNG나 JPG 파일을 WebP로 바꾸기 위해 Squoosh 툴을 사용해준다.
    • 호환성 문제를 해결하기 위해선 img 태그 상위에 picture 태그를 감싸 사용한다. picture 태그는 다양한 타입의 이미지를 렌더링하는 컨테이너로 브라우저 사이즈에 따라 지정된 이미지를 렌더링하거나 지원되는 타입의 이미지를 찾아 렌더링한다.

<picture>
// 브라우저가 webp를 렌더링하지 못하면 jpg로 렌더링해준다.
	<source srcset="이미지.webp" type="image/webp" />
	<img src="이미지.jpg" />
</picture>

 

이미지 CDN(Content Delivery Network)

• 물리적 거리의 한계를 극복하기 위해 소비자와 가까운 곳에 컨텐츠 서버를 두는 기술
• 기본적인 CDN 기능과 이미지를 사용자에게 보내기 전 특정 형태(이미지 사이즈를 줄이거나 특정 포맷으로 변경)로 가공하여 전해주는 기능도 있음
• http://cdn.image.com 에서 CDN 형식으로 이미지 변경하면 아래와 같은 형식으로 사용할 수 있음

http://cdn.image.com?src=[image주소]&width=[크기]&height=[크기]

• CDN 을 사용하면 위처럼 width와 height 를 조정해서 사이즈를 조절할 수 있음