все о заработке в интернете
инфо-бизнесе с нуля, электронной коммерции
Мой профиль Вконтакте

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

Привет, коллеги. Продолжаем выполнять рекомендации Page Speed от Google, и переходим непосредственно к оптимизации изображений и файлов css. Если все правильно сделать, это сильно ускорит загрузку ваших страниц, что еще более положительно скажется на продвижении вашего блога.

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

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

 Сжатие изображений различными способами

И так, я проверяю свой блог с помощью pagespeedи вижу следующую картину.

показатели загрузки страницы в pagespeed

Сервис показывает, что мне нужна оптимизация изображений, которая даст выгоду в 210 КБ или 56%. Также там указываются рекомендуемые утилиты, если нажать на кнопку «оптимизируйте следующие изображения». Я начал разбираться, а в чем собственно дело. Я вроде пользуюсь фотошопом для сохранения картинок именно под Интернет. Т.е., все должно быть нормально. Но не нут то было.

После некоторого анализа, я понял в чем загвоздка. Помните, в статье про то, как удалить дубли неиспользуемых изображений, я писал, что у меня на блоге выводятся миниатюры на главное странице для статей. Так вот, такая картинка имеет размер 237×140 рх, и создаются они автоматически с помощью специального кода. Но я их могу вставлять непосредственно из самой статьи. До этого я не обращал внимание на то, что для таких миниатюр лучше создавать специальное уменьшенное изображение.

До этого, я просто брал картинку размером 560×420 рх и задавал ее как миниатюру. Специальный скрипт сокращал ее размеры до нужных, но вес изображения не уменьшался! Т.е. как весила она 30 КБ, так и весит, несмотря на уменьшенную копию. Именно этот косяк и показал мне PageSpeed. И его рекомендацией было сразу прописать нужный размер. В результате, такое оптимизированное изображение увеличивает скорость загрузки страницы. А так как у меня их на главной странице аж 10 штук, то, как видите, нагрузку можно сократить прилично.

Googleдаже предложил программы для оптимизации изображений без потери качества, но, если честно, то я с ними не разобрался. Уж очень они мудреные. А воспользовался фотошопом. Все что там нужно сделать, это выбрать свое изображение, уменьшить его до нужных размеров во вкладке «изображения» — «размер изображения». Далее «файл» — «сохранить для Web устройств».

параметры фотошопа

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

параметры качества сохранения картинки

Ок. С фотошопом на этом все. Но оптимизацию изображений можно проводить и с помощью еще нескольких инструментов. О них, далее. Здесь на первом месте я бы выделил сайт Smushit.com от Yahoo. Данный сайт позволяет уменьшить размер изображения за счет удаления ненужных данных в картинке. При этот не теряется качество изображения.

Сначала вам нужно сохранить картинку описанным выше способом через Photoshop. Затем заходите на сайт и загружаете изображение.

компрессор изображений smushit

Затем жмете кнопку Smush. Если вам нужно загрузить сразу, скажем, 20 изображений, то вы вводите цифру 20 в поле и нажимаете OK. После этого появится 20 строчек. На выходите вы получите следующее изображение.

полученное сжатое изображение в smushit

Как видите, у меня изображение уменьшилось на 739 байт, что составило 4.19% от оригинала. Я думаю, что неплохо. После этого загружаете себе новое изображение на компьютер и используете его у себя в статьях.

скачка изображения

Также здесь поддерживаются и pngформаты. Еще могу посоветовать воспользоваться программой FileOptimizer. Очень хорошая. Она бесплатная, скачать можно тут. Здесь просто нужно добавить файл и нажать оптимизировать.

программа file optimizer

Есть и другие программы и сервисы для оптимизации и сжатия изображений, но мне достаточно этих двух способов. Проделав такую операцию, pagespeedпоказал мне оценку уже не 61, а 69 из 100.

Если вы еще не знакомы с инструментом PageSpeed, то обязательно прочитайте статью про проверку скорости загрузки сайта.

Надеюсь данная статья была вам полезна. Поделитесь ей в социальных сетях.

С уважением, Александр Пузатых

Понравилась статья? Поделитесь с друзьями!