Найкращий формат зображення для швидкості сайту WordPress

Найкращий формат зображення для WordPress WebP для фотографій і графіки з JPG і PNG як автоматичні запасні варіанти та SVG для логотипів і значків. WordPress забезпечує величезну частину Інтернету, і зображення зазвичай є найважчим елементом на будь-якій сторінці, яку він обслуговує, тому формат, який ви завантажуєте, безпосередньо визначає швидкість завантаження вашого сайту та його рейтинг. WordPress багато чого виконує за вас, генеруючи різні розміри кожного завантаження, але він не вибере ідеальний формат, якщо ви його не налаштуєте. У цьому посібнику описано, який формат використовувати, як WordPress обробляє зображення, а також налаштування та плагіни, які забезпечують швидкість сайту WordPress.

Чому формат зображення так важливий для WordPress

На типовій сторінці WordPress зображення займають більшість байтів, які завантажує відвідувач. Це означає Формат зображення є найбільшим важелем швидкості сторінки, а швидкість сторінки передається безпосередньо в Core Web Vitals, які Google використовує як сигнал рейтингу. Тема може бути простою, а хостинг швидким, але сторінка, наповнена великими файлами JPG, все одно скануватиметься. Вибір ефективного формату та надання WordPress версій відповідного розміру є найефективнішою оптимізацією, яку можуть зробити більшість сайтів, і вона не коштує нічого, окрім невеликого налаштування.

Як WordPress обробляє завантаження зображень

Коли ви завантажуєте зображення, WordPress не просто зберігає його. Це автоматично створює кілька копій зміненого розміру, ескіз, середній, великий і повний, тому він може використовувати розмір, що відповідає кожному контексту. Він також створює адаптивну розмітку srcset, щоб браузери вибирали правильний розмір для кожного пристрою. Це потужно, але воно працює з усім, що ви завантажуєте, тому 5000-піксельний оригінал створює роздуті копії будь-якого розміру. Завантаження оригіналу розумного розміру з ефективним стисненням означає, що кожна згенерована версія також є мінімальною.

WebP: сучасний стандарт

WebP — це формат, який потрібно стандартизувати. Він створює файли На 25–35% менше, ніж у JPG, за тієї ж якості, підтримує прозорість, як PNG, і тепер підтримується всіма поточними браузерами. WordPress підтримує завантаження WebP, починаючи з версії 5.8, і за допомогою правильного плагіна він може автоматично обслуговувати версії WebP ваших існуючих файлів JPG і PNG, повертаючись до оригіналу для будь-якого браузера, який не може його відобразити. Перенесення медіа-бібліотеки на WebP часто є найбільшою перевагою у швидкості, яку може отримати сайт WordPress.

JPG і PNG як запасні варіанти

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

SVG для логотипів і значків

Для вашого логотипу та значків інтерфейсу SVG перевершує будь-який растровий формат. Це так вектор, тому він залишається чітким за будь-якої щільності екрана з одного крихітного файлу. WordPress не дозволяє завантажувати SVG за замовчуванням з міркувань безпеки, оскільки SVG може містити сценарій, тому ви вмикаєте його за допомогою плагіна, який очищає файли під час завантаження. Після ввімкнення логотип у форматі SVG є меншим і чіткішим, ніж еквівалент PNG, і ніколи не потребує створення кількох розмірів. Зарезервуйте SVG для логотипів, значків і простої графіки, а не для фотографій.

Вибір правильних розмірів зображення

WordPress генерує кілька розмірів, але ви контролюєте розміри. Встановіть великого розміру, щоб не перевищувати область вмісту, часто приблизно від 1200 до 1600 пікселів, тому зображення на всю ширину не є надмірно великими. Завантаження 4000-піксельної фотографії, коли ваш стовпець вмісту має ширину 800 пікселів, витрачає пропускну здатність навіть після зміни розміру WordPress, оскільки найбільша згенерована копія все ще завелика. Зіставте розміри ваших зареєстрованих зображень із фактичним макетом вашої теми, і кожне зображення, яке розміщується на сайті, залишатиметься пропорційним до місця його розміщення.

Плагіни стиснення та оптимізації

Плагін оптимізації автоматизує весь конвеєр. Популярні варіанти стискати кожне завантаження, генерувати версії WebP і видаляти непотрібні метадані, і все без того, щоб ви торкалися зображення вручну. Багато з них також оптимізують вашу існуючу бібліотеку масово, перетворюючи накопичені роками файли JPG і PNG у WebP за один прохід. Деякі переносять обробку на власні сервери, щоб заощадити ваш хостинг. Незалежно від того, який ви виберете, ефект буде однаковим: зображення надходять на сторінку стисненими та в найкращому форматі автоматично, що набагато надійніше, ніж оптимізувати кожне з них вручну.

Відкладене завантаження зображень

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

Видалення метаданих

Фотографії містять метадані, модель камери, місцезнаходження GPS, колірні профілі, які рідко потрібні веб-сайтам і які додають ваги. Видалення цих метаданих зменшує кожен файл без видимих змін, і більшість плагінів оптимізації роблять це як частину стиснення. Видалення даних GPS також покращує конфіденційність, оскільки ви, ймовірно, не хочете публікувати, де було зроблено фотографію. Єдиними метаданими, які варто зберігати, є колірний профіль, якщо точність кольору має значення. В іншому випадку видалення є безкоштовним, невидимим зменшенням розміру всієї бібліотеки.

Рекомендоване налаштування зображення WordPress

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

AVIF:

наступний крок за межами WebP

AVIF — найновіший ефективний формат, і WordPress його також підтримує. Він стискає навіть менше, ніж WebP, часто на 20% менше, з тією ж візуальною якістю, з підтримкою прозорості та широких кольорів. Підтримка веб-переглядача тепер широка, але трохи відстає від WebP, тому AVIF найкраще працює з резервним WebP або JPG. Деякі плагіни оптимізації можуть автоматично генерувати AVIF разом із WebP. Для веб-сайтів, які витрачають кілька останніх кілобайт на кожне зображення, AVIF варто ввімкнути, хоча WebP наразі залишається безпечним основним форматом.

Медіатека та ведення господарства

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

Відновлення мініатюр після зміни теми

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

CDN доставка зображень

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

Рекомендовані зображення та попередні перегляди в соціальних мережах

Рекомендоване зображення кожної публікації виконує подвійну функцію: воно з’являється у вашій темі та, через теги Open Graph, як попередній перегляд, коли публікація публікується. Встановіть рекомендовані зображення в розмірі, який підходить для попереднього перегляду в соціальних мережах, приблизно 1200 на 630, тому спільні посилання виглядають різко в стрічці. Плагін SEO зазвичай автоматично прив’язує представлене зображення до тегу Open Graph. Якщо зробити це правильно, кожна публікація, якою ділиться, показує чисте зображення правильного розміру, а не обрізану мініатюру або взагалі нічого.

Тестування ефективності зображення

Після оптимізації виміряйте результат. Такі інструменти, як PageSpeed Insights, повідомляють про проблеми, пов’язані із зображеннями, позначаючи завеликі зображення, зображення без сучасних форматів і зображення без розмірів, що спричиняє зміщення макета. Вони безпосередньо пов’язані з основними веб-показниками, тому їхні поради співвідносяться з тим, що вимірює Google. Виконання тесту до та після проходження оптимізації точно показує, наскільки швидшою стала сторінка, і висвітлює будь-яке зображення, яке все ще затримує її. Ставтеся до цих звітів як до контрольного списку, щоб вичавити останню вагу з ваших зображень.

Поширені помилки зображень WordPress

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

Який найкращий формат зображення для WordPress?

WebP для фотографій і графіки з резервними файлами JPG і PNG і SVG для логотипів. Файли WebP на 25–35% менші за файли JPG за тієї самої якості, і їх підтримує кожен поточний браузер.

Чи підтримує WordPress WebP?

так починаючи з WordPress 5.8. Ви можете завантажувати WebP безпосередньо, а плагін оптимізації може автоматично обслуговувати версії WebP існуючих файлів JPG і PNG із запасними варіантами.

Чи можу я завантажити файли SVG на WordPress?

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

Чи потрібен мені плагін для оптимізації зображення?

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

Чи варто мені змінювати розмір зображень перед завантаженням у WordPress?

так Завантажуйте не ширше, ніж ваша область вмісту, часто від 1200 до 1600 пікселів. Величезний оригінал робить кожен розмір, створений з нього WordPress, занадто великим.

Чи підтримує WordPress AVIF?

так AVIF стискає приблизно на 20% менше, ніж WebP однакової якості, а деякі плагіни оптимізації генерують його автоматично. Подайте його з резервним WebP або JPG для повної підтримки браузера.

Чи варто мені використовувати CDN для зображень WordPress?

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

Чому мої зображення виглядають неправильно після зміни теми?

Оскільки наявні завантаження зберігають свої старі згенеровані розміри. Відновлення ескізів відновлює всі розміри оригіналів щоб відповідати розмірам нової теми.

Чи варто відкладено завантажувати зображення WordPress?

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