Программы

Оптимизация изображений для сайта с помощью программы IrfanView

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

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

Оптимизация изображений для сайта

Для оптимизации изображения необходимо выполнить несколько простых шагов. Первый из них – установка графического редактора, с помощью которого будет проводится работа с изображением. Большинству людей сразу приходит на ум Photoshop. Можно использовать и его, но есть и более легковесная и простая в обучении программа –IrfanView. К тому же, она бесплатная.

Установили? Открываем изображение и переходим в раздел Изображения —> Изменить размер изображения или нажимаем комбинацию клавиш Ctrl+R.

Для начала необходимо снизить DPI до 72. Затем устанавливаем пункт Сохранять пропорции, а в пункте Способ изменения размера выбираем Ресэмплирование с помощью фильтра. Также стоит установить галочку возле пункта Повысить резкость после ресэмплирования, чтобы усилить детализацию изображения. Последний шаг – уменьшаем изображение до 400 пикселей в ширину.

Оптимизация изображений.1jpg
​На выходе мы получили изображение, размер которого составляет 128 Кб вместо исходных 1,63 Мб, то есть его размер уменьшился примерно на 93%.

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

Открываем файл в редакторе и идем в Файл —> Сохранить для web. В пункте Сжать до размера (в новых версиях программы этот пункт меню убрали, советую использовать Photoshop CS2) указываем необходимый размер, например — 50 Кб. Формат файла лучше оставить JPEG. Остальное программа сделает сама. На выходе получаем весьма качественное оптимизированное изображение, готовое к размещению на сайте.

В данном примере показаны 2 варианта одного и того же изображения. Размер первого – 16,2 Кб, второго – 128 Кб.

Оптимизация изображений2

Оптимизация изображений3

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

<p>Есть еще&nbsp;&nbsp; полезный сервис в &quot;Инструментах вебмастера&quot;&nbsp; в Гугле.&nbsp; Называется PageSpeed Insights.&nbsp;&nbsp; В&nbsp;&nbsp; частности&nbsp; по картинкам, он&nbsp; дает рекомендации&nbsp; какие&nbsp; картинки&nbsp; на странице следует&nbsp; обжать.&nbsp; И есть&nbsp; расширение PageSpeed Insights for Chrome примерно с такими&nbsp; же функциями.</p>
  • TPF
  • 06.10.2016
<p>Замечательная простая программа. К сожалению, только на английском. </p><p>&nbsp;Еще есть сервис jpegmini он платный, с довольна завышенной ценной. Но в России, дело легко исправляемое, найти на просторах интернета кряк не составляет проблем.</p>
<p>Если&nbsp; заговорили про оптимизацию&nbsp;&nbsp; изображений, то&nbsp;&nbsp; кроме размера важным является:&nbsp; </p><p>&nbsp;Название изображения. Должно быть уникальным&nbsp;&nbsp; и&nbsp; значащим.&nbsp; Никаких img20005, пишите в транслите разделяя&nbsp; слова&nbsp;&nbsp; чертой (moja-devushka-2);</p><p>Указывайте размер&nbsp;&nbsp; изображения;</p><p>Всегда&nbsp; заполняйте alt.&nbsp;&nbsp; Он&nbsp; должен быть уникальным. Если фотографий одного&nbsp;&nbsp; того же предмета много, а фантазия не работает или&nbsp; просто лениво дописывайте –«фото первое» либо «фото 1».</p>
<p>Уменьшить величину размера картинки при сохраненном качестве можно посредством плагина wordpress EWWW Image Optimizer. Он же позволяет обработать группу изображений.</p>
<p>Уменьшить картинку - не проблема. Проблема, чтобы при этом качество не потерялось, а вес существенно изменился. Спасибо за подсказанные плагины, попробую! Раньше хватало Фотошопа, но сейчас сижу под Андроидом, проблема, однако, тут с Адобовскими программами!</p>
<p>Господи, я совсем новичек! Я даже не догадывалась, что надо проверять объем картинок, которые я вставляю на сайт. Просто подгоняла размеры в фотошопе, чтобы картинка хорошо вписывалась в статью. Скажите, а какой оптимальный объем картинки? И еще, я подписывала картинки русскими буквами. Может, лучше английскими?</p>
Попай
  • Попай
    Попай
  • 06.10.2016
<p>@Оксана300, Оптимальный размер до 50 Кб.&nbsp; Пользуйтесь плагином <b>Cyr-To-Lat</b> он сам делает транскрипцию.</p>
<p>Статья немного не соответствует названию. Ну да ладно...Меня устраивает сервис для сжимания tinypng(тчк)com - сжимает качественно! Ах да у них недавно появился плагин вордпресс.орг/plugins/tiny-compress-images/ Советую :)</p>
<p>Я юзаю compressor.io</p>
<p>
Господи, я совсем новичек! Я даже не догадывалась, что надо проверять объем картинок, которые я вставляю на сайт. Просто подгоняла размеры в фотошопе, чтобы картинка хорошо вписывалась в статью. Скажите, а какой оптимальный объем картинки? И еще, я подписывала картинки русскими буквами. Может, лучше английскими?
</p><p>Можно же скриптом в фотошопе сжать</p>
Попай
  • Попай
    Попай
  • 06.10.2016
<p>
Можно же скриптом в фотошопе сжать
</p><p>Конечно можно.</p>
<p> </p><p>название не важно. </p><p>важно alt и title </p><p>а название может быть любым.</p><p> 
</p><p>я тоже его :)</p><p><br /></p><p>а вообще поставьте xnconvert - замечательно обрабатывает</p>
  • Wsk
  • 06.10.2016
<p>alt - если изображение не уникально, это бессмысленно.</p><p>title если не указан - берется из названия изображения.</p><p>compressor.io - использовал как-то, сжимает как правило в 2 а то и в 3 раза, к примеру с 800 кб, сжимает до 400-300 кб. Искажений изображений не замечал.</p>