Повний посібник з оптимізації веб-зображень (WordPress)

Оновлено 21.05.2018 | Опубліковано 05.07.2017 | 3 коментарі

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

Ваші зображення в Інтернеті: домовленості, які потрібно поважати !

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

Правило № 1: дійте на свої зображення відповідно до кількох критеріїв

• Розміри: камери роблять високоякісні фотографії, зазвичай шириною понад 5000 пікселів. Однак для Інтернету ці зображення занадто великі. Зображення шириною від 600 до 1000 пікселів буде більш ніж достатньо(це залежить від його використання та використовуваної теми WordPress: зображення для ілюстрації статті, зображення для заголовка героя або фонове зображення не матиме однакової ширини). Зменшення розміру (Ш х В) зображення фактично зменшить його вагу. Це перший момент, за яким слід діяти. Однак обов’язково підтримувати "співвідношення" зображення, тобто пропорція між шириною та висотою.
• Дозвіл: ваші зображення можуть мати різні типи роздільної здатності, від 72 до 400 DPI (або PPP) - це число "Точок на дюйм" який визначає зернистість та якість зображення для друку. Для Інтернету, тип роздільної здатності не змінить вагу вашого зображення, тому вам не потрібно діяти за цим критерієм.
• Стиснення: більшість програм для редагування зображень дозволять вам впливати на якість стиснення на заданий відсоток. Якщо знизити цей відсоток, наприклад, від 100% до 80% (ви можете знизитися до 60%), ваше зображення не буде сильно втрачати в якості, але, з іншого боку, воно значно освітлиться.
• Вага: насправді не існує "ідеальної" ваги, але певно, що ваші зображення для вашого веб-сайту повинні бути якомога легше. В ідеалі, зображення менше 100 Кб було б гарним початком. Тоді слід врахувати кількість зображень на одній веб-сторінці.

Правило №2: дійте ПЕРЕД завантаженням своїх зображень у WordPress

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

