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

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


Насправді існує 20 різних способів оптимізації зображень (якщо включити SEO та оптимізацію швидкості). Це дасть вам кращі результати в GTmetrix / Pingdom, потенційно зробить вас вищими в пошуку та зробить завантаження вмісту набагато швидшим. Мені вдалося отримати 100% -ний звіт GTmetrix із завантаженням .5-х разів… оптимізація моїх зображень у WordPress була великою частиною цього.

Оптимізуйте зображення перед завантаженням – використання програми на зразок Photoshop для оптимізації зображень перед їх завантаженням може заощадити багато роботи. Ви можете змінити розмір, стиснути, зняти EXIF-дані, зберегти у правильному форматі (наприклад, PNG / JPEG) та написати описове ім’я файлу (яке автоматично використовуватиметься як текст alt, якщо використовувати Плагін автоматичного зображення Alt Attributes). Це 6 оптимізацій!

Якщо вам потрібні зображення високої роздільної здатності (наприклад, веб-сайт з фотографією), ви можете не захотіти їх змінити розмір і стиснути (кроки 3 і 8), оскільки це може знизити якість, навіть якщо це на невелику кількість.

Основні інструменти, якими я користуюся – Я використовую GIMP змінити розмір / стиснути зображення (мій редактор зображень на вибір), Ракета WP для мого додатка кеш, Уявіть для подальшого стиснення без втрат + видалення EXIF ​​даних, і те, і інше Хмара і StackPath CDN, Плагін автоматичного зображення ALT Attributes автоматично використовувати ім’я файлу зображення як текст alt, і Оптимальний кеш-граватар кешувати Gravatars в коментарях. я використовую WP огляд Pro як плагін моїх фрагментів, Кращий пошук замінити для масового оновлення зображень (дуже зручно) та GTmetrix як мій інструмент тестування швидкості. Дивіться повний список інструментів.

Contents

1. Знайдіть неоптимізовані зображення

Запустити веб-сайт до кінця GTmetrix і ви побачите ці елементи на вкладках Швидкість сторінки / YSlow. Перші п’ять, як правило, залежать від сторінки, тобто GTmetrix показуватиме неоптимізовані зображення лише на одній тестовій сторінці. Останні 3 зазвичай трапляються на вашому веб-сайті. Звичайно, це лише 7 способів оптимізації зображень, але деякі з найважливіших, тому ми будемо робити це першими.

  • Подавайте масштабовані зображення: зміни розміру великих зображень до правильних розмірів (крок 2)
  • Вкажіть розміри зображення: вкажіть ширину / висоту в HTML або CSS зображення (крок 3)
  • Оптимізуйте зображення – без втрат стискання зображень (крок 4)
  • Розчісування зображень за допомогою CSS-спрайтів – об’єднайте кілька зображень в 1 зображення (крок 5)
  • Уникайте переадресації URL-адрес – не надсилайте зображення з неправильної версії www або http (s) (крок 6)
  • Використовуйте мережу доставки вмісту – подавати зображення / файли з CDN (крок 7)
  • Використовуйте кешування браузера – кеш зображень / файлів за допомогою додатка кешу (крок 8)
  • Зробіть фавікон невеликим та кешованим – використовувати фавікон 16x16px і кешувати його (крок 9)

Оптимізація зображень у GTmetrix

Почніть з виправлення зображень, що з’являються на кількох сторінках: зображення логотипу, бічної панелі / колонтитула тощо. Почніть також із розміщених масштабованих зображень, оскільки вам, можливо, доведеться змінити розмір / перезавантажити їх з новими розмірами.

2. Подавайте масштабовані зображення

Якщо бачите подавати масштабовані зображення помилки в GTmetrix, це означає, що у вас є негабаритні зображення і потрібно змінити їх розмір до правильних розмірів (що надає вам GTmetrix). Поки ви дотримуєтеся шпаргалки розмірів зображення (див. Нижче), ви не повинні бачити цих помилок. Але якщо ви вже завантажили негабаритні зображення, вам знадобиться змінити їх розмір вручну або використовувати плагін.

Подавати масштабні зображення

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

Змініть розмір великих зображень

Змініть розмір зображень вручну – отримати правильні розміри від GTmetrix та змінити розмір / перезавантажити їх. Пам’ятайте, що GTmetrix показує лише неоптимізовані зображення для однієї сторінки, яку ви перевіряєте.

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

Приклад:

  • Зображення слайдера: 1900 (ш) х 400 (год)
  • Зображення каруселі: 115 (год)
  • Зображення віджетів: 414 (w)
  • Зображення в блозі на повну ширину: 680 (w)
  • Рекомендовані зображення: 250 (ш) х 250 (год)
  • Зображення Yoast Facebook OG: 1200 (ш) х 628 (год) – крок 11
  • Зображення Yoast Twitter OG 1024 (ш) х 512 (год) – крок 11

Прямокутник 680 пікселів

3. Вкажіть розміри зображення

Це означає додати ширину / висоту до HTML або CSS зображення. Visual Editor робить це для вас (але віджети, деякі розробники сторінок та користувацький HTML не). Перевірте кілька сторінок у GTmetrix.

GTmetrix повідомляє вам розміри зображення …

Вкажіть розміри зображення GTmetrix

Додайте ширину / висоту до HTML-зображення зображення…

Вкажіть параметри зображення

4. Без втрат стискати зображення

Це “оптимізувати зображення” в GTmetrix. Багато програм (наприклад, Photoshop та Gimp) мають можливість стиснення при експорті. Хоча це чудовий початок, плагіни для стиснення зображень зазвичай отримують ще кращі результати. я віддаю перевагу Уявіть, Кракен, ShortPixel, або Сміш. Відомо, що інші плагіни візуально знижують якість зображення та можуть спричинити помилки у ваших зображеннях.

Стиснення зображень за допомогою зображень

  1. Зареєструйтесь Уявіть
  2. Встановіть Уявіть плагін
  3. Вам буде запропоновано вказані нижче інструкції:
  4. Введіть свій ключ API з облікового запису Imagify
  5. Встановіть рівень стиснення (нормальний, агресивний, ультра)
  6. Imagif`em all (фото нижче), оптом оптимізує всі зображення на вашому сайті
  7. Як тільки ви досягли свого ліміту, заплатіть 4,99 долара або почекайте наступного місяця, щоб скинути ліміт

уявити

Перевірте, як виглядають зображення з різним рівнем стиснення …

Уявіть порівняння стиснення

Після реєстрації об’ємна оптимізація всіх зображень на вашому сайті…

образ-wordpress-оптимізація зображень

Встановіть опцію оптимізації завантаження зображень…

Уявіть, як оптимізувати зображення під час завантаження

5. Поєднайте зображення в спрати CSS

На моїй домашній сторінці вам може здатися, що ви бачите 21 піктограму, але насправді це одне зображення. Це Спрайт CSS, де ви поєднуєте кілька зображень в одне зображення. Це зменшує кількість зображень (і запитів), тому моя домашня сторінка містить лише 10 запитів. Замість того, щоб завантажити 21 зображення, він завантажує 1. Для цього вам знадобляться знання CSS або використовуйте Генератор спрайтів CSS.

Спрати CSS

GTmetrix CSS Sprites

Використовуйте CSS спрайт лише для декоративних зображень – Ви втрачаєте багато тегів на зображенні alt, поєднуючи 21 зображення в 1. НЕ комбінуйте важливі зображення у спрати CSS, якщо вони описують ваш вміст. Що стосується мене, швидкість моєї домашньої сторінки важливіша, ніж це SEO … Я використовую звіт GTmetrix своєї домашньої сторінки в багатьох місцях (тому я маю тримати її в чистоті), а моя домашня сторінка, вірите чи ні, не націлена на ціль ключове слово. Його мета – окреслити мої підручники … і швидко завантажуватися.

6. Уникайте переспрямувань URL-адрес зображення

Якщо ви перейшли на HTTPS, www версії або почали подавати зображення з CDN, вам слід повніше оновити всі свої зображення (та посилання) за допомогою Кращий пошук замінити тому вони подають правильну версію. Інакше ви можете побачити мінімізувати переадресації або використовувати домени без файлів cookie помилки.

Мінімізуйте перенаправлення

Безкоштовні домени cookie

Використовуйте плагін на кращий пошук замінити для масового оновлення URL-адрес зображення …

Кращий пошук Замініть версії WWW

Кращий пошук Замініть HTTP на HTTPS

7. Подавайте зображення із CDN

Для цього потрібно змінити URL-адреси зображень, щоб включити вашу CDN URL

  • URL-адреса старого зображення (без CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Нова URL-адреса зображення (із CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Я використовую і те, і інше Хмара і StackPath оскільки більше центрів обробки даних = швидша доставка контенту. Cloudflare є 200+ центрів обробки даних, StackPath має 34+ центри обробки даних які знаходяться в Сполучених Штатах (саме звідки більшість моїх відвідувачів). Cloudflare не призначає вам CDN URL тому ми будемо використовувати CDN StackPath для подання зображень.

StackPath-Центри даних

Крок 1: Виберіть CDN. я використовую StackPath (у них 30-денний пробний період).

Крок 2: На інформаційній панелі клацніть на вкладці CDN, а потім створити CDN-сайт StackPath

StackPath-CDN-Tab

StackPath-CDN-домен

CDN-URL-StackPath

Крок 3: Скопіюйте URL-адресу CDN та вставте її у свій плагін кешу (нижче – для WP Rocket)…

WP-Rocket-CDN

Крок 4: Замініть URL-адреси зображень, щоб вони включали вашу CDN-URL (використовуючи Кращий пошук замінити).

Кращий пошук Замініть CDN URL

Крок 5: Перевірте наявність старих URL-адрес зображень за допомогою Chrome DevTools. Іноді, ваш плагін кеша або CDN Enabler опікується цим, за винятком посилань у CSS та JavaScript, які жорстко кодуються. Для залишених посилань вони зазвичай є файли (наприклад, CSS або Javascript), які потребують ручної перевірки та заміни. Chrome DevTools показує всі використовувані домени.

Крок 6: Запустіть свій сайт у GTmetrix а “Мережа доставки вмісту” повинна бути зеленою в YSlow. Ви не повинні мати жодних помилок у “мінімізації переадресацій” або “використанні доменів, що не містять файли cookie”.

CDN GTmetrix YSlow

8. Кеш зображень

Більшість плагінів кешу мають опцію для кешування браузера, який кешує зображення. Я використовую WP Rocket, який отримав оцінку плагін №1 кеша у кількох опитуваннях у Facebook, і я маю підручник для цього. Швидке виконання загалом займає плагін №1 безкоштовного кешу (у мене теж є підручник для цього).

Кешування браузера

9. Зробіть фавікон малим і кешованим

Переконайтеся, що ваш файл Favicon розміром 16x16px, формат favicon.ico та кешований за допомогою додатка кеша.

10. Видаліть EXIF-дані

Exif дані містить такі відомості, як діафрагма, швидкість затвора, ISO, фокусна відстань, модель камери, дата фотографування тощо. Вам не потрібно це для зображень на вашому веб-сайті. The VA Видалення плагіна Exif автоматично видаляє дані Exif після завантаження зображень.

Більшість плагінів для оптимізації зображень (включаючи Imagify, ShortPixel, Kraken, EWWW та Smush) мають можливість видаляти EXIF ​​дані автоматично. Ось налаштування Imagify…

Уявіть видалення EXIF ​​даних

11. Оптимізація зображень в облачному режимі

Cloudflare також має кілька способів оптимізації зображень. Міраж та польська знайдені у вашому Налаштування швидкості хмарної хвилі в той час як захист гарячих посилань знайдеться у вашому Параметри екрана Scrape.

Cloudflare Mirage (Pro Feature) – зменшує запити на зображення, ліниві завантажує зображення та покращує час завантаження зображення на мобільних пристроях із повільним мережевим підключенням. Ось детальніше …

  • Змінює розмір зображень на основі пристрою / з’єднання відвідувача. Відвідувач при поганому з’єднанні отримає меншу версію (нижчу роздільну здатність), поки вони знову не стануть на більшій пропускній здатності.
  • Зменшує кількість запитів – замість того, щоб надсилати кілька запитів для всіх зображень на веб-сайті, Mirage об’єднує це в один запит, щоб відвідувачі могли відразу побачити зображення.
  • Ледачий завантажує зображення (завантажує їх лише після того, як користувачі прокручують вниз і фактично побачать зображення).

Міраж із зображенням Cloudflare

Cloudflare польська (Pro Feature) – знімає EXIF ​​дані та стискає зображення.

Cloudflare Image Polish

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

Захист від гарячої лінії Cloudflare

12. Ледачі завантаження зображень

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

Ви можете використовувати Плагін Lazy Load, Плагін Lazy Load For Videos, або використовувати WP Rocket…

WP-Rocket-Lazy-Load

13. Зберегти як правильний формат

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

jpg_vs_png

Ілюстрація від Лабнол

14. Імена файлів зображень

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

Позначте назви файлів зображень

15. Текст Alt

Вони повинні відповідати назви вашого файлу зображень. Ви можете використовувати Плагін автоматичного зображення Alt Attributes щоб автоматично використовувати ім’я файлу як текст alt. Поки ви використовуєте відповідні зображення, деякі з них, природно, повинні включати (біти) ключового слова … немає абсолютно ніяких причин вводити ключові слова у зображення, що ризикує штраф набивання ключових слів.

Автоматично додайте текст Alt до зображень – використовувати Плагін автоматичного зображення Alt Attributes. Тепер, коли ви додаєте зображення, плагін додасть текст alt, який є тим самим, що і ім’я файлу …

alt ="WP-найшвидший-кеш-плагін" ширина ="577" висота ="247" />

Знайдіть текст, що відсутній Alt – Screaming Frog – це безкоштовний інструмент, який показує всі зображення, на яких відсутній альт-текст.

  • Завантажити Кричала Жаба SEO Павук
  • Введіть свій веб-сайт та натисніть «Почати», щоб сканувати його
  • Перейдіть на вкладку зображення
  • Перейдіть до огляду → Відсутній текст Alt (Дивись нижче)
  • Знайдіть ці зображення на своєму сайті та додайте текст alt

Текст Alt тексту відсутнього - кричуща жаба

16. Відкритий графік (Facebook + Twitter)

Це робить ваш формат вмісту належним чином при спільному використанні у Facebook / Twitter, зокрема на вашому зображенні, оскільки обидві мережі використовують спеціальні параметри для його відображення, інакше це буде виглядати смішно.

facebook-акція

Якщо ви використовуєте Yoast, перейдіть до налаштувань “Соціальні” та ввімкніть Open Graph для Facebook / Twitter …

Yoast-Social-Meta-Data

Тепер відредагуйте сторінку / публікацію, а потім натисніть посилання «поділитися» в Yoast, і ви побачите варіанти завантаження спеціальних зображень для Facebook (1200 ширина x 628 висота) та Twitter (1024 ширина х 512 висота).

йост-соціальна медіа-оптимізація

17. Зображення у пропонованих фрагментах

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

3 типи пропонованих знімків

  • Відповіді
  • Столи
  • Списки

Рекомендовані зображення-знімки

Як отримати популярні фрагменти в Google

  • Націліть на ключове слово, де люди хочуть лаконічний відповідь
  • Використовуйте Moz Explorer для визначення ключових слів питання
  • Використовуйте відповіді для громадськості, щоб знайти ще більше ключових слів з питаннями
  • Виберіть, чи має відповідь абзац, список чи таблиця
  • Створіть приємну графіку (або сфотографуйте) із описом ключового слова
  • Використовуйте оптимальну довжину символів (див. Фото, зроблене нижче Моз)
  • Створюйте на основі фактів вміст із посиланнями на якість (посилання, графіка тощо)
  • Націліть на ключові слова, які вже містять фрагмент, але вони погано працюють
  • Якщо ви орієнтуєтесь на поле відповідей, націліть своє ключове слово, використовуючи точну відповідність
  • Переконайтеся, що ви перебуваєте на 1-й сторінці для ключового слова, якщо ні, покращуйте вміст

Довжина фрагментів Optimial Featured

18. Структуровані дані

Зображення можна використовувати в структуровані дані (і значки) для таких типів вмісту:

Відео Розсипчастий фрагмент

Сніппети-рецепти

Зріз продукту

Який плагін для розширених фрагментів я повинен використовувати?
я використовую WP огляд MyThemeShop Pro (ось ця сторінка я використовую), яка підтримує 14 типів даних, включаючи рецепти та огляди продуктів. Раніше я використовував WP Rich Snippets, але розробник відмовився від плагіна, і він не оновлювався протягом 2+ років, і Плагін All In One Schema просто нудна (у неї бракує варіантів та стилів). WP Review Pro дуже простий у використанні.

19. Стилі зображення

Не забувайте стилізувати свої зображення! Я використовую межі на більшості моїх.

  • Назви зображень
  • Посилання на зображення
  • Межі зображень
  • Підписи зображень

20. Змініть розмір GIF

Так само, як ви змінюєте розмір зображень до правильних розмірів, GIF-файли також повинні бути змінені (використовувати GIF GIF).

Змініть розмір GIF …

Змінення розміру GIF

Потім стисніть його …

Стиснення GIF

Результат :-)

Оптимізуйте собаку GIF

21. Кеш-граватари

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

  • Кеш-граватари (Оптимальний, Гаррі, або Кеш Ф. В. Граватара)
  • Вимкнути Gravatars повністю
  • Установіть значення Gravatar за замовчуванням
  • Видаліть коментарі, які не додають цінності
  • Встановіть Gravatar за замовчуванням на спеціальне зображення на вашому сервері
  • Обмежте зображення Gravatar меншими розмірами (наприклад, 32 пікселів)
  • Паглікація коментарів у WP Вимкнено, щоб показувати лише 20 коментарів одночасно
  • Якщо жодне з цих не працює, перевірте WP Rocket кеширує підручник з Gravatars

Кеш-Граватар-Образи

22. Уникайте вставлення зображень із зовнішніх веб-сайтів

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

23. Інструменти оптимізації зображень

Уникайте використання плагінів з повторюваною функціональністю – Уявіть, ShortPixel, Kraken, EWWW та Smush – все в основному роблять те саме (стиснення без втрат, видалення даних EXIF, зміна розміру зображень). WP Rocket має варіанти для ледачого завантаження, кешування та CDN (і очищення баз даних + локальне розміщення Google Analytics), що більшість кеш-плагінів не робить, що позбавляє вас від використання додаткових плагінів.

  • Дивовижний знімок – розширення Chrome для зйомки екрана.
  • Автоматичні атрибути зображення Alt – автоматично вставляє текст alt за допомогою імені файлу зображення.
  • Кращий пошук замінити – використовувати його для масового оновлення зображень.
  • Хмара – безкоштовний CDN з 200+ центрами обробки даних, захист гарячої лінії, міраж, полірування.
  • Chrome DevTools – показує, що домени використовуються, якщо у вас є помилки перенаправлення GTmetrix.
  • CSS Sprite Generator – безкоштовний інструмент для комбінування декількох зображень в 1 спрайт CSS.
  • EWWW Оптимізатор зображень – стиснення без втрат, видалення EXIF, зміна розміру.
  • GifGifs – змінює розмір GIF.
  • GIMP – безкоштовне програмне забезпечення для редагування зображень, яке я використовую.
  • GTmetrix – показує, які зображення потрібно оптимізувати.
  • Уявіть – стиснення без втрат, видалення EXIF, зміна розміру.
  • Безсмертність – змінює розмір великого зображення, щоб виправити “подати масштабовані зображення” в GTmetrix.
  • Кракен – стиснення без втрат, видалення EXIF, зміна розміру.
  • Ледача навантаження – плагін, який затримує завантаження зображень, поки вони не стають видимими.
  • Ледаче завантаження відео – плагін, який затримує завантаження відео, поки вони не стануть видимими.
  • Оптимальний кеш-граватар – кешує Gravatars (або спробуйте Гарши Кеш Граватара).
  • Кричала Жаба SEO Павук – знайти відсутні альт-текст, мета-описи тощо.
  • ShortPixel – стиснення без втрат, видалення EXIF, зміна розміру.
  • Сміш – стиснення без втрат, видалення EXIF, зміна розміру.
  • StackPath – 10 доларів США / місяць CDN з 31 центром обробки даних.
  • Swift Performance Lite – №1 безкоштовний плагін кешу на більшості опитувань у Facebook.
  • Огляд WP – плагін із розширеними фрагментами (допомагає отримувати зображення, що відображаються в результатах пошуку).
  • Ракета WP – плагін кеша №1 у більшості опитувань у Facebook.
  • VA Видалення Exif – знімає непотрібні дані з зображень.
  • Збільшити  -Розширення Chrome для отримання ідеального масштабування під час зйомки екрана.
  • Йоаст – увімкнює метадані Facebook / Twitter, завдяки чому зображення належним чином форматуються.

Часті запитання

&# x2705; Як виправити Оптимізація помилок зображення в GTmetrix?

Швидко стискаючи їх за допомогою плагіна типу ShortPixel, Imagify або Smush. Я використовую ShortPixel, оскільки він завжди виправляє цю помилку в GTmetrix.

&# x2705; Як виправити помилки масштабування зображення в GTmetrix?

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

&# x2705; Як виправити Вкажіть помилки розмірності зображення в GTmetrix?

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

&# x2705; Будь-які інші способи прискорити завантаження зображень?

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

&# x2705; Яка оптимізація зображень найкраща?

Я використовую ShortPixel, оскільки втрата якості практично нульова, і він фіксує елемент Optimize Images в GTmetrix.

Як ти гадаєш?
Чи виглядає ваш звіт GTmetrix трохи краще? Повідомте мене в коментарях! І якщо ви хочете отримати більше порад, які дадуть вам ще кращі результати / завантаження, перегляньте мій повний посібник із швидкості WordPress.

Ура,
Том

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map