Quartz(aiee.app)에서 이미지 때문에 로딩이 느려지거나 모바일에서 깨지는 걸 막기 위한 실전 체크리스트.
Obsidian/images/quartz-webp-optimization-flow.svg
기본 원칙(고정)
- 생성 이미지는 기본 1K에서 시작
- 웹 배포는 WebP 변환으로 통일
- 품질(q): 70~80
- 최대 폭(max width): 1200px
1) 새 이미지 만들 때(권장 루트)
- 이미지 생성(1K)
- WebP 변환(q 70~80, max 1200)
- 문서에 임베드
- 스모크 테스트(3페이지)
임베드 규칙(Quartz)
- 항상 전체 경로로:
yaganjo-novel-ep01-cover.webp
2) 기존 이미지 일괄 최적화(레거시 정리)
- 대상:
8.quartz/**/images/*.(png|jpg|jpeg) - 방식: webp 생성 + md 링크 치환
작업 스크립트(레퍼런스)
- 변환 스크립트(레거시 일괄):
/home/tw2/.openclaw/workspace/archive/scripts/convert_quartz_images_to_webp.py
- 단일 파일 변환(빠르게):
/home/tw2/.openclaw/workspace/skills/webnovel-serial-pipeline/scripts/to_webp.sh
3) 스모크 테스트(최소 3페이지)
체크할 URL 3종:
- 홈(전역 CSS/에셋)
- 해당 폴더 index(목록/링크)
- 에피소드 본문 1개(임베드 이미지)
확인 포인트:
- 로딩 체감(특히 모바일)
- 이미지 깨짐(404/경로 오류)
- 너무 큰 이미지가 그대로 나가는지(폭 과다)
4) 글쓰기 쪽 주의점(‘이미지 최적화’가 깨지는 이유)
- PNG/JPG를 그대로 올리고 webp로 안 바꾸면: 속도 급락
- 파일명 바꾸고 md 링크를 안 고치면: 깨짐(404)
- 너무 큰 원본(2K/4K)을 그대로 쓰면: 모바일에서 과부하
체크리스트(복붙용)
- 이미지 1K로 만들었나?
- webp로 변환했나? (q 70~80 / max 1200)
-
images/폴더에 저장했나? - 임베드 경로가 전체 경로인가?
- 홈/폴더/본문 3페이지 스모크 테스트 했나?