Зміна розміру зображення

Модуль 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).

Якщо копіюєте цей файл до себе на сайт, вказуйте посилання на наш сайт як авторів доопрацювання!