Вес изображений напрямую влияет на скорость работы сайта и на качество пользовательского опыта. Чтобы страницы не висли целую вечность, человечество придумало компрессию — сжатие изображений за счёт изменения цвета, размера и едва заметного ухудшения качества. Ещё можно удалить EXIF-данные, тоже немного облегчит картинку.
Эти действия позволяют сократить место, которое занимает медиаконтент на сервере, и:
- сократить время прогрузки страниц (при слишком большом весе изображений они могут грузиться по 5-10 секунд, которые вас ждать никто не станет);
- улучшить ранжируемость сайта — долгая прогрузка страниц не нравится и поисковым роботам, они реагируют на большой процент отказов, а по 5-10 секунд, как мы помним, никто ждать вас не станет, и отказов будет много;
- оптимизировать расход места на диске, которое не бесплатно и которое при тяжёлых картинках тратится просто в никуда.
И добиться этого просто.
Как повысить скорость работы сайта за счёт оптимизации картинок
Сразу оговоримся, что о SEO оптимизации изображений поговорим в другой раз, сейчас на повестке дня именно их «облегчение».
Итак, если вкратце, последовательность действий для оптимизации сайта по части картинок такая:
- подогнать размер изображений под тот, что используется на вашем сайте (выяснить эту цифру легко — просто загляните в исходный код элемента);
- использовать SVG там, где это возможно;
- сжать изображения с помощью специальных сервисов/программ или обычного фотошопа;
- конвертировать изображения в формат WebP (его сейчас поддерживает и браузер Safari в том числе);
- настроить отложенную загрузку изображения с помощью плагинов.
А теперь подробнее пройдёмся по пунктам.
Что делать с размером
Во-первых посмотрите в исходном коде сайта размер отрендеринованного изображения (то что использует сайт) и используемого (то что вы загрузили на сайт) в px, и если он выбивается из нормы, подгоните его под норму.
Для просмотра размера изображения нажмите правую кнопку мыши на изображении, выберите «Просмотреть код элемента» и посмотрите размер изображения наведя курсор на ссылку изображения:
Для подгонки размера изображения воспользуйтесь фотошопом или либо онлайн сервисом www.iloveimg.com.
Во-вторых сожмите изображения. Для сжатия картинок существуют разные десктопные программы, мобильные приложения и онлайн-сервисы. Из готовых онлайн-сервисов, например, www.iloveimg.com. Просто отправляете картинку на сервис или загружаете в программу и на выходе получаете изображение, которое весит на 60-80% меньше. После этого его можно конвертировать в WebP, что и рекомендуем сделать.
Используйте актуальный формат
Существует несколько оптимальных форматов, которые сейчас распространены больше остальных:
- JPG подходит для фото и картинок с плавными переходами цветов, с широким спектром. При сжатии сильно теряет в качестве. Но при сжатии изображений с большим количеством деталей на 25-30% разницы почти не заметите.
- PNG хорош для сложных картинок с чёткими текстовыми надписями (логотипов, значков, иконок), сжимается без потери качества, но размер файлов будет больше — грузиться страницы будут дольше.
- WebP — современный формат, дающий высокое качество при небольшом объёме файлов.
- SVG-формат подходит для векторной графики, диаграмм, значков, логотипов в том числе, можно масштабировать картинки без потери в качестве.
Где возможно, рекомендуем использовать именно SVG-изображения. В остальном в плане баланса между качеством и малым размером рекомендуем формат WebP. Он даёт крутую картинку, совместим с большинством браузеров.
Отложенная загрузка изображений
В дополнение ко всем описанным выше манипуляциям рекомендуем настроить отложенную загрузку изображений — lazy loading. Сделать это можно с помощью плагинов.
Оптимизация скорости сайта с помощью отложенной загрузки работает просто: картинки подгружаются не все сразу (отчего иногда страницы и подвисают), а по мере необходимости — асинхронно. Похожим образом прогружается мир в компьютерной игре — в зависимости от того, куда бежит ваш персонаж.
Изображения с lazy loading могут загружаться по мере скроллинга или по клику: то есть когда пользователь долистает страницу до картинки, она грузится, или если человек нажмёт на миниатюру, большая картинка развернётся.
Всё это в комплексе здорово ускоряет загрузку страниц.
Если вы хотите увеличить скорость работы своего старого сайта или вам нужен новый, обращайтесь, сделаем красивый и шустрый.
Всегда ваша,
команда веб-студии «Сайтодел».
