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

Без скриншотов трудно разобраться, что надо делать, уловить последовательность действий.

Начинающие блогеры, давайте учиться, как вставить картинку на сайт WordPress правильно.

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

Рассмотрим эти способы. 

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

Первый способ добавить, загрузить картинку:
МЕНЮ АДМИНПАНЕЛИ - МЕДИАФАЙЛЫ - ДОБАВИТЬ НОВЫЙ;

Второй способ загрузить, разместить изображение на сайте:
Непосредственно в ЗАПИСИ - РЕДАКТОР админпанели блога WordPress (режим ВИЗУАЛЬНО);

  • наведите курсор на нужное место в тексте;
  • нажмите вкладку ЗАГРУЗИТЬ/ВСТАВИТЬ (ДОБАВИТЬ МЕДИАФАЙЛ).

При этом откроется окно ВЫБЕРИТЕ ФАЙЛЫ.

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

Все изображения, которые вы разместите в Записи, будут собраны в Галерее этой записи.

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

На вкладке ВЫБЕРИТЕ ФАЙЛЫ выбирайте, откуда будете загружать картинку (с сайта, из галереи или библиотеки медиафайлов), выделите нужную картинку с расширением jpg или png, ОТКРЫТЬ.

Появится форма с информацией о загруженной картинке.
Дайте картинке правильное название ЗАРАНЕЕ (до загрузки на блог). Если сайт оптимизируете под Google, назовите изображение по-английски (в моем случае – button-google). Если под Яндекс – транслитное название knopka-google или knopka_google.

Название картинки в таком виде - Z127, не принесет пользу странице в плане seo оптимизации. Если в имени файла присутствуют русские буквы, появятся битые ссылки. Современные программы понимают только алфавиты на латинице.

ЗАГОЛОВОК (title тега IMG картинки) формируется автоматически из наименования картинки. То, что написано в этой строчке, посетители увидят при наведении курсора на картинку. Пропишите нужный вам текст в title IMG.

АТРИБУТ ALT – строчка, обязательная для заполнения. При загрузке изображений браузер сначала получает текстовую информацию. Затем она заменяется изображением. Если загрузка изображений в браузере отключена, атрибут alt дает текстовую информацию о рисунке.

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

ПОДПИСЬ – не обязательный атрибут. Можете его заполнить. Подпись появится под изображением, обеспечит релевантный окружающий текст.

ОПИСАНИЕ – используйте ключевое слово.

Выравнивание

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

СЛЕВА – текст будет обтекать изображение справа.

ПО ЦЕНТРУ – текст будет размещен над и под изображением.

СПРАВА – картинка будет справа относительно текста.

БЕЗ выравнивания – левый нижний угол картинки будет находиться на месте поставленного вами курсора.

По умолчанию РАЗМЕРЫ ИЗОБРАЖЕНИЯ заранее настраивают в меню админпанели WordPress ПАРАМЕТРЫ - МЕДИАФАЙЛЫ. 

Обычные настройки:

  1. МИНИАТЮРА – изображение сжимается до 150 по наименьшей стороне с обрезкой второй стороны;
  2. СРЕДНИЙ размер – картинка сжимается до 300 пикселей по меньшей стороне (ширине или высоте), другая сторона уменьшается пропорционально;
  3. БОЛЬШОЙ размер также задается индивидуально во вкладке ПАРАМЕТРЫ- МЕДИАФАЙЛЫ.

Затем нажмите ВСТАВИТЬ В ЗАПИСЬ.

В ГАЛЕРЕЕ находятся картинки, вставленные через данную запись.

В БИБЛИОТЕКЕ ФАЙЛОВ – изображения, добавленные через страницы, записи и меню админпанели медиафайлы. Любое из них можете отредактировать и загрузить в запись, нажав надпись ПОКАЗАТЬ рядом и картинкой.

Редактирование изображений

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

АДМИНПАНЕЛЬ - МЕДИАФАЙЛЫ - РЕДАКТИРОВАТЬ. Здесь можно отредактировать title, alt, Подпись, Описание.
Опция позволяет обрезать, повернуть картинку против или по часовой стрелке, отразить по вертикали, либо горизонтали.
Далее РЕДАКТИРОВАТЬ - МАСШТАБИРОВАТЬ – можете задать определенный масштаб.

Либо ОБРЕЗАТЬ – задать нужные пропорции или размеры.

После редактирования не забывайте нажать кнопку СОХРАНИТЬ.

Напомню, что редактировать изображение после загрузки не рекомендуется.  Это одна из рекомендаций сервиса PageSpeed для ускорения загрузки блога на компьютер пользователя. Подготовьте изображение с нужными размерами до того, как загрузить картинку на сайт. Что еще можно сделать для увеличения скорости загрузки сайта?

P.S. Для профессионального использования как нельзя лучше подходит Фотошоп. Посмотрите, как зарабатывают на Фотошопе до 50000 рублей в месяц.

Метки:

Изображения

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

13 отзывов к “Как вставить картинку на сайт, изменить размер изображения

  • Новикова Марина:

    Я не заполняю поле ссылка,но при клике на картинку,она открывается не на чёрном фоне,а сама по себе,но не новом окне.Вообще не знаю как с этим бороться.

    • Ольга:

      Марина, я сходила, посмотрела исходный код Вашей страницы.
      Изображения в html у Вас прописаны так
      ссылка
      Часть, выделенная красным — это ссылка. Она и открывает изображение в новой вкладке.
      При загрузке изображений попробуйте нажимать НЕТ для поля ссылок.
      Или вручную уберите эту часть (ссылку) в формате html при публикации записи.

  • Новикова Марина:

    Перезагрузила три картинки,нажимала «нет» и ЭТО СРАБОТАЛО!Теперь плановым образом со всеми так же поступлю.
    Спасибо,хороший,полезный совет.

  • Александр:

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

    • Ольга:

      Примерно так же поступаю.

  • Михаил:

    Здравствуйте Ольга! Наверно не дам я Вам покоя)) Вот на этой странице oglework.ru/?page_id=20 картинки. Вопрос в том, что фото 10н; 11н; 12н открываются боком. В чем может быть причина такого «сюрприза», на компьютере все нормально открывается.

    • Ольга:

      Не знаю, почему, к сожалению. Попробуйте удалить и перезалить еще раз.

      Совет: сделайте у себя на компьютере все картинки одинакового размера, назовите из латинскими буквами, к примеру, naves (это нужно для оптимизации) и только потом заливайте.

  • Михаил:

    Забыл поделиться своими новостями, извините. Снес я WordPress (напартачил в корневых файлах), ну и айда «шашкой» махать. Теперь все переосмыслив, залил WordPress по новой. Вот теперь как «второгодник», разбираю свои «2»)))

  • Михаил:

    И опять забыл)) Между WordPress1, и WordPress2 попытался (по рекомендации знакомого) поработать с Joomla. Так то сначала вроде понравилось, но после WordPress, что то сложновато показалось. Так что можете поздравить, я теперь «серийный» новичок))

    • Ольга:

      К Joomla просто приноровиться надо. После Вордпресс непривычно.

  • Михаил:

    Спасибо. Переустанавливал, не помогло.

    • Ольга:

      Михаил, Вам надо установить плагин Rus-To-Lat, чтобы адреса страниц были красивые, без знаков вопросов.
      Насчет картинок. Попробуйте у себя на компе картинку вновь отредактировать, дать ей другое название, затем загрузить.

      Сделайте все фото одного размера, будет красиво смотреться, никакой плагин для слайд-шоу не нужен будет (он ведь сильно блог нагружает!).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *