Як легко подавати масштабовані зображення в WordPress (крок за кроком)

Чи коли‑небудь ви відвідували сайт і покидали його за кілька секунд, бо зображення не завантажувалися достатньо швидко? Це саме те, що ваші відвідувачі можуть відчувати, якщо ви не подаєте масштабовані зображення на вашому сайті WordPress. 

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

Але don't хвилюйтеся, we've вас підтримуємо! Дотримуйтесь швидкого підручника нижче, щоб дізнатися, як легко подавати масштабовані зображення!

Чому ви повинні подавати масштабовані зображення?

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

Наприклад, ваше оригінальне зображення може мати розмір 4000 × 3000 пікселів, але ваш веб‑сайт відображає його лише у розмірі 800 × 600 пікселів. Якщо використати оригінальне зображення замість зменшеної версії, ваш сайт завантажуватиметься повільніше.

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

Важливо використовувати масштабовані зображення, оскільки їхнє відсутнє використання може призвести до кількох проблем:

• Непотрібний час завантаження, оскільки користувачі змушені завантажувати більші файли, ніж потрібно.
• Піксельовані або розмиті зображення, якщо зображення занадто маленьке і його розтягнути.
• Збільшений час обробки, оскільки браузеру доводиться змінювати розмір зображень у режимі реального часу, що спричиняє затримки у відображенні вмісту.

Покроковий посібник

1. Використовуйте інструменти редагування зображень

Цей метод забезпечує швидше зміна розмірів зображень за допомогою інструментів редагування. Ви можете використовувати інструменти, такі як Adobe Photoshop, щоб створювати правильно масштабовані зображення. Photoshop дозволяє широке налаштування, тому ви можете визначати піксельні розміри відповідно до вимог щодо розміру.

Якщо ви шукаєте безкоштовну альтернативу, онлайн‑інструменти, такі як PhotoPea, є хорошим варіантом. Але для цього посібника ми зосередимося на Photoshop через його всебічні можливості.

Щоб змінити розмір зображення перед завантаженням, дотримуйтесь інструкції нижче:

• Відкрийте ваше зображення у Photoshop.
• Натисніть Зображення вкладку та виберіть Розмір зображення.

• У діалоговому вікні, що з’являється, змініть розмір зображення відповідно до вимог відображення веб-сторінки'. 

Наприклад, якщо ваше оригінальне зображення має розмір 1281 x 493 пікс. і ви хочете масштабувати його до 3600 x 2400 пікс., введіть нові розміри. 

• Змініть Роздільність до 72 PPI для веб-використання, або 300 PPI, якщо потрібна висока якість друку.
• Потім виберіть метод ресемплінгу. Два найпридатніші варіанти для оптимізації веб‑сайту:

• Натисніть OK щоб застосувати зміни. Ваше зображення тепер змінено розмір.
• Щоб зберегти зображення, відкрийте File вкладку і виберіть Export.

• Клацніть Експортувати як і виберіть будь-який формат файлу та налаштуйте параметри, щоб досягти найменшого можливого розміру файлу без значної втрати якості зображення.

2. Використовуйте вбудовані розміри зображень WordPress'

Якщо ви не хочете встановлювати стороннє програмне забезпечення, ви можете скористатися вбудованим редактором зображень у WordPress. За допомогою цього інструменту ви можете виконувати базові завдання редагування зображень, такі як кадрування, перевертання та зміна розміру.

Ви можете отримати доступ до цієї функції, натиснувши будь‑яке зображення у вашому записі або медіатеці. Крім того, ви можете визначити власні розміри зображень, змінивши файл functions.php у вашій темі.

Щоб спростити, давайте розпочнемо з базового посібника нижче:

• Завантажте ваше зображення у запис WordPress. 

• Виберіть зображення, потім натисніть Замінити і виберіть Відкрити медіатеку з меню.

• У бічній панелі натисніть Редагувати зображення.

• Вас перенаправлять до редактора зображень. Натисніть Масштаб щоб змінити розмір зображення

• Введіть новий розмір для вашого зображення. Наприклад, змініть його з 1198 × 744 пікс до 805 x 500 пікс. Співвідношення сторін обмежене, тому інше значення буде автоматично коригуватись залежно від введеної ширини або висоти.

• Клацніть Масштаб кнопку, щоб застосувати зміни.
• Ваше зображення тепер масштабовано і готове до використання у вашому дописі.

3. Використовуйте плагіни

• Install and activate WP Meta SEO on your WordPress site.

• From your WordPress dashboard, go to WP Meta SEO > Image editor.

• Open the Image SEO & HTML Resize settings.

• Enable the Dynamic Image Resizing option to allow WP Meta SEO to automatically resize images based on their display size.

• Define the maximum width and height values to control how images are resized on the front end.

Після ввімкнення, WP Meta SEO автоматично коригуватиме розміри зображень, коли вони відображаються на вашому сайті, забезпечуючи оптимальні розміри без ручного втручання. Такий підхід підвищує швидкість завантаження сторінок, покращує SEO‑продуктивність і забезпечує кращий користувацький досвід—особливо для сайтів з великою кількістю зображень. 

Для отримання докладнішої інформації ви можете ознайомитися з офіційною документацією та оглядом функцій:

• WP Meta SEO функція Image SEO & HTML Resize
• Динамічний документація з масштабування зображень

4. Реалізуйте адаптивні зображення, використовуючи атрибут srcset

Цей атрибут srcset використовується в тегу в HTML для надання різних джерел зображень для різних роздільних здатностей екрана. Додаючи цей атрибут, браузер може вибрати найбільш підходяще зображення на основі пристрою користувача.

Наприклад, якщо користувач відкриває ваш веб‑сайт на мобільному пристрої з низькою роздільною здатністю екрана, браузер завантажить зображення з нижчою роздільною здатністю, щоб забезпечити плавнішу роботу.

Якщо ви хочете дізнатися, як вручну подавати масштабовані зображення, дотримуйтесь інструкцій нижче:

• Відкрийте HTML‑файл веб‑сайту через ваш редактор коду.
• Знайдіть тег для зображення, яке ви хочете оптимізувати.

• Відредагуйте тег і додайте атрибут srcset, як показано на зображенні. 

У цьому прикладі 100w і 400w вказують фактичну ширину кожного зображення. Браузер використає цю інформацію, щоб вирішити, яке зображення завантажити для пристрою користувача.

• Збережіть зміни та перезавантажте ваш веб‑сайт, щоб побачити результат.

Як визначити немасштабовані зображення

Після вивчення способів оптимізації зображень, важливо також визначити, які зображення ще потрібно масштабувати, а які вже оптимізовані.

Існує два поширені способи перевірити наявність незмінених зображень: за допомогою інструментів або проведенням регулярного аудиту сайту. Дотримуйтесь інструкції нижче:

1. Використання Google PageSpeed Insights

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

Щоб швидко перевірити, ви можете скористатися інструкцією нижче:

• Відкрийте Google PageSpeed Insight за https://pagespeed.web.dev.

• Вставте повний URL вашої веб‑сторінки у поле вводу.
• Натисніть Analyze щоб розпочати процес.
• Зачекайте, доки процес завершиться. Потім PSI надасть вам звіт про продуктивність.
• Прокрутіть вниз, щоб знайти запис з міткою Правильно розмірені зображення.
• Якщо є, ви побачите список нестиснених зображень, знайдених на вашому сайті.

Якщо одне з ваших зображень позначено як нестиснене, Google PageSpeed Insights може запропонувати кілька рекомендацій, зокрема:

• Обслуговування зображень у форматах наступного покоління, наприклад WebP, AVIF, JPEG XR або JPEG2000.
• Правильне масштабування зображень для задоволення різних вимог до розмірів, наприклад, масштабування до 1000 x 1000 пікселей для сторінки детального опису товару або 400 x 400 пікселей для сторінки списку товарів.
• Використовуючи lazy loading, лише зображення, видимі на екрані користувача, завантажуються одразу.

2. Проведення регулярного аудиту сайту

Проведення регулярних аудитів сайту надає вам глибоке розуміння стану та продуктивності вашого сайту.

Під час аудиту намагайтеся приділяти пріоритет перегляду архітектури вашого сайту та користувацького досвіду, щоб виявити можливі проблеми.

Цей процес також може виявити можливості оптимізації зображень. Обов’язково протестуйте ваш сайт на різних пристроях, таких як мобільний, планшет і настільний, щоб забезпечити послідовний досвід.

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

Висновок

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

Проте масштабування великої кількості зображень може займати багато часу. Розгляньте використання плагіна, наприклад WP Media Folder, який дозволяє автоматично змінювати розмір, організовувати та замінювати зображення, забезпечуючи їх оптимізацію для продуктивності.