Всем добрый день на wmbn.ru! Сегодня поговорим о том, как загрузить изображение на свой сайт, затем немного про оптимизацию изображения и как правильно его представить. Загрузка изображения пройдет как стандартными средствами WordPress, так и с помощью сторонних программ и интернет сервисов.

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

Начну со стандартных средств WordPress. Первый и самый удобный способ — загрузка через встроенный редактор записей. На панели редактора предусмотрены все необходимые функции для создания и форматирования текста, изображений, импорта документов, но на данный момент пригодится только функция загрузки изображения. Для этого жмем по кнопке Добавить изображение в строке Загрузить/вставить.

Загрузка изображения на сайт с помощью WordPress

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

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

Загрузка изображения с использованием серверов

Этот способ подразумевает использование пространства других серверов для своих изображений, то есть просто экономим место. Плюс такого способа в том, что можно найти и другие изображения под сайт не скачивая их. Но тут проявите уважение к фотографу и не загружайте его работу просто так, хотя бы оставьте комментарий и заявите о том, что хотите использовать его фотографию, изображение на своем сайте. Допустим сайт 123rf.com просит от пользователей оставить ссылку на их сайт в случае скачивания изображения и использования его на своем сайте. Но на каждый пост оставлять ссылку…лучше поместить ее внизу сайта.

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

  1. fotki.yandex.ru/ — хранилище фотографий от Яндекса. Создайте почту от Яндекса и пользуйтесь всеми ее возможностями.
  2. flickr.com/ — сервер для хранения фотографий от Yahoo.
  3. foto.mail.ru/ — аналогичный Яндексу сервер хранения фотографий. Тоже потребуется только почта.

Далее копируем URL- адрес картинки и вставляем его в текст поста или страницы. Для примера возьмем изображение с Яндекса. Загружается оно на сайт таким образом:

<a href="http://fotki.yandex.ru/users/rahmatullinv/view/462472/">
<img src="http://img-fotki.yandex.ru/get/4527/134481053.0/0_70e88_81c6a72b_L.jpg" width="500" height="375" title="" alt="" border="0"/>
</a><br/><a href="http://fotki.yandex.ru/users/rahmatullinv/view/462472/">
Посмотреть на Яндекс.Фотках</a>

Результат получаем:


Посмотреть на Яндекс.Фотках

Способ этот требует знания HTML тегов и довольно трудоемкий, но если есть причины экономия места, то он кстати. Напомнил его Orcinus.

Загрузка картинки на сайт с помощью клинета FTP

Этот способ подразумевает загрузку фотографий напрямую на сервер сайта через специальные программы. Для примера возьмем Filezilla, с помощью которого можно и сделать резервную копию данных сайта. Подключаемся к серверу сайта и загружаем изображение в папку wp-content/uploads/2011(год)/12(месяц). Необязательно загружать именно в эту папку, но для сохранения структуры все же стоит.

Оптимизация изображения в WordPress и тегами

Одной загрузкой не отделаешься. Если хотим побольше трафика с поисковых систем, то необходимо изображение оптимизировать. Делается это в несколько шагов. Для начала переименуйте изображение под смысл страницы, то есть следующее изображение называется download.png, так как он показывает загрузку файла. Далее правильно пишем Заголовок изображения, основываясь на основных ключевых словах страницы или заголовка. Текст тоже заполняем по тем же правилам или просто скопируем заголовок.

Оптимизация изображений для сайта

Использование html тегов потребуется в случае загрузки картинки не используя средства WordPress. Делается это с помощью тегов title и alt. Для примера возьмем тот же Яндекс. Исправляем начальный код на такой:

<img title="Загрузка изображения на сайт через Яндекс"
src="http://img-fotki.yandex.ru/get/4527/134481053.0/0_70e88_81c6a72b_L.jpg"
alt="Как загрузить изображение на сайт" width="500" height="375" border="0" />

Результат будет такой же, но изображение уже оптимизировано. По желанию можно уменьшить его размер.

Показ изображения на сайте в удобном формате

Удобный формат показа изображений влияет на юзабилити сайта. Удобный формат относится к правильному его показу, то есть открытие его в новом окне или в отдельном, использование галлерей, плагинов и т.д. Если требуется открытие картинку в новой вкладке, то пропишите тегу target свойство blank:

<a href="/wp-content/uploads/2011/12/download.png" target = "blank">

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

Есть более удобный способ — использование плагина Lightbox Plus. Устанавливаем его и приступаем к настройке — во вкладке Внешний вид есть ссылка Lightbox Plus. Так как плагин не русифицирован, то некоторые функции следует переименовать на русский язык. А в остальном следует поэкспериментировать, так как конечный вывод зависит от вас.

Настройка плагина Lightbox Plus для WordPress

Я только поменял Lightbox Plus Style: на Shawdowed. Плагин работает для изображений, которые загружены с помощью WordPress и находятся в папке wp-content/uploads.

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

Хип-хоп, вот он ритм движений:

Комментариев: 9

  1. Orcinus Orca

    У Яндекс.Фоток есть API позволяющее как угодно сильно извращаться над фотками и альбомами. У мя пока времени нет заюзать весь функционал с Я.Фоток. Но если высвобожу время, то реализую пару задумок и опишу как это делается.

  2. West Blogger

    Я организовал загрузку картинок на поддомен, все графическое хранится на images.westblog.ru, это практически то же самое, что и загрузка изображения с использованием серверов хранения фотографий.

    А вот открытие картинки у меня не предусмотрено, это просто ссылка на пост.

  3. writer

    West Blogger Ну не каждый захочет создавать или просто не знает как создать поддомен, но способ интересный)

  4. Orcinus Orca

    West Blogger, смею предположить, что поддомен не является отдельным сервером с большим объемом дискового пространства. По этому сравнение с внешним серваком для хранения картинок немного не корректен.

  5. West Blogger

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

  6. Orcinus Orca

    West Blogger, даже не сайтом, а хостом. Кстати, по поводу хостовости, то ИЕ и ФуфлоФокс считают разными хостами адреса:
    http://www.orcinus.ru
    http://www.orcinus.ru.
    orcinus.ru
    orcinus.ru.

    Обратите внимание на точку в конце. Этим пользуются на Яндексе. Плюс у Яндекса из-за этого куплено куча доменов. Например, есть сайт yandex.st

  7. Алексей

    Скажите мне пожалуйста, а как можно понять, что сайт уже раскручен. И можно ли считать сейчас прогон по каталогам нужной вещью?

    1. writer

      Понятие Раскрученность у каждого своя — кому-то надо тИЦ и PR (обычно для продажи ссылок), а кому-то нет дела до этих пузомерок и старается набрать трафик.
      Если по качественным, то польза будет, пусть и небольшая.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>