Оптимізація зображень на Drupal-сайтах для підвищення швидкодії — блог Drudesk
050 640 98 44
support@drudesk.com

Оптимізація зображень на Drupal-сайтах як рецепт підвищення швидкодії

На перший погляд, цікаві та якісні зображення — найкращі друзі сайту. Часто саме вони вирішують, чи подарує вічно зайнятий користувач вашому сайту хоча б другий погляд. Картинки приваблюють, картинки переконують, картинки допомагають передати ідею. Однак, є й інша сторона медалі — картинки можуть суттєво знизити швидкість завантаження сайту. Невже це означає, що ви повинні ними пожертвувати і залишитись без їхньої магнетичної сили? Зовсім ні! Вам потрібна лише хороша оптимізація зображень. Тоді обидві сторони медалі будуть щасливими для вас!

Послуги з оптимізації зображень для Drupal-сайтів

Визначаючи, чого ж не вистачає конкретним сайтам, аби вони «розправили крила» і набрали хорошу швидкість, ми часто знаходимо причини в неоптимізованих зображеннях. Ми натрапляємо на них під час аудиту швидкодії сайтів (поряд з питаннями кешування, зайвих модулів і т.д.). Крім того, ми можемо робити окремий аналіз зображень і визначати, що саме потрібно для їх оптимізації. 

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

Drupal є багато методів оптимізації картинок, які стосуються способів завантаження зображень і власне оптимізації їхніх розмірів. А для їх втілення є маса корисних і вже готових Drupal-модулів, хоча іноді краще підходять і кастомні рішення. Почнемо знайомитися з деякими методами? Поїхали!

Деякі методи оптимізації зображень на Drupal-сайтах

CSS-спрайти

Можна подавати багато зображень лише в одному HTTP-запиті, якщо організувати їх в CSS-спрайти. Менше запитів — краща швидкість сайту! Цікавий факт, що цю ідею розробники почерпнули з відеоігор. У створенні спрайтів на Drupal-сайтах можуть дуже допомогти модулі на кшталт CSS Sprite Generator і Spritesheets.

Base64

Продовжуючи тему зменшення кількості запитів до сервера, варто згадати і техніку переведення картинок в формат Base64 і вбудовування їх прямо в CSS. Порівняно з всього одним додатковим запитом для CSS-спрайтів, Base64 вимагає… нуль запитів! Однак, варто зазначити, що файли виходять трішки більшими, але на допомогу приходить стискання методом GZIP. 

«Ліниві» зображення

Цікава техніка, що дозволяє зберегти «енергію» сайту — це «ліниві» зображення, які підвантажуються лише тоді, коли з’являються в першому екрані користувача. Ми описали це на прикладі модуля Image Lazyloader. Крім того, є схожі модулі на кшталт Lazyload, Lazy Image Loader, Block Lazyloader, Node Lazyloader, Jail і т.д.

Респонсивні зображення

Важливо подбати про те, як картинки відображаються на маленьких екранах мобільних пристроїв з різним розширенням. Мобільні користувачі будуть вам дужн вдячні! Один із шляхів до цього в Drupal — використання модуля Picture для Drupal 7. Що стосується Drupal 8, відповідний функціонал уже включено в ядро.

Розмір зображень

Для Drupal-сайтів є багато способів оптимізувати розмір зображень. Серед них — комплект інструментів для ImageAPI під назвою ImageAPI Optimize, разом з цілою екосистемою корисних модулів навколо нього. Він дозволяє оптимізувати зображення без втрат якості, і цим підвищити швидкодію.

Наостанок

Не існує двох однакових сайтів, тому не існує єдиного рішення для оптимізації зображень. Але експерти служби підтримки сайтів Drudesk підберуть те, що підійде саме вам, аби зробити картинки найкращими друзями вашого сайту назавжди!