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

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

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

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

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

Давайте учиться, как вставить картинку на сайт WordPress правильно.

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

галочка Добавить картинку через консоль:
«МЕДИАФАЙЛЫ» – «ДОБАВИТЬ НОВЫЙ»;

галочка При создании записи вставить картинку:
РЕДАКТОР режим «ВИЗУАЛЬНО»;
Как добавить, поставить, вставить, загрузить картинку на сайт wordpress

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

Как вставить, загрузить, разместить изображение на сайте wordpress При этом откроется окно «ВЫБЕРИТЕ ФАЙЛЫ».

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

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

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

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

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

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

Если сайт оптимизируете под Google, назовите медиафайл по-английски (в моем случае – button-google). Если под Яндекс – транслитное название knopka-google или knopka_google.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. МИНИАТЮРА – изображение сжимается до 150 по наименьшей стороне с обрезкой второй стороны;

  2. СРЕДНИЙ размер – картинка сжимается до 300 пикселей по меньшей стороне (ширине или высоте), другая сторона уменьшается пропорционально;

  3. БОЛЬШОЙ размер также задается индивидуально во вкладке «ПАРАМЕТРЫ» - «МЕДИАФАЙЛЫ».

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

Чтобы создавать меньше копий и экономить место на сервере хостинга, я делаю такие настройки

загрузка картинок на wordpress

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

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

Редактирование

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

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

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

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

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

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

Заключение

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

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

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментариев: 13
  1. Новикова Марина

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

    1. Ольга (автор)

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

  2. Новикова Марина

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

    1. Ольга (автор)

      Рада помочь, Марина.

  3. Александр

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

    1. Ольга (автор)

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

  4. Михаил

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

    1. Ольга (автор)

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

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

  5. Михаил

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

  6. Михаил

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

    1. Ольга (автор)

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

  7. Михаил

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

    1. Ольга (автор)

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

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: