понедельник, 26 марта 2012 г.

HTML-код картинки в блоге и его оптимизация

При добавлении картинки в блог Блоггер создает ее HTML-код, который можно посмотреть и исправить при редактировании сообщения в режиме "HTML".
Картинка в HTML имеет вид <img src="адрес" />.
Параметр src - адрес файла картинки.
После "адреса" можно вставлять нужные параметры - центрирование, размеры, рамка, описание и т.п.
Кстати, если вам надо вставить не просто картинку, а такую, чтобы при нажатии на нее осуществлялся переход по какому-то адресу, то об этом здесь.

Как я понимаю, минимально код должен выглядеть так:
<a href="URL"><img src="адрес_картинки" width="ширина_картинки" height="высота_картинки" alt="описание картинки"/></a>
По умолчанию в Блоггере картинка ставится со ссылкой на адрес ее полноразмерного варианта в Веб-альбоме Пикаса и ее месторасположение на странице блога (лево, центр, право), с рамкой вокруг картинки.
Вот тут я вставляю свою картинку из веб-альбома Пикаса:


Ее код такой:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s1600/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s320/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" width="320" /></a></div>


Расшифровка некоторых параметров (взята мною из "Шпаргалки блоггера") 

Тег </div> определяет место расположения изображения.
<div style="text-align: center;">.....</div>

Параметр text-align указывает центрирование картинки, напр.,  text-align: center означает, что картинка расположена по центру.

Параметр  border - толщина рамки вокруг картинки. По умолчанию ставится в том случае, если картинка является ссылкой (а у Блоггера это всегда), при этом border="0".
<img src="адрес" border="0" />
Если хотите поменять толщину, стиль или цвет рамки, то можно поставить нужные параметры, например border: 2px solid # 992211 даст рамку толщиной в 2 пикселя стиля "жирный" синего цвета.

Стиль рамки может быть таким:
solid - жирная
double - двойная линия
groove - объемная "тень"
ridge - объемная "тень"


Параметр /s1600/  или /s320/ в адресе - определяет размер картинки по длинной стороне.
Т.е. изменив значение здесь, можно вставить  картинку  не только как предлагается  "маленький, средний, крупный, очень крупный, исходный". Если выбрать "исходный размер", картинка умещается в ширину сообщения.
Значения могут быть такими:  s1600 (соответствует "исходный размер"), s800, s600 (очень крупный),  s512,  s400 (крупный), s320 (средний), s200 (маленький), s150,  s144,  s150,  s72-с (для гаджета "Популярные сообщения"), s64,  s48.
-с после цифр добавляется, если нужно, чтобы изображение было квадратным. Иначе оно пропорционально уменьшается-увеличивается. Не рекомендуется использовать большие значения, если размер исходного изображения меньше - картинка будет нечеткой.

Параметры  width и height  обязательные, они задают ширину и высоту картинки, видимой в блоге.  Их нет при выборе варианта вставки картинки "Исходный размер".
Нужны для того, чтобы браузеру не нужно было определять размеры картинки - это ускоряет загрузку.

В Блоггере автоматически не формируется один из очень важных параметров - alt, который вообще-то является обязательным для кода изображения. Его можно вставлять вручную при редактировании HTML. 
Тег  </alt> - текст, который будет виден, если изображение по каким-то причинам не появилось. Он важен для поисковиков, помогая им индексировать картинки.
<img src="адрес" border="0" alt="описание картинки" />
При выборе варианта "Исходный размер" этого параметра нет.

Параметры  title и alt  тоже рекомендуется вставлять вручную. 
Title нужен для того, чтобы при наведении мыши на картинку появлялся текст. 
Аlt нужен для словесного описания картинки (если, например, по какой-то причине она не загрузилась или для вставки в некоторые соцсети).
Для поисковиков это один из важнейших параметров картинки.
<img src="адрес" border="0" alt="описание картинки" title="описание картинки" />

А вот та часть кода, которую я выделила красным, является ссылкой на исходное изображение в веб-альбоме Пикаса. Именно она дает возможность при нажатии на картинку в блоге перейти к просмотру ее полноразмерного варианта. Но,  как я уже писала в посте "Какими должны быть ссылки в блоге",  для оптимизации блога плохо большое число исходящих ссылок. Из этих соображений ссылку на картинку лучше убирать.

Теперь приведем нашу картинку к виду, который выполняет рекомендации по оптимизации блога из поста "Какими должны быть картинки в блоге".
Меняем HTML картинки на такой:
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="480" src="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s600/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" width="600" /border="0" alt="елочные игрушки" title="Елочные игрушки" / ></div>
У нас осталась еще одна проблема - имя файла. Картинки названа на русском языке, поэтому имя отображается в виде ужасных корябушек :) По-хорошему, картинку на диске надо переименовать в соответствии с требованиями, а уж потом вставлять в веб-альбом.
Вот что у нас получилось:

