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

При добавлении картинки в блог Блоггер создает ее HTML-код, который можно посмотреть и исправить при редактировании сообщения в режиме "HTML".
Картинка в HTML имеет вид

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

Как я понимаю, минимально код должен выглядеть так:

По умолчанию в Блоггере картинка ставится со ссылкой на адрес ее полноразмерного варианта в Веб-альбоме Пикаса и ее месторасположение на странице блога (лево, центр, право), с рамкой вокруг картинки.
Вот тут я вставляю свою картинку из веб-альбома Пикаса:

Ее код такой:
class="separator" style="clear: both; text-align: center;">
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>

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

Тег

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

.....

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

Параметр border - толщина рамки вокруг картинки. По умолчанию ставится в том случае, если картинка является ссылкой (а у Блоггера это всегда), при этом 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.

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

При выборе варианта "Исходный размер" этого параметра нет.

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

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

Теперь приведем нашу картинку к виду, который выполняет рекомендации по оптимизации блога из поста "Какими должны быть картинки в блоге".
Меняем HTML картинки на такой:
class="separator" style="clear: both; text-align: center;">
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>
У нас осталась еще одна проблема - имя файла. Картинки названа на русском языке, поэтому имя отображается в виде ужасных корябушек :) По-хорошему, картинку на диске надо переименовать в соответствии с требованиями, а уж потом вставлять в веб-альбом.
Вот что у нас получилось: