Як подавати масштабовані зображення в WordPress
Очевидно, що фотографії є невід’ємною частиною нашого життя. Отже, ми навряд чи можемо уявити веб-сайт без картинок. Картинки привертають увагу відвідувачів і допомагають організувати вміст сайту. Зображення роблять сторінку цікавою, насиченою інформацією та покращують взаємодію з користувачем.
Великі зображення негативно впливають на продуктивність веб -сайту, тому зображення слід масштабувати відповідно до активної теми. Вони є важливими елементами на веб-сайті, і вони заслуговують на те, щоб їх показували найкращим чином. Дуже важливо розміщувати масштабовані зображення на сайті WordPress.
Розміри масштабованих зображень підлаштовуються до потрібного розміру відповідно до визначених у HTML і CSS. Проте не багато веб-майстрів звертають увагу на цю важливу деталь дизайну. Візьмемо для прикладу зображення розміром 500 x 500 пікселів для мініатюри розміром 50 x 50. Веб-браузер має завантажити зображення та зменшити його, щоб його можна було відобразити відвідувачу. Очевидно, що це неефективно та сповільнить веб-сайт.
Різниця в роздільній здатності не помітна, і тому вага великих зображень часто залишається непоміченою. Більшість людей навіть не усвідомлюють, що така надмірна роздільна здатність створює проблеми, і проблема залишається невирішеною. Вони залишають проблему для браузера.
Основна причина показу масштабованих зображень полягає в тому, що повні зображення високої роздільної здатності сповільнюють веб-сайт і збільшують час завантаження. Повільна сторінка призводить до поганої взаємодії з користувачем, і замість того, щоб залишатися та повертатися, вони залишатимуть і триматимуться подалі. Статистика Kissmetrics показує, що сторінки, які завантажуються більше трьох секунд, матимуть вищий показник відмов.
З оптимізованими розмірами зображень на веб-сайті час завантаження буде коротшим. Люди, швидше за все, залишатимуться на веб-сайті довше та повертатимуться пізніше. Це покращує SEO, і рейтинг веб-сайту підвищиться.
Великі зображення викликають різні проблеми
- Це збільшує навантаження на роботу браузера. Браузеру доведеться виконувати додаткові запити до сервера. Він не може швидко показати зображення, натомість потребує часу та ресурсів, щоб змінити розмір зображення. Веб-сайти з важкими зображеннями завантажуються довше.
- Якщо великі зображення з високою роздільною здатністю відображаються маленькими на веб-сайті, вони витрачають час і завантажують дані. Так буває, наприклад, коли селфі з мобільного телефону використовують необробленим для крихітного Gravatar.
Як масштабувати зображення на веб-сайтах WordPress
Вручну
Щоб почати з самого початку, проаналізуйте зображення на веб-сайті за допомогою такого інструменту, як GTMetrix. GTMetrix — це інструмент аналізу продуктивності, розроблений GT.net. Ця компанія славиться моніторингом та оптимізацією швидкості, а також Pingdom. Після аналізу веб-сайту GTMetrics створює звіт. Це показує, які проблеми були виявлені та які покращення він рекомендує.
Переглядаючи звіт, зверніть особливу увагу на вкладку «Структура». На цій вкладці клацніть «Зображення правильного розміру». Буде показано список зображень неправильного розміру.
WordPress автоматично не зменшує зображення, коли це можливо, але додає їх на сайт без обробки. Для вирішення цієї проблеми є два варіанти.
Навіть якщо використання плагінів не є бажаним способом, існують інші варіанти. Перший спосіб масштабування зображень — це вручну налаштувати розмір кожного за допомогою фоторедактора, наприклад Photoshop. Може здатися, що цей спосіб неефективний, але насправді це не так.
У Photoshop є більше можливостей, окрім налаштування висоти та ширини зображення. Ще одна річ, яку слід перевірити, це роздільна здатність зображення. У більшості випадків для веб-додатків 72 PPI достатньо для хорошого перегляду.
Другий — використовувати плагін для масштабування зображень. Цей варіант простий і швидкий. WordPress має власну функцію для цього, srcset. Цей інструмент може перетворювати графіку, наприклад зображення, на адаптивні файли. Чуйні зображення автоматично підлаштовуються під різні пристрої та розміри екрана. Нижче наведено деякі інші плагіни, які чудово справляються зі зменшенням розмірів зображень.
Optimole
Чудовим інструментом для обслуговування масштабованих зображень є Optimole. Це плагін WordPress, який може змінювати розмір зображень для різних пристроїв. Він автоматично змінює розмір до оптимального розміру для зображення залежно від різних типів пристроїв. Результатом є високоякісні масштабовані зображення.
Ось деякі з особливостей, які роблять Optimole цікавим вибором:
- Оброблені зображення менші, але зберігають свою якість.
- Він повністю автоматизований. Це лише питання завантаження зображень.
- Optimole підтримує всі формати зображень.
- Він підтримує різні типи зображень, включаючи Retina та WebP
- Він підтримує хмарні бібліотеки зображень.
- Optimole надає глобальні образи CDN безкоштовно.
- Немає необхідності гадати або прикидати бажаний розмір. Optimole використовує специфікації пристрою відвідувача.
- Існує повна підтримка конструкторів веб-сайтів, таких як Elementor.
Функція автоматизованої обробки зображень є великим плюсом цього плагіна. Немає необхідності переглядати довгий список налаштувань; Optimole робить все самостійно.
У розділі Медіа > Optimole плагін показує статус служб, а також використання та досягнуту оптимізацію.
Розділ Параметри знаходиться на вкладці Параметри. Тут є дві особливості, які заслуговують на особливу згадку:
- Увімкнути заміну зображення. Переконайтеся, що цей параметр увімкнено, щоб користуватися розширеною функцією оптимізації зображення.
- Масштабування зображень і відкладене завантаження. Це параметр, який дозволяє масштабувати зображення залежно від розміру екрана відвідувача. Відкладене завантаження відображає ці зображення.
Оптимізація зображення Smush
Smush Image Optimization, Compression і Lazy Load — це повна назва в цьому списку плагінів. Зменшуючи зображення, переконайтеся, що якість зображення збережено.
Щоб використовувати WP Smush, його необхідно спочатку встановити та активувати. Після цього на інформаційній панелі WordPress з’явиться значок Smush. На інформаційній панелі відображаються статистичні дані, накопичені Smush, і поточний статус різних функцій.
Поруч із Загальними даними про заощадження з’явиться піктограма, яка повідомляє про всі зображення в медіа-бібліотеці, які потребують обробки. Якщо є зображення, які потребують обробки, найпростіше перейти до модуля Bulk Smush. Це зменшить розмір усіх позначених зображень.
Щоб окремо обробити зображення, перейдіть до Медіатеки та натисніть Повторно перевірити зображення. Це забезпечує оновлення зображень, які потрібно обробити, у режимі реального часу.
Smush має функції, які дозволяють фільтрувати зображення за статусом Smush і вибіркове масштабування зображень.
Плагін Smush не обробляє відео та GIF-файли. Файли зображень, які не масштабуються, вказують на те, що потужність Smush використовується не повністю.
Оптимізатор зображень EWWW
Оптимізатор зображень EWWW також є плагіном WordPress, який оптимізує розміри та формати зображень. Він працює з новими завантаженнями та наявними зображеннями. Він містить опцію, яка сканує всі зображення на веб-сайті та оптимізує їх.
Щоб почати використовувати його, завантажте та встановіть його та активуйте в адміністративній області сайту WordPress. Перебуваючи в середовищі інформаційної панелі, натисніть «Параметри», а потім «Оптимізатор зображень EWWW ». У розділі «Основні налаштування» розташовані різні параметри, як -от видалення метаданих із зображень. Рівень оптимізації для GIF, JPG і PNG повинен бути встановлений на Pixel Perfect. Тільки платна версія також дозволяє оптимізувати файли PDF.
Вкладка «Змінити розмір» містить параметр виявлення зміни розміру. У розділі «Змінити розмір зображень» установіть максимально допустиму висоту та ширину зображень на веб-сайті. Також увімкніть параметри «Змінити розмір інших зображень» і «Змінити розмір існуючих зображень ». Не забудьте зберегти зміни.
ShortPixel
Останньою рекомендацією для показу масштабованих зображень є плагін ShortPixel. Це правильний варіант для тих, кому потрібно обслуговувати масштабовані зображення, але обмежений бюджет. Безкоштовна версія пропонує 100 масштабувань зображення на місяць.
ShortPixel простий і простий у використанні. Він автоматично обробляє зображення до розмірів, які користувач вказує під час завантаження на веб-сайт. Крім автоматичної опції, є також можливість обробки зображень вручну.
Плагін зменшує розмір зображення без втрат або зі втратою роздільної здатності. Він здатний обробляти зображення GIF, JPEG і PNG і навіть може оптимізувати файли PDF.
Кінець думкам про те, як подавати масштабовані зображення
Очевидно, що існує багато способів розміщувати масштабовані зображення на сайті WordPress, і це не обов’язково має бути складним або дорогим. Проблема полягає в тому, що веб-сайт був онлайн протягом тривалого часу, і є багато зображень для обробки.
Масштабування зображень є важливою навичкою для кожного, хто створює або підтримує веб-сайт. Це допомагає зробити повільні веб-сайти швидшими та забезпечує інші переваги продуктивності. Правильна специфікація зображення покращить швидкість будь-якого веб-сайту.
Якщо вам сподобалося читати цю статтю про те, як показувати масштабовані зображення в WordPress, ви повинні переглянути цю про те, як зробити номер телефону інтерактивним у WordPress.
Ми також писали про кілька пов’язаних тем, як-от як вставити відео з Facebook у WordPress, як видалити теми WordPress, як сканувати базу даних WordPress на наявність шкідливих програм, як завантажити файл HTML у WordPress, як виконати очищення бази даних WordPress, як знайти та замінити URL-адресу в базі даних WordPress і як приховати автора в WordPress