이미지 최적화

다음 작업을 통해 주요 콘텐츠 이미지 뿐만 아니라 사이트를 구성하는 이미지들도 상당 부분 개선할 수 있다.

1. 각 이미지 파일의 크기와 품질 사이의 균형점 찾기

2. 사이트의 이미지 요청 횟수를 줄일 방법 찾기

3. 사이트의 이미지 생성 워크플로를 최적화하여 성능 개선하기

이미지 포맷 고르기

이미지 포맷을 결정할 때 다음의 질문을 생각해보자

1. 눈에 띄는 품질 저하 없이 이미지를 압축할 수 있는가?

2. 얼마나 많은 색상이 필요한가?

3. 이미지를 더 단순하게 할 방법은 없는가?

4. 이미지가 투명해야 하나?

5. 애니메이션이 필요한가?

6. 이미지가 화면에 표시될 때 최대 높이와 너비는 어떻게 되는가?

7. 사이트에서 어떤 용도로 이미지를 사용할 것인가?

이미지 파일 포맷들을 각각 언제 사용해야 하고 어떻게 최적화할 수 있는지 보여준다.

JPEG

JPEG 파일은 아주 많은 색상이 사용된 이미지/사진에 이상적인 포맷이다.

JPEG가 손실 압축 방식이므로 낮은 품질의 이미지를 사용한다면 이미지가 인위적으로 변형되었다거나 색이 뭉개지고 선명하지 못하다는 느낌을 받을 수 있다.

손실 압축 방식의 포맷은 파일을 저장할 때 이미지의 정보를 일부 버리는데 JPEG는 사람이 눈으로 보고 인식하는 방식을 이용해서 눈치채지 못할 정도로 정보를 손실한다.

JPEG는 이미지의 가장 부드러운 그레디언트 부분과 명함 대비가 낮은 부분, 즉 사용자가 눈치채기 어려운 부분에서 정보를 버린다.

이처럼 JPEG는 인위적 변형을 하기 때문에 인접 픽셀간 명함 대비가 크다면 PNG와 같은 포맷이 더 적합할 수 있다.

하지만 JPEG 파일은 정보가 많은 이미지라도 다른 포맷보다 상대적을 크기를 작게 만들 수 있어 웹의 이미지 대부분은 JPEG 파일을 사용한다.

이미지의 색상이 뚜렷할수록 JPEG의 알고리즘이 압축하거나 색을 섞을 곳을 결졍하기 어렵기 때문에 JPEG 파일의 크기는 커진다.

일반적으로 웹에서 많이 볼 수 있는 기본 JPEG 파일은 최고 품질 상태로 브라우저가 위에서 아래 방향으로 읽는다.

반면 프로그레시브 JPEG 파일은 여러번에 걸쳐 품질을 향상시키면서 이미지 파일을 반복적으로 스캔한다.

기본 JPEG 파일은 브라우저가 위에서 아래로 읽었기 때문에 이미지의 조각도 천천히 위에서 아래방향으로 화면에 나타난다.

반면 프로그레시브 JPEG는 낮은 품질로 한꺼번에 화면에 낮은 품질로 한꺼번에 화면에 나타난 후 이어서 점진적으로 조금 더 높은 품질의 버전으로 대채된다.

이처럼 프로그레시브 JPEG파일은 이미지 전체를 로딩하는 대신 낮은 품질로 즉시 표현하기 때문에 기본 JPEG 파일보다 화면에 더 빠르게 나타난다.

프로그레시브 렌더링을 지원하지 않는 일부 브라우저는 프로그레시브 JPEG 파일을 모두 다운받은 후 화면에 이미지를 보여주기 떄문에 다운받은 대로 표현하는 기본 JPEG보다 화면에 더 느리게 나타난다.

이미지를 여러번 스캔하는 프로그레시브 JPEG에서 각가의 스캔은 기본 JPEG 파일 하나를 페이지에 렌더링하기 위해 스캔하는 것과 같은 수준의 CPU 파워을 소모한다.

GIF

GIF는 웹에서 가장 오래된 그래픽 파일 포맷 중 하나다.

GIF 파일 포맷은 원래 하나의 파일에 복수의 비트맵 이미지를 저장하기 위해 1987년에 만들어 졌다.

GIF는 투명성뿐 아니라 애니메이션도 지원하지만 프레임 안에 256색까지만 포함할 수 있다는 제한이 있다.

