Оптимізуйте свої веб-зображення за допомогою Gimp - так ви, веб!
- Опубліковано 11 липня 2020 р. -
Якщо ви регулярно стежите за нами, ви знаєте, що ми приділяємо велике значення роботі ваших веб-сайтів, їх швидкості відображення. Ми вже пояснювали вам "Чому і як оптимізувати зображення на вашому веб-сайті", але сьогодні ми перейдемо до практичного підручника, який покаже вам, як оптимізувати ваші зображення за допомогою безкоштовного інструменту Gimp.
Є й інші, але саме цей ми використовуємо, тож давайте підемо !
Встановіть Gimp
Першим кроком є завантаження та встановлення Gimp. Завжди бажано перейти безпосередньо на сайт програми, тому натисніть тут.
Ми на ПК, тому клацаємо на помаранчевому квадраті:
Потім ви виконуєте кроки, ви знаєте, як ...
Змінити розмір зображення
Відкрийте за допомогою Gimp зображення, яке потрібно змінити, перейшовши вгору в меню Файл/Відкрити. Потім у верхньому меню перейдіть до Зображення/Масштаб та розмір зображення. Відобразиться спливаюче вікно:
Оригінальне зображення - 5472 x 3648 пікселів. За необхідності введіть нове значення в ширину чи висоту. Наприклад, ширина нашого блогу - 940 пікселів. Ви можете побачити, що висота регулюється самостійно після натискання кнопки "Enter" на клавіатурі. Ви також можете міркувати з висотою, якщо це необхідно. Праворуч від полів розміру ви бачите скріпку:
Коли ця скріпка зав'язана, це означає, що зміна розміру буде однорідною. Якщо натиснути на нього, ви від’єднаєте його, і зміна ширини не вплине на висоту, а тому зображення буде спотворене. Це може бути корисно, коли ви обрізаєте своє зображення, десь у вас є зайвий 1 пікс, розв’яжіть, відрегулюйте розмір, видаливши цей піксель і вуаля! 1px не буде видно на великому зображенні, це буде більше на маленькій піктограмі ...
Після того, як ви ввели свій новий розмір, натисніть на кнопку масштабувати і вуаля! Якщо ваше зображення більше не видно на екрані, змініть рівень масштабування внизу ліворуч:
Якщо ваше зображення є таким, яким ви цього хотіли, перейдіть до пункту "Оптимізувати вагу".
Обрізати зображення
Якщо вам потрібно надати зображенню точний розмір, можливо, простого зміни розміру буде недостатньо, його доведеться також обрізати. Давайте виконаємо вправу з попереднім зображенням. Скажімо, ми хочемо це на 940 пікселів на 400 пікселів. Під час зміни розміру ми маємо зображення розміром 940 пікселів на 627 пікселів, тому нам потрібно буде обрізати 227 пікселів.
Відобразіть зображення у форматі 940 x 627px. Потім виберіть інструмент виділення квадрата на панелі інструментів і двічі клацніть на ньому. З'явиться спливаюче вікно Параметри інструменту. Ви ставите прапорець біля пункту «Виправлено» та випадаюче меню вибираєте Розмір. Там ви зміните значення на 940 × 400. Потім клацніть на зображення, відобразиться прямокутник правильного розміру:
Ви розташуєте цей прямокутник там, де хочете, по висоті, він визначить ваше нове обрамлення. Після розташування перейдіть у верхню частину меню Зображення/Обрізання відповідно до вибору.
Оптимізуйте вагу
Тут ваше нове зображення готове, обрізане чи не відповідно до ваших потреб, потрібно буде зберегти його у новому форматі, одночасно оптимізуючи його вагу. Ви переходите в меню вгорі: Файл/Експортувати як ... (не Зберегти як, що з'являється раніше і збереже власний формат Gimp, xcf).
Якщо ваше зображення в PNG, Ви називаєте його (без наголосів, пробілів чи спеціальних символів!) та натискаєте Зберегти. Якщо він не має прозорого фону, ви також можете зберегти його у форматі jpg, більш світлому форматі, просто змінивши літери розширення (jpg замість png). Колір тла буде вашим фоном, тому, якщо у вас колір, відмінний від білого, будьте обережні !
Якщо ваше зображення в jpg, ви отримаєте таке спливаюче вікно:
Установіть прапорець Показати попередній перегляд у вікні зображення, потім відобразиться вага зображення. І опустіть повзунок стиснення, щоб точно налаштувати цю вагу. На більшості фотографій ви можете знизити цей повзунок до 60-70, не помічаючи погіршення якості зображення. Чим світліше ваше зображення (не втрачаючи якості, вам доведеться знайти потрібний компроміс), тим швидше відображається ваш сайт, особливо якщо на вашій сторінці багато зображень, тому не соромтесь !
Потім натисніть Експорт, і все готово! Потім ви можете завантажити своє зображення в WordPress.
Ось, це був суто практичний невеликий підручник, щоб ви могли самостійно оптимізувати свої зображення ДО того, як завантажити їх на свій веб-сайт.
Якщо у вас виникли запитання, опублікуйте їх у коментарях нижче.
І не соромтеся поділитися своїми відгуками !