Оптимізація зображень Drupal при створенні матеріалів

1. 1. Включаємо модулі.
2. 2. Створюємо стиль виведення зображення, форматує в JPG
3. 3. Редагуємо настройки поля Зображення в потрібному типі матеріалу або у всіх типах
4. Оптимізація вже існуючих фотографій
5. Phatch Image Inspector - масове стиснення зображень

Зберігання картинок на хостингу іноді вимагає оптимізації, якщо картинок багато, а дисковий простір не дешеве. Базова функція оптимізації картинок в поле типу Зображення в Друпал реалізована опцією "Максимальна роздільна здатність зображення" в налаштуваннях поля типу Зображення. Встановивши, припустимо, максимум 1200 на 1500 пікселів, ви змусите друпал стискати великі картинки до цієї величини.

Але що робити, якщо ви хочете конвертувати PNG (які важать в 3-4 рази більше, ніж JPG) в формат JPG? Як більш тонко налаштувати функції стиснення картинок?

Тоді, щоб не змушувати користувачів стискати і конвертувати картинки перед завантаженням на сайт, можна використовувати наступний урок.

Тема уроку: оптимізація картинок, що завантажуються в поле типу Зображення, і форматування в JPG.

Питання: Як зберігати оптимізовані картинки при завантаженні в поле на сторінці додавання матеріалу? Як застосувати стиль і зберегти оригінальну картинку в цьому стилі? Як змінити розширення картинки з PNG і GIF в JPG? Конвертація PNG в JPG? Як все картинки конвертувати (форматувати) в JPG? Як зменшити папку картинок? Як оптимізувати розмір файлів картинок на сайті? Як відразу стискати файл при додаванні матеріалу? Як зменшити розмір сайту і обсяг файлів?

Питання було вирішене на сайті Дру.іо http://dru.io/question/2038 (І інші по посиланнях в питаннях), тут представлений наочний урок з картинками.

Для роботи з картинками в даному уроці ми використовуємо три модуля:
ImageCache Actions - пакет модулів, який додає нові засоби форматування для Видів показу зображень (але працює тільки для відображення картинок, не зберігає в поле нову картинку)
Original image with style - корисний модуль, який застосовує стиль до завантажуваних файлів картинок і зберігає оптимізоване або просто форматований зображення
File (Field) Paths - який просто змінює розширення файлу, в нашому уроці ми все картинки форматіруем в формат JPG і зберігаємо з таким розширенням .jpg

Відзначимо, що всі перетворення з картинками друпал робить з встановленим якістю, яке задається на сторінці Конфігурація - Засіб обробки зображень admin / config / media / image-toolkit. Рекомендується встановлювати якість від 87 - гарне стиснення, але втрата якості - до 97 - практично без стиснення обсягу файлу, але зі збереженням якості. Далі розглянемо як ужимать PNG і конвертувати в JPG (це зменшує розмір файлу в 3-4 рази).

1. Включаємо модулі.

Скачайте модулі, запропоновані в графі Модулі і включіть такі:
Imagecache Actions - основний модуль з пакета,
Imagecache Canvas Actions - дозволяє створити полотно під прозорими картинками PNG або GIF, задавати білий фон або фон вашого сайту,
Imagecache Color Actions - цей модуль додає функцію зміни формату файлу (в потрібний нам jpg),
Original image with style,
File (Field) Paths.

Увімкніть модулі з пакета ImageCache Actions і інші.

2. Створюємо стиль виведення зображення, форматує в JPG

Відкрийте Конфігурація - Види показу зображень, створіть новий стиль toJPG, виберіть дію Change file format, в настройках дії вкажіть формат JPG, бажаний рівень стиснення (рекомендується від 87 - маленький розмір файлу і неякісне зображення - до 95 - якісна картинка, але файл більшого обсягу ). І збережіть цю дію. Якщо у вас немає в списку вибору дії Change Format (або Змінити формат, Форматувати), включіть модуль Imagecache Color.

Виберіть дію Change format (або змінити формат, якщо переведено)

