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

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

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

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

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

Размер изображения.
Соответствовать тому размеру в котором отображается на блоге. Например у Вас изображение 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»

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

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

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

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

http://kraken.io/web-interface — сильно сжимает, ухудшает качество.

http://web.archive.org/web/20090720063025/http://www.smush.it:80/ — меньше сжатие, лучше качество.

Посмотрим на примере сервиса Smush.it

1. Зайдите на сайт http://smush.it/ и переключитесь во вкладку «Uploader»

2. Выберите файл

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

Как оптимизировать изображение онлайн
переключитесь во вкладку «Uploader»

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

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

5. на странице откроется оптимизированное изображение. Нажмите на него левой кнопкой мыши — выберите «Сохранить как» — сохраните на своем компьютере.

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

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

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

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

   9 голосов
Средняя оценка: 4.7 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

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

Пошаговый План По Созданию Бизнес-Блога На WordPress
Оставьте свой комментарий:
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). Почему он не может найти?

на Блоге
в Фейсбук
в Вконтакте