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

 оптимизация изображений Доброго времени суток, друзья, читатели и гости блога. Сегодня продолжу разговор о работе с изображениями в блоге, тему которой подняла в прошлом посте. Поговорим о картинках, которые загружаем в сообщения  из альбома 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


4 комментария:

  1. Ответы
    1. Буду рада если информация оказалась полезной.

      Удалить
  2. Вика, когда я размещаю фото, то хочу публиковать сразу большими. Но для мобильных устройств это плохо. А если задаю форму "крупный", то получается среднего размера, как понимаю в s400, как ты пишешь. Вот этот размер надо менять на 600. Нужно так проделывать со всеми фотографиями отдельно или я могу изменить значение в head сразу для всех фотографий? Хотелось бы настроить сразу, для всего блога.

    ОтветитьУдалить
    Ответы
    1. Вообще-то размер изображений можно задать если перед /b:skin
      задать стили

      .post-body img {
      width: 500px!important;
      height: auto!important; }
      Значение ширины 500, высота

      Удалить

Пользовательский поиск
Foto Saya
My Photo