Основні плагіни WordPress для роботи з анімованими GIF-файлами
Колись GIF-файли змінилися на краще. З цією зміною вони залишаються тут, особливо для користувачів і розробників WordPress. Створені спеціально для Інтернету, GIF-файли зазвичай невеликі за розміром, що робить їх ідеальними для додавання руху до допису. Фактично, анімовані GIF-файли можуть оживити статичні статті чи теми.
Однак анімовані GIF-файли мають неабияку частку проблем і розчарувань. Оскільки анімовані GIF-файли складаються з багатьох кадрів, вони можуть швидко перетворитися з маленьких ненав’язливих файлів на одну з найбільш громіздких графічних зображень на вашому сервері. GIF-файли відомі тим, що сповільнюють час завантаження на сторінках, де вони використовуються, що робить їх перешкодою для повторного трафіку та проблемним місцем для веб-майстрів, які розуміють важливість швидкості в епоху нетерпіння.
Потім є всі специфічні проблеми WordPress. WordPress не створювався з анімованими GIF-файлами, і їх відродження завдало розробникам головного болю. Хоча WordPress зазвичай автоматично змінює розміри зображень, цей процес порушує анімацію, показуючи лише перший кадр. Крім того, анімовані GIF-файли може бути важко використовувати як пропоновані зображення на WordPress. Вони можуть перешкоджати RSS-каналам, електронним кампаніям, показу перших сторінок і ескізів.
У більшості випадків переваги все ж переважують негативи. Однак, щоб GIF-файли стали успішною частиною вашої публікації на WordPress, можливо, вам доведеться випробувати деякі нові техніки. Ознайомтеся з деякими плагінами та методами роботи з анімованими GIF-файлами.
Базове: зробіть свій сайт WordPress швидшим
Однією з основних проблем використання анімованих GIF-файлів у WordPress є час завантаження. Якомога швидше завантаження має важливе значення для того, щоб ваші відвідувачі були задоволені, а ваш веб-сайт був максимально ефективним.
За даними KISSmetrics, час завантаження є основним фактором, що сприяє залишенню сторінки. З часом завантаження всього 4 секунди рівень залишення сторінки підскочить до 25% і наближається до 50%, коли цей час наближається до 10 секунд. Крім того, затримка відповіді сторінки на 1 секунду може призвести до зниження конверсій на 7%.
Це означає, що якщо сайт приносить 100 000 доларів США на день – сайт електронної комерції чи інший онлайн-продавець – то затримка сторінки на 1 секунду може становити 2,5 мільйона доларів США втрачених продажів кожного року. Це також безпосередньо впливає на задоволеність клієнтів. Затримка в 1 секунду знижує задоволеність клієнтів на 16%. Ваші клієнти хочуть, щоб ваш сайт працював без затримок.
Оскільки GIF-файли можна використовувати для підвищення задоволеності користувачів, це стає ще більш проблематичним. Можливо, ви використовуєте анімований GIF, щоб проілюструвати, як працює продукт, як у випадку з цією пасткою для тварин нижче. GIF – це просто найшвидший і найпростіший спосіб пояснити механізм налаштування та звільнення пастки.
Навіть поза межами сайтів електронної комерції GIF-файли можна використовувати, щоб проілюструвати конкретні моменти, додати гумору до сухої теми або підвищити відчуття взаємодії з користувачем. Вони можуть бути чудовим способом зв’язати незнайому концепцію зі знайомою, використовуючи поп-культуру як зв’язок. Наприклад, WebpageFX веде блоги для аудиторії власників бізнесу, які можуть або не можуть бути знайомі з такими термінами, як «мета-ключові слова» та «надмір ключових слів». Ці методи застаріли та абсолютно неефективні – але замість того, щоб сказати це, вони показали, наскільки (не)ефективним це буде з анімованим GIF.
Очевидно, GIF-файли чудово підходять для покращення розуміння або просто викликають усмішку на обличчі читача, але це створює пряму дилему. Незважаючи на властиві їм позитивні сторони, ці файли можуть бути досить великими, а повільне завантаження може з часом призвести до втрати прибутку та зниження рівня трафіку. Якщо GIF-файли важливі для вас і для вашого блогу, усунення проблем, які призводять до затримок і повільного часу завантаження, має вирішальне значення. Наведені нижче плагіни можуть допомогти зменшити розміри файлів і покращити завантаження без шкоди для вашої анімації чи її якості.
WP Smush.it
Широко використовуваний і доступний для розробників будь-якого рівня кваліфікації, WP Smush.it містить функції, необхідні для оптимізації зображень таким чином, щоб зменшити час завантаження та залишити задоволеними кінцевих користувачів. Плагін призначений для:
- Оптимізуйте стиснення JPEG
- Перетворіть деякі статичні GIF-файли на індексовані PNG
- Видалення невикористаних кольорів з індексованих зображень
- Видаліть із зображень непотрібні метадані
- Зробіть анімовані GIF-файли ефективнішими, видаливши пікселі, які залишаються однаковими між кадрами
На відміну від деяких інших плагінів для стиснення зображень, які розбивають анімовані GIF-файли так само, як це робить сам WordPress, WP Smush.it спеціально включає методи оптимізації для анімованих GIF-файлів.
Зображення, додані на сторінки серверними користувачами та адміністраторами, автоматично запускаються через плагін після завантаження. Це означає, що вам зовсім не потрібно змінювати свій процес, щоб покращити роботу користувача. Це не може бути набагато краще, ніж це! Користувачі, які стурбовані тим, як існуючі зображення впливають на час завантаження, також можуть використовувати плагін для сканування наявного вмісту. WP Smush.it простий у встановленні та простий у використанні.
Будь-який плагін із відкладеним завантаженням
Іншим варіантом оптимізації часу завантаження під час включення GIF-файлів є використання плагіна відкладеного завантаження. Ці плагіни розроблено з урахуванням користувачів. Замість того, щоб чекати, поки завантажиться вся сторінка, що сповільнює час і призводить до розчарування, плагіни відкладеного завантаження завантажують лише вміст, який зараз видно на екрані відвідувача. Відкладене завантаження пришвидшує роботу сайтів із великою кількістю зображень і може бути ефективним способом задовольнити відвідувачів.
Існує багато безкоштовних опцій, які спрощують відкладене завантаження. Вони включають, але не обмежуються:
- Lazy Load – Lazy Load використовує jQUery.sonar для завантаження лише видимих зображень. Він був написаний VIP-командою WordPress і отримує незмінно високі рейтинги від користувачів.
- Image Lazy Load – Розроблений як полегшена версія оригінального Lazy Load, Image Lazy Load (Unveil.js) забезпечує підтримку зображень високої роздільної здатності на пристроях із дисплеями Retina.
- BJ Lazy Load – BJ Lazy Load замінює вбудовані зображення дописів заповнювачами та завантажує вміст перед тим, як він стає видимим для кінцевих користувачів під час прокручування.
- Rocket Lazy Load – Rocket Lazy Load розроблено як невеликий (менше 2 Кб) скрипт, який відображає всі зображення сторінки – віджети, вставки, мініатюри, аватари тощо під час прокручування. Він найбільш відомий своїми невеликими розмірами.
Середній рівень: установіть кілька зручних плагінів анімації
Коли ви освоїте час і швидкість завантаження, настав час перейти до чогось більш просунутого, але все ще доступного для більшості звичайних користувачів WordPress. Ці плагіни для анімації роблять існуючі GIF-файли більш зручними для користувача та ще більш помітно привабливими. Перелічені нижче зручні плагіни анімації покращують здатність WordPress відображати GIF-файли.
Зміна розміру анімованого GIF
Animated GIF Resize виправляє функцію автоматичної зміни розміру WordPress, щоб ви могли змінювати розмір анімованих GIF, не порушуючи анімацію. Це усуває проблему, яка часто виникає, коли WordPress відображає перший кадр анімованого GIF без будь-чого іншого.
Гіфіпрес
Кожен, хто часто працював з анімованими GIF-файлами, напевно, знайомий з Giphy, архівом анімованих GIF-файлів, який дозволяє користувачам шукати за тегами та знаходити GIF-файли, що стосуються будь-якої теми. Giphypress дозволяє легко вставляти файли Giphy на ваш сайт – просто скористайтеся кнопкою, доданою плагіном, щоб знайти ідеальне зображення та натисніть «Вставити в публікацію».
Попередній перегляд анімації GIF
GIF Animation Preview шукає та знаходить усі місця, де ви використовували анімований GIF на своєму сайті WordPress, і замінює їх зображеннями попереднього перегляду. Незалежно від того, звідки походить GIF (працюють як локальні, так і зовнішні джерела зображень), плагін використовує перший кадр анімації для створення попереднього перегляду. Потім відвідувачам сайту надається можливість натиснути «Відтворити», щоб переглянути решту анімації, або перейти далі, не переглядаючи анімацію.
Це чудовий спосіб зменшити час завантаження сторінок на вашому сайті, особливо якщо ви вирішили не використовувати плагін відкладеного завантаження – замість того, щоб завантажувати кожен кадр кожного анімованого GIF на сторінці, відвідувачам потрібно лише завантажувати перший кадр. Такі функції використовуються великими веб-сайтами, як-от BuzzFeed, особливо для мобільних відвідувачів, у яких є більше причин вибірково вибирати дані для завантаження.
Розширений: робіть крутіші речі за допомогою анімованих GIF-файлів
Ці плагіни та методи трохи складніше налаштувати, але вони досить потужні. Продовжуйте читати, щоб дізнатися, як встановити GIF як головне зображення (те, що ми все частіше бачимо на таких сайтах, як BuzzFeed, Mashable і TechCrunch), і як перетворити серію окремих файлів зображень на анімаційну послідовність прямо на вашому сайті.
Встановлення анімованого GIF як пропонованого зображення
Здебільшого веб-дизайнери та розробники були обмежені – особливо у WordPress – коли намагалися встановити анімований GIF як пропоноване зображення. Оскільки WordPress автоматично створює мініатюру зображення з запропонованого вами зображення, порушуючи анімовані GIF-файли, це може бути дуже важко виконати. Однак це не означає, що це неможливо.
Один із способів уникнути затримки — вставити URL-адресу зображення у вікно рекомендованого зображення замість того, щоб завантажувати та завантажувати графіку з вашого комп’ютера чи десь у мережі. Це хіт чи промах.
Інший варіант – можливо, менш ніж ідеальний, але все ж придатний для тих, хто добре розбирається в розробці WordPress – це змінити формат представленого зображення з «пропонованого» на «повний» у файлі індексу теми. Це дозволяє представленому зображенню створювати оригінальні, неспотворені анімовані gif-файли. Це вимагає готовності до невеликого кодування, а також має недолік: це стосується всіх ваших представлених зображень, тож вам потрібно буде почати вручну налаштовувати їх відповідно до ширини та висоти.
Це не повинно бути складним. Насправді існують також плагіни для полегшення процесу. Autoset Featured Image і Automatic Featured Image Posts — це два плагіни (виберіть один), які автоматично встановлюють перше зображення — незалежно від його формату — як рекомендоване зображення. Це означає, що якщо ваше перше зображення, яке відображається в публікації, є анімованим GIF-файлом, воно стане основним зображенням. Однак цей обхідний шлях має інші недоліки, а саме те, що вам завжди потрібно бути розбірливим щодо зображення, яке ви розміщуєте найвище у своїх публікаціях!
Автоматичні анімовані зображення
Плагін Auto Animate Image дозволяє користувачам вставляти анімації, створені з серії окремих файлів, замість стандартного анімованого GIF-файлу. Його можна використовувати, щоб обійти максимум 256 кольорів анімованих GIF-файлів, створюючи більш природне, плавне відчуття. З іншого боку, легко створити щось, що надзвичайно сповільнить ваш сайт, тому використання цього плагіна потребує певних тонкощів.
Плагін не лише безперервно, як анімація, відображає кілька зображень (інакше нерухомі зображення), він також підтримує довільні назви файлів без стандарту. Це означає, що GIF, PNG, JPEG, JPEG XR – та інші варіанти HD-фотографій – BMP, TIFF, WebP і SVG можна використовувати як взаємозамінні для створення чогось нового та повністю оригінального. Анімації, створені за допомогою Auto Animate Image, можна налаштувати на затримку, повтор, перемотування назад, паузу та навіть порожні, що дає більше можливостей, ніж стандартний GIF. Це усуває необхідність написання JavaScript, але при бажанні ним можна керувати. Плагін підтримує більшість браузерів, тож вам не потрібно турбуватися про різний досвід кінцевого користувача.
Це все, щоб зробити ваших відвідувачів щасливими
GIF-файли повертаються. Багато хто заперечить, що вони повернулися з мертвих. Однак замість старих, липких анімацій, якими вони були раніше, вони тепер є невід’ємними аспектами чистого, надійного та ефективного веб-дизайну. Однак під час роботи в WordPress вони можуть бути більш ніж проблемними.
Почніть спочатку – з базового рівня. Знайдіть час, щоб ознайомитися з плагінами, щоб збільшити швидкість завантаження, знайдіть те, що вам подобається, і перевірте, як час скорочується. Після цього попрацюйте над більш просунутими плагінами анімації. Тоді будьте креативними. Вийдіть із «стандартної» колії анімованих GIF-файлів, створивши власні анімації зі статичних зображень і переконавшись, що ваші анімовані GIF-файли можна встановити як пропоновані зображення.
Анімований GIF не повинен викликати розчарування, негатив або жахливі години перед екраном комп’ютера, намагаючись змусити ваші сторінки завантажуватися швидше або відображатися як слід. Вони призначені для задоволення, і плагіни та опції, описані вище, залишаються такими.