Після додавання дії конвертації в JPG, потрібно визначити біле полотно під картинкою, інакше прозорі файли Png, gif матимуть типове тло - чорний або # 000000.
Отже, виберіть дію "Визначити полотно" або Canvas (якщо не переведено, як-то так), і в настройках вкажіть HEX-колір ffffff - Тобто білий.

Додавання дії Визначити полотно

Налаштування, білий фон ffffff - якщо на сайті білий фон.

Після цього в Віде показу зображень toJPG буде така послідовність дій:
1. Convert to JPG ...
2. Визначити полотно ...

3. Редагуємо настройки поля Зображення в потрібному типі матеріалу або у всіх типах

Відкрийте Структура - Типи вмісту, напроти потрібного типу матеріалу - управляти полями. Редагуйте поле типу Зображення, встановіть наступні опції:
1. відзначте галку Enable File (Field) Paths?
2. Розкрийте блок "Фото (ПОЛЕ) НАСТРОЙКА ШЛЯХИ" і в ньому виправте шаблон імені файлу зі стандартного [file: ffp-name-only-original]. [File: ffp-extension-original] на потрібний нам [file: ffp- name-only-original] .jpg - це буде зберігати всі файли з розширенням jpg - але тільки для нових створюваних матеріалів. Для старих матеріалів це залишиться як було, якщо не редагувати їх після цього налаштування.
3. в графі "Apply style to image after upload" виберіть створений стиль toJPG - це буде конвертувати завантаження в jpg або як ви налаштували в вашому виді показу зображень.

Змінюємо розширення завантаження

Застосовуємо стиль зображення для завантаженого файлу картинки

Також в настройках поля File (Field) Paths в поле Зображення є галки для поновлення вже завантажених картинок, але чи буде для них застосований потрібний стиль зображення, ми не пробували. Тому як оновити вже завантажені файли, застосувавши до них стилі, конвертацію, змінивши розширення, питайте в питаннях і відповідях, на форумах.

Не забудьте для інших типів матеріалів теж зробити ці настройки полів типу Зображення.
Це зменшить розмір вашого сайту, дозволить додавати будь-які картинки будь-якого розміру і розширення, оптимізуючи їх відразу при завантаженні і збереженні матеріалу.

Якщо вам здасться недостатнім конвертувати PNG в JPG, то на додаток можна обмежити розміри зображення, для цього використовуйте поле "Максимальний розмір зображення" в налаштуваннях поля типу Зображення, або додавши відповідну функцію Масштабування в стиль toJPG.
Як дозволити користувачеві вибирати стиль зберігається оригінальної картинки при збереженні і встановити стиль за замовчуванням, а також як дозволити користувачеві скасувати форматування його картинки, дати можливість зберегти картинку "як вона є", в цьому уроці не розглядається (хоча ми здогадуємося про важливість цієї опції для деяких проектів).

PS: До речі, модуль File (Field) Paths видає помилку, яка вирішується в статті: http://www.drupal.ru/node/112630
"Deprecated function: preg_replace (): The / e modifier is deprecated, use preg_replace_callback instead in _filefield_paths_replace_path () (Line 328 in ..."

Оптимізація вже існуючих фотографій

Модуль FileFiled Paths має опції в налаштуваннях поля типу Зображення: Відкат оновлень, Активне оновлення. Можливо, встановивши ці чекбокси, можна перемістити або просто замінити раніше створені файли і застосувати до них роботу модуля Original Image Style. Але якщо не цей, тоді є інший спосіб.

Phatch Image Inspector - масове стиснення зображень

Використовуйте Лінукс-утиліту Phatch Image Inspector, установка і приклад використання описані тут: / Node / 145 .
Там запропонований варіант стиснення картинок масштабуванням. Також Phatch дозволяє стискати за заданим розміром файлу, тобто, наприклад все картинки більше 150Кб будуть зменшені до цього встановленого обсягу. Опція стиснення за розміром доступна в функції (дії) збереження в поле Максимальний розмір файлу (ця опція з'являється тільки при виборі формату файлу JPG, JPEG).