Важность изображений на страницах сайта

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

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

Насчет важности видео мы поговорим позже, а сейчас об иллюстративном материале.

Зачем это надо?

Как и сказано выше - многие предпочитают картинки, нежели текст. Это, конечно, печально... увы и ах, но реальность такова.

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

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

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

Какие бывают картинки?

Картинки для сайта, как правило, используются в трех основных форматах - это .jpg, gif и png. Сейчас еще настырно продвигается формат .webp - но он не встречает "понимания", так как сохранение на ПК с дальнейшим использованием достаточно проблематичное.

Для фото и масштабируемых рисунков лучшим является формат jpg.

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

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

Для большинства пользователей не нужен дорогой Фотошоп, тлт навроченные редакторы. Есть более подходящие решения - Обзор лучших бесплатных приложений для фотографий на сайте Tonfotos. Главное то, что нравится Вам! Впрочем, даже скромный инструмент может творить настоящие чудеса, в умелых руках.

Обработка обязательна!

Стоит ли говорить, что для качественного оформления статьи должен быть и качественный наглядный материал.

Кроме того, все фотографии или рисунки прежде необходимо обработать в редакторе, например, в Фотошопе. Выравнивание по горизонтали/вертикали, если есть возможность исправление искажений. Добавление резкости и контрастности... обрезка ненужного, исправление затемненных или осветленных мест, ретуширование ненужного в кадре... и так далее. Затем изменяется размер для приемлемого значения. И щелкается - "Сохранить для Web" и здесь выбирается качество сжатия - золотая серединка, когда и вес максимально малый и качество не страдает.

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

ВНИМАНИЕ - самоуправство!

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

Все просто, встроенный обработчик изображений - он тупо уничтожает ваш труд произвольно (по своему глупому пониманию) масштабирует картинку... И все - ваш труд коту под хвост... и все эти "мудрые и настоятельные" советы веб-мастеров и SEO-специалистов о важности небольшого веса картинок, которые напрямую влияют на вес страницы, от чего зависит скорость открытия страниц - все это WP отправил в сортир.

Справедливости ради, этим грешит не только Вордпресс, но и масса прочих движков.

Особенно зримо это происходит в фотоальбомах или фотогалерях, где некоторые плагины самостоятельно "работают" над загружаемым фото, увеличивая его в разы. И если альбом с тремя-четырьмя десятками фото, оптимизированными вами вручную с помощью Фотошопа весит, допустим, 3-4 Мб, то теперь он весит все 50-100 Мб... и, разумеется, эти страницы грузятся долго и нудно. Особенно если посетитель зашел к вам с помощью мобильного устройства - планшета или смартфона, здесь вообще караул!

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

Не стоит воровать!

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

Конечно, в некоторых случаях иначе нельзя - новостные сайты или материалы, требующие документально точных изображений.

Но иногда авторам просто лень щелкнуть фотоаппаратом... проще взять уже готовое... Но это большая ошибка. Чаще всего такое изображение в поиске по картинкам будет на последних местах - поисковики тоже умеют отличать оригинальное изображение от ворованного.

Не стоит наивно полагать, что изменив размер, яркость и контрастность, еще чего-нибудь, и Поисковая машина обманута!

Сегодня изображения - это 50% и иногда все 100% успеха статьи, всего сайта. Не стоит на этом экономить.

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

Правильное оформление и подпись

Картинка в статье не должна разрушать ни само "тело" статьи, ни дизайн сайта. Если она большая - она должна быть кликабельной.

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

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

Картинка всегда ДОЛЖА ИМЕТЬ два атрибута, это alt - описание картинки, title - почти тоже самое, название (заголовок). Первый атрибут обязателен, второй по желанию, но тоже крайне желателен.

Можно использовать разные тексты в описании, но можно и одинаковые. Главное, чтобы эти тексты были информативными, но не воспринимались бы как спам.

Копирайт и запрет сторонним веб-сайтам

Размещать или нет копирайт на фотографии - это решать вам. С одной стороны, это помогает сохранить свое авторство, но с другой стороны, ворам все равно...

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

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

Итого

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

Это небольшой, но позитивный инструмент, который в совокупности с прочими, приносит успех всему делу.

angela-tv специально для WASP.kz

30.05.2022