Хостинг от Макхост

Оптимизация картинок для сайта онлайн. Рекомендации и плагины

Автор: Евгений Несмелов
Оптимизация изображений

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

к оглавлению ↑

Оптимизация изображений онлайн

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

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

Кроме данного сервиса, Гугл дает свои рекомендации. Следует удалять изображения, которые не используются. При возможности применять эффекты CSS3, чтоб избавиться от ненужных файлов. Применять векторные изображения и сжимать файлы.

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

  1. PunyPNG.
  2. TinyPNG.
  3. Shrink Pictures.
  4. Compressor.io.
  5. SiteReportCard
  6. jpeg-optimizer.com.

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

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

к оглавлению ↑

Технология оптимизации для web

Технологии оптимизации картинок

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

  1. Уникальность.
  2. Качество.
  3. Размер изображения.
  4. Выделяться среди толпы.
  5. Тег Alt и Title.

к оглавлению ↑

Уникальность изображения

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

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

  • Купить на бирже;
  • Заказывать у фрилансеров;
  • Сделать самому.

Проверить фото на уникальность можно несколькими способами. В первом способе открываем Яндекс, переходим в раздел Картинки и перетаскиваем туда свое фото с рабочего стола. Если файл будет не уникальным, в выдаче вы увидите точно такие же примеры, которые уже используют другие сайты.

Уникальность изображения

Если ваше фото окажется уникальным, в выдаче вы вообще ничего не увидите или поисковик покажет вам несколько похожих, но не одинаковых изображений. Кроме этого, проверить на уникальность можно с помощью онлайн сервиса tineye.com

к оглавлению ↑

Купить на бирже

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

Технология оптимизации изображения

 

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

к оглавлению ↑

Заказывать у фрилансеров

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

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

Оптимизация изображений

Готовый пример можете посмотреть в этой статье на самой первой картинке. Любой дизайнер, даже самого мелкого уровня знает как это делается. По стоимости можно договориться без проблем, одна такая картинка может обойтись вам в 50 рублей.

к оглавлению ↑

Сделать самому

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

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

к оглавлению ↑

Качество картинки

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

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

к оглавлению ↑

Размер изображения

Размер изображения так же зависит от формата, который вы ставите при сохранении. Всегда старайтесь использовать JPG формат. Изображение должно быть не меньше 100-150 пикселей, иначе поисковики могут подумать, что это часть вашего дизайна. Если необходимо вставить очень крупное изображение, используйте миниатюры. При нажатии мышкой, картинка должна открываться отдельно на все свои габариты.

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

к оглавлению ↑

Выделяться среди толпы

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

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

к оглавлению ↑

Тег Alt и Title

Тег Title — если написать для картинки заголовок, он будет показываться при наведении на него мышкой. Картинки ищут по заголовкам, поэтому данный тег тоже важный и необходим быть в каждой картинке. В качестве заголовка нужно указывать название, которое будет определять, что это за картинка. Количество символов желательно не больше 50-60 знаков.

Оптимизация изображений

Тег Alt — более важный тег, который просто обязан быть в каждом изображении. Данный тег дает понять, что используется в картинке. В нем обычно пишут ключевое слово для страницы. Alt имеет большое значение и влияет на внутреннюю оптимизацию. Для каждой картинки старайтесь использовать разные ключевые слова, чтоб сильно не переборщить.

к оглавлению ↑

Оптимизация изображений wordpress

Если вы используете Wordress, можно попробовать установить на сайт для оптимизации изображений один из нескольких плагинов. Плагины упрощают работу с такими сервисами. Они простые в установке и требуют дополнительных настроек. Для оптимизации уже существующих файлов, переходим в раздел Медиафайлы, выбираем нужные файлы и запускаем процесс оптимизации. Среди плагинов оптимизации можно выделить:

  1. Media File Renamer.
  2. PB Responsive Images.
  3. Hammy.
  4. WP Smush.it.

Оптимизация изображений wordpress

Я использовал последний вариант, плагин WP Smush.it. Устанавливаем его и активируем. После этого в разделе Медиафайлы появится новый пункт с названием плагина. Выбираем нужны для оптимизации картинки и нажимаем Smush It. Результат будет показан в том же окне. Проблем по работе с плагином возникнуть не должно.

При загрузке больших изображений, используйте параметры width и height, чтоб задать ширину и высоту для картинки. Изменить исходный размер можно прямо в панели медиафайлов wordpress. Там же можно повернуть картинку на все четыре стороны, обрезать или отразить по горизонтали или вертикали.

А каким способом вы оптимизируете изображения и создаете уникальные картинки для сайта? Поделитесь своим опытом.

Евгений Несмелов

Подпишись на обновления блога!Будь в курсе первым
3 комментария

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

3 комментария

по хронологии
по рейтингу сначала новые по хронологии

Евгений, очень интересная и полезная статья! Для себя узнал много интересного! Надо будет попробовать плагин WP Smush.it.

Автор

Спасибо Александр

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