Как загрузить изображение на сайт

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

Как загрузить изображение на сайт

Вставить картинку в wordpress можно двумя способами:

  1. Добавить новый медиафайл в библиотеку.
  2. Добавить медиафайл сразу на страницу и в запись.

Первый вариант

В первом случае вы добавляете медиафайл в консоли через верхний или левый редактор, как показано на рисунке 1.

Добавить картинку wordpress

Рисунок 1.

Второй вариант

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

Как вставить картинку в wordpress

Рисунок 2.

 

Шаг 1. Настройка размера изображения

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

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

Средний размер загружайте внутри записи.

Крупный размер открывается, если пользователь по ним щелкнул.

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

Если автор об этом умалчивает, значит отредактируйте по нашей инструкции. Для этого откройте раздел консоли: «Настройки» + «Медиафайлы».

Настроить размеры изображений следует с учетом двух параметров:

  • размер ЭЛТ-мониторов (desktop) — рекомендуемое разрешение*;
  • ширина основного контента (Content Top) на сайте**.

Пример

Миниатюра. Размер миниатюры мы сохранили по умолчанию 150 х 150.

Средний размер. Ширина основного контента на сайте (Content Top, без боковых колонок – сайтбаров), где мы провели эксперимент (width) составила 960 px. Для измерения  Content Top мы использовали расширение Page Ruler для браузера Google Chrome. Необходимые для дальнейшей настройки данные: ширина (width) и высота (height). Ориентируемся только на ширину в пикселях и подбираем оптимальный вариант из распространенных: 300 х 300, 640 х 480, 800×600, 1024×768. (Максимальная ширина стандартных сайтов 1200 px).

Крупный размер. Из-за того, что большинство пользователей интернета (70%) используют ЭЛТ-мониторы, мы установили крупный размер 1024 × 768 (диагональ 15 дюймов).

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

Рисунок 3.

 

Шаг 2. Подготовка изображения

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

При загрузке одного изображения, на хостинге автоматически сохраняется 4 и более дублей: оригинал (полный), крупный, средний, миниатюра и другие, под мобильные устройства и планшеты, которые генерируют шаблон WordPress и тема вашего сайта.

Проверьте название файла вашего изображения:

  1. Латинские буквы.
  2. Минимум знаков препинания, из них можно оставить только точки, дефисы, нижнее подчеркивание.
  3. Отсутствие стоп-слов.
  4. Ключевые слова и названия страницы, записи (отличный вариант) или
  5. Название вашего сайта из доменного имени без доменной зоны (нормальный вариант).
  6. Слова не должны быть написаны слитно.

К стоп-словам относят предлоги, частицы, междометия, союзы, наречия, местоимения, вводные слова, числа от 0 до 9 (однозначные), другие часто употребляемые служебные, самостоятельные части речи, символы, знаки препинания. Относительно недавно этот список пополнили такие часто используемые в сети Интернет последовательности символов, как www, com, http и др. Источник: StudioF1

Пример

В этой записи «Как загрузить изображение на сайт» ключевое слово: загрузить изображение на сайт.

URL публикации: http://vakansii-studentam.ru/zagruzit-izobrazhenie-na-sajt/, где zagruzit-izobrazhenie-na-sajt – ключевое слово и название публикации на латинице (создается автоматически при включенном плагине Cyr to Lat enhanced).

Названия всех загруженных изображений: zagruzit-izobrazhenie-na-sajt-1, zagruzit-izobrazhenie-na-sajt-2, zagruzit-izobrazhenie-na-sajt-3 и т.п.

Это называется оптимизация изображений. Только в этом случае изображения принесут пользу вашему сайту.

Как добавить изображение на сайт

Рисунок 4.

 

Шаг 3. Вставка изображения на сайт

Размер изображения для сайта


Рисунок 5.

3.1. Создайте страницу или запись, как описано в предыдущей теме Как добавить новую страницу на сайт.

3.2. Загрузить изображение вторым способом (рассмотрен в начале статьи).

3.3. Выбрать размер изображения: средний, крупный или полный.

3.4. Выровнять по горизонтали: справа, слева, по центру.

3.5. Ссылка: оставить настройку по умолчанию «Нет».

Шаг 4. Оптимизация изображения для сайта

4.1. URL оставляем без изменений.

4.2. Заголовок: вписываем название страницы, записи. Этот параметр для всех изображений одной страницы (записи) может быть одинаковый.

4.3. Подпись: желательно вставить − кто, что, где, когда.

4.4. Атрибут alt − альтернативный заголовок. Каждая картинка на одной странице (записи) носит разные названия.

Например, для этой публикации подобраны следующие альтернативные заголовки: «Добавить картинку wordpress», «Как вставить картинку в wordpress», «Как вставить изображение на сайт», «Как добавить изображение на сайт», «Размер изображения для сайта», «Оптимизация изображения для сайта». (Указаны без кавычек.) Таким образом увеличивается число пользователей интернета, которых интересует то или иное.

