Школа
Веб-разработка

ImageOptim — полезная программа для оптимизации картинок на сайте

24 ноя 2022
👁 4707   🗩4
Веб-разработка

ImageOptim — полезная программа для оптимизации картинок на сайте

24 ноя 2022
👁 4707   🗩4
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 23
23
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

Когда картинок много, разница в скорости загрузки до и после оптимизации видна невооружённым глазом. А в интернет‑магазине с десятками тысяч фоток товаров, оптимизация вполне может сэкономить неплохие деньги на оплате места на хостинге.

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

В идеальном мире разработчики «учат» сайт автоматически оптимизировать картинки. На практике так заморачиваются далеко не всегда, картинки частенько приходится оптимизировать вручную.

Проще всего оптимизировать картинки вручную специальной программой. На маке я пользуюсь Имидж‑Оптимом. Перетягиваю в программу картинку:

У меня в настройках включено сжатие с небольшой допустимой потерей качества. Эта потеря не заметна в большинстве задач, зато на порядок увеличивает эффективность сжатия.

Вжух! Размер картинки уменьшился в восемь раз без ощутимой потери качества:

Оригинал 1,6 Мб
После оптимизации 188 Кб

В Имидж‑Оптим можно перетаскивать целые папки, программа найдёт и оптимизирует все картинки внутри:

Имидж‑Оптим можно натравить на картинки через контекстное меню по правой кнопке мыши:

Оптимизируйте всё, что загружаете в веб. С программой это быстро, а результат ощутим и полезен.

Напоследок, ещё раз: в идеале оптимизацию картинок автоматизируют. Чтобы не заставлять менеджеров вручную оптимизировать фотки товаров, попросите разработчиков добавить автоматическую оптимизацию на этапе загрузки картинок на сайт. Можете заодно попросить их добавить и автоматическое типографирование текста, кстати! :‑)

P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 23
23
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Иллюстрация сжата с потерями качества. Обратите внимание на слово lossy на первом скриншоте.

Игорь Петров

Дмитрий, спасибо за замечание! Действительно, настройки программы были сбиты.

Илья Савельев

А мне нравится Squoosh (https://squoosh.app/).
Прекрасный визуальный интерфейс в стиле «было/стало». Хорошее сжатие. И работает в браузере (или как PWA, то есть можно «установить» как приложение). А значит, если потребовалось сжать изображение — зашёл на сайт, загрузил и через пару секунд скачал сжатое. Хоть на десктопе, хоть на телефоне.
Главный недостаток: сжимает только по одному изображению. Папку не загрузить…

Nikita

Исходя из личного опыта, лучше всех сжимает tinypng.com он же tinyjpg.com

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы