Создать сайт самому для пассивного заработка

Как вставить картинку на сайт WordPress

Как вставить картинку на сайте

Картинки на сайте

vstavit-kartinku-na-sajt
Со школьных лет при чтение книг (будь это учебники или художественные произведения) мы предпочтения отдавали книгам с картинками и иллюстрациями.
Нас и до сих пор приманивает все красивое, блестящее, броское.
Поэтому отдаем предпочтение книгам с картинками и все возможными схемами.
Также и наши статьи на сайтах, как красивые страницы в хорошей книги не обходятся без картинок.
Сколько, как и какие картинки можно вставить в статью рассмотрим на данной странице этой статьи.



Нужны ли картинки на сайт

Установили конструктор сайтов.
Заходим на свой сайт в панель управления
Заполняем свои реквизиты: Логин и Пароль
Видим стандартную тему(шаблон) по умолчанию.
Конечно она нам не нравиться, но тем не менее, её не нужно удалять в целях безопасности.
Это может сказаться в будущем на случай, если по каким то причинам сайт перестанет открываться.
Поэтому мы сможем через FTP-клиент на хостинге восстановить стандартный шаблон.
И так выбираем себе шаблон по тематике нашего сайта в каталоге темы.
Допустим  опять нам не нравиться картинка в шапке вновь выбранной темы.
Считаем, что она не отображает суть нашего сайта.
Есть мнение, что  шапка сайта считается визитной карточкой.
Которая должна привлекать посетителей на наш сайт или блог.
Поэтому начинаем думать как вставить новую картинку в шапку сайта.

Главная картинка сайта

Это делается обычно в панели управления сайтом и начинают в вертикальной консоли «ВНЕШНИЙ ВИД»⇒ ТЕМА⇒в четырех из стандартных тем.
1.Twenty Thirteen, 2.Twenty Sixteen, 3.Twenty Fifteen,4.Twenty Fourteen:
Найти можно по директории: ТЕМА⇒ДОБАВИТЬ НОВУЮ⇒ ПРОСМОТРЕТЬ⇒ АКТИВИРОВАТЬ.


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

Картинки для фона сайта WordPress


Установили шаблон  нашей темы.
Теперь нам хочется изменить шапку шаблона.
То есть изменить картинку шрифт,цвет, логотип и так далее.
Для этого в МЕНЮ переходим в вертикальный блок НАСТРОИТЬ.
kartinka-nastroit

Скачать картинки сайта

Вставить картинку в каком формате
Скачать нужную картинку, желательно по тематике нашего сайта размером 1600 × 230 в формате«Gif» из интернета в библиотеку нашего компьютера.
Возможно, сразу такого размера и формата мы можем и не найти и поэтому не страшно скачать и большего размера.
Стандартные темы имеют функции при вставки картинки не посредственно в свою шапку их обрезать.
Тем не менее при скачивание иметь картинку приближенную к данным размерам.
А вот формат может быть и разный:«Gif»,«Jpeg»,Png».
Встает вопрос конечно интересный.
А итог конечных интересов  заключается в финансовых затратах за хостинг.
Каждый из выше перечисленных форматов имеет свой вес.




Виды уменьшения картинок

Существуют  несколько видов вставки картинок  в шапку сайта.
Это зависит от разновидности конструкторов сайтов и шаблонов.
Но принцип остается один и тот же:
1.Редактировать и вставлять картинку можно на хостинге в папке сайта под названием нашего сайта.
По директории:/МОЙ САЙТ/public html/wp-content/themes/МОЯ ТЕМА/images/LOGO
2.Редактировать и вставлять картинку не посредственно на сайте в админ панели.
Первый вариант кажется трудоемким и требует знания программ, нежели в первом варианте.
1.Блокнот HTML (Notepad++
2.Графический редактор Photoshop)

Лишний вес картинки

