Как правильно подготовить изображение к публикации на блоге на WordPress

  Автор:
  25 комментариев
  11571
Как правильно подготовить изображение к публикации на блоге

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

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

Требования к изображению для статьи:

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

Без лишних полей
Перед загрузкой необходимо обрезать лишнее или вырезать нужное.

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

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

Формат изображения
В WordPress можно использовать изображения в формате jpeg, png или gif.

Ну что ж, задача ясна. Приступим к выполнению.

В этой статье мы рассмотрим:

  • Как обрезать изображение
  • Как уменьшить изображение
  • Как оптимизировать изображения
  • Как переименовать изображения

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

Как обрезать изображение

Для этого мы воспользуемся программой http://pixlr.com/editor. Она бесплатная.

1. Зайдите в программу Pixlr.com и нажмите на «Загрузить изображение с компьютера»

2. Выберите изображение на компьютере для редактирования.

3. Выберите слева в панеле инструмент «Обрезка»

4. Наведите мышку на изображение слева вверху = Нажмите левую кнопку мыши и удерживайте = ведите мышку в правый нижний угол = отпустите, когда дойдете до нужного места.

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

5. Кликните по любому значку или полю вне изображения

6. Во всплывшем окне нажмите «Ок»

Небольшая видеоинструкция:

Как уменьшить изображение

Предположим Вам нужно уменьшить то же изображения, что мы только что обрезали. Старайтесь уменьшить изображение до такого размера, как оно будет выглядеть на блоге. Например: максимальная ширина на блоге в шаблоне AB-Inspiration 588px. На странице без боковой колонки — 966px.

1. В  Pixlr выберите в меню сверху «Изображение» — «Размер изображения»

2. Во всплывшем окне укажите желаемые размеры. Убедитесь, что стоит галочка «Сохранить пропорции»

3. Нажмите на кнопку «Да»

Как изменить размер изображения

Как изменить размер изображения

Как сохранить и переименовать изображение

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

1. Выберите на верху в меню «Файл» — «Сохранить»

2. Выберите куда сохранять файл — «Мой компьютер»

3. В поле «Имя» впишите название файла

4. Выберите формат — JPEG или PNG (PNG — если Ваше изображение с прозрачным фоном)

5. Нажмите на кнопку «OK»

Как сохранить изображение

Как сохранить изображение

Как оптимизировать изображения

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

Например: https://www.iloveimg.com/ru/compress-image

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

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

 


Создайте сайт с нами — легко и быстро!

С вопросами и за помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget

 

Как правильно подготовить изображение к публикации на блоге на WordPress

   9 голосов
Средняя оценка: 4.7 из 5
Находите эту информация полезной и интересной? Тогда смело жмите на кнопки соцсетей и поделитесь этой информацией со своими друзьями и знакомыми:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Подпишись на меня в Telegram! Только важные новости и лучшие статьи
Оставьте свой комментарий:

Комментарии на Блог
25 комментариев
  1. Игорь

    Зачем лишние программы на компе, тем более, что все это можно сделать двумя кликами в стандартной программе Менеджер рисунков из пакета Microsoft Office

  2. И правда, когда только начинала, даже этого не знала. Очень полезная статья. Я использую программу Photoshop для работы с изображением, а вес уменьшаю в программе Riot. Что касается тегов, для меня новость, что прописывать их надо латиницей. Вот не даром говорят:»Век живи, век — учись. Спасибо, Анфиса. Ни разу не ушла с блога без какой-нибудь новой информации. Удачи Вам и Вашим читателям. ;)

  3. Я тоже пользуюсь Майкрософт Офис для «уникализации» изображения.

  4. Наталья

    Недавно познакомилась с программой Pixlr.com — действительно очень полезня штука )

  5. Алла Мартынова

    Замечательная программа, уже все проделала по шагам, на русском языке. все понятно, не то. что в фотошопе. Мне понравилось!

    Спасибо, Анфиса! Жду анонс! =)

  6. Марина Мышелова

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

    • Марина, если Вы пользуетесь программой Photoshop, то можете сжимать прямо там. Когда изображение готово, нажмите в меню «Файл» — «Сохранить для Веб».

    • Латиницу обязательно!!! Кириллица может вызвать совершенно непредсказуемые ошибки. Например одноклассники очень чувствительны к кириллице. И если изображение которое Вы прикрепили к статье названо кириллицей, то никто не сможет поделиться Вашей статье в одноклассники. Есть еще масса ошибок, сейчас уже не вспомню :)

  7. Анфиса! Я так рада, что снова много полезной информации по картинкам! У меня ещё вопрос — как сделать картинку на всю длину шапки. Ведь в основном все картинки небольшого размера. Как сделать меньше — я понимаю — обрезать. А как из маленькой (например, 160 на 160) картинки сделать длинную, чтобы вставить её в шапку?

    • Натали, это не очень хорошая идея :). Увеличить картинку можно (делаете то же самое, что и с уменьшением, только пиксели ставите больше), но качество у нее будет хуже. А если Вы к примеру из картинки 160px хотите сделать 960px, то качество будет очень плохим.
      Поэтому изначально Вам нужно найти картинку большого размера и уже из нее сделать такой размер какой нужно.
      Или еще можно увеличить холст. Тогда маленькая картинка (160 на 160) будет занимать какую-то часть большого изображения. Остальную часть изображения можно залить цветом или наложить другое изображение.
      Вообще, если хотите более профессионально работать с изображениями, попробуйте набрать в google «как уменьшить изображение», «как увеличить изображение», «как наложить одно изображение на другое», «плавный переход от одного изображения в другое» и прочие. В интернет огромное количество бесплатных видеоуроков и инструкций по работе с изображениями.

      • Спасибо большое, Анфиса! Просто таких больших картинок (до длины шапки) я не встречала нигде. Они вообще есть где-то?

        • Конечно есть :). Для примера просто откройте Google images. Наберите ключевое слово. Отобразиться каталог картинок. Далее под полем поиска нажмите на кнопку «Инструменты поиска» — на выплывшей панеле нажмите на «Размер» — выберите нужный размер или задайте произвольный.

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

  8. Анфиса, я не совсем понимаю — зачем оптимизировать изображение, чтоб оно меньше весило?

  9. Max

    Для сжатия вот этот сервис хорош:

  10. Юля

    Анфиса, хотела бы уточнить: 1. функция масштабировать в самом WordPress помогает ли уменьшить фото, так чтобы освободить место на сервере? Или изначальное большое изображение сохраняется в любом случае на сервере, а уменьшенное появляется в посте?
    2. И правильно ли я понимаю, что оптимизация нужна для того, чтобы перевести фото jpg в png?

  11. Анфиса, я сжала одно изображение — у меня получилось. А потом сколько ни пыталась сжать на сайте smush — там написано Smush.it did not find any saving of your image(s). Почему он не может найти?

Ваш адрес email не будет опубликован. Обязательные поля помечены *