Как правильно сделать оптимизацию картинки на любом сайте

Здравствуйте, дорогие читатели блога web-zarabotok.info.

Вы пользуетесь Google PageSpeed? Нет! Зря… Сервис очень хорош тем, что с его помощью вы можете без каких-либо навыков сделать самоанализ своего сайта. Просто в специальное поле вбиваете адрес (можно главной страницы) и нажимаете анализировать. В ответ вы узнаете очень много SEO ошибок, которые нужно срочно исправлять. Например:

PageSpeed-Insights-оптиматизация-картинок

Я сегодня расскажу только об одной проблеме «Оптимизация картинок». Давайте раз и навсегда избавимся от нее. Чтобы в дальнейшем, она нас больше не беспокоила.

Итак… Вначале давайте узнаем:

Зачем делать оптимизацию картинок?

Оптимизация картинок делается для того, чтобы повысить скорость загрузки страниц сайта. Например, ваш пост имеет огромное количество картинок (миниатюр), общий вес которых составляет от 10 мб. И как вы думаете?! Сколько секунд будет грузиться страница… Друзья, очень долго. Тому, все эти факторы и влияют на продвижение сайта. Также хочется сказать о размерах на хостинге. Как вы знаете, хостинг-провайдеры ограничивают нас в этом. Будьте экономней… :-) Берегите память на другое, чем забивать ее картинками с большим весом.

А сейчас, давайте вернемся к основной проблеме:

Как сделать оптимизацию картинок для любого сайта?

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

Итак, вначале нам нужно скачать программу XnConvert. Вот ссылка . Скачали?! Супер. Сейчас нужно ее установить. Делается этот процесс обычным способом. Проблем быть не должно.

Теперь оставляем программу, и переходим к скачиванию картинок с хостинга на свой ПК. В этом помогает мне замечательная программа «FileZilla» (скачать). Данные подключения FTP можно узнать у своего хостинг-провайдера.

После подключения, ищем папку с картинками. Этот блог работает на WordPress, тому мой путь к медиафайлам лежит через папку wp-content ? upload. Смотрите скрин:

Инструкция-копирования-папки-с-картинками-с-WordPressПосле того как папка будет полностью скопирована сделайте на всякий случай ее копию. Всякое может быть! Тому лучше перестраховаться…

Что касается сайтов, которые работают без CMS. Вам нужно найти свой путь к папке с картинками. Зачастую ее название images.

Сейчас, вернемся к нашей программе XnConvert. Запускаем. Перед нами будет следующее окно:

Скрин-запуска-программы-XnConvertНас интересует «Добавить папку». Нажимаем и указываем путь к нашей папке с картинками. Важно! Зачастую кто работает с WordPress, в папке с картинками есть еще одна (с датами загрузки). В таком случае нужно делать все поочередно.

После, вверху нужно открыть вкладку Действия. Здесь мы можем настроить сжатие картинок. Можете поиграться и все сами настроить под себя. Я выбрал для себя только 2 параметра.

  1. Это удаление метаданных.
  2. Глубина цветов 64.

Смотрите как это делается на скриншотах.

Удаление метаданных
Изменение глубины цвета

Что касается настроек сжатия изображений, то — это все.

Настроим путь выходных данных.

Для этого вверху, выбираем «Выходные данные». Перед нами два варианта сохранения картинок:

  1. Исходная папка — сжатые картинки будут заменены исходными (рекомендую включить этот вариант);
  2. Папка — сами прописываем путь сохранения.

Важно! Все поля в «Имя файла» оставляем без изменений.

Нажимаем «Преобразовать» и все. Таким образом, мы одним нажатием сделали оптимизацию всех наших картинок. Для более наглядной работы программы, можете сравнить вес папки до и после оптимизации. :-) У меня были просто сумасшедшие результаты. До оптимизации: 854 мб. После: 518 мб.

Как уже говорил раньше, программа сможет сделать оптимизацию картинок для любого сайта. Если же вам хочется оптимизировать изображения на сайте практически в 2 клика без каких-либо усилий и затрат своего драгоценного времени, то вам отлично подойдет сервис OptiPic.io. Дополнительным его преимуществом является то, что подключив сервис 1 раз к своему сайту, вы обеспечите постоянный контроль над изображениями. Система будет следить за появлением новых картинок на сайте и автоматом их оптимизировать.

  • Средняя эффективность сжатия через OptiPic — порядка 70%.
  • Сервис одинаково легко подключается к любому сайту (любая CMS, фреймворк или даже самописный сайт).

Если вы работаете с таким модулем, как WordPress, то у меня есть ещё один способ сделать быструю онлайн-оптимизацию прямо с панели управления.

Итак…

Оптимизация картинок на WordPress

Для работы, нам понадобится плагин под названием WP Smush. Скачать его можно отсюда. Устанавливаем. Я всегда устанавливаю плагины через админку, а не через FTP. На мой взгляд, это самый лучший и быстрый вариант.

Плагин установлен. Теперь переходим в раздел «Медиафайлы». Перед нами будет список последних загруженных картинок. Справа (если не заметили) напротив каждой картинки, появилась кнопка с надписью «Smush Now!».

