Оптимизация изображений для web ресурса — от подбора до публикации

Оптимизация изображений для Web ресурсаПриветствую вас, дорогие мои читатели,  и темой данной статьи является оптимизация изображений для web ресурса — всё от подбора до публикации. Работа с картинками для наших статей, их подбор, оптимизация и добавление в статью на блог. Добавление картинок на блог делает статьи более интересными, привлекательными и удобочитаемыми, а блог в целом поисковые системы воспринимают как CДЛ, то есть созданный для людей.

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

1. Подбор картинки для статьи: сервисы в интернете и программы в помощь

2. Оптимизация картинки – изменение параметров, размера, веса и шаги в сторону уникальности

а) онлайн сервис — http://www.reduction-image.com/

б) компьютерные программы для редактирования картинок

3. Создание шаблона рамки для основной картинки статьи – как говорит народная мудрость “Хоть безобразно – зато однообразно”

4. Некоторые нюансы добавления изображения в статью, о которых вы забыли или не знали – пропишите теги ALT и TITLE,  важен текст написанный рядом с картинкой – слова текста должны соответствовать картинке.

5. Удаление неиспользуемых картинок вручную или плагином WordPress

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

А как быть авторам блогов об образовании, о саморазвитии, или о космосе, об уникальных автомобилях, о высокой моде или о создании блогов и SEO. Тут, конечно, незаменимый помощник программа Photoshop – это второй вариант создания своей уникальной картинки  для блога. Программа непростая и платная. Хотя в сети есть множество вариантов бесплатных, но если у вас нет возможности купить программу Photoshop можно воспользоваться сервисом online, не буду рекламировать чужой сайт. Просто вбейте в строке поиска Фотошоп онлайн и следуя простым инструкциям отредактируйте свою картинку. Есть и другие сервисы, на которых можно неузнаваемо отредактировать картинку, это например, Avatan. Третий вариант купить картинку на Фото хостинге, например, DepositePhotos. Четвертый – взять картинку из сети. Только помните, что, используя картинку из сети – мы нарушаем авторское право и используем не уникальное изображение. Но как правило, эти соображения никого не останавливают.

И здесь возможны два пути: первый вбить ключевое слово статьи в строку поиска или второй путь, воспользоваться бесплатными фото стоками. И я хочу вам дать маленькую подсказку – напишите ваше ключевое слово в строке поиска по-английски и вы будете приятно удивлены качеством и количеством предложенных вариантов с англоязычных и других иностранных сайтов. Плюс в том, что эти картинки реже встречаются на просторах рунета, как говорится не заезжены, не примелькались. А минус – опять же в том, что, добавляя такую картинку, мы нарушаем чье-то авторское право, да и картинка не уникальна, так как уже опубликована в сети. Рекомендую бесплатные сервисы, где можно взять качественные картинки для блога, не нарушая авторских прав: http://freerangestock.com/ , http://picsfab.com , http://www.fotokanal.com/ – большой выбор хороших картинок разной тематики на любой вкус.

Опытные товарищи пишут, что при повороте картинки на 15-20 градусов она признается уникальной, давайте проведем эксперимент и посмотрим найдет ли сервис TinEye аналогичные картинки после такой манипуляции. Итак, возьмем картинку в сети и проверим ее сервисом поиска похожих картинок TinEye.

Image Notebook in nature - Картинка в статью с изображением ноутбука

Сервис Тинай показал, что в сети эта картинка есть на 59 ресурсах, то есть не уникальна.

59 rezults service TinEye

После поворота на 180 градусов сервис Tineye показывает уже другой результат, как видите похожих картинок не найдено.

0 rezults TinEye

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

А вот  вариант редактирования, когда используются несколько картинок на мой взгляд более интересен

Image-Notebook-in-nature-in-notebook-2 Image-Notebook-in-nature-in-notebook

Эти картинки не только сервис Тинай показал уникальными, но даже Google не нашел похожих картинок.

Еще несколько слов хотелось бы сказать о размере и весе картинки, размер диска на хостинге не резиновый, да и скорость загрузки сайта важный фактор, на который влияют вес и размер картинки. Сервис http://www.reduction-image.com/ поможет уменьшить размер и вес картинки онлайн, без загрузки программ на компьютер. Вполне понятный интерфейс сервиса, если будут вопросы, то рекомендую мою статью на блоге с подробной инструкцией Как уменьшить картинку онлайн просто и быстро. А если вы, также как и я любите пользоваться программами на компьютере, то программы Фотошоп, FastStone Capture, PicPick также помогут решить эту задачу. В программе Фотошоп при сохранении отредактированного изображения выбираем функцию: Сохранить для Web

Sohranit dlja WEb - Сохранить для Web

В программах FastStone Capture, PicPick, Microsoft Office Picture Manager —  размер изображения выбирается при редактировании, что очень удобно, всегда использовать на блоге в статьях картинки определенного заданного размера.

