이미지 도구의 상태를 확인합니다.
웹에 이미지를 올리는 것은 일종의 일이지만 제대로 하기는 어렵습니다. 올바른 형식, 압축, 인치당 도트 수 (DPI) 및 기타 수백 가지 설정을 선택하는 것은 Google에서 직접 하면 쉽게 잊어버릴 수 있습니다.
좋은 소식은 요즘에는 이러한 모든 작업을 처리할 수 있는 다양한 도구와 서비스를 보유하고 있다는 것입니다. 그다지 바람직하지 않은 소식은, 데이터가 많다는 것입니다. 자신에게 적합한 도구나 서비스를 고르기가 어려울 수 있습니다. 이러한 이유로 Google에서는 프로덕션에서 이미지를 제공할 때 가장 중요하다고 판단되는 사항을 나열하고 유료 또는 무료, 호스팅, 자체 호스팅 등 가장 인기 있는 소프트웨어와 서비스를 비교할 수 있는 사이트인 images.tooling.report를 출시합니다.
왜 그럴까요?
이미지는 사이트 전송 바이트에서 큰 부분을 차지하며, 이러한 바이트가 합쳐집니다. 실제로 최적화되지 않은 이미지가 페이지 총 크기의 약 75%를 차지하는 것으로 나타났습니다. 이렇게 낭비되는 바이트는 모두 비용이 발생합니다. 그렇기 때문에 수백만 개의 실제 사용자 세션을 연구한 결과, 전환한 페이지의 이미지는 전환하지 않은 페이지의 이미지보다 38% 더 적게 표시되는 것입니다. 그렇다면 모든 이미지를 삭제해야 할까요? 물론 아닐 것입니다 하지만 전송하는 이미지가 사용되는 기기와 상관없이 모든 사용자에게 최적화되어 있는지 확인해야 합니다.
기본 설명
최적화된 이미지를 제공하는 것은 단순히 '웹용으로 저장'을 클릭하는 것이 아닙니다. 그렇기 때문에 images.tooling.report에서 다양한 기능을 확인합니다. 다양한 도구와 서비스가 제공하는 압축 정도와 수명이 긴 캐시 헤더와 같은 네트워크 최적화 같은 기본 사항을 다룹니다.
하지만 거기서 멈추지 않습니다. Save-Data, ECT, 기타 클라이언트 힌트 지원과 같은 고급 옵션을 찾아 데이터 모델을 사용해 이미지를 반복적으로 압축하는 자동화된 심리시각적 분석을 찾고, 우리의 눈이 인식하는 방식을 바꾸지 않으면서 가장 적은 바이트를 차지하는 버전을 찾았습니다. 이미지를 전송하기 전에 이미지의 마지막 비시각적 부분을 모두 압착하고 있나요?
물론 모든 사이트가 눈송이와 같습니다. 어떤 도구나 서비스로도 우리가 찾던 모든 기능을 제대로 구현하지 못했습니다. 이는 정상적인 동작입니다. 그래서 테스트한 내용을 여러 범주로 나누어 살펴봤습니다. 콘텐츠 전송 네트워크 (CDN), 자체 호스팅 프로젝트, 콘텐츠 관리 시스템 (CMS) 플러그인, 사이트 작성 도구에 관해 다룹니다. 이것들은 다양한 옵션을 보다 관련성이 높게 비교하기 위해 실제로 존재하는 상당히 느슨한 정의입니다.
- CMS 플러그인은 WordPress와 같은 플랫폼에서 쉽게 개발할 수 있는 패키지입니다.
- 사이트 작성 도구는 웹사이트를 구축하는 데 사용할 수 있는 다양한 서비스를 비교합니다.
- 자체 호스팅은 git 프로젝트를 클론하거나 프로덕션에서 자체 Docker 이미지를 실행하는 데 익숙한 개발자를 위한 기능입니다.
- CDN은 조금 더 복잡합니다. 이러한 서비스 중 일부는 전통적인 의미에서 CDN 같지만 에지에서 이미지를 프록시하거나 호스팅하는 서비스입니다.
항상 모든 것을 완벽하게 만족시킬 수는 없지만 평가 중인 테스트와 기능을 확인하고 이미지 최적화 도구를 어떻게 조합하는지 확인해야 합니다. 지금 이미지 최적화를 위한 조치를 취하지 않고 있다면 어떻게 해야 할까요? 그렇다면 이미지 도구를 사용해 보고 이미 사이트를 사용 중인 사용자에게 어떤 이점을 제공할 수 있는지 알아보세요.
다음 단계
이미지 도구 또는 서비스가 누락되었다고 생각하십니까? Google에 알려주세요. 도구와 서비스, 그리고 테스트 자체는 모두 살아 움직입니다. 배송 이미지의 최신 기술을 확인할 수 있는 곳이 필요한 경우 먼저 images.tooling.report를 사용하는 것이 좋습니다.
Unsplash에 게시된 Michael Maasen의 히어로 이미지