Как оптимизировать изображения?

Question

[flare0n]

Скриншот с PageSpeed Insights

Гугл требует оптимизировать изображения.
Я начинающий веб-разработчик и во многом еще пока не успел разобраться, по каким только ссылкам я не переходил от него, натыкался на всякого рода документацию на английском языке, либо непонятные мне тексты, пусть даже с переводом. Какими методами возможно реализовать lazy-loading и изменение размера картинки при меньшей ширине экрана клиента(А если картинка без альтернативы)? Объясните пожалуйста подробнее и с примерами из кода, если имеете возможность. Заранее спасибо.

Answer 1

[SVM]

на хабре есть ,забыл название статьи
вот по части кода нашёл (себе копировал функцию)
https://habr.com/post/261625/

Comments

[flare0n]

Спасибо

Answer 2

[Алексей Уколов]

На эту тему у Вадима Макеева только вчера вышло отличное видео: Skillbox, оптимизация графики, Squoosh и элемент p...

Comments

[flare0n]

Спасибо, посмотрю чуть позже.

Answer 3

[kupurim]

Вот сервис по сжатию изображений - https://tinypng.com
Если исходное изображение больше блока, то нужно ресайзить (к примеру у вас картинка 1000x1000, но блок с изображением имеет размеры 200х200).
А вообще если не ошибаюсь, гугл должен давать уже сжатые картинки (по крайней мере в старой версии так было).

Comments

[flare0n]

Изображения уже сжаты до максимума, через https://www.iloveimg.com/ru/compress-image

[kupurim]

flare0n, У вас написано что картинки скрыты, тогда да, нужно использовать lazy loading.
И посмотрите у каких картинок не подходящий размер, скорее всего это касается скрытых.

[flare0n]

kupurim, Так я и спрашиваю - как его юзать?

[kupurim]

flare0n, Гугл
Пример (за работоспособность не скажу, не использовал)

[flare0n]

kupurim, Я писал в форме вопроса о том, что я ничего не вынес из гугл документации и попросил объяснить на личном опыте, либо же на иных, более понятных новичку.