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

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

8bf60e33eb8304a76ed0744233adae04 Оптимізація зображень для сайту без втрати якості

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

Пропоную вам дуже простий спосіб обробки фотографій за розміщення на своєму сайті, який займає від 5 до 8 хвилин не залежно від їх кількості. Застосовую для цього 2 програми.

Програма ImageTuner для зміни розміру, установки водяного знака, перейменування і обрізання кутів фото

Отже, почнемо. Перша програма Image Tuner в даний момент в мережі є версія 6.8, є і російська версія цієї програми. Але я користуюся цією, тому хочу дати пояснення саме по ній

2319022f21c9e24b29aee02a6538f0bd Оптимізація зображень для сайту без втрати якості

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

09dbcaac58a6dfa479dcce5c2577b24c Оптимізація зображень для сайту без втрати якості

Після натискання на цю кнопку ми потрапляємо на наступну сторінку, де можна скачати цю програму

d61d06c532a9f3652457de1224b508e9 Оптимізація зображень для сайту без втрати якості

Розберемо докладно, крок за кроком, для початківців, як я працюю з цією програмою.

Запускаю програму

ca1ff987765e1735c58628076881bbbc Оптимізація зображень для сайту без втрати якості

Для початку нам необхідно вибрати усі фото, які будуть оброблятися. У мене вони пронумеровані від 1 до 9 йдуть 01,02,03 і т. д. Це я роблю для того, щоб фотографії йшли по порядку. Тому, що якщо не поставити 0 перед цифрою, вони стануть не по порядку, а перемішаються.

Для цього натискаємо Add Image

f11092d65ecab6534670d7ee83b8312f Оптимізація зображень для сайту без втрати якості

Проходимо з папок вашого комп’ютера, добираємося до папки з нашими фото

Їх можна виділяти утримуючи клавішу на клавіатурі клавішу Ctrl, можна виділити першу картинку і утримуючи клавішу на клавіатурі Shift клацнути по останньої. Так всі фото опиняться в полі програми

0e0ec08b56dfc801a471dc5be31c8db4 Оптимізація зображень для сайту без втрати якості

Далі, вибираємо, що ми будемо робити з нашими фотографіями.

Натискаємо зелений хрестик або як роблю я, натискаю на чорний трикутник вниз, вибір Tasks

fddb44eb9cff1d84c610798d5c03e769 Оптимізація зображень для сайту без втрати якості

На екрані з’являється список, що випадає, він показує змінити розмір, поставити водяний знак, конвертувати, перейменовувати і т. д.

d22c324d2c3edc78c110e6a2adce0fb2 Оптимізація зображень для сайту без втрати якості

Натискаємо Resize (змінити розмір), випадає вікно, тут можна виставити розмір у відсотках, пікселях або в дюймах. Нам потрібні пікселі, тому клікаєм по Resize by pixel і виставляємо потрібний розмір. Мої розміри 640х420

d5c71538cfbdd6d3062de092ae2607e5 Оптимізація зображень для сайту без втрати якості

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

4bfbe6d6668c78264058eafb9e1a7219 Оптимізація зображень для сайту без втрати якості

Після натискання Ок ми повернемося назад на наш головний екран

Далі, знову йдемо в випадаючий список, натискаємо маленький чорний трикутник вниз, там вибираємо Rename(Перейменувати). Англійськими літерами називаємо фотографії, наприклад kartofel_so_svininoy_ Всі фотографії будуть під таким ім’ям з порядковим номером

f060357efd8d20df040a89e5fdc13f17 Оптимізація зображень для сайту без втрати якості

Натискаємо ОК і повернемося на головний екран.

Йдемо в список, що випадає знову, натискаючи чорний трикутник вниз, вибираємо там Effects — Round для обрізання кутів фотографії

1fc28969003c57918883e36a8b6f0bd3 Оптимізація зображень для сайту без втрати якості

З’являється вікно

bb1ba94e64ee73acfcdf08b751e49c90 Оптимізація зображень для сайту без втрати якості

Спочатку стоять цифри 16, мені подобається поставити 4. Натисканням ОК повернемося на головний екран

