SEO와 속도개선을 위한 이미지 최적화 방법 5가지

2022년 10월 13일
위디지털

SEO와 속도개선을 위한 이미지 최적화 방법 5가지

SEO와 속도개선을 위한 이미지 최적화 개요

많은 분들이 구글과 네이버 검색엔진의 상위 노출을 위해 검색엔진최적화(Search Engine Optimization)에 유리한 워드프레스(wordpress)로 홈페이지를 제작합니다. 그러나 홈페이지 디자인 작업이 포토샵이나 일러스트 등에서 작업한 고용량 이미지를 파일포맷이나 이미지 용량, 해상도를 고려하지 않고 사용하여 SEO에 부정적인 영향을 주는 사례가 종종 있습니다.

홈페이지 디자인을 고려해 특정 페이지에 키비주얼(Key visual)이 되는 이미지 1~2컷 정도 고용량 이미지를 사용하는 것은 불가피할 수 있습니다. 그러나 1개 페이지에 1M 이상 이미지를 수십 개 사용한다면 페이지 접속속도가 너무 느려져 SEO에 부정적인 영향을 주게 됩니다.

워드프레스 홈페이지를 블로그 운영을 위해 사용하는 경우 장기간 많은 양의 고용량 이미지를 사용하게 되면 웹호스팅의 저장 용량이 증가해 호스팅 운영시 용량으로 인한 추가비용이 발생할 수 있습니다.

참고 : 기업 블로그 운영의 중요성과 성공사례

SEO를 위해 워드프레스로 홈페이지를 제작하지만 이미지 속성을 표시해주는 대체텍스트(alt text)를 전혀 사용하지 않는 경우도 있습니다. 대체 텍스트(Alt Text)란 "alternative text"의 줄임말로 인터넷 접속이 느리거나 오류로 이미지를 불러오지 못하는 경우 해당 이미지에 대체하여 설명해주는 텍스트입니다.

Alt Text는 이미지의 의미를 시각장애인에게 전달하거나 음성인식이 해당 이미지를 인식하도록 하는 등 웹접근성 개선에 활용됩니다. 특히 Alt Text는 웹문서의 SEO 키워드와의 연관성을 평가하는 데 도움이 되며 네이버나 구글 등 검색엔진에서 이미지 검색을 많이 하는데요, 이미지 검색 시 키워드로도 사용됩니다.

홈페이지 검색엔진최적화 SEO

참조 : SEO, 이미지 Alt Text(대체 텍스트)를 최적화해야 하는 이유

홈페이지 속도 개선과 이미지 최적화를 위한 5가지 TIP

1. 이미지 포맷

가끔 워드프레스 홈페이지 유지보수를 지원하다 보면 배경 상관없이 1M 이상의 PNG(Graphic Interchange Format) 이미지를 사용하는 경우가 있습니다. JPG(Joint Photographic Experts Group)와 PNG이미지 모두 픽셀로 구성된 래스터(Raster) 이미지이며 무손실(Lossless) 포맷이지만 PNG는 투명도 표현을 위해 JPG비해 용량이 큰 편입니다.

PNG이미지의 경우 고화질의 배경이 없는 이미지에 사용하는 게 좋습니다. 주로 로고나 배경이 없는 인물 등에 사용 시 적합한 포맷입니다.

최근 웹에서 사용되는 SVG(Scalable Vector Graphics) 포맷의 이미지는 이미지 크기를 조정해도 해상도가 깨지지 않는 벡터 방식의 이미지 포맷입니다. 주로 이미지 크기를 조정해서 해상도에 영향을 받지 않아야 하는 도형이나 아이콘, 로고 등을 제작할 때 사용합니다.

참조 : png jpg 차이, 이미지 파일 형식에 숨겨진 비밀

2. 이미지 파일 용량

이미지의 파일 용량은 방문자가 홈페이지나 특정 페이지를 방문했을 때 페이지가 로딩되는 속도에 영향을 미칩니다. 만약 1개 페이지 내 1MB 이미지가 10개라면 10MB가 모두 다운로드 되어야 페이지가 로딩되겠죠.

