티스토리 블로그에 사용할 레이지로드 주입기

레이지 로드 주입기

 

alt변환 켜기

자세한 사용법은 아래에 정리해뒀습니다. 처음 사용하시는 분의 경우 주의사항도 읽어보시는 게 좋습니다.

그리고 아직까지 레이지로드가 어떤 개념인지 모르신다면, 제가 쓴 글을 읽어주세요.

 

주입기 사용 설명서

 

 티스토리에서 레이지로드를 사용하려면 번거로운 과정을 거쳐야 합니다.

 그래서 손쉽게 레이지로드를 주입할 수 있도록 도구를 만들어봤습니다.

 

[참고*이 도구는 신에디터/구에디터 모두 지원합니다.*]

 

 방법은 간단합니다.

 글 작성을 완료하신 후에 [**HTML 모드**]로 가신 후에 태그를 모두 복사해옵니다.

 

 그리고 원본 텍스트 입력란에 붙여넣기 해주세요.

 그리고 레이지로드 주입을 누르면 결과물이 나옵니다.

 결과물복사를 눌러서 복사해주신 후에 그걸 다시 원본 게시물에 입력하시면 됩니다.

 

 움짤로 요약해보겠습니다.

 

 

 간단하지요? 변환할 것을 가져와서, 붙여넣고, 결과물을 가져가서, 다시 원래 자리로 돌려놓으면 됩니다.

 

주입기의 부가기능

 

 주입기에는 2가지 부가기능이 있습니다.

 

• 파일이름을 자동으로 ALT태그로 옮겨주기 (접근성/SEO 향상)
• 반응형 이미지 (srcset) 설정.

 

 차근차근 살펴보자면 파일 이름을 alt태그로 옮겨주기 때문에 이미지를 저장하실 때 그 이미지에 맞는 제목으로 저장하시는 게 좋습니다.

 예를 들어 오리 사진을 넣으신다면, 파일 이름을 오리 혹은 duck으로 저장하시는 게 좋습니다.

 

 그리고 srcset 설정의 경우, 화면 넓이에 따라 다른 모습으로 보여주는 겁니다.

 예를 들어 1280px짜리 사진이 있습니다.

 

 

 하지만 태블릿이 아닌 모바일 화면에선 화면 넓이의 한계때문에 작게 축소할 수 밖에 없습니다.

 그렇기 때문에 아예 가져올 때부터 화면에 맞는, 작은 사진을 가져오는 겁니다.

 

 주의사항

 

 당연한 이야기지만 레이지 로드가 적용되어 있어야 합니다. 티스토리 블로그에 lazyload 기능이 없다면 이미지가 표시되지 않습니다.

 

 그리고 적용하고 나면 에디터내에선 이미지가 표시되지 않습니다. 

 그렇기 때문에 번거로움을 피하시려면 글을 모두 작성하신 후에 주입기를 사용하시는 게 좋습니다.

 

 그 외 고쳐야할 부분이 있다면 댓글로 남겨주시면 됩니다.

 

2020.10.14 패치내역:

다음/카카오 고객센터에서 이미지를 noscript 태그를 쓰는건 검색누락의 위험이 있다고 답변을 해줬습니다.

따라서 noscript는 마크업에서 제외하는 패치를 했습니다.

 

 2020.9.29 패치내역:

 

 모바일에서 이미지가 이상하게 줄어드는 현상을 해결했습니다.

 다만, 티스토리에서 제공하는 이미지 리사이즈 기능의 문제 때문이라 제가 할 수 있는 건 CSS 트릭 뿐입니다.

 이 도구를 사용하실 분은, CSS에 다음과 같이 붙여넣어주세요.

 

@media (max-width:768px){
	.tt_article_useless_p_margin figure img {
		width:100%;
		height:auto;
	}	
.tt_article_useless_p_margin figure{
		width:100%;
	}	
}