Оптимизация изображений

[igorek-art 33]

Всем привет. Делаю сайты довольно давно, но никогда не заморачивался ни с чем, а тут вот стали интересны всякие сервисы по проверке сайта типа от гугла например, который показывает скорость, ошибки и тд, вроде над всем поработал и осталась основная ошибка это оптимизация изображений.. У меня на сайте https://rabota-v-tinkoff.ru/ есть всего 12 изображений, не знаю по какому принципу их делал, но сделал размером 765 на 404 пикселей. В использовании на сайте юзаю класс то 100% то например 80% в CSS, но гугл выдает ошибку Настройте подходящий размер изображений и вот как люди делают? Не уж то для каждой картинки делают несколько размеров? Или же я туплю и можно просто в стилях размеры прописать для мобильной версии и пк версии?

[alex32 942]

srcset  в помощь

[igorek-art 33]

21 минуту назад, alex32 сказал:

srcset  в помощь

Правильно ли я понял, что это надо все равно для каждой картинки создавать по несколько вариантов, а не просто мое значение 2Х будет делать свое дело?

[alex32 942]

10 часов назад, igorek-art сказал:

Правильно ли я понял, что это надо все равно для каждой картинки создавать по несколько вариантов, а не просто мое значение 2Х будет делать свое дело?

Правильно. В зависимости от разрешения, браузер будет подтягивать картинку именно нужного размера

[igorek-art 33]

2 часа назад, alex32 сказал:

Правильно. В зависимости от разрешения, браузер будет подтягивать картинку именно нужного размера

А я вот не понимаю, как понять какой размер картинок должен быть? Я сделал несколько разных размеров для мобилы и пк. В каком то случае мне гугл пишет что плохое качество мол а мы ожидали такое то разрешение, не то что у вас. Как вот понять чего он хочет этот гугл?! Я вот не совсем это понимаю, например на мобильной версии я хочу чтоб изображение было на 100% ширины сайта, как понять какое это в пикселях, ведь это у меня 375 ширина а у кого то 420 например и хочется чтоб на всех мобилах было на 100%, а если задавать ширину в ручную то это уже не адаптивное будет... Или же на пк например, я сделал 12 картинок, все ок например, но на две он ругается мол плохое качество и мол мы ждали другой размер, хотя там 8 новостей с одним размером изображений. Тут наверное надо вообще все заново изображения переделывать?!... 

Или же например для мобилы сделать просто ширину 420 изображения и прописать 100% ширины? Тогда по идее для разрешений 420 ок будет а при 375 типа подгон под страничку но там перерасход трафика маленький будет..?!

[aleksandrhristich 107]

15 часов назад, igorek-art сказал:

...сервисы по проверке сайта типа от гугла например, ... и осталась основная ошибка это оптимизация изображений...

Основная ошибка что вы вообще на это ведетесь (гуглосервисы и т.п). Ради интереса проверьте их же гугл.ком,удивитесь....

Я про то что не следует слепо всему следовать...

[igorek-art 33]

1 час назад, aleksandrhristich сказал:

Основная ошибка что вы вообще на это ведетесь (гуглосервисы и т.п). Ради интереса проверьте их же гугл.ком,удивитесь....

Я про то что не следует слепо всему следовать...

Да я не слепо) просто хочется чтоб везде все красивенько было)) Я как то недавно проходил еще обучалку от яндекса на тему обучение их AI и там рассказывалось как примерно сайты будут ранжироваться, вообщем в совокупности хочется чтоб в итоге ничего не мешало) а когда мои 12 картинок занимают совокупно около 5мб и скорость с мобилок из за этого чуть ли не 5-7секунд, то есть над чем потрудится)

[igorek-art 33]

Вообщем так)) В попытках этих оптимизаций изображений, методом проб и ошибок выяснилось что достаточно подобрать просто нужные размеры изображений и формат, в моем случае все получилось, по крайней мере теперь на изображения никто не ругается 😄🥱