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

 

Приветствую всех на страницах своего блога!

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

как-оптимизировать-изображения

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

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

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

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

Необходимо заранее для изображения установить необходимый размер по странице сайта и оптимизировать ее объем в пределах 50 кб или в пределах близких к этому.

Оптимизация картинок с помощью фотошоп

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

К примеру, нам нужно разместить на своем блоге картинку. Ее размер 1200*800 и вес 5Мб.

Надеюсь на Вашем компьютере уже установлена программа Фотошоп.

Как скачать установить и настроить фотошоп читайте в статьях на моем блоге.

И так, открываем картинку в программе фотошоп.

Открываем фотошоп, нажимаем сочетание горячих клавиш Ctrl+O (O- это буква в англ. раскладке)

Выбираем на компьютере нужную картинку и и открываем ее.

Кликаем на «замочек», чтобы разблокировать картинку для последующего редактирования.

optimizacija_kartinok_dlja_saita

Далее нам нужно выставить необходимый размер картинки, что-бы она без искажений размещалась по ширине поста Вашего блога. Обычно это ширина — 650 px (пикселей).

Для этого одновременно нажимаем сочетание горячих клавиш Ctrl+Alt+I.

В открывшемся окне устанавливаем ширину 650 px. Смотрим, чтобы кнопка значка была нажата, тогда высота картинки устанавливается пропорционально ширине автоматически. Устанавливаем разрешение 72 пискеля/дюйм и жмем кнопку «ОК».

optimizacija_kartinok_dlja_saita

Теперь нам нужно изменить вес картинки до 50 кБ.

Делаем это в три простых шага.

Шаг 1. В верхнем меню фотошоп выбираем: Файл- Сохранить как... или сочетание клавиш Shift+Ctrl+S

kak-optimizirovat-kartinki-dlja-sajta2

Шаг 2. В открывшемся окне выбираем тип файла JPEG и жмем на кнопку «Сохранить».

kak-optimizirovat-kartinki-dlja-saita3

Далее перед нами открывается окно «Параметры JPEG»

Шаг 3. Устанавливаем качество сохраняемой картинки. Для этого перемещаем ползунок и смотрим на изменение качества картинки.

Как только значение объема картинки достигнет 50кБ или близкого значения. При этом изображение не потеряет визуального качества картинку можно сохранить с такими параметрами.

Жмем кнопку «ОК»

kak-optimizirovat-kartinki-dlja-saita3

Как видите нашем примере объем сохраняемой картинки удалось уменьшить до 48,2 кБ вместо 5 МБ!

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

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

Обрабатываем изображения с помощью сервиса

Оптимизировать картинки можно при помощи сервиса https://kraken.io

Заходим на этот сервис и нажимаете на серую кнопку «попробуйте бесплатный веб-интерфейс»

optimizacija-kartinok

В открывшемся окне жмем на кнопку начать бесплатно.

optimizacija-kartinok

Далее проходим процедуру быстрой регистрации и переходим на главную страницу и и жмем на иконку показанную на скриншоте ниже.

optimizacija_kartinok

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

В течение 2 секунд картинка обрабатывается и мы можем скачать готовое изображение.

8

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

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

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