Как оптимизировать картинки для сайта?

Регистрация доменов
Домен RU - 99 руб
Домен РФ - 99 руб
www.

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

Суть этого вопроса достаточно проста: картинки, которые мы загружаем или подгружаем со сторонних ресурсов в статью, должны быть МАЛЕНЬКОГО размера, чтобы страница быстро загружалась. Как этого достичь? Тут есть несколько интересных моментов.

Как оптимизировать картинки?

Как оптимизировать картинки для сайта

Во первых, это формат изображений. Когда я делаю скриншоты (или фотографии рабочего стола), то они у меня сохраняются в формате PNG. Я посмотрел, сколько весит такая картинка, размером 700Х400 - оказалось, что около 300 килобайт. Это достаточно много, особенно, если в статье таких фото будет с десяток - ТРИ мегабайта!

Самый простой способ решить эту проблему - это перед публикацией изменить формат картинки на более лёгкий JPG. Я сделал это легко при помощи графического редактора, и это же изображение, без потери качества, стало весить не 300, а 75 килобайт, что в целых ЧЕТЫРЕ раза меньше. Но это ещё не всё.

Сам формат JPG можно так же оптимизировать и задать степень сжатия от нуля до ста. Обычно качество стоит на уровне 85 , но если ещё сжать картинку уже с качеством 50, то тоже изображение будет весить уже не 75, а 37 килобайт, что ещё в два раза меньше.

Конечно, стоит учесть, что при большем сжатии, качество картинки ухудшается, и я когда вижу на некоторых сайтах такие фото, меня это не радует. Поэтому кидаться в крайности не стоит, достаточно просто с конвертировать фото в более лёгкий формат, или хоть немного сжать.

Я не буду описывать графические редакторы, которыми это можно сделать, их много, а я лично сижу под Linux, и поэтому вам они скорее всего не доступы. Если вы поняли суть, то разберётесь сами.

Как скрыть картинки в статье?

Но кроме этого есть ещё одно интересное решение данного вопроса. Когда у вас в статье ОЧЕНЬ много фотографий, то можно установить плагин (в wordpress), при помощи которого можно скрывать фото при загрузке страницы. Потом, если человеку интересно, он кликнет по надписи: открыть изображение, и оно плавно появится. Такой подход может ускорить открытие статей, где много картинок.

Дабы не быть голословным, установлю этот плагин на этом сайте, чтобы вы увидели, как это работает. Плагин называется, кстати, Spoiler Block. Как устанавливать писать не буду, это простые вещи. Вот обратите внимание на надпись:

оптимизировать фото

Щёлкнув по ней, вы открываете картинку. Как настроить этот плагин?

Вообще, плагин изначально предназначался для скрытия текста в статье, где, к примеру, есть что то, что требует предупреждение, типа: не читай, если тебе нет 18 лет!

Поэтому по умолчанию там используется ярко красный цвет. Но покопавшись в файле стиля этого плагина, можно выставить любые цвета, как это сделал я. Все редактируется в файле spoiler-block/css/style.css Вот мой вариант:

/* just code */ .spoiler{ background:#ffffff; font-size: 17px; border-radius:5px; padding:5px; font-weight:bold; color:#666666; cursor:pointer; } .spoiler-open{ background:#ffffff; border-radius:5px; padding:5px; } .spoiler > .hidden-content{ display: none; }

Как им работать? Тут все опять не сложно: в визуальном редакторе появится маленькая кнопка плагина с буквой S. Вам нужно щёлкнуть по фото, чтобы обозначить его, а потом щёлкнуть по этой кнопке. Всё, теперь при открытии статьи, фото будет скрыто, а на его месте будет текст, который пропишите в настройках плагина.

Хотя, как показали тесты скорости, страница загружается за то же время, что со скрытыми картинками, что с открытыми. Может этот онлайн тест что-то не учитывает? Но скорее всего картинки все же загружаются, просто плагин их скрывает. Но так или иначе, этот плагин я считаю полезным, и вот по каким причинам:

1. Большое количество картинок отвлекает внимание от контекстной рекламы. Когда у вас просто текст, то внимание невольно переключается на контекстную рекламу, которая обычно выделяется другим цветом по отношению к тексту.

2. Дополнительные клики по ссылкам на скрытое фото увеличит время нахождения посетителя на сайте. А так, если человек просто бегло просмотрит картинки, то это всего лишь секунды.

Кроме всего этого хочу вам рассказать ещё об одном интересном опыте.

Как вставить фото в статью?

Обычно все вставляют фото в статью, загружая изображение на хостинг. Но мой опыт показал, что хостинг забивается очень быстро, а у меня всего 1 гигабайт на несколько сайтов. И я стал применять другую стратегию - загружать картинки на сторонние ресурсы, а потом вставлять в статью. Ссылку я конечно ставлю не прямую, так как внешние ссылки мне не нужны, а преобразую адрес ссылки из внешней во внутреннюю, и закрываю её от индексирования.

У этого подхода я вижу ещё один плюс: нагрузка на мой хостинг снижается. Куда же я загружаю фото? В твиттер. Таким образом я убиваю сразу несколько зайцев:

1. Разгружаю свой хостинг - и по ресурсам, и по дисковому пространству.

2. Мой твиттер аккаунт становится красивым и интересным.

3. Ссылки с твиттера на эту же статью, в которую вставляю фото, ускоряют индексацию.

4. С таких микро постов с картинкой больше переходов, так как они более заметны.

5. Такой сайт легче переносить, так как нужно будет перенести только базу данных.

Думаю, что твиттер очень надёжный микроблог и просто так там ничего не удалят, и поэтому фото будут жить очень долго. И можно смело сказать, что твиттеру я доверяю НАМНОГО больше, чем своему нынешнему хостингу.

Более подробное исследование я уже провёл в статье о вариантах хранения картинок.

Вот такой получился пост об оптимизации картинок на сайте. Теперь нужно время, чтобы все это применить. Как я буду это делать?

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

Как оптимизировать картинки

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

Дубликаты картинок.

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

оптимизировать картинки

Может это сделал какой то плагин? Непонятно, пришлось удалять всё вручную.

Если у вас есть мнение по данным вопросам, то мне будет интересно узнать о нём в комментариях.


Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


5 комментариев
  1. Скачал сегодня картинки на компьютер, все, которые в формате png. Буду конвертировать из в JPG и заливать обратно. Может не все, их очень много (44 мб), но хотя бы самые большие.

  2. Странно, почему то много дубликатов картинок, к которым просто дописаны цифры? Удалю лишнее!

  3. Вот беда, оказывается твиттер подрезает картинку в размерах - это нехорошо, нужно будет что-то придумать!

  4. С одной стороны скрывать картинки хорошо для самого сайта, а с другой- посетители любят смотреть все сразу в статье, будут ли нажимать?!
    И еще, некоторые новые посетители могут опасаться нажимать на фразу "а вдруг там не картинка"?!

    • Это был только эксперимент, я от этого отказался, хотя в некоторых случаях это можно и применять.

Написать комментарий

Опубликовано © Блокнот вебмастера

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. OkPay - Офшорная компания зарегистрирована на Британских Виргинских островах, можно открыть счет в долларах, евро и рублях.

4. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

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