Ошибки при работе с изображениями, которые делает практически каждый автор

распространенные ошибки при работе с изображениями

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

Распространенные ошибки при работе с изображениями

1 Снижение качества изображения.

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

оригинальное изображение с высоким качеством

снижение качества изображения фильтрами

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

2. Недостаточный или большой размер изображения.

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

Альпы 2015

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

3. Использование клипарта и нарезки изображений.

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

использование клипарта и нарезки изображения

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

4. Наложение текста на изображение.

Очень часто те или иные изображения снабжаются поясняющим текстовым содержанием, который становится нечитабельным на ярком и насыщенном цветами фоном.

наложение текста на изображение без плашки

наложение текста на изображение с плашкой

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

5. Графики и диаграммы.

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

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

график с яркими цветами

круговая диаграмма на изображении

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

6. Стоковые изображения с водными знаками.

Стоковые изображения с платных фото баз имеют специально наложенные водные знаки. Но часто авторы не обращают на это внимание и используют именно «превью» картинки.

стоковое изображение с водным знаком

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

7. Присвоение чужих работ себе.

Уважайте чужую работу, ведь кто-то сделал её за вас. Сложно запретить заимствовать изображения. Но ведь как просто поставить ссылку на автора, либо же текстовое сообщение о том, что данная картинка взята из того или иного источника.

В статье использовались изображения и фотографии с сервиса Яндекс фотки fotki.yandex.ru и стоковых иллюстраций www.shutterstock.com

А это одновременно показатель вашей уверенности в отношении поисковых систем к вашему блогу и маленькое «спасибо» автору иллюстрации или фотографии.

Так и появляются естественные ссылки, которых вы так ждёте, так подайте же пример!

С уважением,
  1. Галина Нагорная

    Вы забыли упомянуть ещё несколько:
    1. Незаполненный альт картинки
    2. Слишком большой вес изображения (не оптимизирована)
    3. Рамки уже набили оскомину.

    Ответить
    • Максим

      Мне казалось, что рамки всё ещё пользуются спросом, даже в «услугах» блоггеров видел предложения по созданию.

      Ответить
    • Галина Нагорная

      Новенькие приходят и делают рамки…
      Тут недавно меня раскритиковали за них (рамки), за дизайн блога, за форму комментариев и многое чего не прогрессивное.
      Прямо обрыдалась, читая это… :)

      Ответить
    • Максим

      Это бывает, особенно относительно дизайна. Это слишком субъективное понятие для его объективной оценки :)

      Ответить
  2. Воблеров Константин

    Я бы добавил 8-й пункт. По возможности создавать (снимать на фото) свои уникальные картинки. А уникальный контент любят не только пользователи, но и поисковики!

    Ответить
    • Максим

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

      Ответить
  3. Воблеров Константин

    p.s. а мне нравиться когда картинки в тонкой рамке. Стилизует весь сайт. В прочем, на вкус и цвет….

    Ответить
    • Максим

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

      Ответить
  4. NI4KA

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

    Ответить
  5. Воблеров Константин

    На сколько мне известно не уникализированная картинка рейтинга в глазах поисковиков не добавит. Так что если не создавать с нуля, то хоть отредактировать перед размещением стоит

    Ответить
    • Максим

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

      Ответить
  6. NI4KA

    Оригинальная иллюстрация интересна с точки зрения посетителя. Видеть на 10 разных блогах одну и ту же картинку — это не комильфо.

    Ответить
  7. RU-DIVING.RU

    Очень полезная статья! А не могли бы вы посмотреть на мой сайт ru-diving.ru — Главную страницу Там текст в две колонки. На ваш взгляд он абсолютно не читаем и нужно ли поменять шрифт для улучшения?

    Ответить
    • Максим

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

      Ответить
  8. Татьяна

    Добрый вечер!
    Максим, статья актуальна. Я работаю с Фотошопом. Правда, пока на уровне делитанта. Ваши советы показались дельными. Возьму на заметку!
    Скажите, а какое количество изображений в одной статье Вы считаете наиболее оптимальным? Мне кажется, что я с картинками перебарщиваю. Есть у меня такой пунктик.

    Ответить
    • Максим

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

      Ответить
  9. Максад Исаев

    Добрый день Максим! Нашел несколько дополнений для себя в работе с изображениями. И по ходу возник вопрос. А как легко посчитать вес страницы? Или где посмотреть?

    Ответить
  10. Максим

    Если вы о скорости загрузки, то есть отличный сервис от Google — PageSpeed, а так браузер показывает в свойствах.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *