Школа SMM: як досягти ідеальної якості картинки у Facebook-пості?

Я працюю в сфері SMM вже три роки. Як і багато моїх колег, часом стикаюся з цікавими проблемами у роботі з соцмережами. Цього разу вирішила поділитися з товариством своїм останнім дослідженням. Справа в тому, що під час роботи із сторінкою DACourseUA у Facebook ми зіштовхнулися із проблемою збереження якості оригінального дизайну картинок при завантаженні та їх публікації на сторінці. Маю на увазі різноманітні спотворення кольорів, появу так званих «артефактів» (хвильок, розмитих країв і т.д). Адже щоб сторінка викликала довіру та стимулювала розвиток бренду, необхідно, щоб усе було ідеально. А коли твої зусилля з пошуку крутого зображення та перетворення його на брендовану картинку для поста завершуються паплюженням усіх кольорів та пошматованими контурами, це мало кому сподобається.

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

Перейдемо до суті — потрібно розуміти, що FB стискає деякі зображення досить агресивно, коли ви завантажуєте їх в соціальну мережу. Хоча якість від цього страждає, у соцмережі є на це абсолютно вагомі причини — це прискорює завантаження сторінок і робить сайт швидшим для користувачів. Таким чином Facebook збільшує пропускну здатність мережі (відбиває обсяг даних, переданих мережею або її частиною в одиницю часу) та економить на об’ємі пам’яті для зберігання даних, і все це за рахунок стискування картинок до мінімально допустимих розмірів. Як на мене, вони стискають зображення занадто, але важливо відмітити, що рівень стиснення залежить від діапазону кольорів та кількості деталей на знімку.

Наприклад, деякі користувачі FB повідомляють, що зображення з великою кількістю червоних та помаранчевих кольорів піддаються більшому впливу стискування на відміну від тих, на яких переважають блакитні та зелені кольори, але все залежить від окремо взятої картинки. А що робити якщо червона гама — це кольори вашого бренду?

Як бути з білими літерами на червоному фоні?

Ще один дивний факт, який ми помітили — якість зображення залежить від того, де та в який спосіб ви його показуєте на сторінці. Фотогалерея зображень, наприклад, менше стискається при завантаженні, ніж елементи дизайну, такі як профільна картинка та обкладинка. Таким чином, одна й та сама картинка буде виглядати краще у фотогалереї ніж на аві. Але ж аватар та обкладинка — це обличчя сторінки та бренду! Як бачимо на картинці нижче, якість аватарки офіційної сторінки Nutella в ФБ постраждала.

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

Порада №1: не завантажуйте картинки в JPEG-форматі, натомість завантажуйте їх в PNG-24 форматі

Таким чином, якість картинок не постраждає. Сам Facebook дає зрадливі поради про те, що зображення потрібно зберігати у JPEG, що, як ви скоро побачите, невірно. Іноді навіть добре, що до цієї поради важко докопатися у тонах справочних матеріалів :).

Спочатку ми не могли зрозуміти, чому деякі формати виглядають після завантаження в FB краще за інші, адже всі вони конвертуються в JPEG в будь-якому випадку. І тут доречною виявилася стаття “GIF, PNG, JPG. Which One To Use?” та експерименти із завантаженням зображень різного формату. Між тим, всім рекомендую мати тестову сторінку або як я її називаю “Сторінка сумнівів” :).

Як JPEG (або JPG), так і PNG — досить популярні формати файлів для зображень. Обидва використовують стиснення, щоб зменшити розмір файлу. Тоді в чому ж різниця?

JPEG використовує те, що називається стиснення з втратами. Це означає, що деяка інформація (і, отже, якість) відкидається, коли зберігається. JPEG дуже добре використовувати для фотографій.

PNG використовує стиснення без втрат. Цей формат частіше використовується для зберігання графічних файлів (лого, іконки, флетовські блоки, градієнти і інші елементи графічного дизайну). Є два різновиди PNG: PNG-8, який може включати в себе до 256 кольорів, і PNG-24, який може мати до 16 мільйонів кольорів. У більшості випадків, файли у форматі PNG-8 будуть значно менші, ніж PNG-24 зображення, але PNG-24 діє краще з гладкими градієнтами.

