Google의 페이지 속도 테스트는 이미지 크기보다 많은 이미지를 최적화해야한다고 생각합니다. 현재는

Question

입니다.

나는 이것이 불가능한 것 같아서 혼란 스럽습니다. GTMetrix를 통해 내 사이트를 실행하는 경우

나는 위대한 통과하지만 구글 페이지 속도 통찰력 내 이미지가 예를 들어 더 최적화 할 수 있습니다 주장하는 것 :

압축 및 mysite.com/...ets/img/homepage/my_image 크기를 조정. jpg는 78.5KiB를 절약 할 수 있습니다 (94 % 감소).

문제의 이미지는 65KiB이므로 Google은 내가 모르는 78.5를 면도 할 수 있다고 생각합니다.

저는 jquery를 사용하고 있으며 망막 기능을 사용하여도 문제가 될 수 있습니까?

Google에서 압축 버전으로 제공하는 이미지를 다운로드하려고 시도했지만 이러한 이미지의 크기가 변경되어 크기를 지정하면 이미지가 끔찍 해 보입니다.

정말 혼란 스러워요, 어떤 도움을 주시면 감사하겠습니다.

감사합니다.

Answer 1

사용하는 이미지 압축 패키지에 따라 압축 결과가 달라질 수 있습니다. 나는 때때로 Google의 페이지 스피드가 내가 할 수 있었던 것보다 더 많은 이미지를 최적화 할 수 있다는 것을 알았다. (다른 경우는 그렇지 않다.)

웹 페이지에 대한 실제 URL이 있습니까? 아니면 심지어 이미지? 그것은 그것이 살고 비교할 수 있도록 도와줍니다!

Answer 2

Google Page Speed에서 이미지를 최적화하기 전에 구별해야 할 몇 가지 사항이 있습니다.

1. 이미지는 서로 다른 플랫폼 (데스크탑 및 모바일)
2. 이미지가 실제 크기에 최적화 된 최적화되어 있습니다.
3. 이미지에 대한 보고서는 "압축 및 크기 조정"및 "압축"만 가능합니다. 압축한다는 것은 압축 부분을해야한다는 것을 의미합니다. 반면에 압축 및 크기 조정은 적절한 플랫폼에 적합한 크기의 이미지를 사용해야 함을 의미합니다.

"당신이 (데스크톱 또는 모바일)에서 항목을 찾고있는 보고서에 따라 78.5KiB (94 % 감소)을 절약 할 수 mysite.com/...ets/img/homepage/my_image.jpg 압축 및 크기 조정. " 크기가 작고 압축되거나 치수가 약간 작아야합니다. CSS로 이미지 크기를 조정하기위한 여백은 약 20 %이므로 100x100px 이미지를 얻으면 해당 항목에 대한 보고서를 얻지 않고 CSS로 약 120x120px 크기로 조정할 수 있습니다 (즉, 또한 물리적으로 최적화 된 경우). Chrome에서이를 확인하려면 이미지를 검사하고 요소 선택기에서 '자연'크기를 확인하세요.

당신은 몇 가지 방법에 처리 할 수 ​​

: 링크없이

1. 미디어 쿼리 (주 당신이이 경우에 배경 이미지를 사용해야합니다)
2. Srssets
3. JS