9 июля 2012 г.

Улучшаем качество изображений в Blogger

Деревянный дом
Нажать
Загружая изображение в блог, довольно часто получаем размытую картинку, качество которой нас совершенно не устраивает. Но если после опубликования поста кликнуть по картинке, она откроется в новом окне и качество ее будет соответствовать исходному. Давайте разберемся отчего это происходит?

Если перейти на вкладку HTML и посмотреть код картинки, увидим следующее:


<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Dd4m7OS2Gfg/T_nrhuRWuXI/AAAAAAAACSs/j4RwI37IAro/s1600/derev_dom456.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="267" src="http://3.bp.blogspot.com/-Dd4m7OS2Gfg/T_nrhuRWuXI/AAAAAAAACSs/j4RwI37IAro/s320/derev_dom456.JPG" width="320" /></a></div>

В момент загрузки картинки, она автоматом выводится в уменьшенном виде. Обычно это средний размер - 320. Сравните s1600 и s320. Первая ссылка ведет на исходный размер изображения, вторая изменена сервисом Blogger. Нам необходимо 320 заменить на 1600. Качество нашей картинки или фото улучшится, размеры при этом останутся прежними. В данном примере мне захотелось картинку уменьшить с 320 на 250. Достаточно изменить на width="250", height - пропорционально. Желательно всегда добавлять ширину и высоту изображения - это ускоряет загрузку страницы.

Вот так легко и просто можно улучшить качество изображений.

Остается только оптимизировать нашу картинку, прописав alt и title. В новом редакторе блоггер это сделать совсем легко. Для этого нужно просто кликнуть на изображение и тогда в рамке "выровнять налево-направо" появляется  функция "Свойства". При этом желательно, чтобы в alt и title были прописаны ключевые слова вашей статьи.

На фото сверху можно увидеть одну из работ моего брата Олега Борок. Его миниатюры мне очень нравятся. Решила поделиться с вами. Ниже представлены фрагменты деревянного сруба.

Фрагмент миниатюры "Деревянный дом".    Фрагмент миниатюры "Деревянный дом".    Фрагмент миниатюры "Деревянный дом".

Если интересно, то здесь можно узнать как разместить картинки рядом.


Хотите больше узнать о работе с картинками, пощелкайте кнопочку.




Понравилась статья? Поделитесь с друзьями.

7 коммент.:

Александр Кононов

Спасибо за информацию, да Вы правы, картинки надо оптимизировать, а то сайт будет плохо загружаться... Обязательно у себя начну оптимизировать.

Татьяна Остапенко

Вера, прекрасно, что вы остались и продолжаете работать над своим блогом. Мне нравятся ваши публикации, всегда сдержанные, информационно наполненные, деловые. Даже сам блог грамотно заполнен.Удачи!

Anna Bogdan

Вера, спасибо за практические советы в ваших статьях по оптимизации блога мне как начинающему блоггеру!

http://annabogdan.wordpress.com/

Татьяна

Здравствуйте, Вера! Очень нужный блог. Я новичок и мне ещё читать и читать. Но вот ни как не могу разобраться, как сделать фото в своем посте "кликабельным". Почему у других пользователей при наведении курсора на фото его можно увеличить, а я не могу этого сделать у себя?

Вера Борок

Татьяна, загрузите картинку снова и ничего не меняйте в HTML. Получите то, что хотели.Не бойтесь экспериментировать.

Татьяна

Спасибо, Вера! Загрузила ещё раз, все получилось, хотя я и не знаю что за зверь такой HTML... первый раз я тоже ничего ни где не меняла, просто фото загрузила. Видимо, я даже не "чайник" )))

Mari

А как сделать загрузку фотографий с разрешением 1600 автоматической? Не верю что люди так сидят и правят руками каждый раз качество

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...