4.5. Описание: добавить первый абзац страницы или записи.

Посмотрите, как выглядит название и описание картинки на Яндекс. Картинках.

Оптимизация изображения для сайта

Рисунок 6.

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

4.6. Вставить в запись.

Шаг 5. Добавить миниатюру

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

Шаг 6. Опубликовать страницу / запись.

Загрузить изображение на сайт нетрудно, но этого недостаточно. Нужно правильно настроить размеры медиафайлов, обязательно оптимизировать по названию файла, заголовкам (title и alt), добавить описание и подпись. Да, это трудоемкий процесс. Но только сначала. И он стоит того.

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

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

Узнать как уменьшить размер ранее загруженных изображений можно здесь.

Оставьте в комментарии ссылку на созданную вами страницу или запись по программе «Создание сайта бесплатно самостоятельно». Мы порадуемся за вас! Не забудьте оформить подписку на комментарии и получите уведомление об ответе. Если вы еще знаете что это такое Зачем нужна подписка на комментарии wordpress читайте и подключайте.

Марина Белоусова

Преподаватель-эксперт в области прикладных социально-экономических программ Центра компьютерного обучения «Специалист» при МГТУ им. Н.Э. Баумана. Директор специальных и краудфандинговых проектов Российского агентства развития информационного общества. Владелец интернет-проектов под брендом Эксперт BTL.

11 Responses to “Как загрузить изображение на сайт”

  1. Юля says:

    АААААААААААА! А что делать с ранее загруженными изображениями? удалить?

    • Yaroslaw says:

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

  2. Лейла says:

    Большое спасибо, было полезно узнать о том, как правильно называть изображения и добавлять описания к ним. Этого раньше я не знала, впредь буду уделять этому внимание.

    • Марина Белоусова says:

      Лейла, рада Вас видеть! Вижу, что Вы ответственный человек. Думаю, что мы станем хорошими партнерами. Успехов!

    • Yaroslaw says:

      Лейла, уверены, что теперь Ваш благотворительный фонд “Шаг навстречу” будут находить по фотографиям новые благотворители, волонтеры, и просто хорошие люди. Первый шаг на пути оптимизации Вашего нового сайта Вы уже сделали. Поздравляем! А еще рекомендуем Вам сделать граватар – администратор приличного сайта не вызывает доверие “без лица”. Будут вопросы, задавайте. Я с радостью на них отвечу. Ссылка на инструкцию по граватару: http://vakansii-studentam.ru/kak-ustanovit-gravatar/

  3. Екатерина Мнишек says:

    Здравствуйте. У нас тема Infobis и автор рекомендует другие размеры: “В меню wordpress, на странице Параметры – Медиафайлы укажите размер изображений:
    Размер миниатюры: ширина – 0, высота – 0. Средний размер: макс.ширина – 0, макс.высота – 0. Крупный размер: макс.ширина – 700px, макс.высота – любая.
    Поставьте птичку в чекбоксе “Обрезать миниатюру точно по размерам”. Как нам настроить размеры: по инструкции автора или вашей?

    • Yaroslaw says:

      Здравствуйте, Екатерина. Задайте те размеры которые указала автор темы Ксана. Наша инструкция для тех тем, которые не предусматривают настройку изображений. Дело в том, что в теме предусмотрено больше возможностей для показа изображений. Например, можно настроить лайтбокс и миниатюры записей будут появляться во всплывающем окне. Таким образом посетитель, может перелистывать не записи, а изображения. И выбрать для чтения ту запись, в которой ему больше понравится миниатюра.

  4. Дмитрий с Буридо says:

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

    • Yaroslaw says:

      Со временем Вы научитесь всю эту работу делать быстро. Если не захотите делать сами, можете поручить эту работу фриласру. Недорогие услуги можно заказать на сайте Work-zilla. http://www.work-zilla.com/?ref=43363

  5. Марина, здравствуйте! У меня не получается фотография на страницу “Угай бэшэгщщд”. бэшэгүүд. По-русски Родословное древо.
    Помогите покрасивше сделать. Эрдэм уехал в лес на калымную работу.

  6. Сайн байнаа, Марина! Спасибо за Ваши уроки. Помогают мне. Трудно мне дается загрузка фотографий. А без них статьи получаются без души. Не послушала Вас, поспешила – загрузила фотографии прямо с фотоаппарата, а они даже на экран компьютера не входят – очень большие. И страница очень медленно с ними загружается. Пришлось все удалять и оптимизировать. Марина, всё-таки я становлюсь смелее с вами, не боюсь свое мнение высказать.. что-то со мной происходит. Потом чувствую вашу защиту, и за вашей хрупкой спиной чувствую себя увереннее. Мы на правильном пути? Да!!!

Поделитесь своим инсайтом

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>