티스토리ㅣ이미지 최적화 글쓰기 방법
이미지 최적화라는 주제로 SEO결과를 바탕으로 만든 영상입니다.
우선 페이지 로딩속도를 중요시 해야하기 때문에 이미지 용량을 줄이는 내용이 있구요
두번째로는 SEO에서 체크되는 이미지의 ALT속성에 관한 내용입니다.
두가지 내용을 몰라서 못하는 분들이 많으시기 때문에 이 영상에서 다뤄보았습니다.
영상을 촬영하면서 소개했던 사진이미지이구요
영상을 촬영할때 만든 글입니다.
위의 이미지는 용량을 줄여서 올린 웹페이지용 보기 이미지라고 보시면 되구요
아래의 원본 파일은 스마트폰으로 촬영한 1MB 용량의 이미지 입니다.
이렇게 용량이 큰 이미지를 로딩을 빠르게 보여주고 싶으실때는
작은용량의 이미지로 사진을 공개하시고
다운로드용 고용량 이미지를 올리시면 됩니다.
이미지 사이즈와 용량을 조절하라 - 알씨 프로그램 이용
사이즈는 용도에 맞게 가로사이즈 최대 1920 최소 800 픽셀로 조정
알씨로 이미지 크기를 바꿔 저장해줄수 있는데요
영상에서 설명한 부분중 사이즈를 어떻게 지정해야 할까에 대한 부분에 대한 설명을 드리면
가로사이즈 기준으로 변환되도록 꼭 설정체크한후 하셔야 합니다.
우선 일반 모니터의 사이즈는 가로 1920픽셀입니다.
그리고 우리가 글을 작성하는 페이지는 800픽셀 전후 쯤된는 사이즈로 대부분의 skin은 노출됩니다.
꼭 몇으로 정하라는 건 아닙니다.
많이 사용하는 사이즈를 말씀드려보겠습니다.
가로사이즈 800px, 1024px, 1280px, 1920px
사진에 맞춰 세로는 자동조정되겠죠?
이미지를 이용자들이 누르는 경우 더 크게 보이게 넣고 싶다면
최대 1920사이즈까지만 하시면 충분하게 모니터를 꽉채워 볼수 있습니다.
하지만 그만큼 용량이 커지게 되겠죠?
용량은 가급적 두자리수에 가까운 용량이 좋으나 대부분 800px이상을 이용하면
100KB이상의 용량이 나올수 밖에 없습니다.
화면의 색상이 다양하던지 화질에따라 800px로 줄여도 300KB가 넘을 겁니다.
이런경우 화질을 다운시킨다든지 여러방법이 있겠지만
사진의 장수가 많지 않고 한두장이라면 그냥 올리셔도
충분한 사이즈 입니다.
이론적인 부분과 현실적인 부분은 적당히 가려서 해야겠죠?
용량이 MB로 넘어가는 이미지는 위에 있는 파일업로드 예시처럼
별도로 올려주시면 페이지 로딩시 속도가 빨라지고
디스플레이용 저용량 보여주기 이미지를 한장 올리고 아래에 다운로드를 같이 두시면(위의 예시처럼)
사용자들이 원치않는 고용량 이미지를 받느라 기다리지 않아고
필요한 사람만 다운받아서 볼수 있을겁니다.
ALT속성 추가방법
"이미지 파일명" alt="넣고 싶은 내용"
이런 구조가 되는 건데요
html모드에서 아래의 예시로 설명을 드리겠습니다.
"변환파일-원본.jpg" 라고 되어 있는 부분은 직접 올리신 파일이름입니다.
파일 이름을 찾으신후 " 뒤에서 한칸을 띄우고
alt="노트설명" 이라고 입력한후 한칸띄우줍니다.
여기서 노트설명이라는 내용은 내가 글에대한 간단한 단어쯤으로 표시해준다고 생각하고 넣어주시고
주의사항은 작성중인 글의 이미지 파일이름이나 다른 이미지의 ALT속성의 내용과 겹치지 않게
생성해 주셔야 합니다.
가급적이면 블로그 내에서도 안겹치는게 좋겠죠?
각각 고유하게 ALT속성값을 가지도록 구성방법을 만들어 주시면 좋습니다.
예를들어
글의 생성 글주소 번호가 있는데요
juwonking.tistory.com/376 글을 작성중이면
ALT="노트설명3761"
이렇게해서 376번째글의 노트설명이고 1번이미지이다
이렇게하고
두번째 이미지에는 ALT="노트설명3762"
이렇게 넣어서 마지막숫자만 바꿔서 2번째 이미지 이다
이런식의 나름 체계화를 가지면 좀더 ALT속성을 넣기가 쉽겠죠?
ALT는 대문자 소문자 아무것으로나 쓰셔도 됩니다.
ALT속성은 글쓰기 모드가 구버전에서는 쉽게 할수 있는데요
아래 링크 글에서 이 부분을 다뤄볼게요
https://juwonking.tistory.com/380
이미지 ALT속성ㅣ티스토리 구버전 글쓰기에서 넣는 방법ㅣ이미지 최적화
이미지 ALT속성ㅣ구버전 글쓰기 모드에서 넣는 방법 이미지를 글에 넣는 과정에서 SEO에 적합한 노출방식을 만들어 주시면 검색엔진에서 이미지 또한 인식을 하게 됩니다. 즉, SEO에서 이미지를 읽을 수 있게 올..
juwonking.tistory.com
제가 작성한 글이 도움이 되셨다면 ♥공감을 꾹 눌러주세요
도움이 필요한 내용이 있으시다면 댓글도 남겨주세요^^
'티스토리와 유투브' 카테고리의 다른 글
| 이미지 ALT 속성 | 티스토리 구버전 글쓰기에서 넣는 방법 | 이미지 최적화 | 티스토리 초보 (0) | 2020.03.25 |
|---|---|
| SEO 분석기 | 빙 bing 웹 마스터 도구 | 검색 엔진 최적화 체크 | 티스토리 초보 (4) | 2020.03.25 |
| 빙 bing 검색 | 조회수 올리기 | Bing 웹마스터도구 검색 등록하기 (0) | 2020.03.25 |
| [ 구글 서치콘솔 / 네이버 웹마스터도구 ] 글 수집보류 빠른 해결방법 (meta robots all) (2) | 2020.03.24 |
| [메타태그] 3가지 사용 방법 - 티스토리 초보 ( Meta tag ) (2) | 2020.03.24 |