Отчёт Lighthouse: правильно подбирайте размер изображений

Правильный подбор размеров изображений может значительно ускорить загрузку страницы. Здесь мы рассматриваем две разные категории:

• изображения, не оптимизированные для веба (без сжатия, неподходящие форматы)
• изображения с разрешением выше необходимого (например, изображение шириной 800px, отображаемое как 300px)

В нашем случае на главной странице есть три изображения, не оптимизированные или с неподходящим размером. Для оптимизации я использую Squoosh.

Первое изображение - логотип Outworld Apps: его ширина была 887px, а отображалось оно в контейнере шириной 263px. После уменьшения размера и оптимизации с помощью OptiPNG его размер сократился с 29.2 KB до 9.13 KB.

Второе изображение - моё фото. 200px на 200px, отображалось в контейнере 86px. Уменьшение размера + оптимизация дали изображение на 76% меньше.

Последнее - изображение из одной из статей. Здесь важно знать ширину контейнера ваших постов. На моём блоге это 523px. Размер у изображения уже подходящий, но я скопировал его прямо из инструмента вырезания, поэтому оно вообще не было оптимизировано, к тому же это PNG, тогда как прозрачность мне в данном случае не нужна, так что вполне мог быть JPEG.

Обновляем изображения - и готово.