Як правильно змінити розмір та подати масштабовані зображення за допомогою WordPress
Обслуговування масштабованих зображень - один із найбільш ігноруваних способів досягти кращої продуктивності сайту. Ваші зображення затримують ваш сайт WordPress?
Зображення займають багато місця в розмірі файлу, особливо якщо вони роздуті та великі. Ось чому зображення повинні бути на першому місці у вашому списку речей, які слід оптимізувати, якщо ви намагаєтеся покращити швидкість сторінки, конверсію чи продаж.
У цій публікації ми зупинимося на тому, як подавати масштабовані зображення за допомогою WordPress. Ви дізнаєтесь, як правильно розмірювати зображення в WordPress кількома різними способами та як надзвичайно покращити робочий процес оптимізації зображень за допомогою Smush Pro.
Що таке масштабовані зображення?
Зображення в Інтернеті повинні потрапляти в зону Золотоволосих. Не надто великий, не надто маленький. Вони повинні бути в самий раз. Якщо вони занадто малі і їх масштабують, вони будуть розмитими.
З іншого боку, якщо зображення занадто велике, браузер зменшить його до потрібного розміру. Це не впливає на вигляд зображення, але воно збільшить розмір файлу на сторінці.
Оскільки ви не можете помітити зміни якості, надмірну вагу графічних файлів стає легко пропустити. І оскільки більшість людей не знають, що проблема є, вони не усувають її. Вони продовжують покладатися на браузер, щоб обслуговувати потрібний розмір, адже саме для цього призначений браузер, вірно?
За даними Google ...
В ідеалі, ваша сторінка ніколи не повинна розміщувати зображення, розмір яких перевищує версію, яка відображається на екрані користувача. Все, що більше… просто призводить до втрати байтів і уповільнює час завантаження сторінки.
Надання занадто великого зображення шкодить вам кількома способами.
- По-перше, це відволікає браузер, змушуючи його виконувати додаткові запити сервера. Замість того, щоб доставити веб-сторінку якомога швидше, їй потрібно зупинити та змінити розмір зображення. Це вимагає часу, друзі, особливо якщо ваші веб-сторінки важкі для зображень.
- По-друге, якщо ви завантажуєте повнорозмірне селфі прямо зі свого телефону, але ви показуєте його як маленький Gravatar, то ви витрачаєте час і дані, завантажуючи надмірно велике зображення.
Введіть масштабовані зображення. Масштабоване зображення - це зображення, розмір якого відповідає точним розмірам, для яких ви його використовуєте. На відміну від кадрування, яке в кінцевому підсумку може змінити пропорції зображення, масштабування зберігає розміри.
Якщо ви читаєте цю публікацію на повноекранному екрані, то ширина основи цієї публікації становить 600 пікселів. Оскільки ми всі про оптимізацію тут, на WPMU DEV, коли я створюю зображення для публікацій у блозі, я роблю їх рівно 600 пікселів у ширину. Це саме той розмір, який мені потрібен, щоб браузер не мусив виконувати жодної додаткової роботи, і тому вам не потрібно було використовувати більше даних.
Оптимізатори швидкості сайту, такі як Hummingbird, GTmetrix та Google PageSpeed Insights, рекомендуватимуть масштабування зображень для підвищення продуктивності.
Хіба атрибути srcset та size не повинні дбати про зміну розміру зображення?
Так і ні. Ви хочете оптимізацію піків, чи не так? Якщо ви це зробите, srcset і розмір допоможуть вам наблизитися до ідеального розміру зображення, але не завжди дадуть вам точний розмір, який вам потрібен, і це не зменшить надлишок на найбільшому розмірі.
Атрибут srcset працює, надаючи URL-адресу зображення, а потім надаючи браузеру список зображень на вибір різних розмірів. Цей набір джерел для того селфі, про яке я згадав раніше, виглядатиме приблизно так:
srcset = “selfie-100x100.png 100w, selfie-200x200.png 200w, selfie-400x400.png 400w”
Вище, WordPress повідомляє браузеру: ви знаєте про користувача більше, ніж я, ось зображення, яке ви хочете, у 3 різних розмірах, виберіть той, який найкраще працюватиме.
Коли браузеру потрібно відобразити 75px x 75px Gravatar поруч із коментарем, він вибере перший варіант із набору та трохи змінить його розмір. Якщо у користувача є пристрій сітківки, він вибере другий варіант.
Це скорочує деякі відходи, але масштабування дозволить вам отримати додаткову продуктивність.
Як обслуговувати масштабовані зображення в WordPress
Для початку вам потрібно знати розміри зображень, які будуть використовуватися на вашому сайті. Я говорю про банери, зображення героїв, зображення в блозі, Gravatar тощо.
Перегляньте наш короткий посібник про те, як виявити зображення неправильного розміру в WordPress.
Ми хочемо знати, який найбільший розмір кожного зображення буде коли-небудь відображатись, оскільки ми знаємо, що все, що перевищує цей поріг, марно.
Наприклад, скажімо, я хочу використовувати фотографію океану на домашній сторінці свого сайту. Зображення у незміненому стані становить 4534px x 3023px.
Я ще нічого не робив, щоб змінити розмір фотографії ...
Для зображення в тілі допису в блозі вам, мабуть, потрібно буде подати зображення шириною від 600px до 960px, а для зображень із героями, що охоплюють ширину екрану настільного комп’ютера, ти дивишся на щось із шириною 1600px діапазон.
Також пам’ятайте, що вам потрібно подвоїти ці розміри, щоб розмістити екрани сітківки. Найбільший розмір, який має бути зображення 1600px, - 3200px.
Щоб знайти розмір, який повинен бути зображення, щоб ідеально відповідати, ми шукатимемо зображення на сайті та відкриємо інструменти розробника браузера.
Якщо ви використовуєте Chrome, клацніть правою кнопкою миші на зображенні та перейдіть до Перевірити. У Firefox виберіть Перевірити елемент.
У Chrome, коли ви наводите курсор на URL-адресу зображення, ви побачите розмір, у якому відображається зображення, з оригінальним розміром "природного" зображення в дужках. Цей великий графічний файл - це те, що завантажують ваші відвідувачі.