[SEO 최적화] Webp로 변환해보자, 이렇게 쉬울수가!

Webp는 구글이 개발한 차세대 이미지입니다. 티스토리에서 글을 작성할 때, 사진은 필수적으로 포함되는 요소입니다. 비효율적인 사진으로 인해 글의 로딩속도가 늦어지는 문제가 발생하기도 합니다. 기존 이미지를 Webp로 변환하는 방법에 대해 이야기해 보겠습니다.

 

 

[SEO 최적화] Webp로 변환

 

 

목차
1. Webp를 사용하는 이유
2. Webp 변환

 

 

 

1. Webp를 사용하는 이유

구글에서 추구하는 SEO 방향은 사용자 친화성입니다. PC보다 모바일 검색이 점점 늘어나는 현실에서, 로딩 속도는 중요성이 매우 증대되고 있습니다. 이미지는 글을 보다 쉽게 이해하는 중요한 요소라고 말할 수 있습니다. 그러나 많은 이미지 사용은 페이지의 속도를 현저하게 느리게 만들기도 합니다.

 

구글에서는 이미지로 인한 속도 저하는 사용자 경험을 저해하는 요소로 판단합니다. 공식적인 답변은 하지 않았지만, 이미지 최적화가 되지 못한 글은 상위 노출의 기회가 제공되지 않을 수 있습니다.

 

아래 그림의 1번은 구글 검색센터의 이미지 부분에서 속도를 최적화하기 위해서는 최신 이미지를 사용해야 한다고 명시하고 있습니다. 그리고 2번은 Pagespeed Insights에서 속도 측정을 시행했을 때, 속도 저하가 나타나고 이를 개선하기 위한 방법을 소개하고 있습니다.

 

 

 

Webp를 활용한 속도 최적화

 

 

 

구글에서 2010년에 만든 Webp는 기존의 이미지 파일(GIF, JPEG, PNG)이 가지고 있는 단점을 보완하려는 목적으로 개발되었습니다. 특징은 다음과 같습니다.

 

•  손실(JPEG) 및 비손실(PNG, GIF) 압축을 모두 지원
• 파일 크기가 20~30% 정도 작아짐
• PNG 파일에서만 적용되던 투명 배경 사용 가능
• 구글에서 차세대 이미지로 추천
• 구글 Chrome, MS Edge, 애플 Safari 등 거의 모든 브라우저 지원

 

티스토리에서 구글 광고를 적용하고 있는 분들은 페이지 속도도 빠르고, SEO에 최적화된 Webp를 적극적으로 사용하시기를 바라겠습니다.

 

 

 

---

 

2. Webp 변환

이미지를 다운로드하거나 웹상에서 캡처를 했을 때는 보통 PNG 또는 JPG로 저장하게 됩니다. 이 파일들을 Webp로 변환하는 방법에 대해서 소개해드리겠습니다. 크게 두 가지입니다.

 

• 명령줄(Code)을 사용하여 Webp 이미지 만들기
• Webp 변환 프로그램 이용하기

 

 

2-1. Code를 사용하여 만들기

이 방법을 사용하려면 Code에 대한 어느 정도의 이해가 필요합니다. 저는 아직 Code를 활용하기에는 실력이 부족합니다. 변환 프로그램이 아닌 직접 만들어보겠다 하시는 분들을 위해, 자세한 설명이 나와 있는 사이트를 링크해 드리겠습니다. 천천히 따라 해 보십시오.

 

 

https://web.dev/codelab-serve-images-webp/

명령줄을 사용하여 WebP 이미지 만들기

 

 

 

2-2. 변환 프로그램 이용하기

이 글의 핵심적인 부분입니다. 정말 쉽게 Webp 파일로 변환하실 수 있습니다. 1분 안에 모든 과정이 끝납니다. 한 번 활용해 보시기를 추천드리겠습니다. 

 

변환 프로그램은 크게 두 가지로 설명드릴 수 있습니다. 웹상에서 이용하시거나 프로그램을 다운로드하여서 실행하시는 방법이 있습니다. 가장 효율적인 방법은 Photoscape x라는 프로그램을 활용하는 것입니다. 이 부분은 다음번에 자세히 포스팅하겠습니다.

 

웹상에서 쉽게 변환하는 방법이 모든 사람들이 가장 쉽게 Webp를 이용할 수 있습니다. Convertio, CloudConvert, iLoveIMG 등에서 변환할 수 있습니다. 이 중에서 Convertio를 활용해 보겠습니다.

 

변환 순서는 다음과 같습니다.

 

• 파일 첨부 → 변환종류(Webp) 선택 → 변환 클릭 → 변환완료 후 다운로드

 

아래 그림과 같이 파일을 첨부한 상태에서 PNG와 Webp 선택하면 변환할 수 있는 화면으로 이동합니다.

 

 

Webp 변환을 위한 파일 첨부

 

 

변환이 완료되면 다음과 같은 화면을 볼 수 있습니다. 오른편의 다운로드 버튼을 클릭하면 모든 절차가 완료됩니다.

 

 

 

변환 완료 후 다운로드 활성화

 

---

지금까지 웹 최적화를 위한 Webp 파일 변환에 대해서 알아보았습니다. 티스토리를 계속 키워나갈 분들은 앞으로는 반드시 Webp를 이미지 파일로 활용하셔야 합니다. 다음 포스팅에서는 이미지 최적화를 했을 경우 속도 및 사이트 점수가 어떻게 개선되는지 알아보겠습니다.

 

 

[SEO 최적화] 하나 이상의 H1 태그 중복, 문제없는가?!

[SEO 최적화] 하나 이상의 H1 태그 중복, 문제 없는가?!