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

<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 ;

<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, подробнее в этой статье.
Напоследок хочу напомнить вам: перед тем, как загружать свои изображения (уменьшить вес файла) на хостинг, а оттуда в блог, обязательно воспользуйтесь онлайн-сервисами по сжатию изображений. На случай. если под рукой у вас нет нужной программы. Вес изображения это его объём в мегабайтах. Постарайтесь свести его до минимума. Это положительно влияет на скорость загрузки страницы и всего блога в целом.
Мне остаётся вам пожелать удачи в ведении блога. На этом сегодня ставлю точку. До новых встреч.
здесь можно оформить подписку на новые шпаргалки
Виктория, спасибо большое, я создала блог совсем недавно, знания нулевые, ничего не соображаю. Периодически захожу к Вам, читаю разные полезности. Пока на уровне просто чтения, до практики не дошла.
ОтветитьУдалитьВика,спасибо!!!
ОтветитьУдалитьГалина, пожалуйста. Так это очень хорошо, что пока набираетесь информации. Ошибок потом меньше будет. Легче пойдёт работа с блогом. желаю Вам удачи. Покажите потом свой блог?
ОтветитьУдалитьЛариса. Не за что. С блогом работы всегда много. Это правда.
ОтветитьУдалитьСпасибо. Нужное.
ОтветитьУдалитьА как быть с изображениями, которые я гружу не с компьютера напрямую, а с гугл+ ?Или с альбомов пикасы?
Maryysia M, про Пикассо в статье не уместилось. Принцип почти тот же. Обещаю в ближайшее время напишу. Я в компе тоже изображения не храню. они у меня на хостинге. Ссылки в предложенных примерах с Радикала.
УдалитьСпасибо!
УдалитьСпасибо, Виктория, полезная информация!
ОтветитьУдалитьПожалуйста, Елена. Я уже пообещала небольшое продолжение статьи на днях. Следите .
УдалитьВика, если не скерет, почему картинки на _radikal.ru размещаете? Обычно в блогах на blogger они на домене _N.bp.blogspot.com.
ОтветитьУдалитьСергей, ага. Я что-то с Пикассо сразу не подружилась. Кстати, об этом как раз сейчас пишу в продолжении к этой статье. Спасибо за визит.
ОтветитьУдалитьНасколько я знаю, Google прикрыл свой сервис «Picasa веб-альбомы», интегрировав его в Google+. Так что по старом адресу _picasaweb.google.com мы попадаем на свою страницу «Фото в Google+». Правда Google всё-таки снова планирует отделить свой фото-хостинг от Google+. Но не суть важно, главное, что лучше использовать его, т.к. он более устойчив.
УдалитьЧто же до ссылки у картинок, то тут тоже надо смотреть. Вы полностью правы в том плане, что чем меньше ссылок, тем лучше. Тем более ссылка, в приведённом примере, ведёт на сторонний сайт.
С другой стороны, конструкция, предложенная Google на Blogger, не случайна. Дело в том, что ссылка ведёт на увеличенную картинку, а поисковики больше любят именно большие картинки. К тому же и пользователю удобней иногда увидеть полноразмерную картинку.
Другими словами, тут лучше смотреть по обстоятельствам. В остальном всё супер :-)
Да, Сергей. Про picasaслышала. Понимаю, что гугл больше любит свои продукты и надёжнее. Меня в своё время вирус там какой-то постоянно лез. В чём причина не разобралась. Потом плюнула и так решила.
УдалитьЗабыла в статье упомянуть , что в этом случае не работает LIGHTBOX. Спасибо.
Ссылка на свои ресурсы/профили/фото и т.д., не совсем плохо. Ссылаясь на свое фото в гугл+, мы делаем хорошо для продвижения фото в гугл картинках, а оттуда тоже может идти трафик на блог.
УдалитьСогласна, что не совсем плохо. Гугл любит свои продукты. Но когда их много это не хорошо с точки зрения скорости загрузки. К тому же многие грузят не обязательно с гугл. У меня в поиске картинок гугл все и без этого проиндексированы.
УдалитьСпасибо за напоминание. Я обычно загружаю фотки с компьютера. Это не правильно? Они тоже имеют ненужную ссылку? А еще прописываю свойства, какие-нибудь ключевые слова. Это надо делать?
ОтветитьУдалитьДа,Олеся. С компьютера то же самое. Посмотри сама в режиме HTML. А свойства это и есть title и alt.
ОтветитьУдалитьВика попробовала сделать размеры фото в блоге, чтоб больше размер был, но почему-то ничего не получилось. Размер остался тот же только из изменений фото стали какие-то размытые. Может я загружала неправильно. Я в сообщении нажимала на добавить изображение, у меня открывалась вкладка и я выбирала. "из телефона". В HTML убирала то что у вас было указано и меняла размер изначальный стоял height320 width192 я поменяла на 240 и 320 соответственно. Видимо что-то неправильно я делаю...
ОтветитьУдалитьЛена, вы уменьшили высоту height320 , а ширину width 192 увеличили. Хотя изначально размер высоты был больше ширины. Вот все пропорции и сломались. Нужно (например) увеличить 320, допустим на 420, а 192 на 292.
УдалитьЗашла на Ваш блог. Вам нужно уменьшить ширину в настройках шаблона . И поля сообщений и сайдбара. На моём с компе с нормальным разрешением экрана , правая часть блога обрезана. Не вмещается.
Для CSS есть свойство object-fit, с помощью которого можно указать, как будет масштабироваться картинка, с сохранением пропорций или нет. Подробнее тут http://htmlbook.ru/css/-o-object-fit. Для сообщений блога нужно указать это свойство в .img-thumbnail img {
УдалитьЗамечательное свойство object-fit. Однако когда я его тестировала не все браузеры это поддерживают. Да и к тому же для начинающих эти CSS тьма-тьмущая. так что считаю для них этот вариант оптимальный.
УдалитьВиктория, спасибо за подробную и полезную информацию. Сейчас буду тестировать на своем блоге. На данный момент интересует именно избавление от внешних ссылок. По том отпишусь, что получилось
ОтветитьУдалитьОлег, удачи Вам. Забегу и обязательно посмотрю.
УдалитьВ общем, результаты экспериментов относительно внешних ссылок в изображениях:
ОтветитьУдалитьПервый способ – читал, что можно удалить ссылку, кликнув в редакторе сообщений по изображению и нажав инструмент ссылка. Однако при этом картинку нельзя будет увеличить.
Второй способ – тот, о котором написала Виктория в этой статье. Есть вариант увеличить изображения, поменяв значения в HTML.
Третий способ – в HTML после элемента imageanchor="1" поставить пробел и вставить тег rel="nofollow". При этом остается возможность увеличить изображение, не меняя значения в коде. Но заметил, что не все ссылки закрываются этим тегом. Пока не разобрался почему...
В итоге, я для себя выбрал последний вариант, а в целом буду меньше скриншотов вставлять в статью, чтобы не грузить шаблон (спасибо за совет Виктории и Ольге Протасовой).
Спасибо, за результаты эксперимента и столь подобный отчёт.
УдалитьВиктория, у меня все получилось!
ОтветитьУдалитьИрина, ты молодец. Когда я писала последнее сообщение, иконка удалить ссылку ещё была. Будем надеяться, что вернут. Не все новички захотят в код залазить.
ОтветитьУдалить