Скрин-использвания-плагина-wp-smushЕсли нажать на кнопку, то плагин автоматически уменьшит размер картинки.

Скрин-использвания-плагина-wp-smush-2На скрине, видно, что вторая картинка сокращена была на 11.02 KB (7%). Это довольно-таки неплохой результат.

P.S. Плагин имеет платную версию поэтому, если, хотите одним нажатием сделать оптимизацию всех картинок — придется заплатить. Я, сэкономил!  :roll: Сделал все вручную.

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

В итоге

Как видите, есть несколько способов, сделать оптимизацию картинок. Честно говоря, то первый (универсальный) вариант понравился мне куда больше. Объясню…

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

В итоге выбор имеют только те, кто работает на WordPress.

На этом у меня все друзья. Если возникли проблемы? Отпишитесь в комментариях! Буду рад помочь.

Ах да… Не забудьте проверить, убралась ли проблема с оптимизацией картинок сервисом Google PageSpeed. Вот ссылка.

Понравилась статья? Подписывайтесь на обновления. Узнавайте о выходе новых статей первыми!

Спасибо за внимание!

С уважением, Могиш Иван

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

    Спасибо за эти два способа. Точнее за первый))) Очень важно уменьшать все картинки.
    На своем блоге я всё делаю через фотошоп: подгоняю размер картинок, потом сохраняю особым способом.
    А если на блоге уже 1000 картинок или более, то первый способ с помощью программки — просто идеален =)

    1. Надежда Введенская

      Я тоже делаю в Фотошопе с сохранением для Web, Интересно, такие картинки тоже надо оптимизировать?

    2. Ярослав

      Для Web не надо оптимизировать, для Web разрешение картинки изначально выставлено маленькое.

  2. Руслан

    А какие результаты выдает сервис PageSpeed на вашем блоге? очень любопытно

    1. admin (автор)

      для мобильной 71 а на ноутбуке от 88 до 94 (зависит от ответа сервера на хостинге)

  3. Максим Козлов

    Отличные сервисы. Сейчас попробую свои картинки оптимизировать

  4. Александр

    Я хоть и сжимаю картинки для блога в фотошопе, но сервис Google PageSpeed всё равно чем-то недоволен. Платный плагин, конечно мне не очень подходит, а вот программу нужно будет протестировать. Посмотрим, что с этого получится. Буду надеяться на положительный результат. ;)

  5. Надежда Введенская

    Проверила я свой сайт. Естественно, замечания по картинкам есть. Значит, буду оптимизировать согласно вашим рекомендациям. Меня еще интересуют замечания по JavaScript. У вас статья по этому поводу есть?

  6. IvYur

    Проверил. 64%. Есть замечания которые буду устранять. А что касается картинок, может я не так делаю, но когда сохраняю в фотошопе там есть функция сохранения для инета. Размер картинки например с 1 мб превращается в 100 кб.

    1. Надежда Введенская

      Я тоже так делаю. И все же Гугл что-то еще хочет. Кстати, заметила, что почему-то в базе количество картинок удваивается. Наверное, автоматом формируются миниатюры.

  7. eun

    У меня 51%. Срочно удалил часть рекламы и включил кэширование на стороне браузеров — стало 68%. Непонятно со скольки процентов начинается зелёная зона… %)

  8. praktik_man

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

  9. Дмитрий

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

    1. IvYur

      Я тоже вот этим недавно занимался. Очень много которые оптимизировать пришлось.

  10. Айк

    А как оптимизировать 40.000 изображений которые на сайте уже,кто знает хороший плагин?

    21 век на дворе,нужно автоматизировать процесс сжатия,а не оптимизировать каждое изображение по отдельности.
    Загрузил на сайт-плагин оптимизировал и все -автоматизировать,не все нужно руками делать,цените время друзья !

    1. Ярослав

      В статье написано про плагин WP Smush. Если плагин не угодил, пользуйтесь программой XnConvert.

    2. IvYur

      Ого 40 000. Ручками вы будете долго ))) Это у вас что магазин?

  11. Виктор

    Я много раз видел на сайтах, оптимизацию картинок на вордпрес в таком (или похожем) виде:
    У меня вопрос, я сейчас это делаю вручную, можно ли автоматизировать или есть инструменты, которых я не замечаю на вордпрес?!

  12. Irina

    Давно хочу заняться картинками…И сжать, и уникализировать. Наверное, вначале нужно всё же установить везде уникальные картинки.

  13. Павел

    Спасибо за интересный материал. Да, всё это необходимо делать с картинками, согласен.

  14. Komarovski

    В плагине WP-Smush есть Bulk (массовое сжатие файлов), на бесплатном тарифе можно по 50 изображений за раз сжимать. В принципе за день, получается примерно 4 тысячи изображений сжать. Но на бесплатном тарифе сжатие у плагина плохое, Google показывает, что файлы можно ещё +30-40% сжать. А платный вариант как по мне слишком дорогой (платный вариант подразумевает сжатие в два раза).
    А вообще, хотел поблагодарить за данный пост и за первый вариант сжатия, огромный плюс, что есть предпросмотр изменений.
    Большое спасибо! :)

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: