무한 트래픽을 쓸 수 있는 일반인들이야 신경을 쓰지 않아도 되는 부분이긴 하나, 많은 웹 페이지들이 웹 호스팅 또는 서버 호스팅 회사의 서비스를 이용하기 때문에, 파일의 용량을 고려하여야 하는 경우가 있습니다.
[그림 1. 이미지 압축률 비교에 사용된 샘플 이미지 가로 600 x 400 pixel, JPEG 품질 옵션 9 ]
블로그의 경우, 네이버, 다음, 구글, 네이트 등 포털의 블로그를 이용하시는 분은 거의 무한 트래픽이 허용되어 있다고도 볼 수 있습니다.
제법 고품질의 사진 이미지를 수십 장 올려도, 트래픽 (traffic) 문제로 고민하지 않아도, 허용된 범위 내에서만 하면 괜찮죠.
사실, 이러한 트래픽 및 하드용량을 커버하기 위해서 수천대의 서버와 인터넷 회선, 이를 원활하게 제공하기 여러 가지 IT 기술들이 접목되어 있습니다.
[그림 2. 샘플 이미지의 jpg, png, bmp 파일의 압축 결과 보기 ]
트래픽에 신경 쓰신다면, 이미지 압축률에 대하여 알아 둘 필요가 있습니다.
요즘 웹 페이지에서 가장 범용적으로 많이 쓰는 이미지 파일인 jpg, png, bmp 만 우선 비교해보겠습니다.
이들 이미지 파일 압축률 들을 평소에 알고 있더라도, 늘 기억하지 못하기에 품질을 어떻게 해야 할 지 홈페이지 작업을 할 때 마다 조금씩 왔다 갔다 헷갈리기에 이미지 압축률 및, 압축이 되었을 때 웹 페이지 상에서 어떻게 보이는 지 눈으로 식별할 수 있도록 했습니다.
위의 그림 2. 샘플 이미지의 압축률을 보여주는 이미지를 참고해보시면, jpg 품질 10이 264 K byte 를 파일크기 100% 기준으로 보면, jpg 저장품질 기준 7이 148 KB (56%), 품질 3이 108 KB(41%), 품질 0가 82 KB(31%) 이며,
png 파일은 553 KB(210%),
bmp windows 16bit 469 KB(178%), 24bit 704KB(267%), 32bit 938KB(355%) 에 해당됩니다.
물론 이는 샘플 이미지를 어떤 것(색상 분포도)을 쓰느냐에 따라 달라지기는 하나, 참고하기에는 충분합니다.
jpg 품질은 웹 페이지상에서는 JPEG 저장 옵션 품질 10에서 8, 좀 더 낮추면 7까지도 거의 차이를 식별하기에 어렵기 때문에 8정도까지도 무난하게 쓸 수 있습니다. 다만, 사진 전문 페이지에서는 9미만으로 낮추는 건 신중을 기해야 할 것입니다.
[그림 3. 샘플 이미지 jpg 저장 품질 0으로 설정했을 때 웹에서 보이는 이미지]
[그림 4. 샘플 이미지 jpg 저장 품질 1으로 설정했을 때 웹에서 보이는 이미지]
[그림 5. 샘플 이미지 jpg 저장 품질 2로 설정했을 때 웹에서 보이는 이미지]
[그림 6. 샘플 이미지 jpg 저장 품질 3으로 설정했을 때 웹에서 보이는 이미지]
[그림 7. 샘플 이미지 jpg 저장 품질 4으로 설정했을 때 웹에서 보이는 이미지]
[그림 8. 샘플 이미지 jpg 저장 품질 5으로 설정했을 때 웹에서 보이는 이미지]
[그림 9. 샘플 이미지 jpg 저장 품질 6으로 설정했을 때 웹에서 보이는 이미지]
[그림 10. 샘플 이미지 jpg 저장 품질 7으로 설정했을 때 웹에서 보이는 이미지]
[ 그림 11. 샘플 이미지 jpg 저장 품질 8으로 설정했을 때 웹에서 보이는 이미지 ]
png, bmp파일은 비교 의미가 무색할 정도로 이미지 파일 압축률이 낮고, gif 파일은 256색상 이하라 여기서는 일단 논외로 하겠습니다.
JPEG 품질 옵션 9로 된 것은 이 페이지 맨 위에 있고, 9~12까지의 품질은 웹 페이상에서 사실상 차이 구분 식별이 거의 불가능하기 때문에 의미가 없어 올리지 않았습니다. 파일 크기를 고려하여 품질을 낮추는 것은 적절히 해야하며, 지나치게 낮추면 보이는 모습이 조악해 질 수도 있어 적절한 조절과 선택이 필요합니다. 보통 사진 전시와 같이 이미지 전체와 디테일이 중요할 경우 8(7?)~10이 무난하며, 텍스트 등이 많이 들어있고, 캡쳐하여 설명을 위해 사용하는 이미지는 7이하로 낮게 설정하여도 나쁘지 않습니다.
웹에서 범용적으로 쓸 수 있는 jpg, bmp, png 이미지 파일 압축률 들과 압축 정도를 달리했을 때 웹에서 보이는 모습에 관해 살펴보았으며, 범용으로 쓸 수 있는 이미지 파일로 이보다 압축률(과 웹에서 보이는 선명도 등을 함께 고려)이 더 좋은 것이 있다면 조언 주시면 감사하겠습니다.
이미지 압축 전송 gzip 등도 여기서는 논외로 하였습니다. 아울러, 스마트폰 모바일 등에서 이 화면을 보게 되면, 이미지 크기를 그에 맞게 줄이기 때문에 정확한 판단에 참고하기에는 부적절 할 수도 있습니다.
관련글
워드프레스 테마 트래픽 이슈(Traffic/Bandwidth Issue) 해결 방법
워드프레스 아바다 테마의 필수 로딩 파일과 트래픽 문제
워드프레스 플러그인 WP Super Cache 사용 방법
워드프레스 홈페이지 php로 css, js, html gzip 압축전송 : htaccess
이미지 압축 프로그램 GIMP – 워드프레스 블로그