Настройте подходящий размер изображений битрикс

Как оптимизировать сайт и интернет-магазин на Битрикс по рекомендациям Google PageSpeed Insights

Производительность сайта или его скорость (page speed) — один из важных факторов, напрямую влияющих на конверсию и рейтинг сайта в поисковых системах.

Почему сайту важно иметь хорошие показатели в GPSI:

1. Когда конкурент находится на расстоянии в один клик, скорость загрузки приобретает во многом решающее значение и напрямую влияет на рост конверсии.
2. Скорость загрузки сайта — один из важных факторов, который учитывается в алгоритме формирования поисковой выдачи. Выше скорость — выше позиции в поиске — больше трафика.
3. Если страница сайта загружается медленно при переходе с рекламного объявления в Яндекс.Директ или Google AdWords, пользователь тут же уходит. Оплата за клик списывается, но в статистике переход засчитывается как «отказ». Рост числа отказов ведет к снижению количества показов на рекламных площадках. Выше скорость загрузки (ускорение pagespeed) — больше показов и качественных переходов — ниже стоимость привлечения клиента.

Что изменилось в PageSpeed 5.0

Если ранее при индексировании и оценке скорости сайта упор был на десктопную версию, то теперь на мобильную.

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

В PageSpeed 5.0 страницы загружаются в настоящий браузер Chrome, которым управляет Lighthouse — проект команды, состоящей из разработчиков Google Chrome.

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

К примеру, считывается:

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

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

Источник

Размер картинки для анонса

Доброго времени суток.
Вопрос такой — есть готовый интернет магазин, в каталоге товаров, картинки для анонса получаются совершенно разного размера.
При создании нового товара заношу изображения имеющие одинаковую высоту — 400px, соответственно думал, что и картинки для анонса будут
одной высоты, а они получаются совершенно разные, отличие до 2х раз по высоте и ширине.

В свойствах инфо-блока /поля, установлены галочки:
Создавать картинку анонса из детальной (если не задана).
Создавать картинку анонса из детальной даже если задана.
Уменьшать если большая. 150px на 150px — (Причем картинки для анонса получаются большей высоты чем 150px)
Сохранять качество при масштабировании

В свойствах инфо-блока /поля разделов, установлены галочки:
Создавать картинку анонса из детальной (если не задана).
Удалять картинку анонса, если удаляется детальная.
Создавать картинку анонса из детальной даже если задана.
Уменьшать если большая.50px на 50px
Сохранять качество при масштабировании

Пробовал убирать все эти галочки и создавать новый товар, ситуация не меняется ни как.
Пробовал в файле result_modifier.php изменять размеры, тоже самое — ничего не меняется

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

С картинками работаю локально, поэтому на сайте, не очень много таких вот разных изображений.
Возможно вручную, нужно искать, в содержимом файлов, какую-то функцию, формирующую эти картинки?
Если кто-то сможет подсказать в каком направлении искать — огромное спасибо.

Источник

изменение размера картинки

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

скрипт перестаёт выполнятся.

Велика вероятность того, что не хатает памяти.

В БУСе используется в основном изменение размера картинки на клиенте либо средствами html, либо js.
JS:

В фотогалерее 2.0 при загрузке из публичной части создаются копии фото меньших размеров.

спасибо
размер картинки прим 2000 х 1600

а если загружать через фотогалерею она сожмёт рисунок?

О. Тут большой простор для творчества!

CFile::ShowFile(); — html-сжатие картинки, ф-ция ядра.
Если же вам нужно физически сжимать картинки, то желательно это делать не во время каждого показа, а сжать единожды и сохранить. Сжимать можно ф-цией imagecreatefromjpeg (и другими из серии работы с картинками) для изменения размера картинки на сервере, или сначала рисунки подготовить, а потом только загружать )

Цитата
Ирина Юртаева пишет: О. Тут большой простор для творчества!

CFile::ShowFile(); — html-сжатие картинки, ф-ция ядра.
Если же вам нужно физически сжимать картинки, то желательно это делать не во время каждого показа, а сжать единожды и сохранить. Сжимать можно ф-цией imagecreatefromjpeg (и другими из серии работы с картинками) для изменения размера картинки на сервере, или сначала рисунки подготовить, а потом только загружать )

да.. с этим я уже знаком Изучал форум.
Функции с 2006 года в дополнение к ShowFile, кроме Show2Files, так и не появилось.

Без своей функции для этой задачи, как я уже понял — не обойтись в Битриксе ))

Цитата
CFile::ShowFile(); — html-сжатие картинки, ф-ция ядра.

А подскажите, каким образом настроить автоматическое сжатие при публикации статьи ( новости ).

К примеру, я добавляю новость с картинкой, в разделе новостей эта картинка висит «как есть», а вот на главную страницу выводится эта же новость, но со сжатой картинкой заранее установленного размера. Тоесть для всех картинок на главной должен быть фиксированный размер!

