Тест скорости страницы Google считает, что я должен оптимизировать свои изображения больше, чем размер изображения в настоящее время

Question

Я действительно смущен этим, потому что это невозможно сделать.

При запуске моего сайта через GTMetrix я передаю большим, но с прозрениями скорости страницы Google это настаивает, мои изображения могут быть оптимизированы более, например:

Сжимая и изменение размеров mysite.com/...ets/img/homepage/my_image. jpg может сэкономить 78,5KiB (снижение на 94%).

Образ в вопросе 65KiB, так как Google думает, что я могу сбрить еще 78,5 от него, которого я не знаю.

Я использую jquery unveil и использование функции сетчатки на нем тоже может быть проблемой?

Также я попытался загрузить изображения, которые Google предоставляет в качестве их сжатой версии, но эти изображения изменили их размеры, поэтому выглядел бы ужасно, если бы я разместил их по своему размеру.

Действительно смущенный, любая помощь будет оценена.

Благодаря

Answer 1

В зависимости от пакета сжатия изображений, который вы используете, вы можете получить разные результаты сжатия. Я заметил, что иногда скорость страницы Google позволяет оптимизировать изображение дальше, чем я смог (а иногда и нет!)

У вас есть прямой URL-адрес вашей веб-страницы? Или даже изображение? Это помогает видеть его вживую и сравнивать!

Answer 2

Перед тем, как оптимизировать изображения для Google Page Speed, вам нужно отличить несколько вещей.

1. Изображения оптимизированы для различных платформ (настольных и мобильных)
2. Изображения оптимизированы для физического размера.
3. Отчеты для изображений могут быть «Сжатие и изменение размера» и «Сжатие». Сжатие означает, что вам нужно выполнить компрессионную часть, с другой стороны, сжимать и изменять размер означает, что вам нужно использовать изображение соответствующего размера для соответствующей платформы.

В зависимости от отчета вы смотрите на (настольный компьютер или мобильный телефон), ваш пункт «Сжатие и изменение размеров mysite.com/...ets/img/homepage/my_image.jpg может спасти 78.5KiB (снижение 94%). " должен быть меньше в размерах и сжиматься или только меньше в размерах. Маржа для изменения размера изображения с CSS составляет около 20%, поэтому, если у вас есть изображение 100x100px, вы можете изменить его размер до 120x120px с помощью CSS без получения отчета об этом элементе (то есть, если вы также оптимизировали его физически). Чтобы проверить это в Chrome, проверьте изображение и установите флажок «Естественный» в селекторе элементов.

Вы можете иметь дело с этим на несколько способов:

1. Медиа Query (обратите внимание, что вы должны использовать фоновое изображение в данном случае)
2. Srssets
3. JS