Image Resizer

Модуль Image Resizer предназначен для удобного изменения размеров изображений после их загрузки на сайт. Он особенно полезен в ситуациях, когда одно и то же изображение используется в разных частях сайта, но должно отображаться в разных размерах.

Например, по дизайну сайта одно и то же изображение может выводиться в нескольких блоках: в анонсе, в списке материалов и в полной версии статьи. Если просто уменьшать картинку с помощью HTML или CSS, изображение фактически остаётся большого размера (например, 500×400 px), занимая при этом меньшую область (300×250 px). Это негативно влияет на SEO, так как увеличивает вес страницы и снижает скорость её загрузки — параметры, которые поисковые системы учитывают при ранжировании.

Основные возможности модуля

Image Resizer полезен не только с точки зрения SEO, но и значительно упрощает работу разработчиков и администраторов сайтов. В новостных и контентных проектах часто требуется выводить одно изображение в разных пропорциях и размерах. При стандартном масштабировании через CSS соотношение сторон может искажаться, что ухудшает внешний вид.

Благодаря функции Crop (обрезка) модуль автоматически вырезает нужную область изображения и приводит её к заданным размерам без потери пропорций. Вы можете указать, какая часть изображения должна быть использована — центр, верх, низ или углы.

Работа с внешними изображениями

В качестве дополнительной возможности модуль поддерживает работу с внешними изображениями. Если в материале используется изображение, загруженное на сторонний сервис (через прямую ссылку), Image Resizer может автоматически скачать его на ваш сервер, а затем выполнить:

• изменение размера;

• настройку качества;

• обрезку изображения.

SEO-оптимизация имён файлов

Одной из проблем DLE считается добавление Unix timestamp к имени изображения. Такие длинные и нечитабельные имена файлов не приносят пользы для SEO. Image Resizer решает эту проблему, позволяя использовать значение alt-тега в качестве имени файла.

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

Производительность и кэширование

Изменение размеров изображений не выполняется при каждом открытии страницы. Обработка происходит только при первом отображении изображения, после чего результат сохраняется в кэше. Это означает, что:

• нагрузка на сервер минимальна;

• скорость загрузки страниц не снижается;

• повторная обработка не требуется.

Короткие URL для изображений

Если даже после переименования URL изображений остаётся слишком длинным, вы можете заменить путь
/uploads/cache/
на виртуальный каталог, например /resimler/.

⚠️ Важно: указанный виртуальный путь не должен совпадать с реально используемыми каталогами системы или названиями категорий.

Автоматическое добавление width и height

После изменения размера изображения модуль может автоматически добавлять атрибуты width и height в HTML-код. Это положительно сказывается на SEO и стабильности верстки, так как браузер заранее знает размеры изображения.

Пример использования

TPL-код:

HTML без модуля
Размер изображения: стандартный medium из админ-панели

HTML с модулем
Размер: 140×100 px, качество: 90%

HTML с модулем (без автоматического именования):

Загрузка изображений по внешней ссылке

Вы можете автоматически скачивать изображения со сторонних сайтов, используя параметр d:1:

Результат:

Размер изображения был уменьшен с 94 KB до 12 KB, что существенно снижает общий вес страницы.

Гибкость использования

Модуль можно использовать в любом .tpl файле. Он совместим с:

• image-тегами;

• дополнительными полями;

• стандартными шаблонами DLE.

При необходимости модуль можно включать и отключать в любой момент.

Оптимизация скорости загрузки

Если вас не устраивает скорость загрузки сайта и вы используете изображения разных размеров, Image Resizer позволит наглядно увидеть разницу в Google PageSpeed.

Для ещё большей оптимизации можно:

• скачать изображения из /uploads/cache/;

• дополнительно сжать их с помощью утилит (например, optipng);

• загрузить обратно на сервер.

Форматы записи параметров

Обрезка (Crop)

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

Описание параметров

• w — ширина

• h — высота

• q — качество (0–100)

• f — добавление width и height в HTML

• d — загрузка внешнего изображения на сервер

• e — ориентация масштабирования:

  • 1 или w — по ширине

  • 2 или h — по высоте

  • 0 или пусто — по длинной стороне

Дополнительные возможности

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

Это форк модуля, исправлен код для работы на актуальных версиях DLE 19.0 (Оригинал находится тут: https://github.com/dlenettr/image-resizer).

Если копируете данный файл к себе на сайт, указываейте ссылку на наш сайт как авторов доработки!