Как работать с изображениями в блоге.

Доброго времени суток, друзья, читатели и гости блога. Работа с изображениями в блоге, а именно их правильная загрузка и оптимизация, так же важны, как и оптимизация блога в целом. Тема эта уже достаточно "битая". Однако, начинающие блоггеры на это не всегда обращают внимание.


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

Давайте рассмотрим один из основных моментов работы с изображении в блоге. 

У нас есть возможность загрузки картинки прямо в редакторе сообщений. Допустим,изображение исходный размер которого 2048x1536 px, при установке в редакторе сообщений получается в виде такой миниатюры.

Мы можем задать размеры используя, предложенные варианты.

Маленький - размеры height="150" width="200"
Средний - height="240" width="320"
Крупный- height="300" width="400"
Очень крупный- height="480" width="640"

А сейчас перейдём  в режим HTML. Видим, что код  у нас имеет следующий вид.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" height="240" width="320" /></a></div>

Если вы нажмёте на картинку, то она откроется в полном размере. То есть, она является ссылкой на исходный размер. И соответственно, часть кода, которую я выделила синим цветом нам совершенно не  нужна. Получается, что пока поисковик доберётся до адреса, сначала увидит первый код, а уже потом код картинки в сообщении. Улавливаете мысль. К тому же это ещё и лишняя ссылка. А если в одном сообщении картинок 5-10, а сообщений уже 50-100. Как вам число внешних ссылок?

Мы должны убрать эту первую ссылку из кода. Которая начинается с открывающегося тега <a. Не забудьте убрать и закрывающийся </a> в конце кода.

В результате имеем следующее.

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" height="240" width="320" /></div>

Сам путь к изображению прописан в строке красного цвета. Это URL (адрес изображения).

Если сейчас  нужно изменить размер  изображения, меняем соответственно параметры height="240" width="320" на нужные. Ну вот так примерно.

Как видно и картинка увеличилась и качество не пострадало. И остаётся всего лишь добавить alt. Этот тег является очень важным для оптимизации изображений. Длинным название это делать не надо. Достаточно описания того, что изображено на картинке. Можно добавить и тег title. Это на случай того если картинка по каким-то причинам не отображается. Он просто служит всплывающей подсказкой.  Получаем конечный код .

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" height="240" width="320"alt= " подснежники"  title="первые весенние подснежники"/></div>

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

Обратите внимание, что фото у нас размещено по центру. Если хотите чтобы текст обтекал картинку справа, заменяем участок кода <div class="separator" style="clear: both; text-align: center;"> на <div class="separator" style="float: left;">. И, соответственно справа float:right ;

Это будет выглядеть так. А чтобы картинка не прилипала к тексту необходимо добавить отступы. Для этого используем значение margin: 0 5px; . Код окончательный такого вида

<img src=" http://s43.radikal.ru/i101/1405/33/381ecc3cbe6d.jpg" alt="подснежники" height="120" width="180" title="первые подснежники" style="float: left; margin: 0 5px;"/> и здесь пишем наше сообщение.

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

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

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

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

Напоследок хочу напомнить вам: перед тем, как загружать свои изображения (уменьшить вес файла) на хостинг, а оттуда в блог, обязательно воспользуйтесь онлайн-сервисами по сжатию изображений. На случай. если под рукой у вас нет нужной программы. Вес изображения это его объём в мегабайтах. Постарайтесь свести его до минимума. Это положительно влияет на скорость загрузки страницы и всего блога в целом.

Мне остаётся вам пожелать удачи в ведении блога. На этом сегодня ставлю точку. До новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email