!
Quartz에서 이미지가 무거우면 글 내용보다 로딩 지연, 모바일 체감 속도, 깨진 링크가 먼저 문제를 만든다. 이 문서는 PNG·JPG를 무조건 지우라는 뜻이 아니라, 배포 단계에서는 WebP를 기본값으로 굳히고 깨짐 없이 검수하는 최소 루틴을 정리한 가이드다.
원격 볼트 경로나 WebDAV 연결이 섞여 있다면 39-WebDAV-PROPFIND-401-405-207-해결도 함께 보는 편이 안전하다.
먼저 결론
- 새로 올리는 대표 이미지는 1K 정도 크기에서 시작하는 편이 안전하다.
- 웹 배포본은 WebP 변환 후 업로드를 기본값으로 둔다.
- 품질은 보통 q 70~80, 최대 폭은 1200px 안팎이면 대부분의 본문 카드·썸네일에 무리가 적다.
- 파일명을 바꿨다면, 문서 링크와 실제 렌더 페이지를 함께 확인해야 한다.
Google은 WebP가 웹용 이미지에서 더 작은 파일 크기를 제공하도록 설계됐다고 설명한다. 특히 PNG·JPEG 대비 용량을 줄이면서도 투명도와 애니메이션까지 지원하므로, Quartz처럼 문서 수가 많아지는 정적 사이트에서 체감 차이가 크다. 참고: Google for Developers – WebP, web.dev – Image formats: WebP.
왜 WebP부터 보나
이미지 최적화는 예쁜가보다 다음 페이지가 빨리 열리느냐와 더 가깝다. 같은 글이라도 이미지가 무거우면 검색 유입이 들어와도 첫 로딩이 느려지고, 모바일에서는 본문을 읽기 전에 이탈하기 쉽다.
작은 운영 사례로 보면 차이가 분명하다.
- Before: PNG 원본을 그대로 넣고 글만 먼저 발행 → 본문은 열리지만 스크롤 구간에서 로딩이 끊기고, 일부 페이지는 이미지가 지나치게 크게 표시됨
- After: 대표 이미지부터 WebP로 변환하고 폭을 제한 → 본문 진입 체감이 빨라지고, 같은 템플릿을 여러 글에 재사용해도 화면 균형이 덜 흔들림
검증은 어렵지 않다. 같은 페이지를 모바일 데이터 환경이나 시크릿 창에서 열어 보고, 첫 화면과 이미지가 있는 중간 구간에서 끊김이 줄었는지 먼저 확인하면 된다.
새 이미지 처리 루틴
1) 생성 단계에서 크기를 욕심내지 않는다
처음부터 2K·4K 이미지를 만들어 두면 나중에 줄이더라도 작업이 번거롭고, 실수로 원본이 그대로 배포될 가능성이 커진다. 본문 대표 이미지나 카드 용도라면 1K 전후에서 시작해도 충분한 경우가 많다.
2) 배포본은 WebP로 고정한다
운영 기준을 한 번 정해 두면 글마다 고민할 일이 줄어든다.
- 권장 품질: q 70~80
- 최대 폭: 1200px 안팎
- 저장 위치: 글과 함께 관리되는
images/폴더
단일 파일을 빠르게 바꾸고 싶다면 /home/tw2/.openclaw/workspace/skills/webnovel-serial-pipeline/scripts/to_webp.sh를, 레거시 이미지를 한 번에 정리할 때는 /home/tw2/.openclaw/workspace/archive/scripts/convert_quartz_images_to_webp.py 같은 변환 스크립트를 활용할 수 있다.
3) 링크 치환을 끝까지 확인한다
이미지 최적화에서 가장 흔한 실패는 변환보다 링크 누락이다. 파일명을 바꿨는데 문서 안 링크를 함께 고치지 않으면 바로 404가 난다. 그래서 변환 직후에는 문서 편집기에서 끝내지 말고, 실제 Quartz 렌더 페이지에서 이미지가 뜨는지 확인하는 습관이 필요하다.
최소 스모크 테스트 3단계
- 홈 또는 허브 페이지: 전역 스타일과 카드 이미지가 깨지지 않는지 본다.
- 해당 폴더의 허브 페이지: 목록에서 썸네일이나 대표 이미지가 과하게 크지 않은지 본다.
- 본문 1개: 실제 문장 사이 이미지가 잘 뜨고 모바일 폭을 넘지 않는지 확인한다.
여기서 특히 볼 것은 세 가지다.
- 404나 빈 이미지가 없는가
- 원본이 너무 커서 스크롤이 버벅이지 않는가
- 여러 글에서 같은 규칙으로 표시되는가
자주 깨지는 패턴
- PNG/JPG 원본만 올리고 변환을 미룸 → 발행은 빨라도 누적 속도가 급격히 느려짐
- 이미지 이름만 바꾸고 문서 링크는 그대로 둠 → 페이지는 살아 있어도 이미지가 깨짐
- 큰 원본을 그대로 두고 CSS가 알아서 줄이길 기대함 → 모바일 체감이 무거워짐
바로 적용 체크리스트
- 새 이미지를 만들 때 처음부터 과한 해상도를 쓰지 않았는가
- 배포본을 WebP로 변환했는가
- 최대 폭을 제한했는가
- 파일명 변경 후 문서 링크까지 함께 바꿨는가
- 홈/허브/본문 3페이지 스모크 테스트를 마쳤는가
다음 읽기
AI 활용 고지: 이 문서는 Google의 WebP 관련 공식 문서와 기존 운영 스크립트를 바탕으로 생성형 AI 초안을 만들고, 실제 Quartz 운영 흐름에 맞게 편집해 정리했습니다.