В стандартном графическом редакторе «Paint» есть те же функции, которые могут преобразовывать картинки нужного формата.
Каждый формат картинки имеет свой определённый объём на жестком диске компьютера.
Измеряется в таких обозначениях:
(Байт; килобайт; мегабайт; гигабайт; терабайт).
В результате чего каждый формат имеет свою качественную оценку.
К тому же влияет на наш объём  места на хостинге.
Где мы арендуем место для выхода в интернет в виде наших сайтов.
Исходя из этого можно сделать вывод:

Чем качественней картинка на сайте, тем больше она занимает место на хостинге.

Но этим не желательно увлекаться тем администраторам сайтов.
Тем боле у кого финансовые затруднения.
Нужно знать хорошая качественная фотография в формате PNG размеров 600х400 может весить от 3 до 5 mb.
Десятка два таких картинок займет половину вашего первоначального объема места на хостинге.
Хостинг-провайдеры об этом напомнят быстро!
Следовательно чем больше качественных картинок на сайте, тем меньше остаётся места для статей на хостинге за приобретённый тариф.
В принципе это не проблема, потому что тариф можно изменить увеличив объём места на хостинге.
И подумать как выправить ситуацию не затрачивая дополнительных денег.
А теперь смотрим расположение форматов по качеству и занимаемому объему


Виды форматов картинок

Нужно помнить форматов существует больше,это мы можем узвать в Справочнике компьютера или даже в редакторе «Paint».
Но по сколько мы их все не применяем на сайтах, приведем лишь некоторые.
На картинке видно, слабо но видно качество каждого формата.
Формат имеющий больше килобайтов выглядит намного лучше и качественней.
От сюда вывод:
Картинка имеющая большее количество байтов имеет наибольшее качество и соответственно больший вес.
И так в итоге:
1.Первое место занимает формат-«BMA»
2.Второе место-«Png»
3.Третье место-«Jpeg»
4.Четвертое место занимает формат-«Gif».

 Картинки в Paint.net

Мы сказали уже выше о том. что для уменьшения веса картинок на сайте применяется стандартная программа «Paint».
Которая не обязывает нас тратить время на поиски, скачивания и изучения программ
Ведь практически на мало мальской машине устанавливаются все необходимые для редактирования изображений и фото все возможные графические редакторы.
К тому же  «Paint» не только преобразовывает в нужный формат,плюс справляется с уменьшением размера картинок.
Кроме четырех основных программа сжимает и другие форматы.
Не мало важную роль играет в руках многих пользователей программа «Paint.net»
Программа любимая женской половиной—любительниц рисований и всевозможных виньеток, открыток и так далее.
Позволяет обработать пакетом множество файлов и изменить их размер, качество, применить фильтры.
Можно таким образом  уменьшить в пикселях соотношение сторон картинки, преобразовать один формат на другой с менее количеством байтов тем самым его вес будет меньше.



Как уменьшить вес картинки в фотошопе

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

Уменьшить картинки уменьшая размер

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



Сжатие картинок

Но после клика на странице на странице пользователей все картинки снова оказываются доступны в полном объёме загруженном первоначально.
1.БОЛЬШОЙ,2.ПОЛНЫЙ,3.Средний,4.МИНИАТЮРА,5.ПРОИЗВОЛЬНЫЙ.
Если вставить картинку в Формате размером 1307х677:
БОЛЬШОЙ с компьютера в библиотеку сайта и при этом в редакторе сайта изменить формат ПРОИЗВОЛЬНЫЙ.
Размером  начиная устанавливать в первую очередь высоту 177.
Затем автоматически у пропорции установится и ширина 342.
Иными словами мы картинку сжали в админ панели до нужных нам размеров на странице статьи.
А вот после сохранения статьи или после опубликования, на странице пользователей при клике на картинку мы получаем формат БОЛЬШОЙ в первоначальном качестве и размере.

Плагины WordPress для оптимизации изображений

Установим плагин для сжатия изображений

Webcraftic Robin image optimizer

Оптимизирует изображения без потери качества, ускоряет загрузку нашего сайта, улучшает SEO

