한빛출판네트워크

제공 : 한빛 네트워크
저자 : Lara Swanson
역자 : 유형진
원문 : Image Performance

웹사이트의 성능 향상을 위한 가장 좋은 방법은 이미지를 최적화하는 것입니다.

이 기사는 웹디자인과 성능에 대한 두번째 내용입니다. 이전 기사(웹 성능은 사용자 경험이다)를 보려면 여기를 클릭하세요

이미지들은 대부분의 사이트 page-weight를 구성(차지)하고 있습니다. "average site"에서 이미지 사이즈 및 많은 이미지 요청에 대한 조사 덕분에 이미지 최적화 방법은 틀림없이 사이트의 페이지 로드 타임을 향상시키는데 있어 가장 좋은 방법입니다.



여러 가지 이미지 타입들에 대해서 찾아보고 다양한 옵션을 통해 이미지 최적화를 해보도록 합시다.

이미지 파일 타입

사이트에 사용할 이미지를 생성할 때 다양한 파일 타입을 선택할 수 있습니다. 이미지를 생성할 때 스스로에게 물어보십시오.

• 어떻게 이 이미지를 압축할수 있을까?
• 얼마나 많은 컬러가 필요할까?
• 투명한 이미지(배경)처리가 필요할까?

이미지에 투명한 처리를 해야 할 때, PNG 타입이 가장 좋은 선택이 될 것입니다. GIF 타입 또한 투명한 처리를 지원합니다. 그러나 GIF 타입은 PNG 타입보다 훨씬 무거운 경향이 있습니다. PNG-8 타입은 이미지를 최대 256색으로 표현하며, 파일 사이즈도 작습니다. 사용하는 이미지의 색상수가 많지 않다면, PNG-8 타입을 선택하는 것이 작은 사이즈 덕분에 그 어떤 타입들보다 가장 좋은 선택이 될 것입니다. 포토샵에서 PNG-8(binary transparency) 타입에 대하여 내보내기를 지원한다면, 또한 수백만 색상을 가질수 있는 PNG-24(partial transparency) 타입도 지원합니다. 이 같은 경우에는 당연히 파일 사이즈는 커지게 됩니다.

사진과 많은 색상을 포함하는 이미지일 경우 JPEG 타입을 사용하십시오. JPEG 타입은 투명한 이미지 처리는 지원하지 않습니다. JPEG 타입은 무손실 압축 방법을 이용하는 PNG 타입과는 다르게 손실 압축 방법을 사용합니다. 당신이 사진 파일에 대하여 PNG 타입을 사용한다면 종종 JPEG 타입보다 5~10배 파일 사이즈가 커질 것입니다. 왜냐하면 무손실 압축 방법을 사용하기 때문입니다. 페이지 로드 타임을 줄이기 위하여 파일 사이즈가 작은 것을 목적으로 한다면 "the majority of the images analyzed by HTTP Archive are JPEGs" 조사에 의거하여 JPEG을 사용하는 것이 그리 놀란만한 일은 아닙니다. 보통 웹상에서 사용되는 이미지들은 256색보다 많은 색을 사용합니다.

이미지 요청 사이즈 최적화

당신이 포토샵을 사용한다면 File 메뉴에서 "Save for Web"을 이용하여 다양한 파일 타입에 대하여 달라지는 품질을 확인해보십시오. 당신은 만족할만한 품질과 작은 파일 사이즈를 원합니다. 대부분의 사람들은 80~90% 품질을 보여주는 JPEG 타입을 찾습니다. 그러나 사용함에 있어서 파일 사이즈와 눈에 띄는 압축률이 중요합니다. artifacts(like alis)를 보십시오. 부정확한 요소들간의 대비, 그리고 모호한 디테일과 텍스트를 말입니다.

이미지를 내보낸 후에 다양한 타입에 대하여 최고의 압축 기술을 보여주는 ImageOptim 같은 툴을 실행해보십시오. 또한 온라인 무손실 이미지 최적화 툴인 Smushit도 있습니다. 이 툴들은 시각적으로 이미지의 품질을 저하시키지 않고 이미지 사이즈를 줄이는 방법으로 추가적인 파일 사이즈를 줄여줄 수 있습니다.

이미지 요청 수 최적화

이미지 파일 사이즈를 줄이는 것 이외에 페이지 로드 타임을 향상시키기 위해서 페이지에 이미지 요청 수를 줄이는 것 또한 중요합니다. 이것을 위한 한 가지 방법은 이미지를 sprites에 결합하는 것입니다. 당신의 page-weight가 약간 증가할 수 있습니다. 왜냐하면 하나의 큰 이미지 파일과 추가적으로 사이트 요소에 CSS 부분이 추가되었기 때문입니다. 그러나 sprites에 이미지를 결합하는 것이 페이지 속도를 향상시키는데 더 많은 혜택을 줄 것입니다.

이미지 요청을 줄이는 또 다른 방법은 CSS3 gradients로 교체하는 것입니다.

• 이미지 투명처리를 할 수 있습니다.
• 배경색에 대하여 덮어씌울 수 있습니다.
• 이미지 요청을 제거합니다.
• 수정이 아주 편합니다.

CSS3은 이미지를 위한 훌륭하고 성능 좋은 대체수단이 될수 있습니다. CSS3 구문에 vendor-prefix로부터 별도로 발생하는 page-weight에 대해서는 걱정할 필요 없습니다. 걱정하지 않았다면 당신은 CSS3 코드를 최적화해 주는 GZIP을 사용해야 합니다. 비록 시간이 조금 더 걸릴테지만 이미지 요청보다는 빠른 로딩 옵션이 될 것입니다.

당신은 꽤 놀라운 CSS3 gradients 기능을 사용할 수 있습니다. 그러나 CSS3를 많이 사용함에 있어서 repaint 시간이 얼마나 영향을 줄지 주의해야 합니다. repaint 작업은 성능에 부담을 주는 작업이고 당신의 페이지를 느리게 동작하게 만들 수 있습니다. 당신의 UI가 느리게 동작하는 것을 확인했다면, 특히 스크롤링 할 때, 아마 CSS3 또는 JavaScript의 repaint 문제일 것입니다. 당신은 JankFree.org에서 제공하는 툴을 이용하여 무엇이 원인인지 진단하고 싶을 것입니다.

당신의 웹사이트의 성능 향상을 위한 가장 좋은 방법은 이미지를 최적화하는 것 입니다. 당신의 사이트에 이미지를 살펴보고 스스로에게 물어보십시오.

• 다른 이미지 포맷을 선택함으로써 파일 사이즈를 줄일 수 있습니까?
• 모든 이미지에 무손실 압축 툴을 사용해 본 적이 있습니까?
• 이미지 요청들을 gradients나 sprites로 대체할 수 있습니까?
• repaint 시간 때문에 UI가 느려지는 문제가 있습니까?

다음 글은 HTML과 CSS를 이용하여 사이트를 제작할 때 재사용성을 위한 디자인 패턴 만들기, 네이밍 패턴 식별하기, 캐싱 어셋와 같은 최적화 기법에 대해서 다루겠습니다.