• спеціальні символи ("#/@ & (,!’ + =.),
• символів з наголосом (епіаков ...),
• великі літери,
• і вам доведеться замініть ваші пробіли тире (тире 6 -/не тире 8 _ під назвою UNDERSCORE).

Наприклад: "Menu-sucre-sale.jpg" і ні "Menu_sucré _ & _ salé.jpg".

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

Правило №3: ДІЙТИ ПІСЛЯ завантаження ваших зображень у WordPress

Це остання фаза оптимізації. Після завантаження вашої фотографії в медіатеку ви можете і повинні:

• змінити НАЗВ: буде виглядати назва імпортованої фотографії "Меню-сукре-продаж" і ви можете замінити його на "Солодке та солоне меню мого кулінарного блогу"
• додати АЛЬТЕРНАТИВНИЙ ТЕКСТ: Додавання альтернативного тексту до ваших зображень є критичним з трьох причин. Перший - це це важливо для доступності, Тобто користувач Інтернету з вадами зору, який користується браузером із голосовою функцією, зможе побачити вміст цього зображення. Друге - це те, що цей текст буде звичним ваше природне посилання, так що подумайте там включіть ключові слова. По-третє, цей текст відображатиметься, коли браузер має проблеми з доставкою ваших зображень, особливо коли у користувача погана мережа.
• введіть ЛЕГЕНДУ та ОПИС: ці опції необов’язкові. Якщо ви хочете, щоб під вашим зображенням з’явився текст, вам потрібно буде ввести підпис.

Як стиснути зображення в Інтернеті ?

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

1. Спосіб за допомогою ФОТОШОПУ

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

• щоб відкрити зображення за допомогою Photoshop: клацніть правою кнопкою миші> відкрити за допомогою> Photoshop
  
• обрізати або ретушувати, якщо це необхідно
• перейдіть до Файл> Зберегти для Інтернету (або Файли> Зберегти для Інтернету)
• відкриється вікно, внизу праворуч ви побачите поточні розміри вашого зображення (Ш х В)
• введіть ширину (L), максимум від 600 до 1000 пікселів, потім просто клацніть на поле Height (H), співвідношення буде розраховане автоматично, не вводьте його самостійно.
• трохи знизити якість, щоб отримати відповідну вагу (угорі праворуч вікна)
• Ви можете перевірити вагу зображення (внизу ліворуч вікна)
• закінчити, натиснувши Зберегти

Метод за допомогою PhotoShop є швидким та ефективним.

2. Метод за допомогою AFFINITY DESIGNER або AFFINITY PHOTO

Ці два програмні засоби - Affinity Designer та Affinity Photo - зовсім недавні. Спочатку вони були створені для MAC, але їх успіх призвів до того, що вони були розширені для використання в Windows. Affinity Photo є "конкурентом" PhotoShop, а Affinity Designer - "конкурентом" Illustrator. Вони дуже потужні і мають велику перевагу в тому, що не вимагають від користувачів щомісячної передплати. Все, що вам потрібно зробити, це заплатити менше 50 євро за кожну заявку, лише один раз. Коротше кажучи, ми також можемо використовувати це програмне забезпечення для оптимізації ваших зображень для Інтернету.

• щоб відкрити зображення за допомогою Affinity Designer: клацніть правою кнопкою миші> відкрийте за допомогою> Affinity Designer
  
• обрізати, ретушувати або коментувати, якщо це необхідно
• у меню перейдіть у меню Файл> Експорт
• відкриється вікно, виберіть тип розширення (PNG, JPEG тощо ...)
• встановити розмір (від 600 до 1000 пікселів)
• відрегулюйте якість, щоб отримати ідеальне співвідношення компресії/ваги
• натисніть Експорт
• відкриється друге вікно для визначення назви вашого зображення та його розташування
• закінчити Зберегти

• щоб відкрити зображення за допомогою Affinity Photo: клацніть правою кнопкою миші> відкрийте за допомогою> Affinity Photo
  
• обрізати або ретушувати, якщо це необхідно
• у меню перейдіть у меню Файл> Експорт
• відкриється вікно, виберіть тип розширення (PNG, JPEG тощо ...)
• встановити розмір (від 600 до 1000 пікселів)
• відрегулюйте якість, щоб отримати ідеальне співвідношення компресії/ваги
• натисніть Експорт
• відкриється друге вікно для визначення назви вашого зображення та його розташування
• закінчити Зберегти

Зауважте, що якість стиснення цих двох програм відмінна, а методи однакові у всіх відношеннях! Однак я не рекомендую здійснювати експорт через Persona Export, оскільки ви не можете визначити вагу, лише рівень якості ...

3. Метод з GIMP

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

• щоб відкрити зображення за допомогою GIMP: клацніть правою кнопкою миші> відкрити за допомогою> GIMP
• у меню GIMP перейдіть до Зображення> Масштаб та розмір зображення
• відкриється вікно, перевірте, чи ланцюжок співвідношень закрита (піктограма посилання)
• встановіть ширину максимум від 600 до 1000 пікселів (залежно від кінцевого використання вашого зображення)
  
• залиште роздільну здатність на кількості вказаних пікселів, наприклад "72 в х" і "72 в у"
• залиште інтерполяцію на кубічну
• завершіть, натиснувши на масштаб
• потім перейдіть до Файл> Експортувати як
• перейменуйте своє зображення
• натисніть Експорт
• відкриється останнє спливаюче вікно, щоб визначити якість стиснення: знижуйте його, поки не отримаєте ідеальну вагу

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

4. Метод PREVIEW

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

• відкрийте свою фотографію за допомогою попереднього перегляду (двічі клацніть на фотографії або клацніть правою кнопкою миші> відкрити за допомогою> попередній перегляд)
• перейдіть до Інструменти> Налаштувати розмір (у рядку меню Попередній перегляд)
• відкриється вікно, а потім введіть ширину в пікселях: від 600 до 1000 пікселів
• залиште роздільну здатність на кількості вказаних пікселів/дюймів
• перевірте два доступні варіанти («пропорційна шкала» та «знову зразок зображення»)
• завершити, натиснувши ОК
• потім перейдіть до Файл> Експорт (у рядку меню Попередній перегляд)
• виберіть формат JPEG
• вибирайте якість за допомогою повзунка, поки не отримаєте бажаний розмір файлу (на скріншоті вище розмір файлу становить 118 кб)
• закінчити Зберегти

• виберіть кілька зображень одного типу (всі у портретному форматі або всі у альбомному форматі)
• клацніть правою кнопкою миші> відкрити за допомогою> Попередній перегляд
• зображення з’являються в лівій колонці попереднього перегляду одне під іншим
• у меню Попередній перегляд перейдіть до Редагувати> Виділити все
• потім перейдіть до Інструменти> Налаштувати розмір: встановіть ширину від 600 до 1000 пікселів. Не вводьте висоту зображення, це буде зроблено пропорційно
• залиште роздільну здатність на кількості вказаних пікселів/дюймів
• перевірте два доступні варіанти («пропорційна шкала» та «знову зразок зображення»)
• завершити, натиснувши ОК
• потім перейдіть у меню Файл> Експортувати вибрані зображення (у рядку меню Попередній перегляд)
• натисніть на Параметри, розташовану внизу щойно відкритого вікна, щоб відобразити лінійку визначення формату (виберіть JPEG) та якість
• закінчити з Select

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

5. Спосіб з LIGHTROOM

Дуже скоро ви знайдете цей підручник тут ...

На закінчення ...

Дійсно, деякі мої клієнти знаходять це оптимізація зображень для Інтернету - це дуже важкий крок для управління. На жаль, вам не вдасться уникнути цього, оскільки це один з найкращих способів освітлити ваш сайт. Однак, ви можете вийти за межі цього процесу, тобто ви можете зробити оптимізацію на крок далі, використовуючи CDN, такі як плагіни для оптимізації УЯВИТИ або Інтернет-інструменти, такі як TinyPNG.

1. Змініть розмір ваших зображень, щоб ширина становила від 600 до 1000 пікселів (навіть більше, залежно від використання вашого зображення)
2. Стисніть якість зображення під час експорту: від 100% до 80%, наприклад
3. Перейменуйте своє зображення належним чином: без великих літер, без наголосів, без спеціальних символів, без пробілів, без підкреслення, але з тире
4. Завантажте свої фотографії на свій сайт
5. Заповніть свої зображення заголовком та альтернативним текстом, що містить ключові слова

Як оптимізувати свої зображення для Інтернету: керівництво з Photoshop/Affinity/Gimp/Mac Preview

---