Підготовка файлів зображень перед завантаженням за допомогою WordPress OM4

Резюме

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

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

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

Розміри та розмір файлу

розміри файлу (ширина та висота, у пікселях) та
розмір файлу (Кілобайт КБ або Мегабайт МБ).

Якщо ви хочете, ви можете сприймати їх як розмір та "вагу".

Ескіз, який ви бачите нижче, має 360 пікселів (пікселів) у ширину та 240 пікселів у висоту та „важить“ 20 КБ.
Клацніть на мініатюру, щоб побачити більшу версію у лайтбоксі - ви побачите версію шириною 800 пікселів, яка «важить» 80 КБ.

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

Ось деякі статистичні дані щодо мінімальної ширини екрану станом на січень 2017 року (див. W3schools.com для отримання останньої інформації):

1024px в ширину: 96%
128opx в ширину: 93%
1366 пікс. В ширину: 84%
1920px в ширину: 49%
2560px в ширину: 8%

Тож статистично, якщо розмір ваших зображень становить 1280 пікселів в ширину, у 93% випадків зображення будуть достатньо великими, щоб заповнити браузер вашого відвідувача. Будь-яке більше, і зображення все одно буде стиснуте в ширину. Якщо ви хочете заповнити ширину браузера для 84% відвідувачів, туди потрапить 1366 пікселів. Якщо ви використовуєте ширину 2560 пікселів, ви зможете відображати на великих дисплеях iMac на всю ширину.

Клацніть на мініатюру для цього наступного зображення, і ви переглянете зображення шириною 2000 пікселів, яке «важить» 120 Кб. Приблизно для 92% з вас він повинен буде зменшитися відповідно до монітора.

Перш ніж натискати ескіз, переконайтеся, що ви розгорнули браузер:

Зображення з цифрових фотоапаратів або з бібліотек стокових фотографій можуть бути дуже великими як за розмірами, так і за “вагою”. Ширина 4000 пікселів - не рідкість, а розмір файлу може бути від 4 Мб до 10 Мб і далі.

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

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

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

Перевірка розміру зображень

Щоб побачити, наскільки великі ваші файли зображень, скористайтесь Провідником Windows або Mac Finder та огляньте файл. На Mac ви можете переглядати безпосередньо у Finder: