바로 문의 : 010-2907-7622

웹사이트 이미지 용량 최적화 간단 팁.

웹사이트 이미지 용량 최적화 간단 팁.

홈페이지 로딩 속도의 가장 많은 영향을 주는 것이 바로 이미지, 사진 파일입니다. 이미지만 최적화를 해도 다음과 같은 이점이 있습니다.
첫째, 홈페이지 로딩 속도가 빨라집니다. 특히 이미지를 많이 사용하는 쇼핑몰이라면 속도의 차이를 체감할 수 있습니다.
두번째로 트래픽 용량을 줄일 수 있습니다. 일일 방문자 수가 많지 않다면 크게 상관 없지만, 방문자가 많은 경우 웹호스팅 서비스의 일일 트래픽 제한에 걸려 홈페이지가 표시되지 않을 수도 있기 때문입니다.


그러면 어떻게 이미지 최적화를 할 수 있을까요? 다음과 같은 세가지 단계만 거쳐도 간단하게 이미지 용량을 줄일 수 있습니다.
테스트에는 다음과 같은 두 개의 이미지를 사용해 보았습니다.

웹사이트 이미지 용량 최적화 샘플


1. 이미지 폭 조절

홈페이지에서 사용하는 이미지는 대부분 가로 폭이 1,000 픽셀을 넘지 않습니다. 블로그처럼 좌측이나 우측에 메뉴가 존재한다면 800 픽셀 정도도 충분합니다.
최근 DSLR 카메라 또는 핸드폰으로 찍은 사진은 가로 폭이 3,000 픽셀을 넘기 때문에 이미지 사이즈를 줄여주는 것만으로 큰 효과를 볼 수 있습니다.

테스트) 가로 폭 3,000 픽셀 사진의 파일 용량은 2,690KB입니다. 이 이미지를 1,000 픽셀로 폭을 줄이니 370KB로 약 7배 정도 차이가 납니다.


2. 이미지 포맷 설정

포토샵에서 파일을 저장할 때 포맷(Format) 설정에 따라 용량을 줄일 수 있습니다.
웹에서 사용하는 이미지는 대부분 GIF, PNG, JPG 포맷을 사용합니다만, 최근 GIF 포맷은 아주 작은 아이콘이나 애니메이션에만 사용합니다.
그러면 대표적인 PNG와 JPG를 구분하는 기준은 무었일까요? 바로 실사 이미지냐 아니냐입니다. 카메라로 찍은 사진은 JPG, 만들어진 이미지는 PNG 포맷으로 저장합니다. 잘못된 포맷을 사용하면 아래 테스트처럼 용량이 늘어나게 됩니다.

테스트 1) 가로 폭 1,000 픽셀 사진의 JPG 파일 용량은 370KB입니다. 이 이미지를 동일한 사이즈로 PNG로 저장하면 694KB로 약 2배 정도 차이가 납니다.
테스트 2) 가로 폭 1,000 픽셀 이미지의 PNG 파일 용량은 421KB입니다. 이 이미지를 동일한 사이즈로 JPG로 저장하면 821KB로 약 2배 정도 차이가 납니다.


3. 이미지 퀄리티 설정

카메라로 찍인 사진, 일러스트나 포토샵으로 만든 이미지를 저장할 때 퀄리티를 조정할 수 있습니다. 원본의 70%~80% 정도로 퀄리티를 떨어트려도 모니터를 통해 볼때는 거의 차이가 나지 않습니다.
포토샵은 이를 위해 웹용 이미지 저장 메뉴를 제공하고 있습니다. [Save For Web & Devies (Alt+Shift+Ctrl+S)]
JPG 포맷은 퀄리티 조정, PNG 포맷은 비트와 색상 수를 설정하여 저장할 수 있습니다.

테스트 1) 가로 폭 1,000 픽셀 사진의 JPG 파일 용량은 370KB입니다. 이 이미지를 동일한 사이즈로 퀄리티 70%의 JPG로 저장하면 110KB로 약 3배 정도 차이가 납니다.
테스트 2) 가로 폭 1,000 픽셀 이미지의 PNG 파일 용량은 421KB입니다. 이 이미지를 동일한 사이즈로 8비트 PNG로 저장하면 149KB로 약 3배 정도 차이가 납니다.


웹사이트 이미지 용량 최적화 결과

3 댓글

  1. 컴러버
    2017-02-06 19:02

    웹사이트로 사용하는 이미지의 경우 좋은 퀄리티 & 전체화면 크기로 등록을 원하시면 가로 폭 1600 이면 충분하며 저장 시, 퀄리티는 80%정도면 됩니다. 인쇄용으로 사용 시 주의할 점은 해상도(Resolution) 를 300으로 해주는 것이 중요합니다. 웹사이트로 사용하는 것은 72. 이 해상도 정보는 프린트를 할 때 적용되기에 해상도가 300이든 72이든 컴퓨터 상에서 파일 크기의 차이는 없습니다.

  2. 박영구닷
    2017-02-06 18:02

    해상도은 몇으로 해서 올리나요?

  3. 말레이
    2017-02-02 11:02

    명쾌한 설명, 도움이 되었습니다.

댓글 달기

   

컴러버 로고

 

  • 전화

    010-2907-7622

  • 카카오톡

    hshmac / webejoa

  • 주소

    서울 마포구 새창로 11, 1314호 / 더디렉터

  • 본 사이트는 웹이조아에서 정보 공유를 위해 제작 및 운영하고 있습니다