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

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

Как же найти баланс и уровнять — необходимое наличие изображений, и низкое время генерации страниц для посетителей?

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

Оптимизация в программе Adobe Photoshop

  • При создании нового изображения в фотошопе, нужно выбрать оптимальные параметры.
  • Доступен выбор шаблонов, подойдут шаблоны в разделе «Для Интернета». Либо просто настроить разрешение на «72», для интернета этого вполне достаточно.
создание изображения в фотошопе
  • Сохранять изображение лучше в формате .gif. Изображение в этом формате, получается хорошего качества, и с небольшим, в отличии от остальных форматов, весом.
сохранение в gif
  • Если же вы хотите оптимизировать готовое изображение, то и это с фотошопом тоже можно сделать.
  • Сначала, нужно открыть изображение с помощью фотошопа.
открыть файл с помощью фотошоп
  • Потом зайдя в раздел «Файл», на панели инструментов, выбрать «Сохранить как…», и формат .gif.
сохранить файл как...
  • После того, как вы дадите имя создаваемому файлу, откроется окно, в котором нужно выбрать «Web».
настройка сохранения файла

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

Оптимизация в программе FileOptimizer

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

Скачать программу, можно на официальной странице разработчиков: https://nikkhokkho.sourceforge.io/

Окно программы разделено на две части:

  1. Панель инструментов.
  2. Рабочая область.
окно программы FileOptimizer
  • Зайдя в настройки, можно произвести общие настройки оптимизации, а так же персональные настройки для оптимизации любого поддерживаемого файла.
настройки программы FileOptimizer
  • Есть вариант оптимизации «по максимуму», с потерями. Но эти потери не всегда заметны. Поэтому поэкспериментируйте, и выберите настройки оптимизации, более подходящие именно для Вас.
дополнительные настройки к каждому типу файлов в FileOptimizer

Сегодня мы рассмотрели тему: «Оптимизация изображений для сайта». Любой из описанных в статье вариантов, в разы уменьшит вес вашего изображения. Наглядный обзор оптимизации изображений, смотрите в видео по теме.

Надеюсь статья была вам полезна. До встречи в новых статьях.

С уважением, Андрей Бондаренко.


Видео на тему «Оптимизация изображений для сайта»: