Почему мобильный сайт — это всё равно что есть на ходу? Ну, честно говоря, никто не любит жевать жвачку, которая застревает в зубах, а потом ещё и на морозе крошится. Именно так часто выглядят сайты, когда не уделяешь внимания тому, как сжимать изображения и ускорять загрузку. Знакомо, да? Вот только вместо жвачки тут — трафик и время ожидания, которое, как правило, решает, останется ли человек на сайте или уйдёт к конкуренту.
Проблема в чём? Мобильный интернет — он всегда хуже, чем проводной. Далеко не у всех есть быстрый Wi-Fi в метро или на улице, зато поглядеть фотографию или посмотреть видео хочется сразу. В итоге, чем больше данных тащит сайт, тем больше шанс, что он «подвиснет» или полностью закроется — особенно при медленном соединении. И тут вступают в бой герои — SVG и WebP. Про них говорят всё чаще, и не просто так.
Почему вообще появляется необходимость что-то менять? Ну, давайте честно. Люди теперь используют смартфоны не просто для просмотра погоды или сообщений, а для работы, учебы, развлечений и шопинга. И если сайт грузится дольше пары секунд, это уже почти как ругательство в личном разговоре. Пользователь — он такой, он не станет ждать, пока загрузится всё «всё подряд». Он просто закроет вкладку и найдёт, как сделать то же самое чуть быстрее.
И тут вопрос не только скорости — тут ещё и трафик. Особенно для тех, у кого лимит по гигабайтам или недавно закончился пакет. А ещё ведь есть любимая тема — экономия батареек. Чем меньше данных грузится, тем дольше у телефона остаётся «жизни», и это тоже важно в конце концов. Легко заморозить картинку с огромной jpg-иллюстрацией, а потом удивляться, почему заряд уходит на фоне всё быстрее.
Вот только внедрять какие-то новые технологии — не так просто, как кажется. Казалось бы, SVG — это такой себе «чертёж векторный», который мягко говоря, кажется маленьким и неприметным. Но он способен заменить массу графики, при этом оставаясь очень компактным. А WebP? Это не просто новая «отмазка» для фотографий, а именно такой формат, который умеет сжимать файлы без потери качества, и то очень эффективно. В итоге — меньше данных за счёт хорошей картинки, которая выглядит ничуть не хуже старого jpg.
Правда, всё не так просто, как поставить галочку в настройках. Проблема в том, что не все браузеры одинаково хорошо «понимают» SVG и WebP. Иногда приходится искать компромиссы, экспериментировать, а иногда — даже выходить из зоны комфорта и учиться немного по-новому. Но, честное слово, это того стоит. Сайт, который показывает свои графики и картинки быстро даже при медленной связи — это уже почти половина пути к тому, чтобы оставить хорошее впечатление.
Как бы ни казалось, что всё эти нововведения — это только для супер-пупер разработчиков и умеющих всё наизусть, скажу прямо — рано или поздно это почувствуют все. Вот только кому быстрее врубится — тому и преимущество в скорости, ресурсах и, в конце концов, в клиентах. Поэтому сейчас самое время не просто говорить о том, что нужно делать, а начать применять практические штуки to the point — оптимизация изображений для мобильных, чтобы сайт работал так, как надо, а не так, как получится.
1
Вот где обычно всё идёт не так
Победить в гонке за быстрое отображение изображений — это не магия. Многие пытаются просто тупо резать jpg или png, заливая их на сайт. Но зачастую получается наоборот: картинка чуть легче, а страница всё равно грузится чуть дольше — потому что и так всё плохо с кешем, а еще браузеры не очень дружелюбно понимают разные форматы. Тут на сцену выходит SVG и WebP, и именно о них пойдет речь дальше.
Начнем с SVG — это вам не растр. Это векторный формат, который представляет графику линиями и фигурами, а не пикселями. Просто, по сути, это XML-файл, который в браузере рисуется как картинка. В голову не приходит, что при создании таких изображений можно добиться практически безразмерных файлов — главное, чтобы графика была не очень сложной. Например, логотип или иконки отлично себя чувствуют в SVG. И не забывайте — они отлично масштабируются, и при этом выглядят чётко на всех экранах. А еще SVG можно редактировать прямо в редакторе, менять цвета, формы, добавлять анимации, и все это за счет легкого текста.
Что к нему хорошо подходит — это несложные графики, иконки, логотипы, схемы. Но есть нюанс — а что если у вас довольно сложное изображение с множеством цветов и теней? Тут вам чуть больше труда, и стоит подумать о другом формате — WebP.
А вот WebP — это типичный «убийца» JPEG и PNG в смысле размера и скорости. Он делает сжатие без заметной потери качества, и при этом файлы минуту как меньше по размеру. Вот вам пример: у классической фотки 1200x800 в JPEG весит 2 Мб, а WebP — 800 Кб или меньше. Всё это отлично работает на практике, быстро грузится и не «тянет» трафик. Главное — правильный конверт: можно взять батник, скрипт или профессиональный инструмент, типа libwebp, и автоматом запускать обработку картинок.
Конечно, вопрос совместимости. Не все браузеры сразу понимают WebP — особенно старенькие версии или редкие движки. Поэтому логика в следующая: в HTML вставляете WebP, а на случай, если браузер старый и не понимает, показываете fallback — PNG или JPEG. Есть тут хороший трюк: использовать тег <picture> — он позволяет задавать альтернативы. Например:
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Описание картинки"></picture>Здесь браузер выберет WebP, если умеет, а если нет — возьмёт обычный JPEG. Это самый лучший подход, чтобы не потерять посетителя просто потому, что его браузер не знает WebP.
Ну и самое главное — объединять SVG и WebP в одну цепочку. Например, иконки и логотипы делаем в SVG — они масштабируются и выглядят четко, а фотки — в WebP. Тогда весь сайт становится легким и быстрым. И если есть возможность, автоматизировать процесс — там уже пластина и конвертеры, чтобы не мучиться вручную.
Вот тут головная боль — автоматизация. Можно использовать плагины для сборщиков типа Gulp, Webpack или просто скрипты, чтобы при сборке полностью прогонять все картинки через WebP-конвертеры, а SVG оставить как есть. Также есть системы, которые подхватывают все это в автомате — например, если есть pipeline, то все картинки автоматически конвертятся и прописываются в сайт.
Ну, и финальный совет — обязательно тестируйте. Запускайте сайт на разных устройствах и смотрите, как грузится картинка. Используйте инструменты типа Lighthouse или WebPageTest, чтобы понять эффект. И помните — самое главное в мобильных версиях — скорость загрузки и трафик. А SVG + WebP в связке — это головной инструмент для этого.
В общем, не усложняйте себе жизнь. Взяли SVG там, где нужен масштаб и четкость, а WebP — для больших фотографий. Не ленитесь автоматизировать, и тогда мобильный сайт будет не только быстрее, но и живее.Ну и что теперь с этим делать
Если честно, проще всего взять за правило: SVG использовать там, где нужны простые и масштабируемые иконки или логотипы, а WebP — для больших фоток или сложных изображений. Особенно, если автоматизация — ваше всё. Тогда не придётся сидеть и вручную конвертировать каждую картинку. Тут главное — не забывать про тег <picture>, он реально спасает, когда есть старые браузеры, которые не шарят WebP.
Я бы лично проверил, что все мои картинки действительно грузятся быстро и корректно отображаются. Вариант — сразу посмотреть на сайт через разные браузеры и девайсы, а про конвертацию не забывать — есть куча инструментов и плагинов, которые это делают автоматически на этапе сборки. Например, можно подключить Gulp или Webpack с плагинами для WebP, чтобы все фотки автоматически превращались в WebP и подставлялись через <picture>.
Ну и не стоит бояться экспериментировать с SVG: иногда даже логотип можно сделать в виде иконок, и оно будет выглядеть отлично при любой масштабировке. А WebP для фотографий — это очевидный способ уменьшить время загрузки и снизить трафик. А ещё, читаешь комментарии и понимаешь — самое часто встречающееся объяснение: ага, я поставил картинку, и всё равно сайт грузится долго. Тут сразу вопрос — а в каком виде она у вас? Не в PNG или JPEG, а именно WebP? И автоматизация тут — ваш друг: сразу прогнать все картинки через скрипты, чтобы не мучиться вручную.
Про совместимость — тоже всё не так страшно. Подгрузили WebP, а если браузер не понимает, поставили fallback — PNG или JPEG. И что интереснее, современные движки и платформы это уже норм держат. Так что, если есть возможность, делайте так.
Ну и по мелочам — не забывайте про кеширование: чтобы не конвертировать одни и те же картинки постоянно. Используйте CDN или настройте кеши правильно. Тогда при повторных визитах всё будет грузиться ещё быстрее, а трафик уменьшится. Тут я бы добавил еще один момент — если делаете автоматическую обработку, то, скорее всего, скрипты вам подскажут, когда запускать конвертацию и где искать новые картинки.
Аналитика — один из важнейших элементов. Проверяйте эффект внедрения SVG и WebP, смотрите по сайтам через Lighthouse или WebPageTest. Плюс, не забудьте о мобильных данных — проверить, как быстро грузится сайт на мобильных устройствах с разными тарифами.
Ну, вот как-то так — в быстрой и грязной, но рабочей, схеме. В принципе, ничего особенного: да, это всё требует чуть больше начальных усилий, но потом вся эта автоматизация реально экономит нервы и даёт результат.
Актуальные тренды и новые технологии? Тут я бы поостерегся загадывать далеко вперед — сейчас главное, чтобы это всё работало стабильно. А дальше — следить за обновлениями браузеров и инструментов. Возможно, скоро появится еще более эффективный формат, которые объединяет преимущества SVG и WebP, или новые методы сжатия. Пока же — бесплатная, проверенная схема: SVG для векторного иконспака, WebP для фоток, и всё через <picture>.
А в целом — не усложняйте себе жизнь. Пока все эти форматы работают, менять что-то глобально не стоит. Главное — не профукать момент, когда сайты начинают грузиться быстрее, а трафик — уменьшаться. Вот из-за этого и стоит вкладываться в обработку изображений и строить автоматизированные пайплайны.
Ну вот как-то так.
