Как быстро загрузить и вставить изображение на сайт через админку WordPress. И о чудесах обработки изображений

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

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

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

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

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

Для начала о главном: чудеса обработки изображений

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

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

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

А теперь смотрите как яркость позволила мальчику затмить свою подругу.

Обратите внимание на то, как выглядела фотография изначально.

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

Где брать качественные картинки

Если не хотите заморачиваться с изучением Photoshop, то можете приобретать картинки с сайта https://ru.depositphotos.com/. Здесь не только большой выбор рисунков, но, что более важно, их не придется обрабатывать. Да и никаких проблем с юристами из-за использования чужой интеллектуальной собственности не будет. Можете спать спокойно. Никто не придет и не выставит счет за то, что вы использовали плод его труда и сделали на этом миллиарды!

Что по ценам. Можно купить подписку на месяц, в течение которого вам будет разрешено скачать 50 фото. В любой день и время. Это обойдется в 4727 рубля. Столько же будет стоить право забирать себе по 5 фотографий в сутки в течении 30 дней. Если вы решаетесь работать с депозитом, я рекомендую именно этот способ. Забирайте все подряд «до лучших времен», пусть лежит! За те же 4727 рублей вы получаете уже не 50 фото, а 150 картинок!

Третий вариант мне не нравится. Он предполагает «кредит», но один рисунок может стоить несколько «кредитов», поэтому, получается невыгодно.

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

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

Вообще, работа с фотошопом – это полезный навык и если вы хотите научиться, то я рекомендую вам курсы Зинаиды Лукьяновой: https://photoshop-master.org/education.php. На этой страничке вы можете найти уроки для любой цели и уровня знаний.

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

Перейдем к технической стороне вопроса, а именно как же все-таки вставить изображение в свой блог?

Практическая часть

Открываем административную панель wordpress. Находим слева Запись – Добавить новую.

Теперь нужно Добавить медиафайл.

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

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

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

Выбираем и перетаскиваем изображения.

Щелкните по рисунку и обратите внимание на панель в левой части. Что тут есть интересного?

Тут нас интересует атрибут alt. Поисковые роботы анализируют этот атрибут, что способствует продвижению блога в интернете.

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

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

Выбираем Размер. Средний, я полагаю, вполне подойдет.

Теперь картинку надо вставить в запись.

Один клик по изображению в тексте статьи и у вас появится вот такое меню. Первые четыре кнопки позволяют подвинуть фото влево, вправо, выровнять по середине или не использовать выравнивание. Крест – удаление картинки. Значок карандаш означает ее редактирование.

Нажимаем.

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

Обновляем.

В админке изменения отображаются вот так.

А на сайте совсем иначе.

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

Представляете, это сделали вы, совершенно не зная код!

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