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

  1. Скорость загрузки - фактор, влияющий на позиционирование
  2. Как подготовить фото для сайта
  3. Изменение размера
  4. Сжатие фотографий
  5. Какой формат записи изображения мне выбрать?
  6. Преимущества правильной подготовки фото для сайта

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

Скорость загрузки - фактор, влияющий на позиционирование

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

Итак, как вы решите эти два вопроса? Как подготовить фотографии для сайта, чтобы они не увеличивали время загрузки сайта? Решение этой проблемы не требует специальных знаний !

Решение этой проблемы не требует специальных знаний

Как подготовить фото для сайта

Изменение размера

Мы создали интересное руководство на сайте и выбрали привлекательные фотографии, которые дополнят его. Первая проблема, с которой мы можем столкнуться - это размер картинки .

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

Следующее изображение в оригинале имеет размер 4928 на 3264 пикселя - оно, конечно, слишком велико, чтобы добавить их на страницу без каких-либо изменений

Вы можете уменьшить их, используя встроенный инструмент в CMS (система управления контентом) или в любой программе обработки изображений - например, в Photoshop:

Или даже в приложении Paint, доступном бесплатно любому пользователю Windows:

Или даже в приложении Paint, доступном бесплатно любому пользователю Windows:

Изменение размера фотографии также уменьшает ее размер - в случае с нашим изображением «вес» снизился с почти 5 мегабайт до почти 200 килобайт . Благодаря этому фото, безусловно, будет быстрее загружаться. Но что, если мы планируем добавить более одной картинки? В этом случае размер все еще слишком велик , но его можно еще уменьшить .

Сжатие фотографий

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

Прежде всего, когда вы сохраняете фотографию, вам нужно выбрать ее формат . Наиболее распространенные форматы изображений: .jpg, .png и .bmp . Первый способ записи изображения с потерями , поэтому он сжимается. Другие форматы называются без потерь , потому что при сохранении вы не теряете никакой информации, а значит - размер фотографии не меняется.

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

Однако у нас нет возможности изменять параметры сжатия , что иногда может привести к гораздо более низкому качеству . Фотошоп предлагает больше вариантов:

Фотошоп предлагает больше вариантов:

Вы также можете видеть, что размер изображения после сжатия уменьшается еще больше, и вместо предыдущих 200 у нас теперь чуть более 80 килобайт .

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

Слишком сильное сжатие вызывает видимые «артефакты», то есть искажение изображения - особенно заметно на краях объектов на фотографии:

Помимо графических программ, вы также можете использовать специально созданные веб-сайты для сжатия . Инструменты, которые они предлагают, конечно же, бесплатны , не требуют установки и очень просты в использовании . Одним из таких онлайн-инструментов является, например, веб-сайт optimizilla.com ,

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

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

Какой формат записи изображения мне выбрать?

Выбор формата зависит от типа фотографии на странице:

  • Формат .Jpg - хорошо работает для фотографий , например, показанного ранее;
  • Формат .Png - хороший выбор, если вы сохраняете изображение, содержащее текст - например, логотип компании или инфографику. Тогда мы уверены, что все края текста будут четкими и без искажений .

Преимущества правильной подготовки фото для сайта

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

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

Рейтинг: 9.6 . Из 5 голосов.

Пожалуйста, подождите ...

Читайте также