Так навіщо використовувати PNG-24, а не JPEG формат зображення для завантаження в Facebook? Коли ви завантажуєте файл JPEG в FB, він отримує подвійний удар стиснення. Перший — при збереженні оригінального файлу в JPEG, другий — від Facebook. Так як JPEG-стиснення від FB є досить агресивним, то є всі шанси отримати хвильки навколо тексту. На зразок тих, що на картинці.

Але коли ви завантажуєте зображення формату PNG-24, Facebook не перетворює його в JPEG, тому що PNG використовує стиснення без втрат, якість зображення не буде порушена.

Ось, що ви отримаєте при завантаженні PNG:

Обидва зображення вказані вище, були завантажені в ФБ та пережили стиснення від ФБ. Обидва були завантажені безпосередньо з таймлайну. Але як ви можете бачити, PNG зображення набагато чіткіше.

Тепер перейдемо до нашої другої поради — технічної сторони управління кольорами, і спробуємо розібратися в налаштуваннях Photoshop для збереження картинок в форматі PNG-24 та додатково виставити налаштування кольорів.

Порада №2 — Установка режиму у Photoshop Color  

Перший крок — переконатися, що ваші “Налаштування кольору (Color Settings)” встановлені на sRGB (стандарт подання колірного спектру з використанням моделі RGB. sRGB створений спільно компаніями HP та Microsoft у 1996 року для уніфікації використання моделі RGB в моніторах, принтерах та інтернет-сайтах) і не використовують успадковані профілі та не підлаштовуються під специфічні монітори. Ці інструкції ми приводимо для Photoshop CS6 x64, хоча ми припускаємо, що аналогічні настройки є і в інших програмах дизайну, тому якщо ви не використовуєте Photoshop — пошукайте аналоги. Щоб змінити настройки перейдіть до “Правка (Edit)” > “Налаштування кольору (Color Settings)”.

Крок 1 — Робочий Простір (Working Space)

На зображенні вгорі ви бачите поле “Робочий Простір (Working Space)”, налаштування якого Photoshop буде використовувати по замовчуванню для відображення. Нам необхідно обрати sRGB, тому що його використовують як стандарт веб-браузери. Це зменшить різницю між кольорами, що ви бачите у комп’ютерній версії зображення та тією, яку відображатиме браузер.

Крок 2 — Політика Управління Кольорами (Color Management Policies)

Перемкнувши цей показник на «OFF», ви отримаєте одразу подвійне спрощення роботи: вимкнете управління кольорами для новостворених документів, а також ігноруватимете колірні профілі, вбудовані в існуючі документи. Якщо ваші старі файли не використовують sRGB, вони одразу будуть відкриватися з цим профілем. Таким чином і в нових і в старих документах ми будемо працювати з sRGB.

Порада №3 – Налаштування збереження для Web

Одна з чудових функцій Photoshop — це “Зберегти для Веб (Save for Web)”. Крім суттєвого стиснення, вона забезпечує нас хорошими інструментами перегляду та настройками для створення оптимізованих зображень. Нижче наведено 3 налаштування, на які ви повинні звернути увагу, щоб кольори добре відображалися в браузерах. Ці настройки застосовуються до форматів JPG, GIF і PNG (як 24bit і 8bit).

Крок 1 — Передустановки (Preset)

У Photoshop-і заходимо в “Файл (File)” > “Зберегти для Веб (Save for Web)” та в діалоговому вікні, що відкриється в налаштуваннях “Передустановки (Preset)” вибираємо PNG-24.

Крок 2 — Конвертувати в sRGB (Convert to sRGB)

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

Крок 3 — Попередній перегляд (Preview)

Повинен бути встановлений на “Internet Standard RGB (No Color Management)” як вказано на скріншоті вище.

Вуаля! Тепер ви можете насолоджуватися результатом своєї праці — швидким та невибагливим збереженням зображень для Фейсбуку. Ваша сторінка, певна річ, буде виглядати на всі 100%. Ця версія управління кольорами та якістю зображень, ми використовуємо і в інших соціальних мережах, проте ми не тестували її ніде крім Фейсбуку. Якщо у вас є інші методи або приклади роботи з зображеннями у соц. мережах, ми б хотіли їх почути. Дякуємо за увагу, та сподіваємося ця стаття була корисною для вас та аудіторії вашої сторінки 😉

Автор: Тетяна Андрюшко,

SMM-ментор курсу “Інтернет Маркетинг для Стартапів” від DA Course UA.