Mac에서 PNG를 JPG로 손쉽게 변환하기

 

서론

최근 블로그 스킨을 제작하면서 블로그 성능 테스트를 해봤다.

Google PageSpeed Insights를 통해 내 블로그 속도를 점검해 보던 중, 생각보다 낮은 성능 점수가 눈에 띄었다.

처음에는 JS나 CSS 때문이려나 싶었지만, 진단 결과 가장 많은 비중을 차지한 문제는 이미지 용량이었다.

Midjourney나 Figma 등에서 작업한 이미지들을 그대로 PNG로 저장하고 업로드한 것이 문제였다.

“그림 예쁘게 나왔는데 그냥 올려도 되지 않을까?”라는 안일한 생각이 페이지 로딩 지연 시키고 있었다.

미드저니가 만들어준 이미지의 대부분의 PNG가 1.5MB~3MB에 달했고, 썸네일과 대표이미지를 같이 쓰기 때문에 티스토리 시스템이 업데이트되지 않는 한 개선이 불가한 부분이고 이미지의 용량은 내가 반영할 수 있는 부분이었다.

게다가 모바일 사용자의 데이터 사용까지 고려하면, 이런 무거운 이미지는 사용자 경험에도 분명히 악영향을 줄 수 있다.

이미지 압축하는 방법을 찾아보니 너무나도 Mac에서 간단하게 png → jpg로 변환할 수 있었다.

Apple 생태계로 전환한 지 7년도 넘었는데 아직도 Apple 이랑 친해지는 중이다.😅

---

본론

1. 변환 준비: PNG → JPG로 바꾸는 이유

PNG는 무손실 압축 방식이라 품질은 좋지만, 파일 용량이 크다.

물론 이미지가 선명하고 고품질로 보이면 당연히 블로그가 좋아 보이긴 하지만 속도도 무시할 수 없다.

반면, JPG(JPEG)는 손실 압축이지만 웹에서 사용하기에 충분한 품질 + 훨씬 작은 용량이라는 장점이 있다.

그래서 가장 먼저 해야 할 작업은 이미지 포맷을 JPG로 변환하는 것이었다.

별도의 앱을 설치할 필요도 없이, MacOS에서 너무나 손쉽게 변환해준다

---

2. Finder에서 여러 이미지 한 번에 변환하기

아래는 내가 직접 Mac에서 PNG 이미지를 JPG로 변환한 과정이다.

• Finder에서 이미지 변환이 필요한 이미지 전체 선택

macos finder 파일 선택 screenshot

 

• 선택한 영역에 마우스 우측 클릭 > 빠른 동작  > 이미지 변환 클릭

macos 이미지 선택 우측 마우스 메뉴 빠른동작 선택 화면

 

• 포맷 jpeg 선택
• 이미지 크기는 실제크기 (메타데이터 삭제하면 용량 더 준다고 하는데 저는 그냥 유지했어요)
• 선택 후 JPEG 변환선택하면 끝입니다.

macos 이미지 변환 화면

 

---

3. 실제 변환 후 결과

macos 이미지 변환 후 파일 크기 종류를 표현

 

원본 기준 변환 데이터

변환 옵션	포맷	해상도(px)	해상도 비율	용량	용량 비율
원본 이미지	PNG	1760 × 688	100%	1.7MB	100%
실제 크기	JPG	1760 × 688	100%	323KB	약 19%
크게	JPG	1280 × 500	약 52.8%	178KB	약 10.5%
중간	JPG	640 × 250	약 13.2%	57KB	약 3.2%
작게	JPG	320 × 150	약 4%	19KB	약 1.1%

 

변환 옵션 하나만으로도 용량이 1/5 이하로 줄었다.

또한 실제크기로 변환 시 육안으로 봤을 때 퀄리티 차이가 거의 느껴지지 않는다. 블로그 글에서 큰 해상도의 이미지를 써야 하기 때문에 해상도는 그대로 사용하지만 용량이 81% 줄었다.

 

에디터에서 이미지 업로드 했을 때 변화를 표로 정리해 보았다.

원본	포맷	용량
PNG 원본이미지	PNG	2MB
티스토리 업로드 후 PNG	PNG	1.7MB
JPG 원본이미지	JPG	427KB
티스토리 업로드 후 JPG	JPG	285KB

---

결론

PNG를 JPG로 변환 작업만으로 작업만으로도 1.7MB 이미지 → 323KB으로 줄이는 게 가능하다.

블로그에 올리는 이미지가 쌓이고 방문자 수가 많아질수록, 이런 이미지 최적화는 필수가 된다.

무거운 이미지는 페이지 로딩을 지연시키고, 검색엔진에도 좋지 않다.

블로그 성능과 사용자 개선을 배려한다면, 단순히 “예쁜 이미지”보다 “빠르고 가벼운 콘텐츠 경험”을 제공하는 게 더 중요할 수도 있다.

 

이미지 최적화 후 반드시 블로그 속도 재측정해 보자 (Pagespeed, GTMetrix)

전체 이미지를 다 바꾸진 못했지만, 첫 화면에 노출되는 이미지들만 변경했는데도 성능 점수가 무려 10점이나 올랐다.
블로그 내에 남아 있는 PNG 이미지들을 모두 교체할 수 있을지는 아직 모르겠다.
1일 1 포스팅을 열심히 했던 과거의 나를… 잠깐 원망하고 싶은 마음이 드는 오늘이다. 😢

 

Pagespeed 성능보고서 비포 애프터 스크린샷