Главная › Новости

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

Опубликовано: 05.09.2018

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

Миниатюра. Размер миниатюры мы сохранили по умолчанию 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 дюймов).

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

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

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

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

К стоп-словам относят предлоги, частицы, междометия, союзы, наречия, местоимения, вводные слова, числа от 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 и т.п.

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

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

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 файл изображение носит название сайта. Не идеальный, но приемлемый вариант.

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

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

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

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

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

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

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

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

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