Оптимизация адаптивных картинок под Google PageSpeed?

Здравствуйте коллеги. Столкнулся с такой проблемой, в последнее время в моей конторе начали тестировать страницы с помощью Google PageSpeed, инструмент хороший не спорю. Но у меня есть некоторые вопросы к оптимизации изображений. Сейчас приведу пример:
Обычно, к изображениям добавляют отзывчивость (по примеру бутстрапа):
img{
    max-width:100%;
    height:auto;
}

тем самым картинка будет подстраиваться под размеры родительского блока. Ну так вот, есть к примеру некий див, в котором загружена фотка размером 640 на 480, при уменьшении окна браузера с помощью медиа запросов, происходит так, что она, к примеру отображается 320 на 240, а еще меньше окно браузера - 160 на 120:
5fc5b6321565411280d7dcac31ba44e6.jpg

Соответственно, меняется размер родительского блока, а картинка подстраивается. Ну так вот, у гугла устроено так, что если картинка по физическим размерам больше дива, например картинка 640на480 и сжалась под действием дива до 320 на 240, то он будет ругаться, мол оптимизируйте картинки, сожмите размер и т.д.

Кто как в этом случае поступает? Является ли данный пункт неким фактором ранжирования в гугле?

Вот другая ситуация:
fda759b168084e518596446f8925dd6c.jpg

Есть некая галерея, где есть маленькие превьюшки, есть большая превьюшка и есть еще огромная картинка, которая открывается при клике на превьюшку. У нас появились разногласия и мы не можем принять верное решение, контора разбилась на два лагеря:

1. Первые говорят, что для каждого типа превьюшки нужно подавать изображения своих размеров.
2. Другие говорят, что лучше загрузить большую превьюшку и для маленьких подавать ту же самую большую превьюшку но просто ужимать дивом.

В первом случае все ок, гугл не будет ругаться, все соответствует размерам, но получается мы гоним больше трафика и больше запросов на сервер: загружаются и большая и маленькая превьюшка - две разных по размеру картинки.
Во втором случае, грузится лишь одна картинка - большая превьюшка и она ужимается до маленькой превьюшки дивом, но при этом гугл ругается мол, почему в такой маленький див вы запихнули картинку большего размера.

Кто что думает по этому поводу?
  • Вопрос задан
  • 800 просмотров
Пригласить эксперта
Ответы на вопрос 5
dimonchik2013
@dimonchik2013
non progredi est regredi
фактором является

выбравшие п.2 - клинические идиоты, к СЕО не подпускать
Ответ написан
Neocaridina
@Neocaridina
самый скромный
Full & thumb only.
В любом случае на ранжирование влиять не должно.
GPS - просто рекомендация, не более.
ПС сама распознает мелкие как thumb и норм индексирует Full.
Больше запросов - ну, се ля ви.
Хотя есть сайты и с п.2, все збс.
Ответ написан
Комментировать
riky
@riky
Laravel
если хотите оптимизировать и размер и запросы, то надо понимать какие размеры используются юзерами часто.

если они почти всегда не только пролистывают все средние картинки но еще и почти всегда на весь экран разворачивают все, то понятно вариант 2.
но что-то мне подсказывает что все картинки пролистает дай бог если половина юзеров, а на весь экран так развернут не более 1-5% картинок. тогда очевидно 1.

скорее всего юзеры будут часто пролистывать средний размер (почти все картинки и почти все юзеры) и редко открывать на весь экран. то оптимальнее взять средний размер и их же использовать для маленьких. а на самые большие - отдельно.
но лучше всего следить статистику именно за вашими юзерами. может юзерам на картинках важны мелкие детали и будут всегда разворачивать на полную.

для п1 есть img srcset
Ответ написан
Комментировать
да в любом случае лучше делать несколько разных изображений
зачем заставлять тех же мобильных пользователей качать огромные картинки?
или на десктопе зазря качать огромные картинки, если пользователь, скорее всего, даже не посмотрит их?
Ответ написан
Комментировать
@mumus Автор вопроса
Господа, я наверное неправильно выразил мысль, я конкретно про второй пункт. Я не говорю вам про самую большую картинку (которая открывается по клику ссылки, которая откроет типичнейший фенсибокс), а я именно про превью среднего размера (на котором лупа нарисована, к примеру оно 640 на 480), которое можно так же испльзовать для малюсеньких превьюшек (thumbs) которые снизу. Т.е мы передаем одну средняюю 640 на 480 и используем ее в превьюшках, а так придется грузить и средние 640 и маленькие thumbs которые, к примеру будут 160 на 120, ведь это будет в 2 раза больше запросов и т.д.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы