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

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

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

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

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

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

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

галочка Добавить фото через консоль:
«МЕДИАФАЙЛЫ» – «ДОБАВИТЬ НОВЫЙ». Выберите фото на компьютере или просто перетащите в обозначенное штрихами окно;

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

Как загрузить из записи

Наведите курсор на нужное место в тексте;

СТАТЬИ ПО ТЕМЕ:

Ротатор баннеров, картинок: что это, как сделать скриптом, плагином WordPress

Как создать коллаж в Paint

Как сделать коллаж Paint, соединить картинки, фотографии

Как добавить, поставить, вставить, загрузить картинку на сайт wordpress
Нажмите вкладку «ДОБАВИТЬ МЕДИАФАЙЛ».

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

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

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

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

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

Появится форма с информацией о загруженной картинке.

kak-dobavit-kartinky-na-sait
Отобразится название изображения, дата загрузки, тип файла, его вес, размеры.

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

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

Если сайт оптимизируете под Google, назовите медиафайл по-английски (в моем случае how-to-add-a-picture-to-the-site). Если под Яндекс – транслитное название kak-dobavit-kartinky-na-sait.

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

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

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

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

smush

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

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

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

У меня установлен специальный плагин. Он оптимизирует загруженные фото, если они сжаты недостаточно хорошо.

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

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

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

Далее РЕДАКТИРОВАТЬ – МАСШТАБИРОВАТЬ – сможете задать определенный масштаб.

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

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

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

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

Настройки отображения файла

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

как поставить, вставить картинку вордпресс

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

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

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

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

Настройка отображения картинок по умолчанию

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

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

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

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

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

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

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

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

Заключение

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

Для профессионального использования как нельзя лучше подходит Фотошоп. Посмотрите, как зарабатывают на Фотошопе до 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: :???: :?: :!: