이미지 파일을 압축하거나 webp와 반응형으로 최적화 하는 방법

 이미지 파일은 인터넷 웹에서 높은 용량을 차지하고 있습니다.

 때문에 사용자에게 빠른 속도를 제공하려면 이미지를 최적화할 필요가 있습니다.

 이미지를 최적화하는 데엔 여러가지 방법이 있습니다.

 

 

• 이미지를 압축하기
• Lazy Load로 지연로드하기
• 최신 포맷인 webp을 사용하기
• 크기를 최적화하기

 크게 보면 위와 같이 4가지 방법이 가능합니다.

 오늘은 위에 올린 원본 이미지의 용량을 줄이는 법을 실제 예제로 보여드리면서 얼마나 효과적인지 알아보겠습니다.

 

[참고*원본 이미지의 용량: 81.8KB, 포맷:JPG*]

 

이미지를 압축하기

 

 간단하게 인터넷에서 이미지 압축이 가능합니다.

 대중적인 사이트라면 compressjpeg.com이 있는데, JPEG 파일을 압축해주는 기능을 가지고 있습니다.

 설치도 필요 없이, 업로드->압축->압축된 이미지 다운로드가 끝입니다.

 

 

 그 외에 구글링을 해보니 websiteplanet라는 사이트도 있던데 압축률이 좋더군요.

 이 사이트는 이미지를 40개까지 동시에 압축 가능하다는 장점도 있습니다.

 하지만 자주 이미지를 압축하다보면 로봇이 아닌지 체크하는 귀찮은 과정을 거쳐야 하는 단점도 있습니다.

 

 압축을 하면 어느정도의 용량을 세이브할 수 있을까요?

 

 용량이 83%나 줄어드는 놀라운 모습을 볼 수 있습니다.

 다만 화질 열화라는 단점이 있기 때문에, 가능하다면 압축을 적게하는 것이 유리합니다.

 

Lazy Load로 지연로드 하기

 

 사용자의 시선에 이미지가 보일 때만 로딩을 해서 로딩속도를 끌어올리는 기법입니다.

 약간의 자바스크립트가 필요하며, 마크업도 따로 필요합니다.

 

 자세한 방법은 제가 일전의 포스트에서 다뤘으니 참고하시면 됩니다.

 현재 웬만한 웹사이트들은 다 이 기법을 사용한다고 보시면 됩니다. 쓸 때 안 쓸때의 차이가 큰 방식입니다.

 

최신 포맷인 webp를 사용하기

 

WEBP란?

 

 인터넷에서 대중적으로 사용되는 JPEG,GIF,PNG 같은 파일은 매우 오래된 규격입니다.

 그래서 압축률이 높지도 않고 기술적인면에서 많이 뒤쳐집니다.

 그런 점을 보완하기 위해서 구글에서 내놓은 포맷이 있는데 그게 바로 webp입니다.

 

 

 사실 몇 년 전까지만 해도 webp를 지원하는 브라우저가 적어서 실용성이 적은 편이었는데 최근에는 대부분의 모던 브라우저에서 지원하기 때문에 실용성이 매우 올랐습니다.

 

 그렇다면 81.8kb의 이미지를 webp로 변경하면 얼마나 용량이 줄어들까요?

 아래의 사진을 보시면 나와 있습니다.

 

 

 59.95% 줄어들었네요.

 화질의 열화도 없습니다.

 

WEBP로 변환하는 방법과 마크업

 

 가지고 계신 이미지를 WEBP 포맷으로 변환하려면 ezgif란 사이트를 이용하시면 됩니다.

 파일을 업로드한 후 Convert to WebP를 눌러주시면 이미지가 나오는데 다운로드 받으시면 끝입니다.

 

 다만 이 WEBP 포맷을 쓰려면 앞서 말했듯이 IE나 사파리에서 이미지가 뜨지 않습니다.

 그렇기 때문에 사용할 때엔 picture 태그로 마크업을 해줘야 합니다.

 

<picture>
  <source srcset="(webp이미지파일).webp" type="image/webp">
  <source srcset="(webp가 나오지 않을때 보여줄 이미지파일).jpg" type="image/jpeg"> 
  <img src="(srcset을 지원하지 않는 ie를 위한 이미지파일).jpg">
</picture>

 

 방식은 위와 같이 하면 됩니다.

 그렇게 하면 무난하게 크로스 브라우징을 하면서 더 빠른 로딩속도를 챙길 수 있습니다.

 

반응형 마크업으로 크기를 최적화하기

 

 이미지의 크기에 따라 용량의 차이가 큽니다.

 이미지의 크기를 반절로 줄이면 용량도 반 가까이 줄어듭니다.

 

 보통 스마트폰의 화면이 480픽셀을 넘지 않습니다.

 만약 1200픽셀짜리 사진을 모바일로 본다면 엄청나게 큰 손해를 보는 셈입니다.

 이걸 방지하기 위해서 있는 기술이 반응형 이미지 기술인 srcset입니다.

 

 이 srcset은 다음과 같이 마크업합니다.

 

<img sizes="(max-width: 768px) 200px, 360px" srcset="(이미지 주소) 200w, (이미지 주소)360w, (이미지주소) " src="(srcset을 지원하지 않는 ie대비용 주소)"  alt="thumbnail" />

 

 sizes는 현재 보고 있는 디바이스의 가로 길이에 따라 어떤 크기의 이미지를 보여줄지를 결정합니다.

 그리고 srcset에 있는 주소 뒤에 200w, 360w, 이런 식으로 표현되는데 sizes에 설정한 디바이스 가로 길이의 감지에 따라 내놓은 이미지를 결정하는 겁니다.

 

 위의 마크업에선 첫번째 이미지 주소는 이미지가 200픽셀에 적합한 레이아웃이라면 배출해내는 이미지 주소입니다.

 두번째 이미지 주소는 360픽셀에 적합한 레이아웃이라면 배출해내는 이미지 주소입니다.

 마지막 이미지 주소는 위의 조건을 제하고 평소에 배출해내는 이미지 주소입니다.

 

 이 방식을 쓰면 모바일에서 접속했을 때 사용자의 데이터를 아끼고, 로딩 속도를 끌어올릴 수 있다는 장점이 있습니다.

 

관련글

웹폰트 최적화해서 로딩속도 끌어올리는 방법

크리티컬 css 기법을 알아봅시다.

렌더링 차단 리소스 제거하기