Как подготовить идеальные фотографии для сайта?

  1. Помните последовательность всех картинок на странице
  2. Правильная оптимизация фото
  3. Не забывайте про альт!

В последней статье нашего блога мы опишем, как правильно подготовить картинки, размещенные на сайте, и почему это так важно. Мы приглашаем вас прочитать.

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

Помните последовательность всех картинок на странице

Даже на очень простых страницах вы можете найти несколько фотографий на различных тематических страницах. Страницы большего размера содержат десятки визуальных элементов «в себе», а в интернет-магазине тысячи различных фотографий. При публикации фотографий важно позаботиться о их соответствии друг другу. Мы пишем здесь прежде всего о визуальных аспектах, то есть цвете, яркости и контрасте. Если одна фотография очень яркая и рядом с ней недодержана фотография, эффект очень слабый.

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

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

Правильная оптимизация фото

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

Изображение должно иметь ширину, не превышающую ширину текста, в который оно вставлено. В случае нашего блога максимальная ширина текста составляет 1140 пикселей, и фотография не должна превышать этот размер. Поэтому перед добавлением на страницу их необходимо уменьшить (даже в простой и часто бесплатной графической программе) до нужных вам размеров. Вы также можете уменьшить вес, сжимая фотографию. Для этого есть специальные инструменты (например, https://compressor.io/ ), что позволяет уменьшить размер файла до 80% без потери качества. 30 секунд и готово, фотография уменьшена, вес страницы также.

Не забывайте про альт!

Прежде чем добавить фотографию на сайт, стоит сделать еще одну важную вещь, т.е. добавить к ней. Благодаря этому изображение будет отображаться, например, в Google Graphics, для фраз, введенных как alt (выше или ниже, в зависимости от положения сайта). Как выглядит alt? Это просто правильное имя файла. Если на фотографии на столе лежит компьютер, то alt может выглядеть как computer-on-a-desk.jpg, а не DSCN7899.jpg. Опять же - несколько секунд, и у нас есть лучший сайт для поисковых систем, а также шанс получить больше трафика от поиска изображений.

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