Как оптимизировать изображения, чтобы улучшить скорость страницы и SEO вашего сайта

Одна из распространенных ошибок, с которыми я сталкивался при просмотре живых и готовых веб-страниц для их стратегии SaaS SEO, заключается в том, что изображения плохо оптимизированы для работоспособности и скорости веб-сайта в целом. Все мы слышали пословицу «Картинка стоит тысячи слов». Несмотря на то, что это клише, это правда и, возможно, стоит даже больше.

Изображения захватывают наше внимание и помогают нам связать то, что мы видим. Они строят историю и, как правило, производят гораздо более неизгладимое впечатление, чем просто большой текст. Многие люди любят получать стоковые изображения с сайтов стоковой фотографии без авторских прав, таких как Unsplash.

Google отдает приоритет быстрым страницам. Игнорируя необходимые шаги по оптимизации изображения, вы настраиваете себя на тяжелую битву. Количество изображений, добавленных на страницу, напрямую влияет на скорость загрузки. Чем больше изображений на странице, тем медленнее будет скорость загрузки. В этом руководстве мы рассмотрим 5 шагов, которые я прохожу при оптимизации изображений для скорости страницы и поисковых систем.

Обрезка и изменение размера изображения

По умолчанию загруженная нами фотография имеет очень большой размер и высокое качество. Решение о том, насколько большим или с каким разрешением должно быть это изображение, определяется максимальным размером вашего изображения, которое будет просматриваться. Люди думают, что у них есть изображение самого высокого качества, чтобы произвести впечатление на своих клиентов или даже на самих себя, но они не осознают этого очень негативного воздействия. Решая, какого размера должно быть изображение, подумайте о самом большом размере, в котором изображение будет просматриваться.

Вам не нужно, чтобы размеры изображения составляли 6000 x 6000 пикселей, если оно будет использоваться только для небольшого изображения профиля или снимка головы, которое будет видно с разрешением 300 x 300 пикселей. Исходя из своего опыта, я обнаружил, что самое большое изображение на странице будет главным изображением вверху. Безопасным размером, которого следует придерживаться при сохранении качества, было бы сделать его стандартным размером высокой четкости 1920 x 1080 пикселей.

Советы и подсказки. Если изображение баннера для блога или веб-страницы кажется немного более низкого качества, чем вам хотелось бы, рассмотрите возможность применения прозрачного наложения. Это сделает его частью дизайна и облегчит чтение любого текста.

Ниже я использую Figma для изменения размера и обрезки моего изображения. Процесс очень прост, так как все, что вам нужно сделать, это перетащить изображение, а затем изменить его по своему вкусу. Вот два элемента управления, которые вам нужны для правильного редактирования изображения с помощью Figma в Windows.

• Shift + Drag — масштабирует все изображение вверх или вниз с сохранением того же соотношения.
• Ctrl + Drag — изменит только высоту или длину без растягивания изображения.

Экспорт в виде файлов разных типов

Важно подумать о том, какой тип формата файла вы хотите использовать. Многие форматы могут служить различным целям. Каждый из них имеет свой набор плюсов и минусов в зависимости от точки зрения пользователя. Вот лишь некоторые из наиболее распространенных, которые я обычно вижу:

• PNG — хорошо подходит для графического дизайна или изображений, которые вам нужны, чтобы увидеть мелкие детали. Это происходит за счет большего размера файла.
• JPEG — для реальных фотографий людей и мест. Он может быть сжат гораздо сильнее, но потеряет немного больше информации, так как вам не нужно так много деталей.
• SVG — отлично подходит для значков и логотипов, поскольку их можно масштабировать вверх и вниз без потери качества. Это может работать только с созданными файлами изображений.
• WEBP — более новая версия изображений, которая может заменить PNG и JPEG. WEBP имеет такое же качество изображения, как и оба, при этом он может сэкономить 25-40% места. Единственным недостатком является то, что в настоящее время браузер Apple Safari не поддерживает это, поэтому для загрузки вам потребуются резервные копии JPEG или PNG.
• GIF — это фрагменты видео или анимации, которые имеют тенденцию воспроизводиться в цикле. Они хороши для съемки сцены или демонстрации того, как может работать интерфейс продукта. В этой статье приведены несколько хороших примеров того, как их можно использовать. Поскольку они представляют собой анимированную последовательность изображений, они обычно имеют больший размер файла по сравнению с одним изображением.

