Как вставить картинку на сайте
Зачем нужна картинка на сайте
Помним со школьных лет при чтение книг (будь это учебники или художественные произведения) мыпредпочтения отдавали книгам с картинками и иллюстрациями. Нас и до сих пор приманивает все красивое блестящее броское и поэтому отдаем предпочтение книгам с картинками и все возможными схемами. Также и наши статьи на сайтах, как красивые страницы в хорошей книги не обходятся без картинок. А вот сколько, как и какие картинки желательно можно вставить в статью, мы рассмотрим на данной странице этой статьи.
Смотрим краткое содержание:
1.Как вставить картинку в шапку сайта.
2.Как вставить картинку в шапку сайта WordPress
3.Как скачать картинку в шапку сайта
4.Виды уменьшения картинок
5.Лишний вес картинки.
6.Виды форматов картинок
7.Программы для уменьшения веса картинок.
8.Как уменьшить вес картинки в paint.
9.Как уменьшить вес картинки в фотошопе
10.Уменьшить вес картинки уменьшая размер
11.Плагины WordPress для оптимизации изображений
12.Как сделать картинку меньше весом.
13.Вставить картинку в статью.
14.Параметры изображения в статье.
15.ДОПОЛНИТЕЛЬНЫЕ НАСТРОЙКИ.
Как вставить картинку в шапку сайта.
Установили конструктор сайтов и заходим на свой сайт введя свои реквизиты: Логин и пароль и видим стандартную тему(шаблон) по умолчанию. Конечно она нам не нравиться, но тем не менее её не нужно удалять в целях безопасности.Это может сказаться в будущем на случай, если по каким то причинам сайт перестанет открываться и мы сможем через FTP-клиент на хостинге восстановить стандартный шаблон. И так выбираем себе шаблон по тематике нашего сайта в каталоге темы. Допустим опять нам не нравиться картинка в шапке вновь выбранной темы. Мы считаем, что она не отображает суть нашего сайта, Мы пока думаем так, что шапка считается это его визитной карточкой, которая должна привлекать посетителей на наш сайт или блог. Поэтому начинаем думать как вставить новую картинку в шапку сайта.
Как вставить картинку в шапку сайта WordPress
Это делается обычно в панели управления сайтом и начинают в горизонтальном меню консоли «НАСТРОИТЬ».См.Скриншот. в четырех из стандартных тем.
1.Twenty Thirteen, 2.Twenty Sixteen, 3.Twenty Fifteen,4.Twenty Fourteen: См.Скриншот
Найти можно по директории: НАСТРОИТЬ>ДОБАВИТЬ ИЗОБРАЖЕНИЕ> ДОБАВИТЬ >Выбрать из папки, куда предварительно скачаем из интернета.
Как скачать картинку в шапку сайта
Вставить картинку в каком формате
Скачаем нужную картинку, желательно по тематике нашего сайта размером 1600 × 230 в формате«Gif» из интернета в библиотеку нашего компьютера.Возможно, сразу такого размера и формата мы можем и не найти и поэтому не страшно скачать и большего размера.Стандартные темы имеют функции при вставки картинки не посредственно в свою шапку их обрезать.тем не менее при скачивание иметь картинку приближенную к данным размерам. А вот формат может быть и разный:«Gif»,«Jpeg»,Png».Встает вопрос конечно интересный, а итог конечных интересов заключается в финансовых затратах за хостинг. Каждый из выше перечисленных форматов имеет свой вес.
Виды уменьшения картинок
Существуют несколько видов вставки картинок в шапку сайта, в зависимости от разновидности конструкторов сайтов и шаблонов. Но принцип остается один и тот же:
1.Редактировать и вставлять картинку можно на хостинге в папке сайта под названием нашего сайта по директории:/МОЙ САЙТ/public html/wp-content/themes/МОЯ ТЕМА/images/LOGO
2.Редактировать и вставлять картинку не посредственно на сайте в админ панели.
Первый вариант кажется трудоемким и требует знания больших программ (Notepad++, Photoshop) нежели в первом варианте.
Лишний вес картинки
Если кто не знает или забыл можно напомнить о том, что в стандартном графическом редакторе «Paint» есть те же функции, которые могут преобразовывать картинки нужного формата . См. Скриншот.
И каждый формат имеет свой определённый объём на жестком диске компьютера в измерениях: байт килобайт мегабайт гигабайт терабайт.В результате чего каждый формат имеет свою качественную оценку. Аналогично ситуация и на хостинге где мы арендуем место для выхода в интернет в виде наших сайтов. Исходя из этого можно сделать вывод:
Чем качественней картинка на сайте, тем больше она занимает место на хостинге.
Но этим не желательно увлекаться тем администраторам сайтов, у которых финансовые затруднения. Нужно знать хорошая качественная фотография в формате PNG размеров 600х400 может весить от 3 до 5 mb. Десятка два таких картинок займет половину вашего первоначального объема места на хостинге. Хостинг-провайдеры об этом напомнят быстро! Следовательно чем больше качественных картинок на сайте, тем меньше остаётся места для статей на хостинге за приобретённый тариф. В принципе это не проблема, потому что тариф можно изменить увеличив объём места на хостинге. И подумать как выправить ситуацию не затрачивая дополнительных денег. А теперь смотрим расположение форматов по качеству и занимаемому объему
Виды форматов картинок
Нужно помнить форматов существует больше,это мы можем узвать в Справочнике компьютера или даже в редакторе «Paint».Но по сколько мы их все не применяем на сайтах, приведем лишь некоторые.
На картинке видно,слабо но видно качество каждого формата.Формат имеющий больше килобайтов выглядит намного лучше и качественней.От сюда вывод:Картинка имеющая большее количество байтов имеет наибольшее качество и соответственно больший вес.И так в итоге: См. Скриншот.
1.Первое место занимает формат-«BMA»
2.Второе место-«Png»
3.Третье место-«Jpeg»
4.Четвертое место занимает формат-«Gif».
Программы для уменьшения веса картинок
Как уменьшить вес картинки в paint.
Для этого нужно посмотреть программы на своем компьютере и в справочнике забить такую тревогу: вес изображений. На что можно получить много дельных советов. Не поленимся и полистаем документацию на своей машине. Мы сказали уже выше о том. что для уменьшения веса картинок на сайте применяется стандартная программа «Paint». Которая не обязывает нас ходить на базар–тратить время, что то искать, потом изучать…Ведь практически на мало мальской машине устанавливаются все необходимые для редактирования изображений и фото все возможные графические редакторы. К тому же «Paint» не только преобразовывает в нужный формат,плюс справляется с уменьшением размера картинок. Кроме четырех основных программа сжимает и другие форматы.См.Скриншот
Не мало важную роль играет в руках многих пользователей программа «Paint.net»Программа любимая женской половиной—любительниц рисований и всевозможных виньеток, открыток и так далее.К этому списку можно отнести «SmallFoto». Позволяет обработать пакетом множество файлов и изменить их размер, качество, применить фильтры.
Можно таким образом уменьшить в пикселях соотношение сторон картинки, преобразовать один формат на другой с менее количеством байтов тем самым его вес будет меньше.
Как уменьшить вес картинки в фотошопе
По мимо стандартных программ в операционных системах компьютеров есть множество программ способных редактировать картинки с изображениями и фото.В интернете одно из первых мест занимает «Photoshop». Это графический редактор способен на многое. Об этом мы уже писали как его приобрести и познакомиться с параметрами.
Уменьшить вес картинки уменьшая размер
Можно таким образом уменьшить в пикселях соотношение сторон картинки, тем самым его вес будет меньше.
Существуют варианты сжатии с потерями и сжатия без потерь.
При первом выбрасывается большое количество данных, без какого можно обойтись,при этом сохраняя общий вид изображения. В таком случае эффективно уменьшается вес изображений, но вместе с тем теряется визуальное качество картинки.
При втором сжатии без потерь не выбрасываются никакие компоненты.
- Этот процесс похож на создание zip-файла.
Сначала файлы архивируются в одном гораздо меньшем по объёму zip-файле. Но после клика на странице на странице пользователей все картинки снова оказываются доступны в полном объёме загруженном первоначально.См.Скиншот
1.БОЛЬШОЙ,2.ПОЛНЫЙ,3.Средний,4.МИНИАТЮРА,5.ПРОИЗВОЛЬНЫЙ.Если вставить картинку в Формате размером 1307х677:БОЛЬШОЙ с компьютера в библиотеку сайта и при этом в редакторе сайта изменить формат ПРОИЗВОЛЬНЫЙ размером начиная устанавливать в первую очередь высоту 177,затем автоматически у пропорции установится и ширина 342.Иными словами мы картинку сжали в админ панели до нужных нам размеров на странице статьи.А вот после сохранения статьи или после опубликования, на странице пользователей при клике на картинку мы получаем формат БОЛЬШОЙ в первоначальном качестве и размере.Возможности уменьшения веса картинок могут быть разные в зависимости от конструкторов и их шаблонов и установленных плагинов для редактирования изображений.
Плагины WordPress для оптимизации изображений
Установим плагин для сжатия изображений«Ewww Оптимизатор изображения».Умеет уменьшить размеры изображений и преобразовывать форматы.Адрес:https://wordpress.org/plugins/ewww-image-optimizer/.Для люпопытных представляем перечень плагинов способных изменять форматы и размеры картинок:Сжатие изображений с потерями и без потерь
1. Kraken Image Optimizer
2. Compress JPEG & PNG images
3. WP Smush
4. ShortPixel Image Optimizer(копируем и в поисковик)
Как сделать картинку меньше весом
Хотя можно вставить не одну картинку в пост на сайте и в любое место статьи, если позволяют финансы за лишние GB на хостинге.
А если нет, стоит ли после уведомления хостинга о ограничение доступа на наш сайт
1.Кликать по статьям и выискивать громадные картинки в формате «Png».
2.Кроме этого придется затратить уйму времени на поиски проблем на сайте в блокноте .
3.Следовательно лишний раз входить на хостинг через менеджер.
4.Искать файлы с перегрузкой оптимизировать таблицы в базе данных и так далее.
Вообщем есть о чем подумать.
Не забываем чем легче наш сайт тем быстрее он открывается в браузерах.
Вставить картинку в статью
1.Картинки должны быть сохранены в режиме RGB
2.Анимированные изображения в формате .gif будут отображаться только при размере 100%
3.Выдерживаем размер и заполняем все установленные параметры.
Загрузка картинок выполняется из папок или программ компьютера
Перейдем на страницу Записи -> Добавить новую или Страницы -> Добавить новую,или откроем существующую запись в режиме редактирования.Установим курсор в месте установки картинки и нажмем на |ДОБАВИТЬ МЕДИАФАЙЛ|.
Выбрав нажимаем ВЫБРАТЬ и открывается библиотека сайта, которая находится на сервере нашего хостинга.Выбор возможен из любой папки компьютера и библиотеки сайта(если есть подходящие для данной статьи).
Помните:
Удалив изображение из библиотеки наша статья окажется без рисунка.
Выбираем картинку, кликнув по нему.
После нажатия вставить в запись наше изображение окажется на странице статьи. Но не на месте где мы хотели бы.
Для этого нажимаем по картинке в произвольное поле. После того как она обозначиться в контурной рамке нажимаем на иконку карандашика чуть левее крестика «ПАРАМЕТРЫ ИЗОБРАЖЕНИЯ».
Параметры изображения в статье
ВСТАВКА МИНИАТЮРЫ производиться таким же образом,только внизу или сбоку панели управления.У кого как расположено КОЛИЧЕСТВО СТОЛБЦОВ.Это настраивается в НАСТРОЙКЕ ЭКРАНА:Для миниатюр загружаются картинки отдельно по размеру указанному нами в панели управления WordPress. НАСТРОЙКИ > МЕДИАФАЙЛЫ.Стандартный по умолчанию 150х150.Средний размер 600х400.Крупный размер до 1000х1000 — если нам не жаль места на хостинге.Опытные веб мастера такими размерами не балуются.См.Скриншот
Открываем окно с параметрами медиаплеера.Где мы должны заполнить все основные поля /НАСТРОЙКИ ИЗОБРАЖЕНИЯ/.Обозначив расположение по горизонтали (слева,по центру,справа) и продолжаем устанавливать параметры нажав внизу:
ДОПОЛНИТЕЛЬНЫЕ НАСТРОЙКИ.
1.заголовка картинки.
2.ОТКРЫВАТЬ В НОВОМ ОКНЕ./Без этой галочки картинка не будет открываться на статьях/.См.Скриншот
3.По необходимости можно редактировать размер.Не забываем ОБНОВИТЬ.Можно вставить и редактировать картинку прямо на странице статьи методом перетаскивания.
При этом нужно помнить о людях,а не о роботах и деньгах!
Картинка должна иметь расположение уместное статье и не мешать читаемости написанного и не отвлекающего от сути читаемого.Должно быть многие согласятся смотреть интересное увлекающее кино без реклам или нет?
Так же и на сайтах:читаешь-читаешь -бац далее внизу всучили рекламу: «о продаже женских трусиках из Китая»Бывает без реклам ещё смешнее «нарочно не придумаешь» См.Скриношот.
Картинка и её размер должен соответствовать данной статье,которая читалось бы лего и воспринималась доходчиво.Для интереса можно посмотреть в поисковиках сайты с 3-х—5-и годичном стажем находятся на 10 а то и 20 странице поиска.Это ведь о чем то говорит
Для чего нужен Денвер
Для того чтобы умело пользоваться и уметь вставить картинки в пост и устанавливать темы,плагины,неплохо иметь для этого свой сервер на компьютере Денвер.Как скачать и установить локальный сервер Денвер можно узнать подробней в статье.На Денвер установить WordPress и можно смело тренироваться на конструкторе сайтов. Не задумываясь что, где то,что то сломается,слетит или не пропишется.
Однозначных конкретных советов не бывает для этого существует связь для консультаций в виде регистраций на сайте как подписчик или пользователь.Можно обращаться в комментариях,через E-mail,телефон.Смотрите продолжение: как можно сменить название темы,картинки логотипа и картинку значка в браузере смотрите в следующей статье
Следующая статья:Как сменить название темы WordPress
И ещё
