티스토리 이미지가 안 보이는 이유

티스토리에서 이미지를 넣었는데 화면에 안 보이거나, HTML img 태그가 정상적으로 출력되지 않는 경우가 생각보다 자주 발생합니다. 특히 티스토리 HTML 모드를 처음 사용하는 분들은 이미지 주소 구조나 SEO 설정 때문에 어려움을 겪는 경우가 많습니다.

실제로 티스토리 이미지 SEO는 단순히 사진만 올리는 것이 아니라 alt 태그, 이미지 최적화, HTML 구조까지 함께 신경 써야 검색 노출에 도움이 됩니다. 이번 글에서는 티스토리에서 이미지를 올바르게 넣는 방법부터 SEO 최적화에 좋은 이미지 HTML 구조까지 한 번에 정리해보겠습니다.

처음 티스토리 HTML 모드를 사용할 때 이미지가 계속 안 떠서 한참 헤맸던 적이 있습니다. 알고 보니 대부분의 경우는 img src 주소가 잘못되었거나 실제 이미지 URL이 없는 경우였습니다. 특히 티스토리는 단순 파일명이 아니라 카카오 CDN 실제 주소가 들어가야 정상적으로 표시됩니다.

티스토리 이미지 SEO 최적화 및 HTML 설정 가이드 썸네일

📷 AI 그림 생성 전후 비교 이미지 넣는 자리

실제 썸네일 업로드 후 이미지 주소(src)만 교체해서 사용하세요.

📌 목차

• 티스토리 이미지가 안 보이는 이유
• 티스토리에서 올바르게 이미지 넣는 방법
• 이미지 자리만 표시하는 방법
• SEO 최적화 이미지 HTML 구조
• 티스토리 이미지 SEO 팁
• AI 그림 생성 전후 비교 예시
• 자주 묻는 질문 FAQ

티스토리 이미지가 안 보이는 이유

티스토리에서 이미지를 넣었는데 화면에 표시되지 않는 가장 큰 이유는 <img src=""> 안에 실제 이미지 주소가 없기 때문입니다.

예를 들어 아래처럼 단순 파일명만 입력하면 실제 이미지가 서버에 업로드되어 있지 않는 이상 정상적으로 표시되지 않습니다.

<img src="image.jpg">

티스토리는 이미지를 업로드하면 카카오 CDN 주소를 자동으로 생성합니다. 즉, 아래처럼 실제 URL이 들어가야 이미지가 보입니다.

<img src="https://blog.kakaocdn.net/xxxxx.jpg">

이 구조를 이해하면 티스토리 HTML 모드에서 이미지 오류를 대부분 해결할 수 있습니다.

티스토리에서 올바르게 이미지 넣는 방법

가장 안전한 방법은 티스토리 에디터에서 직접 이미지를 업로드하는 것입니다.

1. 티스토리 에디터에서 사진 업로드
2. 본문에 이미지 삽입
3. HTML 모드에서 실제 주소 확인

이렇게 하면 티스토리가 자동으로 실제 이미지 URL을 생성해주기 때문에 초보자도 오류 없이 쉽게 사용할 수 있습니다.

이미지 자리만 표시하는 방법

아직 이미지를 준비하지 않았거나, 나중에 이미지를 추가할 예정이라면 자리 표시 박스를 활용할 수 있습니다.

📷 AI 그림 생성 전후 비교 이미지 넣는 자리

이 방식은 글 구조를 먼저 완성한 뒤 나중에 이미지를 추가할 때 매우 편리합니다.

SEO 최적화 이미지 HTML 구조

검색엔진 최적화(SEO)를 고려한다면 단순한 img 태그보다 <figure>와 <figcaption>을 함께 사용하는 것이 좋습니다.

<figure style="margin:30px 0; text-align:center;">

    <img src="실제이미지주소.jpg"
    alt="AI 그림 생성 과정 예시"
    title="AI 이미지 제작 과정"
    style="width:100%; border-radius:12px;">

    <figcaption style="font-size:14px; color:#777; margin-top:8px;">
        AI 그림 생성 후 보정 전후 비교 예시
    </figcaption>

</figure>

특히 alt 태그는 SEO에서 매우 중요합니다. 검색엔진은 이미지를 직접 이해하지 못하기 때문에 alt 설명을 통해 이미지 내용을 파악합니다.

티스토리 이미지 SEO 팁

• 이미지 파일명 최적화
  image1.jpg 대신 tistory-image-seo-guide.jpg처럼 의미 있는 파일명을 사용하는 것이 좋습니다.
• alt 태그 작성
  이미지가 무엇인지 자연스럽게 설명하는 문장을 넣는 것이 좋습니다.
• WebP 이미지 사용
  최근에는 JPG보다 WebP 형식이 속도와 용량 측면에서 유리한 경우가 많습니다.
• figcaption 활용
  이미지 설명 문구를 추가하면 검색엔진과 사용자 모두 내용을 이해하기 쉬워집니다.
• 이미지 용량 최적화
  이미지 크기가 너무 크면 페이지 속도가 느려질 수 있기 때문에 업로드 전에 압축하는 것이 좋습니다.

AI 그림 생성 전후 비교 예시

아래처럼 생성 직후 이미지와 보정 후 이미지를 비교하면 AI 이미지 퀄리티 차이를 직관적으로 보여줄 수 있습니다. 특히 이런 비교형 이미지는 체류시간 증가에도 도움이 되는 편입니다.

AI 그림 생성 후 색감과 디테일 보정을 적용한 비교 예시

📌 핵심 요약

• 티스토리는 실제 이미지 주소가 있어야 정상 출력됨
• 에디터 업로드 후 HTML 모드 확인이 가장 안전함
• SEO를 위해 alt와 figcaption 작성 권장
• 이미지 파일명도 검색 최적화에 영향 있음
• WebP 이미지 사용 시 속도 개선 가능

티스토리 이미지 HTML FAQ

Q1. 티스토리에서 이미지가 안 보이는 이유는 뭔가요?

대부분 실제 이미지 주소가 없거나, 잘못된 src 경로를 사용한 경우입니다.

Q2. alt 태그는 꼭 써야 하나요?

네. 검색엔진 최적화와 접근성을 위해 작성하는 것이 좋습니다.

Q3. WebP 이미지가 좋은 이유는 무엇인가요?

용량이 작고 로딩 속도가 빨라 SEO와 사용자 경험 측면에서 유리합니다.

Q4. 티스토리 HTML 모드는 어디서 보나요?

에디터 오른쪽 상단 HTML 모드 버튼에서 확인 가능합니다.

Q5. 이미지 파일명도 SEO에 영향이 있나요?

네. 의미 있는 파일명을 사용하는 것이 검색 최적화에 도움이 됩니다.

함께 보면 좋은 글

티스토리 HTML 꾸미기 초보자 가이드

티스토리 SEO 최적화 설정 방법

블로그 이미지 용량 줄이는 방법

티스토리에서는 단순히 이미지를 넣는 것보다 이미지 HTML 구조와 alt 태그까지 신경 쓰는 것이 중요합니다. 작은 차이처럼 보여도 검색 노출과 사용자 경험에 영향을 줄 수 있기 때문입니다. 특히 이미지 SEO를 제대로 설정하면 구글 이미지 검색 유입에도 도움이 될 수 있습니다.