Статьи19 февраля
Разбираем оптимизацию изображений для сайта: как уменьшить вес картинок, ускорить загрузку страниц, улучшить SEO и поведенческие факторы. Форматы, сервисы и советы.
Важно оптимизировать изображения, чтобы сайт загружался быстрее. Благодаря высокой скорости загрузки, процент отказа повышается, а позиции в поисковой выдаче укрепляются.
В статье мы рассмотрим, какие бывают картинки на страницах, что можно сделать для оптимизации, какие сервисы использовать. В конце — ответим на вопрос, какими должны быть картинки на сайте, и на другие важные аспекты.
Качество и вес картинок напрямую влияет на скорость загрузки сайта, его производительность, позиции в выдаче и поведение пользователей. Рассмотрим каждый пункт подробнее.
Неоптимизированные картинки занимают много места. Это замедляет скорость загрузки страниц.
Пользователи уходят со страницы, если она загружается дольше 2-3 секунд.
Быстрая загрузка улучшает пользовательский опыт, удерживает посетителей и повышает вероятность их возвращения на страницу.
Производительность — то, как быстро на странице подгружается контент — важна не только на десктопе, но и на мобильных устройствах.
У мобильных пользователей может быть ограничен трафик мобильного интернета.
Оптимизированные изображения позволяют сайту быстрее загружаться на смартфонах и планшетах, особенно в условиях низкоскоростного интернета или плохой мобильной сети.
Оптимизация изображений важна для SEO. Google и Яндекс учитывают скорость загрузки и производительность сайта при ранжировании: если сайт работает медленно — он окажется на позициях ниже, это снизит его видимость и, как следствие, трафик.
Есть также неочевидные плюсы: оптимизация картинок помогает снизить нагрузку на сервер и сэкономить ресурсы. Это особенно актуально для сайтов с большим количеством посетителей или для тех, кто использует хостинг с ограниченными возможностями.
Оптимизация изображений — не просто техническая настройка, а необходимость, чтобы сделать сайт более привлекательным как для поисковых систем, так и для пользователей.
Изображения должны быть:
С высоким разрешением, не размытые, без пикселизации, по возможности — минимум 1200 px по широкой стороне. Без водяных знаков. Это признак непрофессионализма и может вызвать юридические проблемы.
Рекомендуем не использовать очевидно стоковые изображения, например, картинки с группой людей в офисе. Это всегда заметно.
Собственный визуал всегда в приоритете — фотографии продуктов, команды, офиса, процесса работы, событий. Это вызывает доверие и добавляет индивидуальности. Это же касается иллюстраций и инфографики: лучше использовать авторские.
Желательно, чтобы все изображения были визуально согласованными по цветовой гамме, освещению, фильтрам и соответствовали образу бренда.
Вы можете использовать изображения, которые создали сами, приобрели с лицензией, или взяли с платформ, предоставляющих бесплатные изображения с разрешением на коммерческое использование (например, Unsplash, Pexels, Pixabay). Однако даже на таких ресурсах стоит выбирать визуалы, которые выглядят живо и естественно, а не как типичные стоковые картинки.
Чтобы картинки не просто заполняли пространство, а усиливали контент, вызывали доверие и визуально удерживали внимание, лучше размещать их определенным образом.
| Раздел сайта | Что лучше использовать |
|---|---|
| Главная страница | Эмоциональные, брендовые, большие фото. Продукт, лицо, команда. |
| О нас | Настоящие фото офиса, команды, ценности в действии. |
| Продукты/услуги | Крупные планы, детали, в реальном контексте, не рендеры. |
| Блог/статьи | Иллюстрации, схемы, инфографика, тематические фото. |
| Отзывы и кейсы | Фото клиентов, скриншоты результатов, до/после, реальные цитаты. |
| Контакты/карта | Фотография офиса, вывески, схемы проезда, атмосфера. |
Наиболее распространенный формат картинок с высокой детализацией, когда нужно передать оттенки, градиенты, например, пейзажи или портреты.
Подходит для логотипов, иконок, графиков, схем: где нужна четкость и возможность сделать фон прозрачным. Обычно больше по размеру, чем JPEG.
Разработанный Google формат веб-изображений. Позволяет значительно уменьшить размер файла без потери качества, но не все браузеры его поддерживают.
Это формат svg. Он подходит, чтобы оформлять значки, логотипы и элементы с функцией навигацией: те, которые разбавляют контент страницы, например, преимущества или этапы работ.
Картинки этого формата создают в текстовом редакторе и редактируют с помощью тега <svg>.
Для сайтов лучше использовать векторные, а не растровые изображения. Такие изображения более адаптивны: картинки не теряют четкость при масштабировании.
Прежде, чем оптимизировать изображения, посмотрите, сколько их уже на страницах. Оцените:
Если на страницах много изображений, но они никак не дополняют контент и не помогают пользователям в решении их вопросов, лучше удалить.
Иногда проще избавиться от ненужного, чем тратить время на его оптимизацию.
С помощью софта Screaming Frog можно найти особенно тяжелые картинки. Для этого сайт нужно спарсить через сервис и отсортировать графические элементы в порядке уменьшения размера.
Если контент нам необходим, эффективнее начинать оптимизацию с самого тяжелого.
С помощью сервиса SVGO можно оптимизировать и уменьшить вес векторных картинок.
Это консольное приложение, которое очищает файлы от лишнего кода без ущерба отрисовки графики.
Первое, что можно сделать для оптимизации, — уменьшить размер растровой картинки. Так они будут быстрее передаваться по сети. Есть два способа:
Рассмотрим каждый из них подробнее.
Иногда изображения, которые вы находите для статьи или страницы, значительно больше, чем может «вместить» окно. На большинстве сайтов ширина контентной области — 600-800 пикселей.
Поэтому не нужно загружать графические элементы размера 1200×800 пикселей. Система уменьшит картинку самостоятельно, но с сервера будет загружаться оригинал, это будет дольше.
Узнайте, какого размера окно для изображения, и обрежьте его самостоятельно.
Что еще можно сделать, чтобы уменьшить размер? Вставить на сайт кликабельную миниатюру в 200—300 пикселей в ширину. Если кликнуть на нее, она раскроется в полном размере.
Миниатюры занимают меньше места — загрузка страницы ускоряется.
Сделать такое можно через плагины. Например, в WordPress — это Lightbox.
У такого подхода есть неочевидное преимущество. Не всегда изображение 600-800 пикселей передает детали, особенно, если это инфографика, инструкция, скриншот. В подобных случаях выручит кликабельная миниатюра. Нажав на нее, пользователь раскроет картинку в полном размере и изучит каждую деталь.
Если ранее мы говорили про уменьшение размера картинки, то сейчас перейдем к уменьшению веса. Это следующий этап оптимизации. Сжатие позволяет «сделать изображение легче» без потери качества.
Если для читабельности картинки не нужна широкая цветовая палитра, можно уменьшить количество цветов до 256. Это вдвое сократит вес изображения.
Соседние пиксели графического элемента часто похожи по цвету: человеческий глаз не всегда способен заметить незначительные различия между ними. Используя дельта-кодирование, можно записывать разницу между соседними пикселями вместо их абсолютных значений. Если пиксели имеют схожие цвета, дельта будет равна нулю: это сократит вес пикселя до 1 бита.
Подходит для сжатия любых изображения. Умные технологии сервиса сохраняют 80% деталей, уменьшая графические элементы. Работает онлайн.
Для macOS. Поддерживает JPEG, PNG и GIF, также удаляет ненужные метаданные из изображений.
Расширение для WordPress, которое автоматически оптимизирует изображения при их загрузке. Также оно дает возможность сжать все уже добавленные изображения за один заход. Можно выбрать разные уровни сжатия, чтобы найти идеальный баланс между качеством картинок и их размером.
Расширение для WordPress, которое сжимает изображения как с потерями, так и без, а также конвертирует их в формат WebP. Включает функцию автоматической оптимизации изображений при их загрузке на сайт.
Оптимизация изображений не ограничивается уменьшением размера и веса. Чтобы контент индексировался поисковыми системами лучше, важно правильно прописать атрибуты и теги.
Alt, он же альтернативный текст, описывает, что изображено на картинке. Атрибут важен для SEO: поисковые системы анализируют его, чтобы понять, что конкретно изображено на картинке.
Альтернативный текст будет показан, если у пользователя отключен показ графики, и облегчит понимание контекста.
Это дополнительная информация об изображении, которая отображается при наведении на нее курсора. Дает пользователям дополнительную информацию.
Он же отложенная загрузка. Позволяет загружать изображения только тогда, когда они попадают в видимую область экрана. Особенно полезен для страниц, где изображений много: ускоряет загрузку страницы, экономит ресурсы устройства, улучшает производительность сайта.
Настройте кэширование, чтобы браузеры могли сохранять копии изображений на устройствах пользователей. Это сокращает время загрузки на повторных посещениях, что особенно важно для сайтов с большим количеством постоянных посетителей.
Используйте адаптивные изображения, которые автоматически подстраиваются под размер экрана.
Регулярно проверяйте производительность сайта с помощью разных инструментов, например, Google PageSpeed Insights. Он найдет проблемы с загрузкой изображений и даст рекомендации по их оптимизации.
Возможно, графические элементы конкретно на вашем сайте оптимизировать не нужно. Однако может возникнуть ситуация, когда именно они становятся причиной низкой производительности сайта.
Например, если изображения не оптимизированы, возможно, ваш сайт могут видеть пользователи только с высокой скоростью подключения от 20 мегабит в секунду. Так вы теряете посетителей с более низкой скоростью, пользователей мобильного интернета.
Мы советуем проверять картинки на сайте, чтобы как минимум исключить эту проблему.
Можно, но мы рекомендуем обратиться к специалистам. Есть несколько причин, почему. Во-первых, профессионалы знакомы с современными форматами изображений и используют проверенные инструменты. Специалисты проанализируют конкретные потребности вашего сайта и предложат индивидуальные решения, будь то сжатие, изменение размеров или форматов. Например, в Serenity мы оптимизируем изображения в рамках услуги SEO-продвижения.
