images.tooling.report를 사용하여 사이트 사진을 완벽하게 만들기

이미지 도구의 상태를 확인합니다.

Patrick Kettner
Patrick Kettner

이미지를 웹에 게시하는 것도 한 가지 일이지만 제대로 하는 것은 어렵습니다. 우리가 직접 이 작업을 수행할 때는 올바른 형식, 압축, DPI (Dot Per 인치) 및 수백 개의 다른 설정을 선택하는 것을 쉽게 잊어버릴 수 있습니다.

좋은 소식은 오늘날 우리는 이러한 모든 것을 해줄 수 있는 다양한 도구와 서비스를 갖추고 있다는 것입니다. 그다지 좋은 소식은 없습니다. 자신에게 적합한 도구나 서비스를 선택하기 어려울 수 있습니다. 이러한 이유로 Google은 images.tooling.report 사이트를 출시합니다. 이 사이트에는 프로덕션 환경에 이미지를 제공할 때 가장 중요하다고 생각되는 것이 무엇인지 나열하고 유료, 무료, 호스팅, 자체 호스팅 등 가장 인기 있는 소프트웨어 및 서비스를 비교할 수 있습니다.

이미지는 사이트의 전송된 바이트에서 큰 부분을 차지하며, 이 바이트의 합계가 더해집니다. 실제로 최적화되지 않은 이미지는 페이지 전체 크기의 거의 75%를 차지했습니다. 이러한 모든 낭비된 바이트에는 비용이 발생합니다. 수백만 건의 실제 사용자 세션을 조사한 결과, 전환된 페이지의 이미지 수가 전환되지 않은 페이지보다 38% 적은 이유가 여기에 있습니다. 그럼 이미지를 모두 삭제해야 할까요? 물론 아닐 것입니다. 하지만 사용하는 기기에 관계없이 전송하는 이미지가 모든 사용자에게 최적화되었는지 확인해야 합니다.

기본 설명

최적화된 이미지를 제공하는 것은 단순히 '웹용으로 저장'을 클릭하는 것 이상의 의미가 있습니다. 그래서 images.tooling.report에서 다양한 기능을 확인합니다. 다양한 툴과 서비스가 제공하는 압축량의 정도와 수명이 긴 캐시 헤더 같은 네트워크 최적화와 같은 기본 사항을 다룹니다.

하지만 거기서 멈추지는 않습니다. Save-Data, ECT, 기타 클라이언트 힌트 지원과 같은 고급 옵션을 찾아 데이터 모델을 사용해 이미지를 반복적으로 압축하고 눈으로 인식하는 방식을 바꾸지 않으면서 가장 적은 바이트를 차지하는 버전을 찾아주는 자동 정신시각적 분석을 찾아냈습니다. 유선을 보내기 전에 이미지에서 시각적이 아닌 마지막 부분을 모두 짜집고 있나요?

어두운 모드의 images.tooling.report 방문 페이지 스크린샷

물론 모든 사이트가 눈송이와 같습니다. 어떤 도구나 서비스도 우리가 원하는 모든 것을 완벽하게 구현하지 못했습니다. 이는 정상적인 동작입니다. 테스트를 여러 카테고리로 나누었습니다. 콘텐츠 전송 네트워크 (CDN), 자체 호스팅 프로젝트, 콘텐츠 관리 시스템 (CMS) 플러그인, 사이트 작성 도구를 다룹니다. 이는 여러 옵션을 비교하는 데 보다 관련성 있는 결과를 얻기 위해 실제로 사용된 매우 개괄적인 정의입니다.

  • CMS 플러그인은 WordPress와 같은 플랫폼에서 간편하게 개발할 수 있는 패키지입니다.
  • 사이트 작성 도구는 웹사이트를 구축하는 데 사용할 수 있는 다양한 서비스를 비교합니다.
  • 자체 호스팅은 git 프로젝트를 복제하는 데 능숙하거나 프로덕션에서 자체 Docker 이미지를 실행하는 데 능숙한 개발자를 대상으로 합니다.
  • CDN은 조금 더 복잡합니다. 이 중 일부는 전통적인 의미에서 CDN에 해당하지만, 에지에서 이미지를 프록시 처리하거나 호스팅하는 서비스도 있습니다.

항상 모든 사람에게 도움을 줄 수는 없지만, 테스트 중인 테스트와 기능을 살펴보고 이미지 최적화 도구가 어떻게 작동하는지 확인해야 합니다. 현재 이미지 최적화를 위한 작업을 하고 있지 않다면 어떻게 해야 할까요? 그렇다면 이미지 도구에 대해 알아보고 내 사이트를 이미 사용하고 있는 사용자들에게 어떤 이점을 제공할 수 있는지 알아보세요.

다음 단계

이미지 도구나 서비스가 빠졌다고 생각하시나요? Google에 알려주세요. 도구와 서비스, 그리고 테스트 자체는 살아 움직이며 계속 업데이트되는 존재입니다. 배송 이미지에서 최신 기술을 빠르게 확인할 수 있는 곳이 필요하면 images.tooling.report를 먼저 방문해 보세요.

Unsplash에 게시된 마이클 마센히어로 이미지