JPEG 파일과 달리 GIF는 무손실 파일 포맷이다.

다음의 두 경우는 이미지 파일 포맷을 GIF로 선택하는 것이 좋다.

1. GIF 파일의 크기가 PNG-8로 생성한 이미지 파일의 크기보다 작을 때

2. 애니메이션을 CSS3으로 대체할 수 없을 떄

디더링은 색상 간 전환이 더 부드럽게 보이도록 도와주는 기능이다.

디더링을 적용하면 색상이 다른 인접한 픽셀들을 검사하여 부드러우면서도 색상들이 조화롭게 보이도록 두 색 사이에 새로운 색을 골라 넣는다.

디더링의 양은 GIF 파일의 크기에 영향을 준다.

디더링을 0으로 설정했을때 GIF 파일의 크기는 4.8KB이고 100으로 설정했을 떄는 9.7KB이다.

흥미로운 것은 GIF로 저장된 이미지의 그레이디언트 방향을 수평에서 수직으로 변경하고 디더링을 100으로 설정하면 21KB가 된다.

GIF는 수평 중복성을 제거하는 압축 알고리즘을 수행한다.

따라서 수직으로 된 내용이나 노이즈를 추가하면 GIF 파일의 크기가 증가한다.

적은 수의 색상과 날카로운 모서리를 포함하는 이미지라면 아마도 PNG-8이 적합한 파일 포맷일 것이다.

PNG 파일은 GIF 포맷의 수평 패턴에 추가로 수직 패턴도 처리한다.

그래서 PNG-8버전으로 압축한 이미지가 GIF 보다 파일 크기가 작을 가능성이 매우 높다.

마지막으로 스피너가 로딩 표시 등의 간단한 애니메이션을 GIF로 저장했다면 이를 CSS3 애니메이션으로 교체할 수 있을지 고려해본다.

PNG

GIF 파일 포맷을 개선하고자 설계된 무손실 이미지 포맷이 PNG이다.

이미지가 투명해야 한다면 PNG 포맷이 최고의 선택이 될 것이다.

GIF 포맷도 투명성을 지원하지만 파일 크기가 대체로 PNG파일 보다 훨씬 더 크다.

PNG 파일은 GIF 파일처럼 수평 패턴을 인식하고 압축할뿐아니라 수직 패턴도 찾아 압축하기 때문에 GIF포맷보다 PNG 포맷을 사용할 떄 추가적인 압축 효과를 얻을 수 있다.

이미지 색상 수가 적은 경우라면 PNG-8 파일 포맷이 최선의 선택이 될 수도 있다.

PNG-8 파일은 이미지 내에 최대 256색만 사용할 수 있는 제한이 있지만 일반적으로 파일의 크기가 작은 편이다.

PNG-24 파일 포맷에는 PNG-8과 같은 팔레트 색상 제한이 없다.

사이트에 추가할 사긴을 PNG 파일로 저장할 경우 무손실 압축 파일이기 때문에 파일 크기가 JPEG 파일보다 다섯 배에서 열 배까지 커질 것이다.

그래서 PNG 이미지 파일도 다른 이미지 파일처럼 크기를 줄이려면 노이즈와 색상 수를 줄이는 것이 좋다.

PNG-24는 PNG-8과 투명도를 처리하는 방법이 다르다.

PNG-8은 포토샵에 그림자를 혼합할 수 있는 매트 색상을 지정했다.

그리고 PNG-8 이미지에는 부분적으로 투명한 픽셀은 없엇고 그림자 밖의 완전히 투명한 픽셀들만 있었다.

반면 PNG-24 파일에는 부분적으로 투명한 픽셀이 있다. 이렁 픽셀들은 파일 크기를 커지게 한다.

그러니 투명도가 필요 없고 많은 색상이 쓰이는 이미지라면 JPEG를 선택한다.

이미지 요청 대체하기

페이지 로딩 시간을 개선하는 데에는 이미지 파일 크기를 줄이는 것만큼이나 이미지 요청 횟수를 줄이는 것도 중요하다.

이미지 요청을 줄일 수 있는 대표적인 방법은 크게 두 가지다.

1. 스프라이트로 이미지를 합치기

2. 이미지 파일을 CSS3, 데이터 URI, SVG 버전으로 교체하기

스프라이트

웹 성능을 이야기할떄 가장 빠른 요청은 처음부터 요청하지 않는 것이다.

