Сжатие изображений в CMS 1С Битрикс. Оптимизация картинок в битрикс

Автоматическая оптимизация изображений сайта

05.10.2018

Последние несколько лет я достаточно тесно сотрудничаю с сео-специалистами в продвижении сайтов на базе 1С-Битрикс. Одной из первых задач от сеошников является приведение работы сайта к зеленым показателям в Google Page Speed. В 90% случаев, сайты, поднятые на готовых решениях, уже удовлетворяют всем требованиям, кроме оптимизации изображений и наличия несжатых css и js файлов.

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

Для оптимизации изображений использую скрипт zImageOptimizer. Скрипт устанавливается на сервер вместе со всеми необходимыми ему зависимостями.

При вызове скрипта доступны следующщие опции (опции можно комбинировать):

-h (--help) - справка работы со скриптом. При указании данной опции другие опции будут проигнорированы;
-v (--version) - просмотр версии скрипта. При указании данной опции другие опции будут проигнорированы;

-p (--path) - используется для указания пути к обрабатываемому изображению. Путь может быть как со слешем на конце, так и без;
-q (--quiet) - работа скрипта без лишних вопросов к пользователю;
-l (--less) - не будет показывать процесс оптимизации;
-c (--check-only) - проверка установки зависимостей скрипта. При указании данной опции другие опции будут проигнорированы;
-t (--time) - установка периода, за который просматривать модификаци файлов;
-n (--new-only) - использовать временные метки только для поиска новых изображений. Одновременное использование опций -t и -n не возможно;
-m (--time-marker) - указание файла собственной временной метки. Имеет смысл только при опции -n;
-tmp (--tmp-path) - указание пути к каталогу со временными файлами;
-e (--exclude) - указанные через запятую пути к изображениям, которые нужно исключить из оптимизации.

Установка скрипта оптимизации на сервер

Для установки скачиваем файл в домашнюю папку пользователя, являющегося владельцем всех файлов сайта, т.е. в случае работы с BitrixVM - /home/bitrix:

wget https://raw.githubusercontent.com/zevilz/zImageOptimizer/master/zImageOptimizer.sh -O /home/bitrix/zImageOptimizer.sh

Установка зависимостей может быть выполнена 2 вариантами - при запуске скрипта - скрипт предложит установить все зависимсти автоматически, либо можно установить все самому. Процесс ручной установке описан на домашней странице скрипта. Для автоматической установки всех зависимостей, запускаем скрипт:

sudo bash zImageOptimizer.sh -c

Параметр "-c" означает, что скрипт покажет установленный софт и спросит об установке отсутствующих пакетов. Нажмите 1 и Enter, чтобы выбрать вариант "1. Install dependences and exit", установка запустится. После установки всех зависимостей, можно повторно вызвать эту же команду, чтобы убедиться, что все компоненты установлены - у всех компонентов будет статус "FOUND".

Только первый запуск скрипта нужно выполнять с root-правами, чтобы скрипт имел возможность установить недостающие компоненты. После того нужно переавторизоваться под пользователем, владельцем файлов сайта:

su bitrix

Проверяем, что переавторизация прошла успешно:

whoami

Теперь можно переходить к процедуре оптимизации изображений на сайте.

Предварительно настоятельно рекомендую сделать бекап сайта - мало ли что-то пойдет не так. Это можно сделать либо штатным средствами bitrix, либо воспользоваться командой:

rsync -avh --include '*/' --include '*.jpg' --include '*.png' --exclude '*' /home/bitrix/site.com/ /home/bitrix/backup/site-com-images/

Чтобы откатиться до бекапа, нужно выполнить команду:

rsync -a /home/bitrix/backup/site-com-images/ /home/bitrix/site.com/

Оптимизация работает в 3-х режимах: простая оптимизация, оптимизация с использованием меток времени и оптимизация файлов, созданных за определенный период.

Оптимизация всей графики в папке

Данный вариант - самый простой и подходит, например, для разового использования. Будут оптимизированы все изображения - и те, которые еще не оптимизированы и ранее оптимизированные.

Запуск скрипта в таком варианте исполнения осуществляется командой:

bash zImageOptimizer.sh -p /путь/до/каталога/

Скрипт пропустит через несколько утилит оптимизации все файлы JPEG, PNG и GIF в указанном и вложенных каталогах. Для разовой оптимизации подходит, но не более того. Повторно сжимать графику нет смысла, потому что сжатия не будет.