Мне нравится использовать JPEG всякий раз, когда я могу, так как он требует наименьшего количества данных, но здесь я использую PNG, чтобы сделать скриншоты более четкими. Как и в случае с WEBP, могут быть еще более новые форматы, поэтому рекомендуется постоянно исследовать, как Google просматривает и ранжирует каждый доступный формат, чтобы найти самый быстрый и лучший ответ для вашей веб-страницы. Вот ссылка на более подробное руководство по самым популярным типам изображений.

Используйте компрессор изображений

Следующим шагом будет попытка сделать файл как можно меньше, сжимая и уменьшая размер файла. Перейдя к компрессору изображений и обработав изображение, мы иногда можем уменьшить размер файла до 90%. Действительно полезный инструмент, который мне нравится использовать, называется Compressor. С помощью этого инструмента вы можете сжимать до 50 изображений в день на бесплатном тарифе.

Здесь я беру изображение, которое я экспортировал, и перетаскиваю его прямо в раздел перетаскивания изображений. Через пару секунд новое изображение будет готово к загрузке, и его размер составляет менее одной десятой от исходного. Вы также можете импортировать несколько изображений и загружать их все сразу, как показано с помощью опции внизу.

«Ленивая» и «нетерпеливая» загрузка ваших изображений

Теперь, когда у вас есть изображение в правильном формате и сжато до нужного размера, вы можете подумать, что все в порядке, но есть еще пара вещей, которые нужно сделать. Во многих шаблонах и веб-сайтах скорость загрузки изображений устанавливается браузером по умолчанию, что может привести к одновременной загрузке всех ваших изображений на странице. Решение этой проблемы — ленивая загрузка изображения.

«Ленивая» загрузка откладывает загрузку элемента до тех пор, пока он не появится на странице. Если у вас больше пары изображений, это может повысить производительность сайта. Противоположностью этому является загрузка "Eager", которая загружает элемент сразу. Обычно это совпадает с веб-настройкой по умолчанию, поскольку не задано предпочтение, какое изображение должно загружаться первым или последним.

Вот пример в редакторе блога HubSpot. Перейдя к расширенному параметру для вставленного изображения, мы видим, что можем установить его параметры загрузки. Выберите «Ленивый» и нажмите «Применить». Теперь изображение появляется всякий раз, когда пользователь приближается к нему, что сокращает драгоценное время загрузки.

Не забудьте добавить альтернативный текст

Последнее, что нужно посетить, — это включить альтернативный текст в ваши изображения. Это может не повлиять на скорость загрузки вашей страницы, но всегда важно учитывать и добавлять. Когда вы оставляете раздел пустым, вы упускаете множество возможностей повысить свой рейтинг в поисковой выдаче.

Важно отметить, что альтернативный текст объясняет «почему» изображения, поскольку оно связано с содержимым. Он индексируется Google и читается вслух с помощью преобразования текста в речь для слабовидящих. Если вы просто вставляете в изображение одно ключевое слово, которое не объясняет, что происходит, то это может быть не лучший подход.

Здесь я добавил альтернативный текст к изображению. Я основываю это на фразе SEO скорость страницы здоровья. Вместо того, чтобы включать только ключевое слово, объясните также, как или что происходит на изображении. Я решил уточнить, используя фразу «Проверка работоспособности SEO-страницы с помощью графиков».

Это гораздо более информативно в отношении того, что может означать изображение для индексации Google, и обеспечивает большую доступность для слабовидящих.

Давайте рассмотрим шаги по созданию/оптимизации изображений:

1. Перетащите изображение в графический редактор, например Figma, чтобы обрезать и изменить размер.
2. Экспортируйте его как соответствующий тип изображения (PNG, JPEG, SVG, WEBP и т. д.)
3. Перенесите его на сайт сжатия изображений, например Compressor или Image Resizer Online.
4. Вставьте сжатое изображение в свой контент как отложенную загрузку.
5. Добавьте замещающий текст, описывающий изображения на вашей странице.
6. Теперь у вас есть идеальное изображение для вашего сайта!
7. Зайдите в Google Search Console, чтобы проверить, насколько увеличилась ваша производительность.

Следуйте этим шагам, и вы будете на верном пути к поддержанию и оптимизации ваших изображений для SEO и ускорению скорости вашей страницы, создавая фантастический пользовательский опыт!