페이지의 이미지 요청 수를 감소시키는 대표적인 방법은 낱개의 이미지들을 하나의 스프라이트 이미지로 합치는 것이다.

스프라이트를 이용하면 큰 이미지 하나가 생기고 이미지의 위치와 그래픽을 보여주기 위한 CSS 파일이 추가되기 때문에 용량이 약간 늘어날 수도 있다.

하지만 사이트의 페이지 속도 면에서는 유리하다.

스프라이트로 합치기에 가장 적합한 이미지는 크기가 작고 사이트에서 반복해서 사용되는 것이다.

흔히 사이트 전반에 걸쳐 사용되는 아이콘이나 사이트 로고, CSS 배경 이미지등이다.

먼저 스프라이트 적용 전을 살펴보면 크롬 브라우저는 페이지의 콘텐츠를 가져오기 위해 세 개의 연결을 만들었다.

첫 번쨰 연결을 통해 DNS 조회와 초기 접속을 한 후 HTML 페이지를 가져오고 이어서 첫 번째 이미지를 가져왔다.

세 번쨰 연결을 통해 또 다시 초기 접속을 했고 이어서 다른 이미지를 다운 받았다.

마지막으로 문서를 모두 가져온 후 두 번쨰 연결을 통해 사이트의 파비콘을 가져오고 끝났다.

스프라이트 적용 후를 살펴보면 크롬 브라우저는 페이지의 내용을 가져오려고 두 개의 연결을 만들었다.

첫 번쨰 연결에서 DNS 조회와 초기 접속을 한후 HTML을 가져오고 곧바로 스프라이트 이미지 한개를 다운 받았다.

문서를 모두 가져온 후에는 사이트의 파비콘을 가져왔다.

속도 지수는 페이지 내 눈에 보이는 구성요소들이 화면에 그려지는 평균 시간을 가리킨다.

스프라이트도 성능을 저하시킬 가능성은 있다.

스프라이트 이미지에 포함된 여러 이미지 중에서 하나만 변경하더라고 스프라이트 파일 전체의 캐시가 중단되기 때문이다.

CSS3

CSS를 사용하면 도형, 그레이디언트, 애니메이션을 만들 수 있다.

CSS3 그레이디언트는 다음과 같은 장점이 있다.

1. 투명성을 제어할 수 있다.

2. 배경 색상에 오버레이할 수 있다.

3. 이미지 요청 횟수를 줄일 수 있다.

4. 변경이 아주 쉽다.

더 많은 CSS를 로딩한다 치더라도 이미지 파일 요청보다 CSS 코드를 요청하는 것이 성능 면에서는 더 낫다.

데이터 URI와 베이스64로 인코딩한 이미지

매우 작고 단순한 이미지라면 데이터 URI로 바꾸는 것도 웹 페이지에서 요청 횟수를 줄이는 방법 중하나다.

이를 위해 Base64 인코딩이라는 방법으로 이미지를 URI로 변환한다.

이미지를 Base64로 인코딩하면 이미지 HTTP 요청을줄일 수 있어 성능을 개선하는데 도웅이 된다.

하지만 이미지를 코드 안에 넣으면 파일 캐싱을 할 수 없고 CSS 파일의 크기도 증가한다.

더불어 데이터 URI의 길이에 따라 떄로는 파일 크기가 눈에 띄게 커지기도 한다.

SVG

일부 아이콘과 이미지는 확장 가능한 벡터 그래픽으로 쉽게 교체할 수도 있다.

SVG에서는 경로, 모양, 글꼴, 색상 같은 이미지의 기본 속성을 정의하기 위해 XML을 사용한다.

SVG의 주된 장점은 디스플레이 장치의 해상도에 관계없이 같은 품질로 이미지를 보여줄 수 있다는 점이다.

SVG는 비트맵 이미지와 달리 확대/축소가 가능한 벡터이기 때문에 화면에 표시되는 크기와 무관하다.

또한 이미지 파일을 인라인 SVG로 대체하면 브라우저가 서버에서 파일을 다운받기 위한 HTTP 요청을 줄일 수도 있다.

SVG는 오래된 브라우저에서는 지원되지 않는다.

이미지를 인라인 SVG로 교체하는 것은 이미지를 데이터 URI로 교체하는 것처럼 HTML 파일 크기가 커지게 하고 이미지 파일을 캐싱할 기회를 없애버리는 단점이 있다.