Один из самых распространенных моментов уже после разработки сайта, когда обязанности по наполнению контентом забирает на себя клиент, желая сэкономить на поддержке. Разработчики и пишут инструкции по контент-менеджменту, и дают ссылку на подробные обучающие материалы от Битрикс, и обучают клиента работать с сайтом как онлайн, так и очно, но всё равно через полгода клиент может получить еле двигающуюся поделку, которая ранее гордо звалась, например, “Корпоративный сайт - современный инструмент продаж!”. В чем дело? Дело в картинках!
Как понять что изображение не оптимизировано?
Попробуйте зайти на сайт и принудительно обновить его (с очисткой закэшированной информации) для win это Ctrl+F5, для mac это Shift+Cmd+R. Если вы видите, что большие изображения прямо при загрузке постепенно появляются сверху вниз и страница прогружается более чем 5 секунд - значит почти наверняка ваши картинки очень много “весят”.
Проверить также можно открыв, например, timeline загрузки ресурсов. В Google Chrome есть такой инструмент и он очень наглядно показывает как загружается страница и какие картинки у нас больше всего “тормозят” процесс. На примере ниже на сайте одного из жилых комплексов, например, главная картинка размером в более чем 4 Мб тормозит полностью весь сайт.
Как оптимизировать изображения?
Сейчас все привыкли к очень быстрому Интернету, поэтому зачастую ребята, загружающие большие картинки на свои сайты думают, что и так сойдет, однако не только пользователям мобильных устройств придется не сладко. Мы можем принять за норму средний “вес” страницы сайта в районе 1,5 Мб, исходя из этого - 90% ”веса” страницы - это картинки. То есть около 1,4 Мб должны весить ВСЕ картинки на текущей странице. При условии, что в таком популярном элементе, как слайдер
баннеров на главной странице сайта больших картинок 3-4 штуки - то весить они должны по 200-300 Кб. Проверьте ваши сайты ;)
Adobe Photoshop
в популярном редакторе для оптимизации веса картинки есть специальный режим сохранения. Save For Web
Online-сервисы
Если вдруг у вас не установлен графический редактор, вы можете воспользоваться одним из популярный онлайн-сервисов для оптимизации изображений. Я обычно использую tinypng.com, а также есть:
-
JPEGmini — онлайн сервис для сжатия графических файлов в формате JPEG. В JPEGmini есть одноименные программы для компьютера
-
Online Image Optimizer работает на сайте tools.dynamicdrive.com. Онлайн сервис предназначен для сжатия файлов форматов GIF, JPG, и PNG.
-
Compressor.io для уменьшения размера изображений с поддержкой нескольких графических форматов.
-
Image Optimizer — сервис для сжатия фотографий онлайн. На сайте предлагается программа Image Optimizer.
-
TinyPNG.com
Давайте посмотрим на примере насколько же станет меньше изображение, которое чуть выше грузило сайт жилого комплекса более чем на 12 секунд!
на 86% можно было оптимизировать изображение до 700Кб без видимой потери качества картинки!
Как настроить 1С-Битрикс для автоматического уменьшения изображений?
В CMS 1C-Битрикс есть инструменты для того, чтобы автоматически принимать меры для уменьшения изображений. Как раз для невнимательных контент-менеджеров. Эти настройки необходимо выполнять сразу после установки и при настройке системы управления, не дожидаясь добавления контента на сайт.
В настройках каждого инфоблока в разделе Поля необходимо установить вот такие настройки.
Заходим в настройки инфоблока
Делаем настройки для картинок анонса
Делаем настройки для детальных картинок
Также вы можете установить модуль из Маркетплейс 1С-Битрикс, который позволяет через описанный выше tinypng сжимать добавляемые картинки на лету, что очень удобно и, кстати, абсолютно бесплатно. marketplace.1c-bitrix.ru/solutions/sva.tinypng/
Напомню, что устанавливать модули из Маркетплейс могут только обладатели активных лицензионных ключей, у которых не закончился период получения обновлений. Ну и бэкап сделайте на всякий случай ;
Напишите, и мы ответим
