Google+ Followers

Будь в курсе событий!

26.03.2012

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

Leave a Comment
При добавлении картинки в блог Блоггер создает ее 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>
У нас осталась еще одна проблема - имя файла. Картинки названа на русском языке, поэтому имя отображается в виде ужасных корябушек :) По-хорошему, картинку на диске надо переименовать в соответствии с требованиями, а уж потом вставлять в веб-альбом.
Вот что у нас получилось:

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

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

0 коммент. :

© 2012-2017 Cash's from program