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


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


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

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

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


25 комментариев:

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

    ОтветитьУдалить
  2. Галина, пожалуйста. Так это очень хорошо, что пока набираетесь информации. Ошибок потом меньше будет. Легче пойдёт работа с блогом. желаю Вам удачи. Покажите потом свой блог?

    ОтветитьУдалить
  3. Лариса. Не за что. С блогом работы всегда много. Это правда.

    ОтветитьУдалить
  4. Спасибо. Нужное.
    А как быть с изображениями, которые я гружу не с компьютера напрямую, а с гугл+ ?Или с альбомов пикасы?

    ОтветитьУдалить
    Ответы
    1. Maryysia M, про Пикассо в статье не уместилось. Принцип почти тот же. Обещаю в ближайшее время напишу. Я в компе тоже изображения не храню. они у меня на хостинге. Ссылки в предложенных примерах с Радикала.

      Удалить
  5. Спасибо, Виктория, полезная информация!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Елена. Я уже пообещала небольшое продолжение статьи на днях. Следите .

      Удалить
  6. Вика, если не скерет, почему картинки на _radikal.ru размещаете? Обычно в блогах на blogger они на домене _N.bp.blogspot.com.

    ОтветитьУдалить
  7. Сергей, ага. Я что-то с Пикассо сразу не подружилась. Кстати, об этом как раз сейчас пишу в продолжении к этой статье. Спасибо за визит.

    ОтветитьУдалить
    Ответы
    1. Насколько я знаю, Google прикрыл свой сервис «Picasa веб-альбомы», интегрировав его в Google+. Так что по старом адресу _picasaweb.google.com мы попадаем на свою страницу «Фото в Google+». Правда Google всё-таки снова планирует отделить свой фото-хостинг от Google+. Но не суть важно, главное, что лучше использовать его, т.к. он более устойчив.

      Что же до ссылки у картинок, то тут тоже надо смотреть. Вы полностью правы в том плане, что чем меньше ссылок, тем лучше. Тем более ссылка, в приведённом примере, ведёт на сторонний сайт.

      С другой стороны, конструкция, предложенная Google на Blogger, не случайна. Дело в том, что ссылка ведёт на увеличенную картинку, а поисковики больше любят именно большие картинки. К тому же и пользователю удобней иногда увидеть полноразмерную картинку.

      Другими словами, тут лучше смотреть по обстоятельствам. В остальном всё супер :-)

      Удалить
    2. Да, Сергей. Про picasaслышала. Понимаю, что гугл больше любит свои продукты и надёжнее. Меня в своё время вирус там какой-то постоянно лез. В чём причина не разобралась. Потом плюнула и так решила.
      Забыла в статье упомянуть , что в этом случае не работает LIGHTBOX. Спасибо.

      Удалить
    3. Ссылка на свои ресурсы/профили/фото и т.д., не совсем плохо. Ссылаясь на свое фото в гугл+, мы делаем хорошо для продвижения фото в гугл картинках, а оттуда тоже может идти трафик на блог.

      Удалить
    4. Согласна, что не совсем плохо. Гугл любит свои продукты. Но когда их много это не хорошо с точки зрения скорости загрузки. К тому же многие грузят не обязательно с гугл. У меня в поиске картинок гугл все и без этого проиндексированы.

      Удалить
  8. Спасибо за напоминание. Я обычно загружаю фотки с компьютера. Это не правильно? Они тоже имеют ненужную ссылку? А еще прописываю свойства, какие-нибудь ключевые слова. Это надо делать?

    ОтветитьУдалить
  9. Да,Олеся. С компьютера то же самое. Посмотри сама в режиме HTML. А свойства это и есть title и alt.

    ОтветитьУдалить
  10. Вика попробовала сделать размеры фото в блоге, чтоб больше размер был, но почему-то ничего не получилось. Размер остался тот же только из изменений фото стали какие-то размытые. Может я загружала неправильно. Я в сообщении нажимала на добавить изображение, у меня открывалась вкладка и я выбирала. "из телефона". В HTML убирала то что у вас было указано и меняла размер изначальный стоял height320 width192 я поменяла на 240 и 320 соответственно. Видимо что-то неправильно я делаю...

    ОтветитьУдалить
    Ответы
    1. Лена, вы уменьшили высоту height320 , а ширину width 192 увеличили. Хотя изначально размер высоты был больше ширины. Вот все пропорции и сломались. Нужно (например) увеличить 320, допустим на 420, а 192 на 292.
      Зашла на Ваш блог. Вам нужно уменьшить ширину в настройках шаблона . И поля сообщений и сайдбара. На моём с компе с нормальным разрешением экрана , правая часть блога обрезана. Не вмещается.

      Удалить
    2. Для CSS есть свойство object-fit, с помощью которого можно указать, как будет масштабироваться картинка, с сохранением пропорций или нет. Подробнее тут http://htmlbook.ru/css/-o-object-fit. Для сообщений блога нужно указать это свойство в .img-thumbnail img {

      Удалить
    3. Замечательное свойство object-fit. Однако когда я его тестировала не все браузеры это поддерживают. Да и к тому же для начинающих эти CSS тьма-тьмущая. так что считаю для них этот вариант оптимальный.

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

    ОтветитьУдалить
    Ответы
    1. Олег, удачи Вам. Забегу и обязательно посмотрю.

      Удалить
  12. В общем, результаты экспериментов относительно внешних ссылок в изображениях:

    Первый способ – читал, что можно удалить ссылку, кликнув в редакторе сообщений по изображению и нажав инструмент ссылка. Однако при этом картинку нельзя будет увеличить.
    Второй способ – тот, о котором написала Виктория в этой статье. Есть вариант увеличить изображения, поменяв значения в HTML.
    Третий способ – в HTML после элемента imageanchor="1" поставить пробел и вставить тег rel="nofollow". При этом остается возможность увеличить изображение, не меняя значения в коде. Но заметил, что не все ссылки закрываются этим тегом. Пока не разобрался почему...

    В итоге, я для себя выбрал последний вариант, а в целом буду меньше скриншотов вставлять в статью, чтобы не грузить шаблон (спасибо за совет Виктории и Ольге Протасовой).

    ОтветитьУдалить
    Ответы
    1. Спасибо, за результаты эксперимента и столь подобный отчёт.

      Удалить

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