티스토리 블로그 이미지 최적화 가이드

1. 이미지 가이드

1.1. 대표 이미지, 썸네일

• width x height = 800px x 400px 이상 권장
• 2:1 비율
• 블러 처리 지양
• 이미지 내 텍스트 가운데 정렬
• JPG 포멧 및 사이즈 최적화 권장
• SNS 공유 모바일, 태블릿 다해상도 등을 고려하여 썸네일 width 고려

1.2. 본문 삽입 이미지

• width x height = 1000px x 600px 이상
• width x height = 1120px x 630px 이상
• width = 1000px ~ 1200px 권장
• 5:3 비율, 16:9 비율

1.3. 전체 화면 이미지

• width x height = 1200px x 800px 이상 권장
• width x height = 1280px x 720px 이상
• 3:2 비율, 16:9 비율

1.4. GIF

• width x height = 800px x 600px 이하
• 사이즈, 용량이 작은 gif 권장

1.5. 배너 / 사이드바 이미지

• width x height = 300px x 250px 고정

1.6. 블로그 프로필 사진

• width x height = 160px x 160px 고정
• 1:1 정사각형

---

2. 최적화 가이드

2.1. Witdth 값 최소 800x 이상

• width 값 1000px ~ 1200px 이상으로 설정하면 좋음
• 대표이미지의 경우 글 목록, 글 상단이미지가 확대되므로 픽셀화 현상이 발생함.

2.2. PNG보다는 JPG 권장

• JPG, JPEG 의 용량이 작으므로 로딩 속도가 빠르므로 일반적인 이미지에서 사용.
• PNG는 배경이 투명한 이미지 삽입 시 적합

2.3. Responsive 대응

• 티스토리에서 다해상도 Responsive 대응을 고려해서 1200px 이상 이미지를 자동 조정한다.
• 이를 고려해서 이미지 사이즈가 작지 않게 사용.

2.4. 이미지 1MB 이하로 최적화

• 로딩이 시간이 증가하면 SEO 불리.