Автоматизуйте стиснення зображення за допомогою Photoshop

Сьогодні я пропоную вам навчитися автоматизувати, якщо ви цього ще не знали, повторюване завдання в SEO: стискати кілька зображень одночасно у Photoshop. Дійсно, в агентстві або у рекламодавця нам часто доводиться виконувати цю трудомістку та дещо повторювану операцію. Крім того, щоб заощадити час, я дам вам підказку, яку я регулярно використовую на кожному з сайтів, які мені потрібно оптимізувати.

Спочатку давайте швидко повернемося до значення стиснення зображень на вашому сайті.

Навіщо оптимізувати зображення вашого сайту ?

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

  • зменшити показник відмов,
  • полегшити індексування сторінок,

Серед дій, які можуть позитивно вплинути на загальний час завантаження вашого сайту, ми знаходимо:

  • кешування так звані статичні ресурси в браузері,
  • активація Стиснення Gzip зображення на стороні сервера,
  • використання Спрайти CSS зменшити кількість дзвінків на сервер на рівні зображення (кілька зображень потім групуються в один файл, а їх відображення управляється за допомогою CSS),
  • із зазначенням розміру зображень безпосередньо у вихідному HTML-коді сторінок вашого сайту,
  • кореляція між розмірами оригінальних зображень та зображень, що відображаються на сайті (розмір зображення 100 * 80 слід змінювати не за допомогою вихідного коду HTML або CSS, а за допомогою програмного забезпечення для редагування графіки, такого як Photoshop),
  • мініфікація файлів CSS та JavaScript, іншими словами, зменшення їх розміру, отримане шляхом видалення непотрібних символів, коментарів, пробілів тощо.
  • ...

До цього додається важливий крок: стискати зображення сайту, тема, яка, в основному, стосуватиметься нас у цій публікації.

Як дізнатися, які зображення оптимізувати ?

Щоб дізнатись про jpg, png, gif тощо. чию вагу можна зменшити, рекомендую використовувати інструмент, добре відомий SEO-менеджерам: GTmetrix. Ця онлайн-програма дозволяє отримати багато рекомендацій щодо загальної ефективності сторінок вашого сайту. Після введення URL-адреси вашого сайту ви отримуєте дві нотатки, одну на основі інструмента Google, «Швидкість сторінки», а іншу - Yahoo, Yslow.

вашого сайту

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

Підручник із стиснення зображень

Вам доступні два рішення: Метод GTmetrix або Метод фотошопу.

Метод GTmetrix

  • У GTmetrix натисніть "Переглянути оптимізований" та збережіть оптимізовану версію відповідного зображення,
  • Перейдіть до шляху до зображення на вашому FTP-сервері та перезапишіть старий на новий

Метод фотошопу

  • Відкрийте своє зображення у Photoshop,
  • У файлі натисніть "Зберегти для Інтернету",
  • У вікні, що відкриється, налаштуйте параметри *, щоб зменшити загальну вагу вашого зображення,
  • Збережіть своє зображення

* Зазвичай налаштування, які я змінюю, такі:

  • вибір формату файлу (jpg),
  • якість стиснення, яке я розміщую, становить 50%,
  • активація прогресивного режиму

А тепер уявіть, що вам доведеться вручну відтворити метод Photoshop для сотні зображень. Тривалий і нудний процес ... Дізнайтеся зараз, як одночасно оптимізувати кілька зображень за допомогою сценаріїв Photoshop.

Як автоматизувати процес стиснення зображень у Photoshop ?

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

  • На вкладці панелі навігації Photoshop виберіть «Вікно»> «Сценарії»,
  • У вікні, що відкриється, натисніть на піктограму для створення нового сценарію, заповніть різні поля та "збережіть" (з цього моменту всі дії, які ви виконуєте, зберігатимуться в пам'яті як скрипт і можуть бути виконані одним натисніть пізніше),
  • Тепер ми повинні зробити те, що повинен зробити сценарій для всіх інших файлів зображень, тобто стиснути їх, оскільки саме цього ми намагаємось досягти. Для цього натисніть Файл> Зберегти для Інтернету та повторіть операцію, описану в попередній точці (метод Photoshop).
  • Закрийте своє поточне зображення

Зараз ми автоматизуємо попередній процес:

  • Перейдіть на вкладку, де є інше зображення,
  • Виберіть Файл> Автоматизація> Пакетна обробка
  • У вікні, що відкриється:
    • Виберіть сценарій, який ви щойно створили, у меню Виконати> Сценарій,
    • У джерелі виберіть "Відкрити файли",
    • У пункті призначення введіть вибрану вами папку, в якій будуть збережені всі ваші оптимізовані зображення,
    • В назві файлу виберіть Ім'я документа + розширення,
    • Робіть добре, ваш скрипт працюватиме нормально

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