Сегодня мы с вами поговорим о том, как уменьшить вес картинок на сайтах 1с-Битрикс. Уменьшать вес картинок, то есть делать их компрессию, нужно для того, чтобы для пользователей вашего сайта весь графический контент загружался быстрее.
Приветствую друзья! В сегодняшнем уроке мы с вами поговорим о том, как уменьшить вес картинок на сайтах 1с-Битрикс. Уменьшать вес картинок, то есть делать их компрессию, нужно для того, чтобы для пользователей вашего сайта весь графический / визуальный контент грузился быстрее.
Зачем это нужно?
Мы много раз своей практике сталкивались с тем, что на сайтах наших клиентов графические изображения, изображения товаров в том числе, весят очень много, то есть вес картинки доходит до 5, 6, 7 мегабайт, а в некоторых случаях были 12, 15 мегабайт вес одной картинки. И если таких картинок много, то общий объем сайта, его вес, в том числе и на хостинге, занимает очень много пространства, а если еще постоянно добавляются товары, то приходится либо покупать какой-то тарифный план хостинга побыстрее, либо с большим объемом жесткого диска. Нагрузка на сервер возрастает.
Кроме того, Google и Яндекс, в принципе, тоже не очень приветствуют сайты, которые медленно работают, потому что этот весь излишний вес, сильно затормаживает работу сайта. Загрузить главную страницу, которая условно весит 1 мегабайт, или загрузить страницу, которая весит 15 мегабайт. Разница существенная. То же самое карточка товара весит 200 килобайт, или она весит 20 мегабайт.
Что можно с этим делать, как эти картинки можно ужать? Существует много разных способов, много разных сервисов, но я сегодня расскажу об одном из них.
У вас на экранах вот сервис называется он “тини png”. Сайт: https://tinypng.com.
Первое, что нам нужно сделать, это залогиниться, а если у вас нет аккаунта, то сначала нужно зарегистрироваться по данной ссылке https://tinypng.com/developers.
После регистрации у нас появляется такая кнопочка логин, вбиваем сюда адрес своей электронной почты и нажимаем кнопочку send link, проверяем нашу почту, видим здесь письмо с данного сервиса. Открываем письмо и нажимаем кнопочку логин “with magic link”.
Переходим, в личный кабинет, и здесь у нас ведется вся статистика по сжатию картинок. В данном месяце я ужал 138 картинок из бесплатных 500. То есть здесь есть тарифный план на бесплатное сжатие, если вам нужно больше чем 500 в месяц, вы можете докупить, стоит сущие копейки, около одиного рубля за одну картинку.
Слева у нас располагается меню, мы с вами переходим в пункт API, нажимаем, и здесь у нас ведет статистика. Также у нас здесь присутствует ключ, специальный ключ. Этот ключ мы в ближайшем времени будем использовать на сайте.
Следующий шаг. Мы переходим с вами на наш сайт переходим в раздел marketplace, переходим в раздел каталог решений и в поисковой строке вводим запрос “tinypng”. Pдесь есть бесплатный модуль, называется оптимизации изображения через “тини png”, у меня он установлен, у вас будет здесь ссылка на установку.
Нажимаете на ссылку, процесс инсталляции у вас займет одну минуту максимум, ничего сложного там нет. После того, как данный модуль установится, нам с вами нужно будет перейти в раздел настройки - настройки продукта - настройки модулей, и здесь у нас с вами будет такой пункт “тини пнг” Мы с вами переходим в него и в поле ключ API “тини png” вбиваем тот самый ключ, который мы с вами берем из личного кабинета.
Далее мы с вами переходим в пункт меню сервисы, и здесь у нас появляется вот такая вот иконочка, написано “тини png”. Нажимаем сюда, и здесь у нас открывается окно, где мы видим наше изображение, как правило, но у меня здесь так настроено, чтобы показывал последние закаченные на сайт изображения; и здесь видно, сколько размер, и размер до сжатия, просто тут уже большая часть картинок, практически все, сжаты.
Сейчас мы найдем с вами какую-нибудь картинку несжатую. Вот она эта картинка, весит она 90 килобайт, и все, что нам нужно сделать, это нажать кнопочку сжать. Нажимаем, чуть-чуть ждем, и все, вот он у нас сжался. Я сохранял эту картинку видимо в фотошопе специально для веба, поэтому тут размер сжатия небольшой.
Но в целом, посмотрите на файл до сжатия 308 килобайт, после 176. То есть минус 132 килобайта с файла. Где то у нас 560 превратились в 100 килобайт, то есть в 5 раз сжалась картинка. Другая из 608, получилось 112. Ну и так далее. То есть смысл определенно есть, сайт у вас станет значительно легче, место на хостинге будет занимать меньше, и грузится он будет быстрее, и, как следствие, лучше будет ранжироваться в поисковых системах.
Также здесь можно сжимать сразу по несколько файлов, например, мы отмечаем галочками четыре файла, выбираем пункт «действия», и здесь выбираем «сжать», нажимаем кнопочку «применить». Пройдет небольшой процесс сжатия, после чего все автоматически у вас обновиться.
И вот таким образом прокликиваем здесь все картинки и сжимаем. Это конечно же не единственный способ сжатия, существуют и другие. Есть модули автоматического сжатия, но этот модуль, во-первых, позволяет выборочно делать сжатие, то есть не так, как другие модули. Другие модули часто ужимают вообще все содержимое сайта.
И для кого-то это, возможно, удобно, но для кого-то, может быть, и не очень.
Также вы можете сжать изображение прямо на самом сайте tinypng.com. То есть вы берете с рабочего стола несколько картинок и сюда их просто перетаскивайте мышкой.
И вот мы с вами смотрим. Вот у нас ужались файлы, он показывает процентное соотношение, на 54 процента один, на 68 другой, и на 38 третий. В совокупности, мы с вами сэкономили 752 килобайт. А когда речь идет о сотнях или тысячах файлов, картинок, понимаете какая это экономия.
На этом у меня все, благодарю вас за внимание!