Оптимизация с использованием метки времени

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

Чтобы выполнить оптимизацию изображений в каталоге (с учетом вложенных подразделов), необходимо выполнить команду:

bash zImageOptimizer.sh -p /путь/до/каталога/ -n

В результате выполнения скрипта в указанном каталоге будет создан файл метки и, при повторном запуске, будут оптимизированы только новые файлы. При этом, если в скрипт передать каталог уровнем выше, то метка учитываться не будет, т.к. файл метки не будет найден. Чтобы этого избежать, можно указать файл метки вручную:

bash zImageOptimizer.sh -p /путь/до/каталога/ -n -m /home/bitrix/site_name/.timemarker

Оптимизация файлов, созданных за определённый промежуток времени

Это еще один вариант разового ручного запуска. Таким образом, можно организовать сжатие без создания дополнительных меток. Например, чтобы сжать изображения, появившиеся на сервере за прошедшие сутки, можно выполнить команду:

bash /home/bitrix/zImageOptimizer.sh -p /путь/до/каталога/ -t 1d

При этом, параметры могут быть заданы в зависимости от динамичности наполнения сайта данными:

дни: 1d,2d,3d ...
часы: 1h,2h,10h ...
минуты: 1m, 15m, 30m ...

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

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

Регулярный запуск скрипта по крону

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

0 3 * * * bash /home/bitrix/zImageOptimizer.sh -p /путь/до/каталога/ -q -n -m /home/bitrix/sitename/.timemarker

Такая запись позволит через просмотр списка файлов домашней папки bitrix-пользователя, увидеть, когда была произведена последняя оптимизация и убедиться, что скрипт работает.

Источник: https://glashkoff.com/kak-optimizirovat-izobrazheniya-sayta/

pai-bx.com

Атрибуты alt и title оптимизация картинок

Приветствую всех читателей.

Оптимизация сайта ключевой момент в развитии и поднятии вверх в поисковых выдачах. Специалисты по продвижению учитывают все методы и возможности в развитии сайта. Хотим поделиться опытом в оптимизации картинок с помощью alt и title. Поисковые роботы не могут определить картинку, поэтому важно дать понять, что вы хотели донести до пользователей. Робот пробегается по тексту и по всем картинкам сайта. Для изображений на сайте необходимо прописать атрибуты, улучшающее продвижения сайта и добавляют картинки в специальный раздел «Картинки», что увеличивает трафик.

Alt и Title

Атрибут alt (Альт) — альтернативный текст картинки. Если браузер не смог подгрузить картинку или просто удалилась картинка на сервере, пишется альтернативный текст.

Атрибут title — подсказка для пользователя, описывающая картинки. Подсказка появляется при наведении мышкой на картинку.

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

Для изображений существуют свои правила в интернете, самый лучший формат jpg. Картинки сжимаются и вешают меньше чем другие форматы, тем самым подгружаются быстрее. Изображение можно сжать до 75-85%, что не повлияет на качество. Пример html кода вывода картинки на странице.

Рекомендуется прописывать для всех картинок Alt и Title. Текст атрибутов должен содержать ключевые слова, включающие заголовок статьи или раздела. Изображений в статье не должно быть много, иначе робот вас не поймет, необходимо соблюдать меру. Обычно статья должна содержать от одной до двух картинок, если присутствует слайдер, то изображений может быть множество.

Количество символов атрибута alt для Google не должно превышать 16 символов, в поисковой системе Яндекс до 28 символов. Мы рекомендуем прописывать несколько ключевых слов. Количество символов Title не имеет значение, потому что они показываются только пользователям, но следует прописать ключевые слова для улучшения релевантности сайта поисковыми системами.

Установка alt и title в 1С-Битрикс

Сайт является основным инструментом поискового продвижения. Мы советуем сайт на 1С-Битрикс, содержащий все ключевые инструменты развития ресурса, включающие alt и title для всех изображений.

Указать атрибуты для картинки вы можете во вкладке сео «Настройки SEO информации» в подразделах «Настройки для картинок анонса элементов» и «Настройки для детальных картинок элементов». В полях «Шаблон ALT» и «Шаблон TITLE» указываются поисковые ключи для картинок сайта. В 1С-Битрикс оптимизация сайта на высшем уровне за счет хороших инструментов, необходимо пользоваться ими всеми. Не следует рядовому пользователю заходить в код html без особой нужды.

