오늘은 티스토리 블로그 구글 SEO 최적화를 위한 이미지 올리는 방법에 대해 간단히 소개하면서 포토스케이프X를 사용해 이미지 용량을 줄이고 속도를 개선할 수 있는 형식으로 이미지를 변환해 블로그에 올리는 방법에 대해 알아보겠습니다.
1. 구글 SEO 검색엔진 최적화를 위한 이미지 올리는 법
사실 구글 검색엔진에 최적화하기 위한 이미지 올리는 방법에 대해서는 너무나 많이 나와 있고 티스토리에서도 쉽게 올릴 수 있도록 기능을 제공하고 있습니다. 가장 기초적인 방법으로 Alt 태그 추가를 통해 대체 텍스트를 넣어주고 이미지 캡션을 추가해 이미지에 대한 부가적인 정보를 전달합니다. 마지막으로 적절한 사진의 크기와 용량을 사용하는 것이 중요합니다.
2. Alt태그와 캡션 추가 방법
Alt 태그와 캡션 추가는 티스토리에서 기본적으로 제공하는 기능을 통해 간단히 넣어줄 수 있습니다.
아래 첫 번째 캡처화면을 보면 이미지 삽입을 통해 티스토리에서 삽입 후 해당 이미지를 클릭하면 이미지 중앙 상단에 이미지에 대한 설정값을 변경해 줄 수 있는 메뉴가 노출됩니다.
이중 가장 오른쪽 설정 모양의 아이콘을 클릭하면 대체 텍스트를 입력할 수 있는 팝업이 노출되고
그곳에 대체 텍스트를 써주면 됩니다.
또한 이미지 가장 하단에는 “이미지를 설명해 보세요”라는 문구가 있고 해당 문구를 클릭하면 마찬가지로 캡션 텍스트를 넣어줄 수 있는 커서가 활성화됩니다.
이제 두 개 모두에 “조니워커 이미지” 라는 텍스트를 넣고 HTML코드로 변환해주면,
alt와 caption에 “조니워커 이미지” 라는 텍스트가 들어간 것을 볼 수 있습니다.
3. 페이지 로딩 속도 확인 방법과 로딩속도를 저하시키는 요인인 이미지 용량과 포맷
이미지의 크기 및 용량을 줄이는 방법을 설명하기 전에 간단히 내가 올린 블로그의 로딩 속도를 확인하는 방법에 대해 알아보겠습니다. 정말 간단하게 확인할 수 있으며, 아래 사이트에 접속한 후 확인하고자 하는 페이지의 URL을 넣어주면 됩니다. 참고로 PageSpeed Insights는 구글에서 웹사이트 성능 최적화를 위해 설계한 도구입니다.
PageSpeed Insights
올바른 URL을 입력하세요.
pagespeed.web.dev
이렇게 URL 입력을 통해 페이지를 분석하고 나면 휴대전화와 데스크톱에서 어떠한 성능을 보이는지와 성능을 저하시키는 요인에는 무엇이 있고 어떻게 해결할 수 있는지 간단히 나오게 됩니다.
이렇게 페이지 로딩 속도를 확인하고 나면 무심코 올린 사진에 의해 페이지 로딩 속도가
느려지고 있다는 것을 알 수 있습니다. 보통 아래와 같이 두 개의 원인이 발견됩니다.
첫 번째는 이미지의 크기입니다.
이미지 크기의 경우 가이드를 읽어봐도 정확한 정답은 없지만 가로 기준 750~800 픽셀 정도가 적당하다고 하며, 용량은 100kb 미만으로 사용하는 것이 좋다는 의견이 많이 있으니 따라서하면 좋을 것 같습니다.
두 번째는 차세대 형식을 사용한 이미지를 말하며, 이는 우리가 흔히 알고 있는 png 혹은 jepg 파일 형식이 아닌 webp 파일 형식을 사용하라고 권고하고 있습니다.
그렇다면 이미지 크기와 형식은 어떻게 변경해 줄까요?
4. 포토스케이프 X를 통한 이미지 크기 줄이기와 형식 변경하기
저는 무료 이미지 편집 프로그램인 포토스케이프 X를 통해 간편하게 이미지 크기를 줄이고 형식을 변경해주고 있습니다.
포토스케이프 X는 아래 무료 사이트를 통해 간단히 설치할 수 있습니다.
PhotoScape X for Mac and Windows 10
History There is a mouse issue in macOS ( Mojave 10.14.0 ~ 10.14.3 and Catalina 10.15 ). A fix for this will be available shortly. --> * Version 4.2.1 (Jan 21, 2022) * Version 4.2 (Jan 16, 2022) (PhotoScape X 4.2 for Windows 10 will be released very soon)
x.photoscape.org
설치 후 실행시키면 아래와 같이 첫 화면이 뜨고 편집하고자 하는 파일을 끌어 놓거나,
오른쪽 폴더 경로를 통해 선택하거나, 열기버튼을 통해 이미지를 선택해 주면 됩니다.
이미지를 선택하고 나면 우측에 아래와 같이 해당 이미지에 대한 크기 조절 및 자르기 등
여러 가지 작업을 할 수 있는 메뉴가 나타납니다.
많은 기능들이 있지만 대부분 크기 조절과 자르기만 사용해서 이미지 크기를 조정하고 있습니다.
우선 자르기를 통해 이미지 중 사용하고자 하는 부분만 드래그 후 잘라낸 후,
크기 조절 버튼을 누르면 오른쪽 메뉴가 아래와 같이 변경됩니다.
해당 화면에서 가로폭을 800픽셀 이하로 낮춰주면 됩니다.
그렇게 모든 조정이 완료되면 우측 맨 하단에 저장 버튼을 클릭합니다.
저장버튼을 클릭한 후 WEBP 저장 품질 버튼을 누른 후
"다른 이름으로 저장" 버튼을 클릭한 후 파일 형식에 WEBP를 선택해 저장해 주면 끝입니다.
TIP! 여기서 한 가지 유의할 점은 티스토리에 이미지를 삽입할 때 단순히 복사 붙여 넣기를 통해 이미지를 넣게 되면 이미지가 png 형식으로 삽입됩니다. 따라서 반드시 첨부 아이콘을 통해 이미지를 삽입해 주시기 바랍니다.
마무리
오늘은 이렇게 티스토리 블로그에 이미지를 삽입할 때 구글 검색엔진 최적화에 맞게 이미지를 삽입하는 방법을 알아보았습니다. 이번에 말씀드린 내용들은 블로그를 올리면서 경험한 내용을 바탕으로 작성하다 보니 반드시 맞다고 할 순 없지만, 이미지를 삽입하는 데 있어 넣으면 좋은 것은 확실한 요소들이니 꼭 잊지 말고 넣기를 추천드립니다. 또한 별도 프로그램 설치 없이 이미지 크기를 조정하고 형식을 변경할 수 있는 방법은 많지만 앞으로 계속 블로그를 쓰다 보면 이 외에도 유용한 기능이 많은 프로그램이니 꼭 사용해 보시기를 추천드리며, 나중에 조금 더 상세하게 사용방법을 올려보도록 하겠습니다.