바로 문의 : 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배 정도 차이가 납니다.


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


7 댓글

  1. 컴러버
    2020-07-02 01:07

    꺼비냥님, 모바일 URL이라고 언급한 것으로보아 홈페이지가 PC버전과 모바일 버전이 따로 있는 것으로 보이네요. 이런 경우라면, PC버전에서는 원본 이미지의 용량을 줄이고 리사이즈(또는 크롭)한 것을 이용중이고 모바일에서는 원본을 이용하고 있을 수 있습니다. 일반적인 CMS(그누보드, 제로보드 등)에서는 서버 용량과 속도가 떨어지는 것을 방지하기 위해 파일 업로드할 때 자체적으로 이미지 용량을 줄여서 사용하거든요. 관리자페이지에서 관련 설정을 변경할 수 있을 것 같습니다. 만약 관리자 페이지에 관련 설정이 없다면, FTP 등을 이용하여 이미지를 업로드하는 등 프로그래밍 관련 경험/지식이 없는 분들이 하시기엔 좀 어려움이 있습니다.

  2. 꺼비냥
    2020-07-02 01:07

    설명 감사드립니다. 제가 웹사이트(홈페이지)에 프로필 사진을 등록하는 중에 난관에 봉착했는데 이미지 픽셀 및 용량 문제인 것인지 가늠이 되질 않아 문의드립니다. 고용량/고해상도(10mb, 4000*6000) 사진을 프로필 사진으로 등록했는데 데스크탑 url에서는 화질이 현저히 떨어져서 이미지가 뭉개져 보이고 모바일 url에서는 고화질로 선명하게 이미지가 확인됩니다. 해상도와 용량을 낮추어 진행했는데도 같은 문제가 발생하는데 혹시 조언을 얻을 수 있을까요?

  3. 컴러버
    2020-04-06 01:04

    데미소댜님, 일반 사진은 무조건 JPG로 저장하시면 됩니다. 만들어진 이미지는 대부분 PNG로 하시면 되는데, 그라데이션 같은것이 많이 들어가면 JPG로 저장하는 것이 용량이 적게 나오는 경우도 있습니다. 요즘 대부분 사이트들이 이미지 등록 시 자동으로 사이즈를 줄여서 보여주기에 이런 경우라면 원본 올리셔도 문제 되지 않습니다. 만약 사진을 등록하려고 하는 사이트에서 자동으로 사이즈 변경을 하지 않는 경우라면, 해당 사이트의 가로 최대 크기를 고려하여 사이즈 변경하시면 좋을 것 같습니다.

  4. 데미소댜
    2020-04-06 01:04

    감사합니다. 직접 저장할 경우에는 직접 찍은 사진은 jpg, 만들어진 이미지는 png로 저장하되 크기를 1000픽셀이하로 저장하고 compress로 용량을 줄이면 될까요?

  5. 컴러버
    2017-02-07 04:02

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

  6. 박영구닷
    2017-02-07 03:02

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

  7. 말레이
    2017-02-02 20:02

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

댓글 달기

   

컴러버 로고

 

  • 전화

    010-2907-7622

  • 카카오톡

    hshmac / webejoa

  • 주소

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

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