Вкладка сео содержит атрибуты только для анонса и детальной картинки. Остальные изображения загружаются и указывается атрибуты alt через медиабиблиотеку.

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

Нарушения за картинки alt и title

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

Вывод

Для изображений на сайте указывают атрибут alt и title, первый является обязательным. Все картинки на страницы считываются поисковыми роботами и анализируются. Правильная картинка со временем попадает в поисковые сервисы поиска картинок.

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

Недавно нашли ошибку в 1С-Битрикс, не выставлялись данные для анонса картинки. При обращении в техподдержку 1С-Битрикс ошибку зафиксировали и сиправили.

Зарегистрированное в разработке обращение было закрыто. "news.list, default шаблон, не устанавливает title для картинки." Модуль: iblock, версия: 16.5.4 Решение: исправлено Номер обращения в разработку: 77368.

disprove.ru

Сжатие изображений в CMS 1С Битрикс

Дата публикации: 23 июня 2017 г.

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

Итак начнём, для начало установим на сервере два пакета:

для оптимизации JPG

sudo apt-get install jpegoptim

для оптимизации png

sudo apt-get install optipng

В скрипте будем так же, как и прежде, рекурсивно перебирать массив с файлами, определять тип файла и в зависимости от типа файла, оптимизировать нужной утилитой:

#!/bin/bash cd /[путь до установленной CMS 1с Битрикс]/upload/iblock/ imagemass=`find . -type f -regex ".*\.$jpg\|jpeg\|gif\|png\|JPG\|JPEG\|GIF\|PNG$" -size +100k |tr '\n' ' ' |sed "s/ /,/g"` i=0 IFS=',' read -r -a arrayname <<< "$imagemass" while [ $i -lt ${#arrayname[@]} ] do sizeimg=`du -h ${arrayname[$i]}` echo "Размер файла до преобразования" $sizeimg image_format=`identify -format %m ${arrayname[$i]}` if [ $image_format = "JPEG" ] then jpegoptim --strip-all --all-progressive -ptm85 ${arrayname[$i]} elif [ $image_format = "PNG" ] then optipng -strip all -o5 ${arrayname[$i]} else echo "ДРУГОЙ ФОРМАТ" fi sizeimagem=`du -h ${arrayname[$i]}` echo "Размер файла после преобразования" $sizeimagem i=$[i+1] done

Про параметры утилит optipng и jpegoptim можете просмотреть в man или в официальной документации.

Данный скрипт обработал почти 23000 файлов изображений за 24 минуты на VDS (2 Core CPU, 8 Gb RAM, HDD не SSD). Нагрузка на CPU 50%. Сжал 7 Gb до 2,4 Gb. Качество картинок на уровне. Полёт нормальный!

Собственно дальше текст старой статьи.

Не секрет, что популярная в России CMS 1C Битрикс, довольно требовательна к ресурсам. Проблемы оптимизации данной CMS известны всем пользователям и администраторам. Одной из причин является множитель медиа файлов, а за счёт не компетенции пользователей, которые не оптимизируют изображения, свободное место на файловой системе довольно прогрессивно заканчивается. Способ нативного решения данной проблемы следующий, конечно, если у вас есть доступ к shell.

#!/bin/bash cd /[путь до установленной CMS 1с Битрикс]/upload/iblock/ imagemass=`find . -type f -regex ".*\.$jpg\|jpeg\|gif\|png\|JPG\|JPEG\|GIF\|PNG$" -size +100k |tr '\n' ' ' |sed "s/ /,/g"` i=0 IFS=',' read -r -a arrayname <<< "$imagemass" while [ $i -lt ${#arrayname[@]} ] do sizeimg=`du -h ${arrayname[$i]}` echo "Размер файла до преобразования" $sizeimg convert ${arrayname[$i]} -quality 75 ${arrayname[$i]} sizeimagem=`du -h ${arrayname[$i]}` echo "Размер файла до преобразования" $sizeimagem sleep 1 i=$[i+1] done echo $i

Скрипт рекурсивно выбирает файлы по маске в каталоге upload/iblock, размер которых превышает 100 Кбайт и выполняет сжатие с качеством 75%. При выполнении скрипта будет выводиться информация о файле, его исходный размер и размер после сжатия.

Естественно данный скрипт можно использовать для сжатия любого изображения, которое необходимо оптимизировать под WEB.

Важно! Убедитесь, что в системе установлен ImageMagick.

- Автор

Master Wenom

Автор и создатель сайта

wenom.org