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

Доброго времени суток, друзья, читатели и гости блога. Сегодня продолжу разговор о работе с изображениями в блоге, тему которой подняла в прошлом посте. Поговорим о картинках, которые загружаем в сообщения  из альбома Picasa.



При вставке изображения у нас автоматически Блоггер генерирует ссылку на исходный размер изображения. Эта картинка загружена у меня с Picasa.

Нажмите на изображение.В посте она выглядит в виде миниатюры. И если сейчас перейти в режим HTMLто видим такой код.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-xIglm9w6CJM/Syo1Ncc7eOI/AAAAAAAAAPE/LzSuo1wxQqg/s1600/DSC02681.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://3.bp.blogspot.com/-xIglm9w6CJM/Syo1Ncc7eOI/AAAAAAAAAPE/LzSuo1wxQqg/s320/DSC02681.JPG" width="320" /></a></div>

Обратите внимание, красным цветом я выделила участок кода, который отвечает за исходный (первоначальный )размер фотографии s1600. Это обычно один из параметров ширины или высоты изображения. Определяется большим значением.

У нас есть возможность задавать самим эти размеры. У меня давно для себя лежит вот такая шпаргалочка для этого. Какие размеры изображений есть для платформы Блоггер. Делюсь с вами.

 s48,s64,s144, s150, s200, s288, s320 (средний размер), s400(крупный размер),s400, s600, s800.

Сейчас мы так же, как было описано в предыдущем сообщении, отсечём всё лишнее из кода и увеличим нашу миниатюру. Поменяем в ней значение s320 на s600.

По сути у меня в коде осталось всего вот это. Новый исходный размер фото.

 <div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://3.bp.blogspot.com/-xIglm9w6CJM/Syo1Ncc7eOI/AAAAAAAAAPE/LzSuo1wxQqg/s600/DSC02681.JPG" /></div>

И вот даже какая, с размером s48.

Если вам сейчас захочется в сообщении ему задать другие размеры,  которые нам предоставил Блоггер (маленький, средний, крупный), нажимайте на нужный. Прописывайте  alt и title. В HTML редакторе код такой будет.

<div class="separator" style="clear: both; text-align: center;">
<img alt="пальмы" border="0" height="300" src="http://3.bp.blogspot.com/-xIglm9w6CJM/Syo1Ncc7eOI/AAAAAAAAAPE/LzSuo1wxQqg/s400/DSC02681.JPG" title="пальмы в пустыне" width="400" /></div>

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

Удачи нам всем. До новых встреч. Спасибо что заглядываете в мои шпаргалки.

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

Введите Ваш email