c9335bfa5fa8e776865d20d66a578b0f Оптимізація зображень для сайту без втрати якості

Натискаємо кнопку Process. Це початок перетворення файлів

91a14a3a794f7759b0a24cd95326b50c Оптимізація зображень для сайту без втрати якості

Нам випадає вікно, куди необхідно зберегти наші нові фотографії, тобто папка призначення. У мене це папка В духовці-Картопля зі свининою в духовці

34940b5370f88b3144e62a2b22f43ed5 Оптимізація зображень для сайту без втрати якості

Натискаю внизу Вибір папки

f278b267fb238f40f697a6ab750a8ac2 Оптимізація зображень для сайту без втрати якості

Пішов процес обробки, може випасти вікно, натискаю Yes to All

0c84af4fd90faa384e7dcf8d55c11e36 Оптимізація зображень для сайту без втрати якості

Всі фото виявляються в папці потрібного розміру, з обрізаними кутами і потрібним назвою.

a8a10ca14845a23f37cb0e87ea93779f Оптимізація зображень для сайту без втрати якості

Якщо у вас фотографії до 150 кб, то на цьому я готовий закінчити свою статтю.

Програм RIOT для зменшення ваги картинок

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

5effc2ecc2f21c4ac865dc85d83df218 Оптимізація зображень для сайту без втрати якості

Завантажуємо, встановлюємо, відкриваємо

b588b566c5a7f8df62e25825775498b2 Оптимізація зображень для сайту без втрати якості

Натискаємо на вкладку Batch

c840052008b3d7be822c17a78e267271 Оптимізація зображень для сайту без втрати якості

Відкривається інше вікно, назвемо його головне 2. В згорнутому вигляді ви не побачите Settings, тому програму треба розгорнути

49680bfe91cc058003ad3a3637a2b636 Оптимізація зображень для сайту без втрати якості

Натискаємо на Settings і ставимо галочки і натискаємо Apply

8a751395441dbd554cd734a8730f03b9 Оптимізація зображень для сайту без втрати якості

Натискаємо вкладку Additional tasks, клікаєм на Compress to size

681936b0847c53f2a1af27cb5b7abd8d Оптимізація зображень для сайту без втрати якості

Близько Compress to size з’явиться галочка, закриваємо цю вкладку клікнувши на Additional tasks

87db4d4f2e6b554f4b63ed225a606054 Оптимізація зображень для сайту без втрати якості

У нас з’являється нова вкладка Compress to size з двома стрілками вгору або вниз, в залежності від того, що вкладка відкрита або закрита, де вставляємо вага фото

a52a747adaa2408147dd2c32a96d518d Оптимізація зображень для сайту без втрати якості

Виставляємо кількість кілобайт наших майбутніх фото, у мене 35

9d222e4f5a5f7ff05b852fea5c01a0c5 Оптимізація зображень для сайту без втрати якості

Натисканням кнопки Add images добираємося до папки з фотографіями, які необхідно стиснути. Йдемо по папках, знаходимо, виділяємо всі. Фото з’являються в головному вікні 2

672bd5cc548a5e8da3f8729791731912 Оптимізація зображень для сайту без втрати якості

Вибираємо папку призначення внизу вікна, натисканням на … знаходимо папку призначення. У мене це та ж сама папка. Внизу вікна можна перевірити чи правильно вибрано папку призначення.

0d6f2f529bbe80952fbbdcb597e43797 Оптимізація зображень для сайту без втрати якості

Залишається тільки натиснути кнопку Start праворуч внизу. Підтвердити перезапис файлів і стирання старих — натискаємо YES

dd44c0e15967c4020c7ac94385de6ea5 Оптимізація зображень для сайту без втрати якості

Можна закривати програму, а в нашій папки з фотографіями всі файли чарівним чином стають близько 35 кб

4f3e7bf7e88f048d5cfbe0c87af3bae8 Оптимізація зображень для сайту без втрати якості

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

Ця стаття виключно для початківців, тому я описав все так докладно, досвідчені відразу зрозуміють, не читаючи. Тому-що це супер просто.

Сподобалася стаття? Поділитися з друзями:
Всезнайко - Корисні поради