Оптимизация изображения для увеличения скорости загрузки сайта

Здравствуйте, дорогие друзья. Сегодня я расскажу как оптимизировать изображения для ускорения загрузки сайта. Но, для начала расскажу, почему ни писал почти неделю. Эту неделю я боролся с бюрократией, пытался получить новый загранпаспорт. Вы просто не представляете, что сейчас творится в паспортных столах, — это просто кошмар (очереди, давка, скандалы). Ещё хуже, чем обычно. Всё очень медленно. У меня такое ощущение, что в первый раз я получил паспорт гораздо проще и быстрей.

В общем, «плюнул» я на это. Зашёл на просторы Интернета, зарегистрировался на портале госуслуг и оформил получение данной услуги, без очередей и траты драгоценного времени.

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

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

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

Где узнать о причинах медленной загрузки сайта

Сервисов для проверки скорости загрузки сайта – много. Но мы поговорим о сервисах, которые показывают причины медленной загрузки.

Я использую два сервиса:

PageSpeedInsights – сервис от Google, по 100 бальной шкале показывает показатель скорости загрузки сайта для мобильных устройств и компьютеров. И даёт рекомендации по устранению причин медленной загрузки. Плюс данного сервиса – русский язык и хорошая справка. Минус – нет готовых решений.

PageSpeed
PageSpeed

GTmetrix – этот сервис аналогичен Гугловскому, также проводит анализ сайта и выдаёт причины снижающие скорость загрузки сайта. Показатель скорости загрузки выражается в зарубежной системе оценки (где, А – высшая оценка). Плюс сервиса – наличие готовых решений (не на все причины конечно). Минус – отсутствие русского языка (хотя это сомнительный минус).

GTmetrix
GTmetrix

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

Зачем нужна оптимизация изображения

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

К вопросу о том, что такое оптимизация изображения и как её делать? Скажу по-простому, — под оптимизацией изображения подразумевается уменьшение размера без потери качества. Только не надо путать размер (вес) файла с шириной и высотой в точках. Так же к оптимизации относится указание размеров изображения в HTML и CSS коде, и некоторые другие премудрости.

Средства оптимизации изображений

У кого есть Photoshop – можно делать с помощью этого графического редактора. Я именно так и делаю. Создал сценарий и одной кнопкой оптимизирую скриншоты к статьям.

Photoshop
Photoshop

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

Альтернативой будут два онлайн сервиса позволяющие оптимизировать изображения ничем не хуже. Правда, загружать изображения нужно по очереди. Это универсальные оптимизаторы, позволяющие оптимизировать файлы форматов JPG, PNG, GIF.

Compressor.io – наилучший результат сжатия (среди многих сервисов протестированных мной).

SiteReportCard – есть удобная возможность выбрать один из результатов оптимизации.

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

TinyPNG – из протестированных мною сервисов, этот показал наилучшие результаты с изображениями в формате PNG. К тому же можно загружать до 20 изображений одновременно. Но вот обратно скачивать всё же придётся по одному.

JPEG Optimizer – данный сервис лучше всех справляется с изображениями в формате JPEG.

В общем как видите инструментов достаточно и все хороши по-своему.

Массовая оптимизация изображений

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

Kraken.io – через этот сервис Вы можете оптимизировать сразу несколько изображений. Максимальный размер одного файла или суммарный вес всех изображений не должны превышать 10Мб. Вы можете за один раз оптимизировать несколько десятков, а то и сотню изображений. А ещё здесь есть возможность, скачать оптимизированные изображения в один клик, zip-архивом.

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

Krakin
Krakin

Если вы будете оптимизировать изображения, загруженные ранее на сайт, то советую использовать FTP-соединение. Так Вы быстрей скачаете и далее загрузите обратно оптимизированные изображения.

Если у Вас блог на платформе WordPress, то изображения будут храниться в

http://vashdomen/wp-content/uploads

и

http://vashdomen/wp-content/themes/vashtema/images

Это чаще всего, хотя могут быть и исключения.

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

Вот тут то и понадобится сервис GTmetrix. Проведя анализ сайта, нужно перейти в раздел «Optimizeimages». Здесь будут представлены все изображения требующие оптимизации и более того – уже готовый оптимизированный вариант изображения.

Параметры оптимизации изображения
Параметры оптимизации изображения

Нужно только скачать его и загрузить по указанному пути.

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

И если сайт у Вас не захламлён такими изображениями, то и нечего переживать.

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

Если после анализа сайта вы видите низкий показатель «Serve scaled images»,

Не соответствие размеров
Не соответствие размеров

следовательно, оригинальный размер изображения изменён в HTML или CSS. Вот вам пример: на предыдущем скриншоте видно, что оригинал указанного мной изображения 300х300, а в исходном коде это изображение уменьшено до 200х200 пикселей.

Размеры в коде
Размеры в коде

Так вот нужно изменить изображение до нужных 200х200 пикселей. Это легко сделать в фотошопе или бесплатном графическом онлайн редакторе Pixlr Edition.

Для начала скачиваете изображение к себе на компьютер, редактируете, и закачивает обратно по тому же адресу. В WodrPress дальше делать ничего не надо. А вот если это самописная страница, не забудьте в HTML коде указать нужные параметры ширины (width=»200″) и высоты (height=»200″). Отсутствие этих параметров влияет на скорость загрузки сайта, о чём свидетельствует параметр «Specify image dimensions» при анализе сайта в GTmetrix.

