Суббота – самое время поговорить я красивостях, а именно о картиночках.
Картиночки это огромная часть трафика на просторах интеренета. httparchive.org/reports/state-…. Тут, возможно, пропущен прекрасный формат – avif, о котором мы поговорим чуть попозже. Но это легко исправить.
Дело в том, что данные для httpArchive берутся из большого публичного дата-сета. Вот тут можно глянуть статью о том, как с ним работать github.com/HTTPArchive/ht…. Нужную инфу легко вытащить, использовав BigQuery. Вот так выглядит статистика по avif
Гайдов, докладов и выступлений о том как правильно готовить картиночки огромное количество. (Я тоже делала несколько :) Но, не смотря на огромное количество доступной информации, я очень часто встречаюсь с мегабайтными монстрокартинками 😿
Самые распространенные причины огромных изображений:
пожать картинки просто забыли
изображения добавляются через какую-нибудь админку и добавляющие не понимают что нужна предварительная обработка.
Побеждать тяжелые изображения можно несколькими способами, которые лучше использовать в комплексе:
Быть внимательнее к своим асетам. Запускать lighthouse. Он найдет тяжелые картинки и поругается.
Добавить автоматическое сжатие при сборке
Сжимать картинки на лету
Решать проблему с размером изображений, которые мы не контролируем (те, что грузятся из админки) легче всего сжатием на лету.
В марсианах мы используем для этого свой инструмент – imgproxy imgproxy.net