Не подскажите куда это вставлять, и какие переменные нужно заменять?

$src — путь до картинки
$width — требуемая ширина

$photoInfoΎ] — $photoInfo[«1»]
$photoInfoΏ] — $photoInfo[«0»]
тупой форум всё извратил

Цитата
Ирина Юртаева пишет: Велика вероятность того, что не хатает памяти.

В БУСе используется в основном изменение размера картинки на клиенте либо средствами html, либо js.

Руслан, для этого вам больше подойдут ф-ции ядра: CFile::ShowFile(), CFile::ShowImage(), но решать вам.

Источник

vpronin.ru

Создание сайтов на Битрикс

Изменение размеров картинок анонса в каталоге Битрикс

Возникла казалось бы рядовая задача: изменить размер анонсовых картинок каталога товаров. Конечно, можно использовать ResizeImageGet и получить картинку нужного размера из детальной, но зачем увеличивать и без того огромную папку upload?

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

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

В документации у метода Update класса CIBlockElement есть по умолчанию отключенный параметр bResizePictures, который активирует настройки инфоблока для обработки изображений.

Если его включить, то детальная и анонсовая картинка сжимается до размеров анонсовой из настроек инфоблока. Странное поведение, возможно, такой баг только на моей версии (18.1.7).

В итоге был написан скрипт.

Перед запуском лучше потестировать скрипт на отдельных товарах. Для этого добавьте через запятую их id.

На моем сайте обработка 2 600 товаров заняла 31 минуту.

Для правильной работы в настройках инфоблока каталога нужно отметить опции:

• Создавать картинку анонса из детальной (если не задана).
• Создавать картинку анонса из детальной даже если задана.

Пишите в комментариях если возникнут ошибки, попробуем разобраться 🙂

Источник

Кастомные свойства элементов инфоблока и пользовательские свойства на примере ресайзинга изображений

На последних проектах я столкнулся с тем, что к контенту на сайте прилагается значительное количество изображений с различными размерами. Обойтись стандартными полями превью и детального изображения для элементов и разделов инфоблоков с их настройками уменьшения изображения не получилось. Поэтому мы с коллегами пошли по простому пути и стали использовать стандартные свойства типа “файл” как для элементов инфоблоков, так и для пользовательских свойств для разделов инфоблоков. Далее, конечно же, создали обработчики событий для того, чтобы обработать изображения в то состояние, которое требуется для отображения на сайте. Под обработкой изображения я подразумеваю пропорциональный ресайзинг или кроп (ресайзинг по одному размеру и дальнейшая обрезка лишнего), чего можно добиться стандартными средствами Битрикса (методы CFile::ResizeImage и др.). Сделали один проект таким образом… А потом второй, третий… Конечно, такой подход имеет право на жизнь, но он очень неудобен.

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

Суть создания кастомных свойств заключается в создании определенных обработчиков событий для событий OnIBlockPropertyBuildList для свойств элементов инфоблока. Пример такого обработчика:

В этих обработчиках содержится описание кастомных свойств и стандартные методы, которые могут быть вызваны при работе со свойством. Например, html-представление настроек для свойства элемента инфоблока определяется реализацией метода GetSettingsHTML . Результаты работы этого метода можно увидеть на следующем скриншоте:

Для пользовательских свойств страница настройки выглядит так:

Что еще позволяют делать эти методы? Обрабатывать значения перед сохранением в БД, создавать html-представления в формах редактирования админки и публичной части, обрабатывать значения настроек свойств и др.

Расскажу о некоторых проблемах в разработке. При создании кастомного свойства указывается базовый тип свойства (строка, файл, список и др.). Метод CFileInput::Show позволяет создать стандартное html-представление контрола для загрузки изображений. Если указать базовый тип свойства “файл” для пользовательских типов свойств, то никаких проблем не возникает. Но для свойств элемента инфоблока это стало проблемой, т.к. используя стандартное html-представление крайне трудно без костылей удалить уже загруженное в свойство изображение. В связи с этим я отказался от использования базового типа “файл” и стал использовать “строку”, куда помещаю идентификатор файла в таблице, регистрирующей файлы в БД Битрикс.

Код модуля можно увидеть на GitHub . Помимо стандартной установки модуля доступна установка с использованием Composer, о которой я рассказывал в своем предыдущем посте .

Важно! В модуле используется API ядра D7, поэтому рекомендуется использовать его только для версий Битрикса от 14 и выше. Модуль находится в beta -версии и, если вы решите использовать его в своих проектах, о найденных багах сообщайте, пожалуйста, в Issues репозитория.

Хотелось бы подвести небольшой итог этого поста. На мой взгляд, создание собственных свойств открывает множество возможностей, потому что обработка изображений — это, конечно же, не единственное применение. Созданные командой Битрикса свойства такие как, например, привязка к карте Google Maps — отличный тому пример.

Источник