수고스럽지만 필요한 이미지 작업
2023년, 블로그를 다시 시작하다 보니 어느새 포스팅 다듬기가 취미 생활이 되었습니다. 옛날 포스팅도 다시 열어서 글을 고쳐 쓰거나 이미지를 수정하곤 합니다.
이미지 최적화는 검색 엔진 최적화(SEO)와 웹 페이지 성능 개선을 위해 필수적인 작업입니다. 이를 위해 이미지 용량을 줄이고, 이미지의 가로세로 비율을 조정하며, 대체 텍스트를 추가하는 등의 작업이 필요합니다.
여행 포스팅과 같이 이미지가 많이 들어가는 경우 자연스럽게 최적화가 필요해집니다. 찍은 사진을 보정만 해서 올리다 보면 용량이 커서 페이지로딩이 오래 걸릴 수 있습니다. 귀찮아서 마구 올릴 수도 있지만 조금이나마 SEO를 최적화하여 검색이 잘되도록 만들고 성능을 개선해서 중간에 이탈하는 독자를 줄일 수 있는 효과를 볼 수 있습니다.
이미지 용량 줄이기
이미지의 용량은 웹 페이지의 로딩 속도에 큰 영향을 미칩니다. 용량을 줄이는 방법은 이미지 크기를 줄이거나 화질을 낮추거나 파일 형식을 바꾸는 방법이 있습니다. 이미지 용량을 줄이면서 용량 대비 화질을 높이는 다양한 방법이 있지만 티스토리에서 할 수 있는 가장 간단한 방법은 티스토리 에디터 👉 이미지 편집에서 사이즈를 줄이는 것입니다.
아이폰으로 찍은 사진을 그대로 올리다 보면 해상도가 3000px이 넘어가는데 저는 900px로 줄여줍니다. 제 블로그의 본문 가로폭은 728px이라서 728px 이상의 이미지면 이미지를 늘려서 화질이 깨지는 현상 없이 볼 수 있습니다.
다만 모든 이미지에 한 땀 한 땀 클릭을 해야 해서 번거롭긴 합니다. 티스토리에 일괄 편집 기능이 있긴 한데 한 번에 이미지 사이즈를 줄였더니 몇몇 사진은 원치 않는 이미지 크롭이 되어서 다시 올려야 했던 적도 있네요.
Webp 파일 형식을 사용하면 JPG보다 용량 대비 고화질을 지원하기에 좋은 파일 형식이고 티스토리도 잘 지원합니다. 그런데 이걸 위해서는 별도의 파일 전환 툴을 이용해야 해서 손이 많이 가게 되어 사용하진 않고 있습니다.
포스팅을 할 때 사진을 극적으로 줄이는 완벽한 방법! WebP (단순 용량 압축 X )
오늘은 티스토리나 웹사이트에 포스팅을 작성할 때 사진을 많이 사용하게 되는데, 게시글의 속도가 느려지며 구글 SEO(검색 엔진 최적화) 적으로 굉장한 마이너스를 받게 되며 구글 상단 노출의
seons-dev.tistory.com
워드프레스의 경우 Imagify라는 플러그인이 있어서 업로드한 이미지 파일을 자동으로 Webp로 전환해 주고 용량을 줄여줍니다. 티스토리에는 그런 플러그인이 없어서 아쉽긴 한데요. 가로폭 900px 이하의 JPG 파일도 용량이 많아봐야 2MB를 넘을 일이 없으니 이 정도 최적화만으로도 충분하다고 보고 있습니다.
이미지의 가로세로 비율은 가로폭이 긴 것을 사용하기
포스팅에 사용되는 이미지의 비율은 가로폭을 고려하여 결정하는 것이 좋습니다. 스마트폰을 세로로 두고 찍은 이미지를 포스팅에 그대로 올릴 경우 스크롤을 많이 차지하기에 효율이 좋지 못합니다. 랜드스케이프 비율의 이미지를 많이 사용하거나 티스토리나 네이버 등의 블로그 에디터는 여러 장의 이미지를 묶어서 올리는 게 가능하므로 2개 이상을 묶어서 올려주는 게 좋습니다.
옛날 포스팅에서는 인스타그램 필터에 빠져서 정방형 비율로 인스타 필터를 먹인 후 사진을 올렸었습니다. 당시엔 인스타 필터가 감성이 있다고 생각했는데 다시 돌아보니 화질도 떨어지고 데스크탑 환경에서는 비율이 좋지 않아서 포스팅용으로는 아쉬운 사진으로 느껴지네요. 필터는 티스토리 에디터에서 지원하는 것만으로도 충분해서 이것만으로 간단하게 적용하여 쓰고 있습니다.
이미지에 대체 택스트 삽입하기
이미지에 대체 텍스트를 추가하는 것은 검색 엔진 최적화(SEO)에 도움을 줍니다. 검색 엔진은 이미지를 인식하지 못하므로 대체 텍스트를 통해 이미지의 내용을 이해할 수 있습니다. 또한 시각 장애인과 같이 이미지를 인식하지 못하는 사용자들에게도 이미지의 내용을 전달할 수 있습니다. 대체 텍스트는 이미지의 alt 속성에 추가할 수 있습니다.
다만 사용한 이미지가 많다면 하나씩 집어넣어야 하는 대체텍스트 작업이 조금 번거롭네요.
적다 보니 너무 당연하거나 귀찮은 일을 설명한 것 같다는 생각이 드는데요. 부분적으로 자동화할 수 있다면 적용해 보겠지만 당분간은 일일이 작업해 보려고 합니다. 더 간단하고 좋은 방법이 있다면 댓글로 소개해주시면 감사하겠습니다.