Автор: Рубрики: Полезности Просмотрено: 489
Способы оптимизации картинок для сайта на WordPress и не только
28Фев2019

Почему это важно?

Основные способы оптимизации изображений WordPress.

Вывод статьи.

images-for-wordpress

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

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

 

Почему это важно?

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

 

Быстрая загрузка сайта.

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

 

Сайт на хостинге станет занимать меньше места.

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

 

Улучшение рейтинга вашего сайта в популярных поисковиках.

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

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

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

В данной статье рассмотрим как качественно и быстро сделать оптимизации изображений для вашего сайта на Вордпресс и не только.

 

Популярные способы оптимизации картинок для вашего сайта.

При проведении оптимизации изображений главное достичь цели – размер картинок уменьшить при этом качество их сохранить. Безупречных способов оптимизации конечно же не существует, но все же вы всегда можете достичь “золотой середины” в данном процессе.

Рассмотрим основные 5 методов для качественной оптимизации изображений на вашем сайте.

 

Метод 1. Правильный формат файла изображения – залог успеха оптимизации.

Формат файла играет важную роль, поэтому для начала убедитесь в том, правильное расширение вы выбрали для вашей картинки. Самые популярные и часто применяемые – это JPEG и PNG. Почему используются JPEG: небольшой размер, равномерное качество, возможность менять размер и сжимать изображение без влияния на качество.

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

Исключение в этом правиле касается популярного в последнее время формата GIF – анимированное изображение. Оно напоминает короткое видео. Поэтому если вы планируете добавлять видео на сайта, используйте для него именно формат GIF.  

 

Метод 2. Сжатие картинок для сайта.

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

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

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

 

Список инструментов для проведения оптимизации вручную.

 

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

  • Adobe Photoshop – предлагает большой инструментарий для работы с картинками, в том числе для их оптимизации и сжатия.
  • Gimp – аналог Фотошопа для оптимизации изображений.
  • Affinity Photo – также обладает достаточно широким функционалом для работы с картинками.
  • Paint.NET – редактор изображений, который встроен в ОС Windows, менее функциональный чем предыдущие программы.

 

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

 

Инструменты автоматической оптимизации изображений.

Некоторые самые распространенные редакторы – JPEGmimi и TinyPNG.

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

 

Плагины CMS WordPress для сжатия изображений.

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

  • Imagify Image Optimizer – подходит для изменения размеров картинок и их сжатия.
  • ShortPixel Image Optimizer – бесплатный плагин для сжатия изображений до 100 штук в месяц. Предлагает функцию восстановления и оптимизации групп изображений.
  • WP Smush – позволяет уменьшать размеры картинок, не влияя на их качество отображения на сайте.
  • Optimus Image Optimizer – еще один простой плагин, с помощью которого можно проводить сжатие картинок без влияния на их качество.

 

Метод 3. Смена размера картинок.

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

 

Метод 4. Проверка аккуратности обрезки картинок.

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

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

 

Метод 5. Улучшение СЕО параметров для изображения.

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

 

Текст заголовка изображения.

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

Как изменить заголовок? Для этого откройте редактор записи, наведите на картинку и нажмите Карандаш. Вам откроется окно редактирования, где Вы и сможете изменить Заголовок.

 

Значение тега ALT для вашего изображения.

Данный текст передает Гугл информацию о чем картинка на вашем сайте.

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

Как изменить? Также как и в предыдущем случае нажмите на значок Карандаша в редакторе возле картинки. В поле Атрибут alt вы можете ввести ключевое слово, которое будет соответствовать изображению на сайте.

 

Название файла.

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

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

 

Вывод.

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

 

490 раз(а) 6 Сегодня просмотрено раз(а)
  • Марина Семёнова

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

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

      • Марина Семёнова

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

  • Из всего предложенного я только сжимаю картинки. Это реально помогает ускорить загрузку страницы, даже если на ней огромное обилие всякой графики. Раньше ещё теги прописывал, но быстро надоело.

    • Марина Семёнова

      Очень тяжко бывает нормально вставить все картинки и прописать к ним теги. Только вчера делала сайт на вордпрессе и там надо было создать первоначальное наполнение, и это был ужас – в каждой статье по 5-6 картинок! Всего 20 статей, отложенных по времени публикации на ближайший месяц. Как же я намучалась подгонять их все под 1 формат, но особенно писать к ним ко всем теги! Целую ночь трудилась, лишь бы избавиться от этой мутотени. Заказчик остался доволен, ещё и сверху немного заплатил. 🙂