Хотелось бы особо отметить и оформление первой титульной картинки. В последнее время на многих блогах есть такая фишка – рамка для картинки. Её достаточно подготовить один раз в программе Фотошоп или в другом редакторе и использовать шаблон рамки во всех статьях блога. Что несомненно выделит ваш блог среди других благодаря такому запоминающемуся элементу как красивая уникальная рамка для картинки в статье.

А изображение на первой картинке статьи должно соответствовать заголовку статьи и главному ключевому запросу. В этой картинке обязательно нужно прописать Alt и Title – это необходимо для того, чтобы поисковик учитывал картинку. Хотя переход из поиска по картинкам небольшой, но от него все же не стоит отказываться. Каждая картинка в статье должна содержать уникальный Alt и Title. Не стоит использовать плагины для оптимизации изображений на сайте, такие как SEO Friendly Images, который, как оказалось, прописывает один и тот же Alt и Title ко всем картинкам в статье. 

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

Я столкнулась с такой ситуацией, что дисковое пространство на хостинге было занято и хостинг-провайдер предложил мне перейти на другой тариф или уменьшить количество файлов. Разбираясь с данной ситуацией я обнаружила, что каждая картинка на блоге имеет еще дополнительные дубли, которые создавал движок WordPress. Во вкладке Медиафайлы у меня были выставлены размеры картинок по умолчанию трех видов миниатюра, средний размер и большой. Я изменила параметры картинок, выставила ноль во всех размерах. Затем удалила дубли картинок. Вначале вручную, но этот процесс оказался слишком долгим. Тогда я воспользовалась плагином WordPress Delete Not Used Image, который аккуратно удалил все неиспользуемые картинки. Конечно, перед такой тотальной чисткой, я не только сделала бекап, резервное копирование всего сайта, но и отдельно сохранила на компьютере папку Images – береженого бог бережет. Весь процесс удаления дублей картинок прошел благополучно и дисковое пространство очистилось в разы.

Таким образом, у нас готова картинка для статьи, мы дали ей название на латинице, уменьшили вес и размер до необходимых параметров. Теперь мы можем использовать ее на блоге. И вот тут хотелось бы задеть еще такой важный момент как защита контента. На картинку необходимо нанести авторский знак, чтобы всяким плагиаторам неповадно было красть чужие картинки. Водяной знак можно нанести в программе для редактирования в Фотошопе, в Image Tuner, FastStone Capture или в Редакторе блогов, если вы пишите статьи используя Windows Live Writer, а также плагином WordPress Watermark Reloaded. Речь, конечно же идет о защите авторских картинок и фотографий.

Свойства картинкиТак вот, перед тем, как разместить картинку в блоге можно закрепить свое авторство прописав его в свойствах картинки. Кликнем по картинке правой кнопкой мыши и выбираем Свойства. Там открываем вкладку “Подробно” и заполняем все строчки: Заголовок, тема, оценка, ключевые слова, авторы — обязательно прописываем свой блог. Теперь можно картинку публиковать в статье.

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

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

После публикации статьи…

Прописаны свойства картинки

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

Как отображается название картинки написанное на кириллице на хостинге

Желаю удачи!

С уважением Рашида Гарифулина

Подписывайтесь на обновления блога, нажав на кнопку «Получать статьи на почту»

Кнопка для сайта - Получать статьи на почту

Высказывайте ваши мнения и пожелания!  Буду рада ответить на все ваши вопросы!

Оставляйте свои комментарии — напишите свое мнение в комментариях ниже к этому посту!

Если что-то упустила или у Вас есть, что добавить – пишите в комментариях.

Спасибо за внимание!

Кликните по кнопкам социальных сетей — поделитесь статьей с друзьями!

Читать похожие статьи

К записи "Оптимизация изображений для web ресурса — от подбора до публикации" оставлено 3 коммент.
  1. Хорошие советы. По поводу латиницы: не все хостинги поддерживают её — где-то может быть так, что картинка имеет название, типа: d0%f0%b%s2%d3.png.

  2. Рашида, отличная и полезная статья! Многое узнал из неё. Кстати, Avatan я тоже иногда использую. Но, в основном, когда делаю картинки к статьям, использую PowerPoint и Fhotoshop online.

  3. Дмитрий, рада, что статья вам полезна, рада видеть нового читателя-посетителя своего блога)))

Оставить свой комментарий

Поиск по сайту
Яндекс — найдется всё
Объявления
Читайте Топ 5 популярных статей

Яндекс кошелек регистрацияСоздать кроссворд онлайнСоздать блог бесплатноСоздать картинку с надписьюКак пользоваться FileZilla

LiveInternet
Яндекс.Метрика
© 2017    Интернет-time Свой бизнес в интернете. ВСЕ ПРАВА ЗАЩИЩЕНЫ.    //    Войти   //    Вверх