Markdown 이미지가 HTML에서 깨질 때
Markdown 편집기에서는 잘 보이던 그림이 HTML로 바꿔 보내면 엑스 표시로 나오는 경우가 많습니다. 원인은 대부분 경로입니다. 왜 깨지는지와 해결 방법을 정리했습니다.
왜 깨지나요?
Markdown의 이미지는 파일 자체가 아니라 파일 위치만 적은 것입니다.
이 줄은 "이 문서가 있는 곳의 images 폴더에서 result.png를 찾으라"는 뜻입니다. 내 컴퓨터에서는 폴더가 있어 보이지만, HTML 파일만 다른 사람에게 보내면 받는 쪽에는 그 폴더가 없습니다. 그래서 그림이 깨집니다.
해결 방법은 세 가지입니다
| 방법 | 장점 | 단점 |
|---|---|---|
| 이미지를 HTML 안에 넣기 | 파일 하나로 끝나고 인터넷이 없어도 보임 | 이미지만큼 파일이 커짐 |
| 인터넷 주소로 올려 두기 | 파일이 작음 | 볼 때 인터넷이 필요하고, 원본이 지워지면 깨짐 |
| 폴더째 압축해서 보내기 | 원본 구조를 유지함 | 받는 사람이 압축을 풀어야 함 |
문서를 한 번 공유하는 용도라면 첫 번째 방법이 가장 편합니다.
이미지를 HTML 안에 넣는 방법
- 문서가 들어 있는 폴더를 통째로 끌어다 놓거나, 첫 화면의 폴더 선택을 누릅니다. .md 파일과 이미지를 함께 골라도 됩니다.
- 이미 문서를 열었다면 작업 화면의 이미지 추가로 빠진 이미지만 넣어도 됩니다.
- 확인할 점에 찾지 못한 이미지가 남아 있지 않은지 봅니다.
이미지를 찾을 때는 경로를 먼저 맞춰 보고, 맞는 경로가 없으면 파일 이름으로 찾습니다. 폴더 구조가 조금 달라도 이름이 같으면 들어갑니다. 다른 폴더에 같은 이름의 이미지가 있으면 엉뚱한 그림이 들어갈 수 있으니 결과를 눈으로 확인하세요.
파일 크기를 줄이는 요령
이미지를 HTML에 넣으면 원본보다 약 3분의 1 정도 더 커집니다. 글자 데이터로 바꾸어 넣기 때문입니다. 작업 화면 위쪽에 현재 파일 크기가 표시되므로 메일 첨부 한도를 넘지 않는지 볼 수 있습니다.
- 스크린샷은 PNG가 선명하지만, 사진은 JPEG나 WebP가 훨씬 작습니다.
- 휴대폰 사진은 대개 화면에 필요한 크기보다 큽니다. 가로 1,600픽셀 정도로 줄이면 대부분 충분합니다.
- 그림이 많은 문서는 인터넷 주소 이미지를 함께 쓰는 것도 방법입니다.
이런 경우도 확인하세요
파일 이름에 띄어쓰기가 있을 때
Markdown 표준에서 경로에 띄어쓰기가 있으면 이미지로 인식되지 않습니다. 처럼 꺾쇠로 감싸거나 실험%20결과.png로 적으세요.
옵시디언 문법
옵시디언의 ![[그림.png]] 형식도 인식합니다. 이미지 파일을 함께 넣으면 똑같이 포함됩니다.
인터넷 주소 이미지가 안 보일 때
일부 사이트는 다른 곳에서 이미지를 불러오는 것을 막습니다. 또 HTML 파일을 열 때 회사 방화벽이 막기도 합니다. 중요한 그림은 파일로 받아 함께 넣는 편이 안전합니다.
이미지 내용의 보안
넣은 이미지는 서버로 올라가지 않지만, 결과 HTML에는 그대로 포함됩니다. 공유하기 전에 스크린샷에 개인정보가 보이지 않는지, 잘라 낸 부분이 맞는지 확인하세요.