SEO Маяк

SEO МаякКак загружать картинки на сайт. Оптимизация изображений

2013-02-21 автор: Виталий Кириллов

Всем привет! Сегодня на SEO-Mayak. com мы снова будем говорить о картинках для сайта, но в этот раз речь пойдет не о том, где брать изображения для сайта. а о том как загружать картинки на сайт и как оптимизировать изображения.

Тема уже заезженная, но как я убедился: далеко не все, а особенно начинающие веб-мастера, заботятся о снижении нагрузки на сервер.

Дело в том, что пока на блоге мало статей и посетителей, скорость загрузки страниц вполне нормальная и вроде бы ничего не предвещает проблем, но когда статей станет уже больше 100 и посещаемость возрастет до 1000 уников в сутки, то только тогда блогеры начинают заботится о скорости сайта.

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

Кто не знает, что такое поведенческий фактор и релевантность. советую подписаться на обновления блога .

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

Как же можно подготовить картинку, ведь она уже и так готовая? Всё верно, только вес картинки не должен превышать 40Kb или быть близким к этой цифре, а размеры (пропорции) изображения надо оптимизировать под ширину страницы сайта заранее.

Как сжать изображение без потери качества

Для наглядного эксперимента воспользуюсь онлайн сервисом для сжатия изображений punypng. com .

Я специально подготовил картинку размером 450х333 пикселя и весом 57,3 kb:

Прохожу несложную процедуру регистрации и загружаю эту картинку:

Какое-то время сервис обрабатывал изображения, но результат превзошел все мои ожидания:

Картинка потеряла в весе аж 43% и стала весить не 57.3 kb, а всего 32.8kb. Просто здорово! Но тут же в голову приходит мысль — "Наверное теперь качество картинки будет отвратительное, надо срочно проверить". Жму на кнопочку — "DOWNLOAD" и скачиваю обработанную картинку на свой компьютер.

Когда я оценил сжатую картинку, то просто влюбился в этот онлайн сервис. Здорово, супер, замечательно, классно — буду теперь всегда им пользоваться 🙂 Вот как выглядит сжатое изображение:

Так вот, дорогие друзья и коллеги. Сжатое, почти в два раза, изображение безусловно снизит время его загрузки, а если одна страница вмешает с десяток таких изображений…

PunyPng — это просто "spa слон" какой-то или "фитнес центр", при частом посещении которого, Ваш сайт будет иметь "самую стройную фигуру" 🙂

Впрочем сервис PunyPng может сжимать одновременно до 15 изображений, что согласитесь очень удобно.

Уверен, что многие веб-мастера призадумаются -"Блин, это что теперь мне надо каждую фотку из всех моих 200 статей прогнать через этот сервис, а потом залить обратно на сервер через редактор Wopdress?"

Могу немного Вас упокоить. Сделать можно все гораздо проще, если Вы конечно умеете пользоваться FTP клиентом Filezilla .

Все фотографии с вашего блога хранятся в папке — "wp-content/uploads", где они разделены по годам и месяцам. Так вот с помощью FTP клиента, скачиваем папочки с изображениями и по 15 штук закидываем их на сервис PunyPng, сжимаем и потом таким же образом помещаем их обратно на сервер. Самое главное при этой операции случайно не изменить формат или название картинки, чтобы WordPress не запутался.

Оптимизация изображений путем сжатия — обязательная процедура перед их загрузкой на сайт.

Ладно, с сжатием изображений мы разобрались, теперь надо правильно их загрузить на сайт, чтобы они не оставляли совершенно не нужные дубли.

Как правильно загружать картинки на сайт

К примеру, вы уже оптимизировали изображение. сжали его и подогнали пропорции под вашу страницу. Так, теперь немного подробней о пропорциях.

В среднем ширина страницы блогов составляет 600 пикселей, конечно у кого-то может быть больше или меньше. Дело в том, что если загрузить картинку с пропорциями width (ширина) — 800 пикселей, а height (высота) — 500 пикселей, то конечно такое изображение не поместится на страницу, и чтобы вставить это изображение, придется менять размер непосредственно в редакторе WordPress.

Что же в этом страшного? При открытии статьи, картинка должна изменить свой размер, чтобы отобразится на странице, при этом теряются драгоценные миллисекунды. Считается, что если открытие страницы занимает более 4 секунд, то пользователь покидает сайт.

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

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

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

Для того, чтобы избавиться от, совершенно не нужного, среднего размера картинок заходим в Админ-панель -> Параметры -> Медиафайлы и рядом со строчкой — "Средний размер" ставим нули:

Для некоторых тематик бывает, что не нужны даже миниатюры, так что если есть такая необходимость, то можно таким же образом отказаться и от миниатюр.

Идем дальше.

Как загружать картинки на сайт со сторонних хранилищ

Хотел рассмотреть еще одну возможность загрузки картинок. Это особенно актуально для фотоблогов, т. е сайтов, использующих большое количество фотографий. Дело в том, что существует возможность использовать ресурсы сторонних хранилищ, например таких, как Яндекс фотки и уже оттуда подгружать изображения. тем самым существенно облегчая сам сайт. Чтобы работать с сервисами Яндекс Вы должны быть зарегистрированы — "Регистрация сайта в поисковых системах Яндекс, Google, Bing, Mail. ru и других "

Для того, чтобы загрузить картинку нам надо попасть на Яндекс фотки и кликнуть по кнопке — "Загрузить фотки":

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

После того, как Вы выбрали изображение, внизу страницы нажимаем кнопку — "Загрузить" и картинка загрузится на Яндекс фотки. Далее выделяем нужное изображение:

Если кликнуть по ссылке — "В другом размере". то можно выбрать исходный или предложенные Яндексом размеры. Далее, кликаем по надписи — "Код для вставки на сайт или в блог", копируем верхний код, от тега <a>, до закрывающего тега </a>, выделенный квадратом и вставляем в редактор WordPress в HTML режиме. Вот та самая фотография, только подгруженная не с самого блога, а с Яндекс фоток:

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

Похожая история со вставкой видео с YouTube. Представляю подробных скриншот:

Это видео с YouTube вставлено посредством скопированного кода, что делает совершенно бесполезным использование плагина Video Embedder, от которого я благополучно избавился.

Надеюсь статья получилось интересной и не менее полезной. Удачи!

С уважением, Виталий Кириллов