Как правильно оптимизировать картинки для сайта

Улучшаем позиции блога картинками
Приветствую вас, уважаемые читатели моего блога. Сегодня хочу поговорить с вами про оптимизацию изображений для вашего сайта. Сейчас сложно найти в Интернете сайт, на котором бы не присутствовали картинки. Согласитесь, статья, грамотно украшенная картинками, читается значительно легче, чем сплошной текст, да еще каким-нибудь мелким шрифтом на зеленом фоне.
Не поверите, но такие сайты тоже встречаются. Не так давно я наткнулся на один такой. Фон статьи яркого салатового цвета, шрифт наверно 6 или 8 размера, красного цвета, абзацев нет, картинок тоже. В общем, ужос. После минуты чтения у меня чуть глаза на стол не выпали, а полушария явно начали конфликтовать друг с другом. Я подозреваю, что у автора какие-то свои представления об оптимизации статей. Ну да ладно, пожелаем ему хороших позиций и благодарных читателей.
В пользу использования изображений на сайте есть масса аргументов. Во-первых, это улучшение внешнего вида статьи, ее читабельности, а соответственно и поведенческих факторов.
Во-вторых, если ваша статьи носит информационный характер, то при помощи картинок вы можете наглядно изложить материл и пошагово объяснить читателю, что ему необходимо сделать для получения результата. Кстати, еще круче — использовать в вашей статье видеоматериалы собственного производства. Но об этом несколько позже, следите за обновлением.
В-третьих, картинки на вашем сайте могут стать источником трафика. Как у Яндекса, так и у Google есть поиск по картинкам. Если изображения на вашем сайте оптимизированы, то они могут с легкостью выходить на первые позиции поиска по картинкам. Ну и наконец, правильно прописанные теги к изображениям могут несколько улучшить позиции вашего сайта по определенным запросам.
Что такое оптимизация изображений
1. В идеале картинка должна быть уникальной, то есть ее цифрового кода не должно быть в интернете. Уникальное изображение вы можете сделать самостоятельно, например, сделав скриншот экрана или сфотографировав на фотоаппарат. Если вы обладаете даром художника, то можете нарисовать картинку при помощи того же Photoshop, или уникализировать картинки из интернета. А как проверить уникальность изображения я писал здесь.
2. Размер изображения. Как правило, снимки экрана и фотографии имеют очень большой размер (иногда до нескольких десятков мегабайт). Для сайта это не подходит. Во-первых, страница с такими картинками будет загружаться очень долго, во-вторых, вам не хватит никакого дискового пространства на вашем хостинге. Старайтесь, что бы размер изображений был не более 50-60кб. При этом вы не потеряете в скорости загрузки и сохраните качество изображения.
3. Правильное заполнение тегов Title и Alt. Title должен содержать ключевое слово, желательно в точном вхождении. В Alt тоже необходимо прописать поисковый запрос, но в неточном вхождении с разбавлением другими словами. В этом случае вас не накажут за переоптимизацию контента.
4. Название самого файла картинки должно содержать ключевые слова и быть на английском языке.
Оптимизация изображений для Интернета
Давайте разберемся, как оптимизировать изображение при помощи программы Adobe Photoshop. Открываем картинку при помощи фотошопа. Теперь нам надо отредактировать изображение и изменить его размер. Вы можете добавить к изображению надпись или свой логотип, повернуть или отразить картинку. В общем, если вы серьезно занимаетесь созданием сайта, то настоятельно рекомендую подружиться с этой программой.
После того, как вы отредактировали изображение, необходимо подогнать его размер под ширину статьи, что бы оно смотрелось красиво и не вылезало за пределы текстового поля. Для этого наводим мышку на синее поле с названием фотографии и правой кнопкой вызываем меню, в котором выбираем пункт «Размер изображения»
Откроется окно с параметрами вашей картинки. В поле «Ширина» устанавливаем подходящее для вас значение. Если стоит галочка «Сохранять пропорции», то длина установиться автоматически. Сохраняем изменения.
Теперь нам надо сохранить само изображение в оптимизированном виде. Для этого выбираем вкладку Файл -> Сохранить для Web.
Выбираем формат JPEG, качество высокое, обязательно ставим галочку напротив «Оптимизированное» и качество ставим от 60 до 70. Сохраняем.
После проведенных манипуляций вес вашего изображения значительно уменьшиться без потери качества.