Оптимизация изображений для сайта с помощью программы 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

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

Понравилась статья? Поделись с друзьями:
Комментариев: 14
  1. Есть еще   полезный сервис в "Инструментах вебмастера"  в Гугле.  Называется PageSpeed Insights.   В   частности  по картинкам, он  дает рекомендации  какие  картинки  на странице следует  обжать.  И есть  расширение PageSpeed Insights for Chrome примерно с такими  же функциями.

  2. Замечательная простая программа. К сожалению, только на английском.

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

  3. Если  заговорили про оптимизацию   изображений, то   кроме размера важным является: 

     Название изображения. Должно быть уникальным   и  значащим.  Никаких img20005, пишите в транслите разделяя  слова   чертой (moja-devushka-2);

    Указывайте размер   изображения;

    Всегда  заполняйте alt.   Он  должен быть уникальным. Если фотографий одного   того же предмета много, а фантазия не работает или  просто лениво дописывайте –«фото первое» либо «фото 1».

  4. Уменьшить величину размера картинки при сохраненном качестве можно посредством плагина wordpress EWWW Image Optimizer. Он же позволяет обработать группу изображений.

  5. Уменьшить картинку — не проблема. Проблема, чтобы при этом качество не потерялось, а вес существенно изменился. Спасибо за подсказанные плагины, попробую! Раньше хватало Фотошопа, но сейчас сижу под Андроидом, проблема, однако, тут с Адобовскими программами!

  6. Господи, я совсем новичек! Я даже не догадывалась, что надо проверять объем картинок, которые я вставляю на сайт. Просто подгоняла размеры в фотошопе, чтобы картинка хорошо вписывалась в статью. Скажите, а какой оптимальный объем картинки? И еще, я подписывала картинки русскими буквами. Может, лучше английскими?

  7. Garri (автор)

    [USER=127]@Оксана300[/USER], Оптимальный размер до 50 Кб.  Пользуйтесь плагином Cyr-To-Lat он сам делает транскрипцию.

  8. Статья немного не соответствует названию. Ну да ладно…Меня устраивает сервис для сжимания tinypng(тчк)com — сжимает качественно! Ах да у них недавно появился плагин вордпресс.орг/plugins/tiny-compress-images/ Советую :)

  9. VekWeb
  10. Ксениямаева

    [QUOTE="Оксана300, post: 665, member: 127"]Господи, я совсем новичек! Я даже не догадывалась, что надо проверять объем картинок, которые я вставляю на сайт. Просто подгоняла размеры в фотошопе, чтобы картинка хорошо вписывалась в статью. Скажите, а какой оптимальный объем картинки? И еще, я подписывала картинки русскими буквами. Может, лучше английскими?[/QUOTE]

    Можно же скриптом в фотошопе сжать

  11. Garri (автор)

    [QUOTE="Ксениямаева, post: 2010, member: 1344"]Можно же скриптом в фотошопе сжать[/QUOTE]

    Конечно можно.

  12. Fishka

    [quote="il brutto, post: 565, member: 76"]Название изображения.[/quote]

    название не важно.

    важно alt и title

    а название может быть любым.

    [DOUBLEPOST=1438084207][/DOUBLEPOST][QUOTE="VekWeb, post: 1991, member: 1290"]Я юзаю compressor.io[/QUOTE]

    я тоже его :)

    а вообще поставьте xnconvert — замечательно обрабатывает

  13. alt — если изображение не уникально, это бессмысленно.

    title если не указан — берется из названия изображения.

    compressor.io — использовал как-то, сжимает как правило в 2 а то и в 3 раза, к примеру с 800 кб, сжимает до 400-300 кб. Искажений изображений не замечал.

Добавить комментарий
Screenshot.png
Общаясь и проявляя активность в Клубе по WordPress

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