Умеет уменьшить размеры изображений и преобразовывать форматы.Адрес:https://wordpress.org/plugins/ewww-image-optimizer/.
Для любопытных представляем перечень плагинов способных изменять форматы и размеры картинок:
Сжатие изображений с потерями и без потерь
1. Kraken Image Optimizer
2. Compress JPEG & PNG images
3. WP Smush
4. ShortPixel Image Optimizer(копируем и в поисковик)



Оптимизация картинки

EWWW Image Optimizer


Хотя можно вставить не одну картинку в пост на сайте и в любое место статьи, если позволяют финансы за лишние GB на хостинге.
А если нет, стоит ли после уведомления хостинга о ограничение доступа на наш сайт
1.Кликать по статьям и выискивать громадные картинки в формате «Png».
2.Кроме этого  придется затратить уйму времени на поиски проблем на сайте в блокноте .
3.Следовательно лишний раз входить на хостинг через менеджер.
4.Искать файлы с перегрузкой оптимизировать таблицы в базе данных и так далее.
Вообщем есть о чем подумать.
Не забываем чем легче наш сайт тем быстрее он открывается в браузерах.


Вставить картинку в статью

Вставить картинку на страницу сайта

1.Картинки должны быть сохранены в режиме RGB
2.Анимированные изображения в формате .gif будут отображаться только при размере 100%
3.Выдерживаем размер и заполняем все установленные параметры.
Загрузка картинок выполняется из папок или программ компьютера
Перейдем на страницу Записи -> Добавить новую или Страницы -> Добавить новую,или откроем существующую запись в режиме редактирования.Установим курсор в месте установки картинки и нажмем на |ДОБАВИТЬ МЕДИАФАЙЛ|.
Выбрав нажимаем ВЫБРАТЬ и открывается библиотека сайта, которая находится на сервере нашего хостинга.Выбор возможен из любой папки компьютера и библиотеки сайта(если есть подходящие для данной статьи).
Помните:
Удалив изображение из библиотеки наша статья окажется без рисунка.
Выбираем картинку, кликнув по нему.
После нажатия вставить в запись наше изображение окажется на странице статьи.
Но не на месте где мы хотели бы.
Для этого нажимаем по картинке в произвольное поле.
После того как она обозначиться в контурной рамке нажимаем на иконку карандашика чуть левее крестика «ПАРАМЕТРЫ ИЗОБРАЖЕНИЯ».




Размеры картинок в статье

ВСТАВКА МИНИАТЮРЫ производиться таким же образом,только внизу или сбоку панели управления.
У кого как расположено КОЛИЧЕСТВО СТОЛБЦОВ.
Это настраивается в НАСТРОЙКЕ ЭКРАНА:
Для миниатюр загружаются картинки отдельно по размеру указанному нами в панели управления WordPress. НАСТРОЙКИ > МЕДИАФАЙЛЫ.
Стандартный по умолчанию 150х150.
Средний размер  600х400.
Крупный размер до 1000х1000 — если нам не жаль места на хостинге.
Опытные веб мастера такими размерами не балуются.
Открываем окно с параметрами медиаплеера.

Расположение картинок сайта

Можно вставить и редактировать картинку прямо на странице статьи методом перетаскивания.
Где мы должны заполнить все основные поля /НАСТРОЙКИ ИЗОБРАЖЕНИЯ/.
Обозначив расположение по горизонтали (слева,по центру,справа) и продолжаем устанавливать параметры нажав внизу:

ДОПОЛНИТЕЛЬНЫЕ НАСТРОЙКИ.

1.Alt картинки.
2.Заголовка картинки.
3.Title
2.ОТКРЫВАТЬ В НОВОМ ОКНЕ./Без этой галочки картинка не будет открываться на статьях/.
3.По необходимости можно редактировать размер.
Не забываем ОБНОВИТЬ.
Картинка должна иметь расположение уместное статье и не мешать читаемости написанного и не отвлекающего от сути читаемого.
Картинка и её размер должен соответствовать данной статье.
Которая читалось бы лего и воспринималась доходчиво.
Предыдущая статья
«Как сменить название темы WordPress» Следующая статья:
«Создать сайт самому»