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

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

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

вашого веб-сайту

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

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

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

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

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

Тепер, коли ви знаєте, що таке оптимізація зображень і навіщо вона вам потрібна, давайте почнемо підручник.

КРОК 1

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

КРОК 2

Виберіть зображення, яке ви хочете завантажити на свій веб-сайт, і відкрийте його у Photoshop. Після того, як у вас є, перейдіть до Зображення -> Розмір зображення.

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

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

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

На цьому зображенні я залишаю поля ширини, позначені червоним кольором (ширина) та резолюція (дозвіл).

КРОК 3

Тепер у вас є зображення на розмір, який вас цікавить. Однією з основних помилок веб-зображень є те, що вони не зберігаються як такі, а зберігаються "al tun-tún", і це змушує нас додавати зайву вагу.

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

На цьому етапі ви можете вибрати один із декількох варіантів збереження зображення. Найпоширенішими є такі:

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

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

Ось приклад, у якому ви можете порівняйте, як однакове збережене зображення змінюється з різною роздільною здатністю.

Як тільки ви вирішите, з якою якістю ви хочете його зберегти, натисніть на "Зберегти" і виберіть, де ви хочете його зберегти.

І це все! Це так просто і швидко зробити зображення у вашому блозі швидшими, завантажуючи користувачів, не змушуючи користувачів чекати їх перегляду і не втрачаючи якості. Фантастично, правильно?

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

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

Щоб дізнатись ширину вашої публікації незалежно від платформи, яку ви використовуєте, ви можете використовувати розширення Chrome під назвою Page Ruler, яке працює як лінійка.

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