이미지 파일의 유형에 따른 화질 저하
기본적으로 확인해야 할 사항은 이미지 파일의 포맷이다. 보통 이미지를 다운로드 받았을 때 이미지 이름 뒤에 붙어있는 .jpg .png 등 확장자명이 이미지 파일의 유형을 나타낸다. 마우스 커서를 해당 파일에 올려놓았을 때 나타나는 ‘항목 유형’으로도 확인할 수 있다.
.jpg .png .webp .gif .bmp 등 다양한 유형이 있는데 각각 압축 알고리즘이나 압축 정도에 차이가 있고 정보 손실이 많은 유형의 이미지 파일을 사용하면 선명하지 않은 이미지가 업로드 된다. 인터넷에서 파일을 저장하면 가장 많이 보게 되는 이미지 유형이 .jpg와 .png이다.
JPG란 무엇일까?
JPG는 JPEG 그룹이 1998년 이미지 파일의 크기를 줄일 필요성을 느끼고 개발한 이미지 유형이다. 오늘날 인터넷에서 가장 많이 사용되고 있으며 일반적으로 10:1의 압축비율이 적용된다. JPG로 이미지를 저장하게 될 경우 이미지의 품질이 일부 저하된다. 파일을 압축하는 과정에서 손실을 감수하는 알고리즘을 사용하기 때문이다. 대신, PNG와 비교해 가벼운 이미지 파일을 얻을 수 있다.
PNG란 무엇일까?
PNG는 JPG와 다른 점이 크게 두 가지 있다. 첫 번째는 투명도를 지원한다는 것이고 두 번째는 무손실 알고리즘을 사용한다는 것이다. 인터넷에서 이미지를 다운로드 받으면 분명 배경이 없었는데 다른 곳에 업로드하면 사각형의 배경 박스가 생겨 깔끔하지 않다고 느낀 적이 있을 것이다. 이는 투명도를 지원하지 않는 JPG 이미지를 다운로드했기 때문이다. 반면 PNG는 배경이 투명한 이미지를 만들 수 있다. 또한 PNG는 정보를 모두 보존하므로 원본의 화질을 유지한다.
위 글만 읽으면 PNG가 JPG보다 압도적으로 우수해 보이는데 왜 인터넷에는 JPG 이미지가 그렇게도 많은 것일까? 이유는 파일 크기 때문이다. 인터넷 화면의 캡쳐, 스크린샷의 경우 일반적으로 용량이 크지 않으나 카메라로 찍은 고화질 이미지 등은 용량이 상당하다. 이로 인한 속도 저하나 트래픽 문제를 해결하기 위해 JPG 이미지를 사용하는 것이다. 화질 저하를 막고 싶다면 파일 크기를 감수하고 PNG를 사용해야 한다.
캡쳐 프로그램 활용 시
인터넷 화면을 캡쳐하기 위해 프로그램을 활용하고 있다면 어떤 이미지 유형을 사용하고 있는지 확인해봐야 한다. 대부분의 캡쳐 프로그램은 적어도 JPG와 PNG 두 가지 유형은 제공하는데 아닌 경우도 있다. 대표적으로 마이크로소프트 엣지에서 제공하는 기본 캡쳐 기능이 JPEG 형식만을 고수하고 있다. 해결책은 윈도우 전체 화면 캡쳐 기능인 윈도우 키 + Prt Sc 키로 스크린샷을 만든 후 편집하거나 PNG를 지원하는 FireShot 등의 확장 프로그램을 설치하는 것이다.
리사이징으로 인한 해상도 감소
작은 이미지가 웹사이트에 업로드 되면 폭이나 높이를 맞추기 위해 자동으로 확대되는데 이로 인해 화질이 저하될 수 있다. 고화질 이미지는 보통 인치 당 픽셀 수가 많은 것을 의미한다. 예를 들어 2000px X 2000px, 폭과 높이 5인치의 이미지가 있다고 가정하면 인치 당 400px의 해상도를 가진다. 그런데 폭과 높이가 10인치로 늘어나면 인치 당 200px의 해상도를 가지게 된다. 과도한 리사이징은 화질을 저하시키므로 원본 크기를 유지하는 게 좋다.
웹사이트 자체 압축
업로드 전에는 고화질인데, 업로드 후에는 저화질이라면 이 경우에 해당할 수 있다. 대형 포털 사이트나 대형 커뮤니티 사이트는 트래픽 감소를 위해 업로드 용량을 제한하거나 이미지 파일을 재압축한다. 예를 들어 워드프레스는 JPG 파일을 한 번 더 압축하는데,
add_filter('jpeg_quality', function($arg){return 100;});해당 코드를 테마 CSS 파일에 넣어주면 해결할 수 있다. 100은 원본 화질을 의미한다.