SEO에 최적인 이미지 형식이란? WebP로 이미지 경량화, JPG, PNG의 차이

SEO 감점 대상으로서 이미지의 비율이 높습니다. 사용하고 있는 화상이 JPG・PNG 형식의 경우, 아무리 가볍게 해도 지적됩니다.

이것은 모바일에서의 이용 상황을 상상해 보면 알 수 있습니다만, 통신 환경이 나쁘고, 통신 제한이 걸려 있는 상태에서는 화상 표시에 시간이 걸립니다. SEO뿐만 아니라 UX (사용자 경험)의 관점에서 생각해도 이미지를 가볍게하는 것이 중요합니다.

이미지 경량화의 추천

이미지 경량화에서 가장 효과를 기대할 수 있는 것은 차세대 포맷의 이미지 포맷을 사용하는 것입니다. 예를 들면, 「JPEG XR」 「JPEG 2000」 「WebP」라고 하는 것입니다. 각각 대응하고 있는 Web 브라우저가 다릅니다만, Microsoft Edge·Apple Safari가 WebP를 서포트한 것에 의해 WebP 대응이 주류가 되었습니다.

 

WebP 이미지란?Google에서 개발한 오픈 소스에서 제공하는 정지 이미지 형식. 웹사이트의 트래픽량 경감과 표시 속도 단축을 목적으로 하고 있다. 파일 사이즈는 대체로 JPG보다 작고, PNG와 같이 투명 정보(알파 채널)도 사용 가능. 단, 단색 등 원 화상의 내용에 따라서는 반드시 경량화할 수 있는 것은 아니다.

WebP 사용의 주의점, JPG・PNG와의 병용

이와 같이 WebP는 JPG·PNG의 좋은 코도리의 화상 포맷입니다. 그래서 사용하지 않는 손은 없습니다만, 주의해야 할 점도 있습니다. 오래된 브라우저 등 비대응 환경도 아직 존재하고 있습니다. 그래서 현시점에서는 WebP를 사용하는 경우는 대체 화상도 병용해야 합니다. PICTURE 태그를 사용해, 통상은 WebP, 비대응 브라우저에서는 JPG와 같이 비대응 브라우저에의 배려도 하지 않으면 안됩니다.

 

Web코더로부터 하면 화상 표시 부분의 소스 코드가 2배가 되는 느낌입니다. 당연히 화상의 준비도 2배입니다(스마트폰용으로 다른 화상을 사용하는 경우는 4배!).

또한 WebP 이미지는 최신 Photoshop이면 WebP 형식의 내보내기에 대응하고 있습니다. 또는 온라인 변환 도구를 사용할 수 있습니다. Wordpress라면 「EWWW Image Optimizer」등 WebP 변환 브라그인이 있으므로 편하네요.

PageSpeed ​​Insights 방지

앞에서 설명한 것처럼 PageSpeed ​​Insights 대책으로는 WebP 사용이 필수입니다. 이전에는 JPG · PNG에서도 60 % 정도로 파일 크기를 줄이면 지적되지 않았지만 지금은 이미 JPG · PNG를 사용하고있는 것만으로 지적됩니다.

PageSpeed ​​Insights는 Google이 제공하는 도구이므로 당연히 SEO 관점에서 다루어야 할 것이지만 WebP 이미지를 사용하는 것은 이미지 경량화되므로 UX 관점에서도 효과적입니다. 넷 서핑(죽음!) 하고 있으면 아직도 화상의 로딩이 느린 페이지가 있습니다만, 표시가 늦다고 보는 것을 포기해 버립니다.

이미지 지연 로드 정보

WebP 이미지의 사용은 이미지 경량화로서 유효합니다만, 이미지 대책으로서 한번 더 추가하면 더욱 UX가 늘어납니다(당연히 PageSpeed ​​Insights 대책에도). 그것이 이미지 지연로드입니다. 웹 페이지 표시시에는 화상을 읽지 않고, 웹 브라우저의 표시 영역에 도달했을 경우에 화상을 읽어 표시하는 방식입니다. 이곳은 다른 기회로 다룹니다.

 

alt 태그 자세히 적어서 구글 SEO 최적화 점수 높이는 방법

 

각종 검색 포털에서 콘텐츠 순위를 높일 수 있는 의외의 방법

 

이미지 최적화와 이미지 SEO로 검색 엔진 점수 향상 기법 (Alt 태그 등)

*참조한 훌륭한 원본 글 링크: https://www.web-ma.co.jp/column/seo/1546/