Уникальные картинки, оптимизация изображений

Как сделать картинку уникальной.optimisazij

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

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

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

Находим в интернете, (например на Яндекс – картинки) изображение по теме вашей статьи. Загружаем его на свой компьютер. Открываете Photoshop, вверху меню жмете «файл»  — «открыть».

optimizer

И выбираете изображение с вашего компьютера, ищете ту папку, куда вы его загрузили, жмете на него. Затем в окне, из которого производили поиск, жмете «открыть», и  картинка открывается в  редакторе.

optimizer1

Смотрим на панель «слои», (справа) если на слое стоит замок, то нужно снять его. Для этого подводим курсор к замочку, курсор превращается в руку, захватываем замок, нажав на левую кнопку мыши, и тащим его вниз, на иконку с корзинкой, отпускаем на корзине, и наше изображение уже без замка, и название «фон» поменялось на «слой 0».

Приступаем к обработке. Для начала давайте определимся с размером изображения. Сильно большие изображения тормозят и загромождают наш сайт, занимают много  пространства, а оно нам надо? Значит, идем опять в верхнюю панель, ищем надпись «изображение» жмем, и выпавшем окне ищем — «размер изображения».

optimizer2

Щелкаем по нему, у нас открывается окошко,  в  котором указан текущий размер. В верхней части этого окна, в строчке «ширина» вставляем нужный нам размер, высота измениться автоматически. Если это просто картинка для статьи, то можно сделать её по ширине от 300 до 500px, ели же это снимок экрана с пояснениями, то 500 – 700px, Смотря какие размеры ленты для записей (ширина) на вашем блоге.

optimizer

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

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

Подписываем  картинку.

optimisazij

Для этого нам понадобиться инструмент — «текст», выглядит он просто – «Т».  Жмем на буковку, и ждем несколько секунд, пока он загрузится. Вверху под основной панелью редактора, открывается панель выбранного инструмента, в данном случае «текста»,  там вы сможете выбрать шрифт, размер, и цвет текста. Когда все настроили, кликнем  в том месте, где будет текст, и пишем то, что задумали. Можно написать название вашей статьи, или пояснение к статье, это уже вам решать…

optimizer3

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

optimizer4

Затем,  два щелчка, по тому же слою, левой кнопкой мыши.  В  открывшимся окне,  нажимаем на «тень».

optimizer5

Здесь вы так же можете поиграть с настройками, наблюдая за результатом. Можно конечно тень не делать, но надпись с тенью выглядит объемнее, красивее (но это конечно моё мнение), тень можно сделать светлее, двигая ползунок «непрозрачность»,  увеличить или уменьшить, с помощью ползунков  «смещение», «размер», «размах». Не бойтесь экспериментировать, двигайте ползунки, и наблюдайте за результатом. По желанию, можно наложить градиент, поменять цвет, сделать обводку. Пробуйте, наблюдайте…  Когда все настройки сделаны, жмем  «OK».

optimizer6

 

В правой части редактора в панели  «слои», жмем на треугольник и в выпавшем списке нажимаем «объединить с предыдущим».  То же самое можно проделать другим путем: —  в верхней панели жмем  «слои», и «объединить с предыдущим» или «объединить видимые».

optimizer7

Далее в верхней панели находим кнопку «редактирование» — «выполнить обводку». В открывшемся окне, выбираем ширину обводки, цвет, расположение. Жмем «OK».

optimizer8optimizer9

Все  уникальная картинка готова! Осталось оптимизировать картинку, уменьшив вес картинки. Жмем кнопку «файл», находим в выпавшем списке — «сохранить для WEB и устройств…».

optimizer11

Откроется окно сохранения  картинки. Там  по умолчанию нам предлагают уже оптимизированную картинку, но вы можете сами просмотреть изображение, нажав на кнопки в верхнем правом углу «2 варианта», и «4 варианта».  Обратите внимание на качество оптимизированных картинок, на их вес, и за сколько сек. ваша картинка будет загружаться. В правом верхнем углу можно поменять формат сохраненного изображения (GIF, JPEG, PNG). Посмотреть в каком формате изображение легче. Когда все устраивает, жмем «сохранить». Обязательно при сохранении называем картинку по названию статьи, или по вашей теме. Название прописываем английскими буквами.  Так вы оптимизируете изображение для поисковиков. Что бы к вам шел трафик не только от запросов по словам, но и с поиска по картинкам. Да и поисковикам больше нравятся полностью оптимизированные тексты.

optimizer.1

optimizer12

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

В открывшихся настройках картинки вписываем ключевое слово в графу «заголовок», и заполняем описание — «Alternate Text». Указываете, где будет находиться ваша картинка (справа, центр, слева). Указываете размер изображения. Если вы указываете меньший размер, то при клике на изображение оно откроется в полном размере на этой же страничке, или в новой вкладке. Это так же можно отметить в настройках. Вот мы и получили уникальную и оптимизированную картинку.

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

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

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

Поворот картинки, зеркальное отображение по горизонтали, совмещение нескольких изображений (коллаж). Если вы взяли картинку из интернета, то можно найти соответствующую по теме картинку без фона — клипарт. Затем вставить клипарт на картинку так, чтобы получилась композиция из двух изображений.

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

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

Удачи вам и до встреч на страницах блога. Подписывайтесь, чтобы  не пропустить новые статьи.

Ирина Баталова

Ссылка на основную публикацию