Improve anatomy quiz image quality by sourcing high-quality images from Wikimedia Commons, optimizing them, updating question data JSON, and importing to the database. Use when adding or replacing anatomy images for quiz questions, updating image references in learning path JSON files, or improving visual quality of existing questions.
Replace placeholder or low-quality images with high-quality Wikimedia Commons images for anatomy quiz questions.
Audit the current state:
# 現在の画像ファイル一覧
ls -la public/images/anatomy/
# JSON内の画像参照を確認
grep -n '"images"' scripts/data/*.json -A 4
# 帰属情報を確認
cat public/images/anatomy/ATTRIBUTIONS.md
See references/wikimedia-search-guide.md for detailed search strategies.
Key requirements:
Use the optimization script:
# 単一画像の最適化(1200px幅、品質85)
python3 skills/improve-anatomy-images/scripts/optimize-image.py <input> <output>
# カスタムサイズ
python3 skills/improve-anatomy-images/scripts/optimize-image.py <input> <output> --max-width 800 --quality 90
Save optimized images to public/images/anatomy/ with kebab-case naming:
bone-classification-types.pngvertebral-column-colored.pngupper-limb-bones-labeled.svgSVG files from Wikimedia can be used as-is without optimization.
Add entry for each new image to public/images/anatomy/ATTRIBUTIONS.md:
### <filename>
- **Title:** <original title on Wikimedia>
- **Author:** <author name>
- **Source:** <Wikimedia Commons URL>
- **License:** <Public Domain | CC BY 3.0>
Edit the relevant scripts/data/*.json file. See references/question-image-schema.md for the image schema.
Image roles:
main — shown during quiz (the question references labels in this image)explanation — shown after answering (detailed/labeled version)Question text for image-based questions should reference English labels visible in the image:
"question_text": "図中の「Compact bone」に相当する日本語名称は?"
Set question_type to "image_based" when images are present.
# ドライラン(検証のみ)
npm run import:dry
# インポート(--replace で既存データを置換)
npx tsx scripts/import-learning-path.ts scripts/data/<file>.json --replace
If Node.js DNS fails in the environment, use curl-based REST API calls against Supabase directly. See references/rest-api-fallback.md for the procedure.
# DB内の画像参照を確認
curl -s "$SUPABASE_URL/rest/v1/question_images?select=image_url,image_role" \
-H "apikey: $SUPABASE_KEY" -H "Authorization: Bearer $SUPABASE_KEY"
# ローカルで画像ファイルの存在確認
ls -la public/images/anatomy/