Сведения о размерах изображения
Сведения о размерах изображения

Как видно на скриншоте в моей теме не хватает параметров (16х16, 32х32) для иконок комментариев, категорий, даты и так далее.

Как указать параметры ширины и высоты изображения в теме WordPress

Итак, разберём мой пример. В моей теме не указаны размеры вот этих изображений:

Изображения без размера
Изображения без указания размера

Значит нужно найти в шаблоне место, где выводятся эти изображения. А выводятся они на главной странице и на странице материала. За главную страницу отвечает файл (index.php), а за материал отвечает файл (single.php).

Так вот отрываем административную панель WordPress– «Внешний вид» > «Редактор» — нужный файл. И добавляем параметры ширины и высоты, на основе предложенных размеров в отчёте GTmetrix.

Вставка параметров размера
Вставка параметров размера

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

А ещё скорей всего у вас в отчёте будет низкий показатель по параметру «Combine images using CSS sprites». Это параметр сообщает, что на сайте есть одинаковые изображения, которые можно объединить в спрайты для ускорения загрузки сайта. Но в двух словах этого не рассказать. Поэтому об этом поговорим в следующих статьях. А пока у вас есть над чем работать.

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

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

До встречи в следующих статьях.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 26
  1. Юрий

    Надо глянуть на свои картинки, информативно

    1. Максим Зайцев (автор)

      Юрий, обязательно гляньте. Это лишь первый шаг к быстрой загрузке сайта, но очень важный.

  2. Юрий

    GTmetrix классный сервис, многое поправил на своем блоге.

    1. Максим Зайцев (автор)

      Юрий, да GTmetrix отличный сервис, позволяет значительно облегчить задачу при оптимизации сайта.

  3. Юрий

    Изображения существуют в разных форматах,подскажите в каких форматах лучше выкладывать на сайт?

    1. Максим Зайцев (автор)

      Здравствуйте, Юрий. Лучше конечно использовать изображения в формате JPEG или PNG. Эти изображения лучше всего оптимизируются без потери качества.

  4. Юрий

    Спасибо большое,если скачать картинку с инета и изменить ее размер или формат или оптимизировать она будет считатся уникальной или нет?

    1. Максим Зайцев (автор)

      Здравствуйте, Юрий. Изменение размера и формата может сделать картинку уникальной, но не факт. Вы должны должны добавить что то своё, надпись или другой графический элемент. Это с большей вероятностью придаст картинки уникальность. Ну а чтобы не гадать проверяйте картинки на уникальность здесь: http://www.tineye.com/ Желаю удачи!

  5. Юрий

    Спасибо буду проверять.

    1. Максим Зайцев (автор)

      Желаю удачи!

  6. Максим

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

    1. Максим Зайцев (автор)

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

  7. Нина

    Очень полезная инфа!! Благодарю Максим!!!

    1. Максим Зайцев (автор)

      Здравствуйте, Нина. И вам спасибо за комментарий! Удачи Вам!

  8. Гузель

    Максим, здравствуйте! Интересные предложения. Я пока только начала вникать в систему оптимизации сайта, стараюсь, по крайней мере). Посмотрела предложенный вами GTmetrix, предложенные готовые варианты на блоге посмотрела, даже маленькие значки указывает, как не корректные, так я понимаю. Но в блогспот готовый шаблон, я уже итак его меняю под себя, корректирую по мере своих поверхностных знаний. Если я загружу предложенный системой вариант, он будет работать корректно?

    1. Максим Зайцев (автор)

      Здравствуйте, Гузель. Оптимизация сайта — это долгий и кропотливый труд. Нужно делать всё постепенно. Оптимизированные файлы в GTmetrix имеют то же имя, что и файл оригинал. Так что, когда вы меняете одно изображение на другое — всё будет работать корректно.
      В качестве страховки, всегда делайте резервные копии перед началом экспериментов.

      1. Гузель

        Спасибо, взяла на заметку. Буду вникать и пробовать. Для этого создала второй блог для экспериментов). Удобный сервис, если умело применять. Рада знакомству.

        1. Максим Зайцев (автор)

          Гузель, взаимно. Желаю вам удачи. Если будут вопросы, задавайте, я постараюсь помочь. :-)

  9. Максим

    Ох как все запутано(( уже лишний раз думаешь не лесть в эти сервисы( Это как сходить к врачу и узнать много болезней и переживать потом) Уже подумываю шаблон сменить на более оптимальный…

    1. Максим Зайцев (автор)

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

      1. Максим

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

        1. Максим Зайцев (автор)

          Конечно всё получится. И подход выбран правильный. Постепенно все изображения будут оптимизированы. В своё время, я 1500 изображений таким же способом оптимизировал. Так что всё получится. Желаю удачи! ;-)

  10. Алексей

    Максим, а если выгрузить изображения через FTP и загрузить их уже сжатыми, то alt слетит? А мириатюры в Вордпресс слетят?

    1. Максим Зайцев (автор)

      Нет, если загрузить всё в те же папки. Ничего не слетит.

  11. Виктория

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

  12. Rush Analytics

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

    К примеру, для ПС Google все, что превышает 100 Кб считается большим.

    Оптимизируйте графику на своем сайте и будет Вам благо ;)

Добавить комментарий для Виктория Отменить ответ