“기가 인터넷망이 잘 구축된 국내에서 10MB 쯤이야”라고 하시는 분들도 계시겠지만 워드프레스는 기본적으로 반응형이라 WiFi가 아닌 일반 통신망으로 접속하는 모바일 접속자도 고려해야 합니다. 인터넷속도는 느린 해외 방문자들이 접속하는 홈페이지라면 반드시 이미지최적화를 진행해야 합니다.

홈페이지 방문시 로딩 속도가 2초를 넘어가면 이후 1초마다 방문자의 20%가 이탈한다는 연구결과가 있습니다. 통상적으로 홈페이지 로딩속도가 3초가 넘어간다면 대부분의 방문자가 이탈할 수 있다는 사실을 반드시 기억해야 합니다.

참조 : “웹사이트 접속자, 로딩시간 3초 넘으면 그냥 나간다”

현재 홈페이지 접속 속도는 어떤가요? 구글이 제공하는 페이지 스피드 인사이트(PageSpeed Insights)GT매트릭스(GTmetrix) 같은 속도 체크 사이트를 현재 사용된 이미지들이 로딩속도에 얼마나 영향을 미치고 있는지 확인해보실 수 있습니다.

3. 이미지 픽셀(Pixel)과 해상도

이미지 픽셀(Pixel)는 화면에 이미지를 구성하는 픽셀의 수를 의미합니다. 픽셀수(예: 1920*1080px)가 높을수록 해상도가 올라가고 이미지나 사진이 선명해집니다. 우리가 사용하는 일반적인 모니터의 전체화면(Full Screen)의 해상도는 1920x1080픽셀을 가장 많이 사용합니다. 만약 화면 전체를 차지하는 배경이라면 폭을 1920픽셀로, 화면의 절반만 차지하는 이미지라면 800픽셀 정도가 적당합니다.

애플 제품은 해상도가 1920x1080픽셀보다 높은 레티나 디스플레이(Retina Display)사용합니다. 레티나(Retina)는 특정한 시야거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도로 최고의 해상도를 의미하는데 아이맥 5K 디스플레이 27인치의 경우 5,120 x 2,880픽셀을 사용합니다. 그러나 일반적인 웹사이트 접속시 기본 해상도는 1,440x900픽셀에 맞춰져 있습니다. 레티나 디스플레이에 대응한다고 해도 너무 높은 해상도를 사용할 필요는 없습니다.

  • 전체화면 1920 x 1080px
  • 1/2 화면 800 x 800px
  • 1/3 화면 400 x 400px

참조 : 5 Image SEO Optimization Tips [Infographic]

포토샵이나 일러스트에서 이미지를 저장할 때 해상도(Resolution)는 1인치당 가로, 세로를 구성하는 점의 수로 DPI(Dots per Inch) 단위를 사용하며 표시합니다. 주로 모니터 디스플레이의 밀도나 인쇄물의 밀도를 의미하는 데 밀도가 높을수록 이미지는 선명해지지만 파일 용량이 커집니다. 일반적인 모니터의 경우 DPI가 아무리 높아도 72DPI 수준으로 이미지가 표시되기 때문 72DPI에 맞춰 저장한 후 사용해야 파일 용량을 최소화할 수 있습니다.

4. 이미지 최적화(용량 압축)

Tinypng 홈페이지

이미지 최적화는 해상도나 품질을 낮춰 파일용량을 축소하는 방법과는 다릅니다. 보통 이미지 분석 기술이나 AI 기술을 활용해 유사한 색상을 결합하여 색상수를 줄이고, 불필요한 코드를 제거하여 이미지 품질 저하 없이 이미지를 최적화하는 기술입니다.

이미지 최적화 서비스를 제공하는 워드프레스 플러그인은 WP Smush, EWWW Image Optimizer, TinyPNG, Imagify, ImageRecycle 등이 있습니다.

WP Smush는 JPG, GIF 및 PNG 이미지 압축을 지원합니다. 이미지 파일 용량은 최대 1MB 크기의 파일을 지원합니다. 플러그인을 통해 기존 업로드된 이미지를 압축할 수 있지만 1회 50개 이미지까지입니다. 50개가 넘어가면 Bulk Smush라는 압축버튼을 다시 눌러줘야 하는 불편함이 있긴 하지만 사이트 내 이미지가 많지 않은 경우 무료버전으로 충분히 사용 가능합니다.

EWWW Image Optimizer는 홈페이지에 이미지를 업로드 할 때 자동으로 압축해줍니다. 부가기능은 많지 않지만 무료로 사용하는 데 불편함은 없습니다.

TinyPNG는 JPG, PNG, WEBP 포맷의 이미지 압축을 지원하는 플러그인입니다. 무료 회원가입 후 API키를 발급받으면 한 달에 100개 이미지를 압축할 수 있습니다.

플러그인 설치 없이도 웹에 이미지를 업로드하면 압축된 이미지를 다운받을 수 있는 사이트를 공개하고 있습니다. https://tinypng.com/

Imagify도 품질 저하 없이 이미지 파일을 압축해주는 플러그인입니다. 무료버전을 사용할 경우 매달 25MB의 이미지 압축을 할 수 있습니다.

ImageRecycle은 JPG, GIF 및 PNG 압축 외에도 PDF 파일 압축도 가능합니다. 무료 평가판 버전으로 15일 동안 100MB의 이미지를 압축할 수 있습니다. 대부분의 홈페이지들이 100MB 이상 이미지를 사용하는 경우가 드물기 때문에 무료로 전체 이미지를 압축할 수 있다고 보시면 됩니다.

5. 대체 텍스트(Alt Text)

SEO를 위해 워드프레스로 홈페이지를 제작하지만 이미지 속성을 표시해주는 대체텍스트(alt text)를 전혀 사용하지 않는 경우도 있습니다. 대체 텍스트(Alt Text)란 "alternative text"의 줄임말로 인터넷 접속이 느리거나 오류로 이미지를 불러오지 못하는 경우 해당 이미지에 대체하여 설명해주는 텍스트입니다.

Alt Text는 구글, 네이버 등 검색엔진이 이미지 내용을 식별하는 데 도움을 주며, 시각장애인에게 이미지 내용을 식별할 수 있도록 하는 등 웹접근성 개선에도 사용됩니다. 최근 블로그나 기사 내용을 음성으로 읽어주는 TTS(Text-to-Speech)라는 AI기술을 많이 사용하는 데 AI가 사진을 식별하는 데 도움을 주기도 합니다.

그러나 모든 이미지에 대체 텍스트를 사용할 필요는 없습니다. 실제 제품이미지나 내용을 전달하기 위한 이미지가 아닌 배경이나 장식용으로 사용하는 이미지의 경우 대체 텍스트를 사용하지 않는 게 좋습니다. 특히 이미지 대체 텍스트에 무분별하게 키워드를 남용한다면 검색엔진은 해당 내용을 스팸성 게시물로 판단할 수 있습니다.

대체 텍스트를 작성할 때는 연관 키워드를 포함시켜 내용이 너무 길어지지 않도록 5~7개 단어를 조합하는 게 좋습니다. 이미지나 사진 같은 반복되는 단어를 모든 이미지 대체 텍스트에 중복 사용하는 것도 바람직하지 않습니다.

참조 : SEO, 이미지 Alt Text(대체 텍스트)를 최적화해야 하는 이유

위디지털 로고
위디지털 | 경기도 고양시 덕양구 관산동 219-2
TEL : 02-6952-2265 | help@wedigital.co.kr 
사업자등록번호 534-05-01924 | 통신판매업 2021-고양덕양구-1976
개인정보처리방침
Copyright © wedigital
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram