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

Гигантские изображения. Первое, о чем хочется спросить: вы что, не умеете пользоваться примитивными графическими редакторами? Да я уже не говорю о “Фотошопе” — какой там! Ребят, попробуйте воспользоваться банальным Paint.NET, вы увидите, какие чудеса он может творить. Конкретнее: хотите разместить изображение в хорошем качестве — не обязательно загружать изображение размером в несколько мегабайт. До этого еще нужно додуматься. Возьмите, уменьшите изображение до нужного размера, чтобы и внешний вид не страдал, и место на хостинге не пожиралось фотками для ваших миниатюр. Ничего, ведь, сложного в этом нет. Оптимизация изображений для сайта это не только правильное описание картинки в дескрипшене, не только правильный тайтл или еще что-то из этой оперы. Начало всегда лежит на поверхности — оптимальный размер. Всё просто. И страница будет быстрее грузиться, и графика будет нормально отображаться, что, бесспорно, в глазах читателя станет огромным плюсом. Вы себе представить не можете, сколько сайтов я встречал, на которых “тяжелые” изображения загружаются долго и нудно. И это речь идет о сайтах, на страницах которых графика имеет важнейшее значение — имею в виду посты, в которых не обойтись без диаграмм, карт, инфографики.

Некачественные изображения. Иногда поражает тупость и безрукость вебмастера, который картинку разрешением 120х200 точек размещает в виде миниатюры, а та тянется до ширины в 600 точек и высоты точек в 300. Обалдели, что ли? Кто будет заходить в пост, который украшен таким дерьмом? Неужели трудно предугадать поведение читателя, и понять, что такой сайт постараются максимально быстро покинуть. А потом вы наматываете сопли на кулак и задаете глупые вопросы на форумах по типу: а почему у меня такая маленькая глубина просмотра? Неужели трудно догадаться?

Водяные знаки. Дело не в том, что это изображение не ваше. Тут вообще бесполезно что-то объяснять и доказывать. Купил изображение — размести на нем водяной знак, без вопросов. Это изображение твоё. Но зачем лепить водяной знак (watermark) на изображение, которое затаскано по всему Интернету, которое только ленивый не разместил у себя в блоге, посчитав, что оно “крутое”. Это безвкусица и идиотизм высшего уровня недоразвитости. Найдите картинку, которая не так часто бросалась в глаза, а это делается очень просто —  ищешь картинку, введи запрос не на русском, а на английском или любом другом языке. В выдаче будут совсем другие изображения. Отошел от темы. Не лепите водяные знаки на маленькие изображения, не ставьте дурацкие плагины для автоматического нанесения водяных знаков, что называется, на лету, при заливке изображений на хостинг. Во-первых, избавляешься от плагина, а во-вторых, не нарушаешь авторское право — изображение-то было в свободном доступе. Так какое отношение имеет твой watermark к нему?

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

Оптимизация изображений перед публикацией. Чуть выше я сказал, что от мета-тегов в изображениях можно избавиться при помощи простых программ. Теперь конкретизирую, при помощи каких. Эти же программы помогут нанести водяные знаки, уменьшить размер изображения. Это Fast Image Viewer, ACDSee, Photoshop. Если мы говорим об оптимизации фотографий, картинок, при помощи плагинов, то я пользуюсь плагином Optimus. Ясное дело, что нам доступен бесплатный жмот-пакет, который оптимизирует изображения размером до 100 килобайт, но можно либо оплатить плагин и пользоваться всеми его возможностями, либо прибегнуть к помощи других плагинов, но они дадут возможность оптимизировать изображения “на всю катушку”, но только в определенном количестве. Здесь выбор за вами. Все зависит от нужд и потребностей. Все же, я склоняюсь к оптимизации при помощи программ. Алгоритм такой: уменьшаем размер, вес, лишаемся ненужного мусора в виде мета-тегов.

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