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

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

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

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

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

Давайте учиться, как вставить картинку, фото на сайт 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 рублей в месяц.

Понравилась статья? Поделиться с друзьями:
Я новичок
Добавить комментарий

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