웹사이트에 이미지, GIF, 동영상 등의 미디어를 추가하면 사용자 경험을 크게 개선할 수 있습니다. 하지만 콘텐츠에 미디어를 통합하면 검색 엔진 최적화(SEO)에도 영향을 미칩니다. 몇 가지 전략적인 계획과 최적화를 통해 웹사이트 미디어를 사용하여 SEO를 높일 수 있습니다. 다음 4단계에 따라 사이트의 모든 시각적 요소가 검색 순위에 영향을 주지 않고 도움이 되도록 하세요.
이 글의 핵심 내용
사이트 콘텐츠에 시각적 요소를 추가하면 방문자의 참여를 유도하고 복잡한 주제를 설명할 수 있습니다. 하지만 미디어를 통합하면 기술적 SEO 요소에도 영향을 미칩니다. 다음 단계를 통해 이미지, GIF 또는 동영상의 최적화를 강화하세요:
- 파일 이름 최적화 – 검색 엔진이 이미지를 이해하는 데 도움이 되도록 파일 이름에 키워드를 사용합니다.
- 이미지 압축 – 사이트 속도를 저하시키지 않도록 이미지 파일 크기를 100KB 미만으로 유지합니다. 자동 압축 플러그인을 사용합니다.
- GIF 사용 금지 – 애니메이션 GIF는 가능한 한 작은 동영상 파일로 변환합니다.
- 고품질 미디어 사용 – 품질을 위해 필요한 경우에만 대용량 파일 크기를 허용합니다. 지연 로딩 및 CDN을 통합합니다.
- 기존 미디어 모두 감사 – 현재 사이트에 있는 모든 미디어를 검토하고 필요한 경우 최적화합니다. 그런 다음 최적화를 지속적으로 습관화하세요.
이러한 단계를 통해 사이트 속도 저하 없이 방문자의 참여를 유도하는 SEO 최적화 미디어를 확보할 수 있습니다. 이미지와 동영상은 우수한 사용자 경험을 제공하면서 검색 순위를 향상시킬 수 있습니다.
1단계: 이미지 파일 이름 및 크기 최적화하기
이미지를 사용하면 사용자가 콘텐츠를 빠르게 이해하고 더 많은 관심을 가질 수 있습니다. 하지만 검색 엔진은 실제로 이미지를 볼 수 없습니다. 대신 크롤러는 파일 이름, 대체 텍스트, 페이지 콘텐츠와 같은 문맥적 단서를 통해 사진과 그래픽을 이해해야 합니다.
Google에만 32억 개가 넘는 이미지가 색인화되어 있으므로 시각적 자산을 최적화하는 것은 SEO에 매우 중요합니다. 설명이 포함된 파일 이름과 압축 파일 크기라는 두 가지 주요 이미지 최적화 방법을 살펴보겠습니다.
키워드 중심의 파일 이름 사용
이미지 파일 이름을 지을 때는 가능한 한 설명적인 이름을 사용하세요. DSC0010.jpg 또는 Image.png와 같은 일반적인 이름은 검색 엔진에 유용한 컨텍스트를 제공하지 않습니다.
대신 파일 이름에 관련 키워드를 바로 포함하세요. 예를 들어, 개 산책 팁에 대한 블로그 게시물을 작성하는 경우 이미지 이름을 “개 산책 목줄.jpg” 또는 “두 마리 개 산책.jpg”로 지정할 수 있습니다.
이미지 파일 이름 최적화를 위한 몇 가지 팁
- 키워드가 아닌 1~2개의 기본 키워드를 포함하세요.
- 가독성을 위해 대시 또는 밑줄로 단어를 구분하세요.
- 약어를 사용하지 말고 키워드를 완전히 철자하세요.
- 가장 중요한 키워드를 맨 앞에 배치하세요.
- 이름은 짧고 설명적으로 지으세요.
잠깐 시간을 내어 이미지 파일 이름을 바꾸면 검색 엔진이 콘텐츠를 훨씬 더 쉽게 이해할 수 있습니다.
이미지를 최적의 파일 크기로 압축하기
검색 엔진은 문맥적 단서 외에도 페이지 로드 속도와 같은 기술적 요소를 분석합니다. 이미지는 파일 크기에 따라 로드 시간에 큰 영향을 미칩니다.
이상적인 이미지 파일 크기
일반적인 SEO 가이드라인으로 이미지 파일 크기는 각각 100KB 미만으로 유지하세요. 150kB를 초과하면 로드 시간이 느려지기 시작합니다.
참고로 이미지 유형별 일반적인 파일 크기는 다음과 같습니다:
- JPG 이미지: 60-80kB
- 투명도가 있는 PNG 이미지: 90-120kB
- GIF 이미지: 150-300kB
물론 실제 파일 크기는 이미지 크기와 기타 요인에 따라 달라집니다. 하지만 이미지당 평균 100KB 미만을 목표로 하세요.
품질 저하 없이 이미지 압축하기
사진 편집기에서 이미지 크기를 수동으로 조정하면 화질이 저하되는 경우가 많습니다. 대신 이미지를 최적화하려면 Imagify와 같은 전용 워드프레스 플러그인을 사용하세요.
Imagify는 모든 이미지 파일을 스캔하여 눈에 띄는 품질 저하 없이 압축합니다. 또한 파일 크기를 줄이기 위해 가능한 경우 PNG를 JPG로 변환합니다.
플러그인에는 최대 80%까지 파일 크기를 줄일 수 있는 ‘울트라’ 설정이 있습니다. Imagify 또는 이와 유사한 자동 압축 플러그인을 설치하는 것이 이미지 SEO를 최적화하는 가장 쉬운 방법입니다.
이미지 파일을 압축하면 페이지 로딩 속도와 사이트 방문자 경험을 개선할 수 있습니다. 단, 픽셀이 깨지거나 흐릿한 이미지는 사용자 경험을 저하시키므로 높은 이미지 품질을 유지해야 합니다.
2단계: 큰 GIF를 작은 동영상으로 바꾸기
GIF는 소셜 미디어에서 인기가 있을 수 있지만 SEO에는 적합하지 않습니다. 그 이유는 다음과 같습니다:
- GIF는 일반적으로 1MB가 넘는 매우 큰 파일 크기입니다.
- 반복적인 애니메이션은 콘텐츠에서 시선을 멀어지게 합니다.
- 256개의 제한된 색상 팔레트는 시각적 품질을 떨어뜨립니다.
이러한 모든 이유로 Google은 가급적 GIF 대신 동영상을 사용할 것을 권장합니다.
GIF를 동영상으로 변환
큰 GIF를 페이지에 삽입하는 대신 MP4 비디오 파일로 변환하십시오. 이것은 종종 품질 손실 없이 파일 크기를 90%까지 줄입니다.
Giphy, IMG2GO 또는 CloudConvert와 같은 무료 온라인 도구를 사용하여 GIF를 비디오 파일로 변환할 수 있습니다. 그런 다음 대신 MP4 비디오를 사이트에 업로드하십시오.
GIF를 사용해야 하는 경우 기본 이미지 <img> 태그가 아닌 HTML5 비디오 코딩을 사용하여 추가하십시오. 이것은 검색 엔진에 큰 정지 이미지가 아닌 비디오임을 알려줍니다.
동영상 최적화하기
GIF를 동영상으로 바꾼 후에는 동영상 자체를 최적화해야 합니다:
- 사이트맵을 사용하여 검색 엔진이 모든 동영상 콘텐츠를 가리키도록 하세요.
- 동영상을 트랜스크립션하고 자막을 포함하세요.
- YouTube/Vimeo에 링크하는 대신 사이트에 동영상을 임베드합니다.
- Schema.org 비디오 오브젝트 마크업을 추가합니다.
이러한 최적화를 통해 사이트 속도를 늦추거나 서면 콘텐츠에 방해가 되지 않으면서도 동영상을 사용하여 방문자의 참여를 유도할 수 있습니다.
3단계: 대용량 미디어의 고품질 보장
앞서 살펴본 것처럼 대용량 미디어 파일은 서버 리소스와 로드 시간에 부담을 줍니다. 하지만 정말 고해상도의 디테일한 비주얼이 필요한 경우도 있습니다.
예를 들어 건축 블로그에서는 건물 디자인을 보여주기 위해 큰 이미지가 필요할 수 있습니다. 또는 미술 웹사이트에서는 그림을 보여주기 위해 최고의 품질이 필요합니다.
이러한 경우 시각적 품질과 성능의 균형을 맞추는 것이 중요합니다. 다음은 몇 가지 팁입니다:
- 썸네일과 전체 화면의 이미지 크기를 다르게 표시하세요. Optimole과 같은 플러그인을 사용하여 시청자의 화면 크기에 맞게 이미지 크기를 자동으로 조정합니다.
- 표시 영역 밖에 있는 이미지는 스크롤할 때만 로드되도록 전략적 지연 로딩을 설정하세요. EWW 이미지 옵티마이저의 지연 로드 기능을 확인하세요.
- Cloudinary와 같은 CDN에서 이미지를 제공하여 서버 부담을 줄입니다.
- 일반적인 사용자 화면 크기를 기준으로 최적의 이미지 크기를 설정합니다. 대부분의 사이트에서는 1920픽셀 너비면 무리 없이 고해상도를 구현할 수 있습니다.
목표는 파일 크기를 합리적으로 유지하면서 시각적 품질을 유지하는 것입니다. 다양한 이미지 최적화 플러그인과 방법을 테스트하여 각 사이트에 적합한 균형을 찾습니다.
4단계: 현재 웹사이트 미디어 감사하기
수백 개의 이미지와 동영상이 있는 기존 사이트의 미디어를 최적화하는 것은 부담스러울 수 있습니다. 그렇기 때문에 웹사이트 미디어 감사를 수행하는 것이 중요한 첫 단계입니다.
다음은 기존 웹사이트 미디어를 감사하고 최적화하기 위한 간소화된 프로세스입니다:
모든 미디어 인벤토리
사이트의 모든 이미지, GIF, 동영상을 나열하는 스프레드시트를 만드는 것으로 시작하세요. 다음과 같은 사항을 기록하세요:
- 파일 이름
- 유형(PNG, JPG, GIF, MP4 등)
- 파일 크기
- 임베드된 페이지
- 대체 텍스트(사용 중인 경우)
이 인벤토리는 대용량 미디어 파일로 과부하가 걸린 페이지와 같은 문제 영역을 식별하는 데 도움이 됩니다.
검토 및 정리
다음으로, 최적화를 염두에 두고 미디어 라이브러리를 살펴보세요:
- 키워드 중심의 설명적인 이름으로 파일 이름을 바꿉니다.
- 이미지를 ‘인포그래픽’, ‘제품 사진’ 등과 같이 유형별로 폴더로 분리합니다.
- 사용하지 않거나 관련성이 없거나 반복적인 이미지는 삭제하세요.
- 동영상으로 변환할 가능성이 있는 GIF에 플래그를 지정합니다.
- 최적화되지 않은 파일에 주목하세요.
문제가 있는 미디어 최적화
수정이 필요한 인벤토리를 확보하면 이제 최적화할 수 있습니다:
- Imagify 또는 유사한 플러그인을 사용하여 이미지를 압축합니다.
- GIF를 MP4 동영상으로 변환합니다.
- 동영상에 스키마 마크업 태그가 있는지 확인합니다.
- 접근성을 위해 대체 텍스트를 업데이트합니다.
- 지연 로딩 기능을 추가합니다.
- 미디어 호스팅을 CDN으로 이동합니다.
한꺼번에 진행하지 말고 단계별로 진행하세요. 미디어의 20%만 최적화해도 사이트 속도가 향상될 수 있습니다.
지속적인 모니터링
새로 추가된 미디어를 주기적으로 감사하여 최적화 상태를 유지하세요. 또한 새로운 기술이 등장함에 따라 재압축이 필요할 수 있는 오래된 미디어도 다시 살펴보세요.
미디어 최적화를 정기적으로 습관화하면 장기적으로 사이트 성능을 SEO에 맞게 개선할 수 있습니다.
미디어 최적화 관련 FAQ
Q. 내 사이트에 최적화된 미디어가 있으면 어떤 이점이 있나요?
A. 몇 가지 주요 이점은 다음과 같습니다:
- 사이트 속도 및 콘텐츠 인덱싱이 개선되어 SEO가 향상됩니다.
- 방문자 참여도 및 사이트 체류 시간 증가.
- 페이지 로딩 속도가 빨라져 이탈률이 감소합니다.
- 웹 호스팅 비용 및 대역폭 사용량 절감.
- 네트워크 속도가 느리거나 시각 장애가 있는 사용자의 접근성이 개선되었습니다.
Q. 대용량 JPG 및 PNG 파일을 압축하는 가장 쉬운 방법은 무엇인가요?
A. 가장 좋은 방법은 Imagify 또는 EWWW 이미지 최적화 도구와 같은 자동화된 워드프레스 플러그인을 사용하는 것입니다. 이러한 플러그인은 화질 손실 없이 이미지 파일을 압축할 수 있습니다. 대부분 클릭 한 번으로 사이트의 모든 이미지를 압축할 수 있는 대량 최적화 기능이 있습니다. 이렇게 하면 이미지를 하나씩 수동으로 최적화하는 것보다 시간을 크게 절약할 수 있습니다.
Q. 미디어가 너무 커서 최적화가 잘 안 되면 그냥 제거해야 하나요?
A. 미디어 제거는 최후의 수단이어야 합니다. 먼저 파일을 압축하거나 GIF 대신 MP4와 같은 더 효율적인 형식으로 변환해 보세요. 최적화 후에도 이미지 품질이 용납할 수 없을 정도로 낮아지는 경우에만 사이트에서 완전히 제거하는 것을 고려해야 합니다. 모바일 사용자에게는 최적화된 저해상도 버전을 표시하고 데스크톱 사용자는 전체 고해상도 버전에 계속 액세스할 수 있도록 할 수도 있습니다.