елочные игрушки

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

15 комментариев:

  1. Рада, что заинтересовало :)

    ОтветитьУдалить
  2. Здравствуйте!
    Огромное спасибо, Татьяна, за столь исчерпывающую информацию.
    Успехов вам!

    ОтветитьУдалить
  3. У меня почему-то по-другому код выглядит:-( Не понимаю. Вот у меня вопос: а если я прямо с компьютера в блог загружаю фотографии? Или лучше сначала все-таки на диск копировать, а потом уже на блог?

    ОтветитьУдалить
    Ответы
    1. "С компьютера" вы имеете ввиду из интренета? Т.е. с других блогов и сайтов? В этом случае, конечно, лучше скопировать к себе на компьютер, на жесткий диск. И вставлять уже с него. Иначе если с сайтом-источником что-то произойдет (например, он станет недоступен, переедет по другому адресу или хозяин просто удалит это фото), то ваше фото из блога тоже пропадет.
      Кстати, хочу напомнить, что при копировании с чужих блогов надо еще не забывать об авторских правах. Используя чужое изображение обязательно нужно указывать ссылку на источник, иначе это считается плагиатом.
      А насчет кода картинки - то он может чуть-чуть отличаться. Зависит от того, какие параметры вы используете, а какие нет. Это надо более подробно изучать HTML. Но, честно говоря, Блоггер сейчас уже дает достаточные инструменты для правильного оформления кода изображения (можно заполнять альт и тайтл прямо в редакторе), поэтому я считаю, что информация из этого поста теперь нужна больше для общего развития, а не как руководство к действию :)

      Удалить
    2. Таня, спасибо большое за ответ! Я имела ввиду, если я загружаю свое фото со своего компьютера, без загрузки его в Picasa. Я честно сказать, не очень поняла, зачем это делать, если я, например, не пользуюсь этим сервисом.
      С любом случае Вы дали достаточно исчерпывающий ответ! Спасибо еще раз!

      Удалить
    3. Извините, неправильно поняла вопрос)
      Тогда все просто - в Блоггере при загрузки картинок со своего компьютера изображения все равно помещаются в веб-альбом Пикасса, который дается по умолчанию. Достаточно просто посмотреть адрес уже вставленных изображений - и вы увидите, что они хранятся там, а не на вашем компьютере. Поэтому разницы нет никакой. Просто бывает удобнее размещать картинки самостоятельно по каким-то своим соображениям. Я, например, пользуюсь Пикассой для предварительной обработки фото, поэтому и выкладывать в блог мне удобнее через нее.
      Если же не иметь ввиду Блоггер, то вставка изображений с фотохостинга может быть полезна в том случае, если у вас под блог выделяется определенное количество места (т.е. если вам выделено жестко какое-то количество гигабайт). Тогда, чтобы его зря не расходовать, фото нужно вставлять просто ссылками на другие ресурсы (Например, Яндекс.Фотки и т.п.). Такое требование обычно стоит на всех форумах - они экономят место и скорость загрузки.

      Удалить
  4. А как сделать чтобы при появлении второй картинки по нажатию на первую был возврат обратно???

    ОтветитьУдалить
  5. Мне очень хочется вставлять фото как у вас .В верхнем левом углу значок pin it. Я в Pinterest зарегистрировалась ,а фото не могу сообразить как вставить в блог.

    ОтветитьУдалить
  6. Татьяна! Объясните пожалуйста, как вставить фото из Пикаса 3 в Блог. Я загрузила Пикаса в свой компьютер. Обработала несколько фото. А когда загружала их в сообщение, то фото загрузились не обработанные. Похоже, они загрузились не из Пикаса 3. Загружаются они совсем маленькие, а я хочу большие.Наталья.

    ОтветитьУдалить
    Ответы
    1. Прямо из программы Пикаса нажмите на нужное фото правой кнопкой и выберите "Добавить в веб-альбомы Пикаса". Там же можно будет выбрать размер вставляемого изображения.

      Удалить
  7. Как вставить под картинку фон анимацию?

    ОтветитьУдалить

Чтобы оставить комментарий*, напишите текст в окошке и выберите в "Подписи комментария" профиль из любого вашего аккаунта. Если вы нигде не зарегистрированы, выбирайте Имя/URL и просто вводите свое имя - оно отобразится в подписи.

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

Related Posts Plugin for WordPress, Blogger...