Оптимізація зображень для веб-спілкування Orignal
Я вирішив проілюструвати цю статтю карткою "Gorilla de Beringeï" 3-го видання чорних країв гри "Magic The Gathering", щоб порадувати свого старшого брата, а також кума моєї дочки Квентіна та Ромена.
Співвідношення вага/якість
Багато з нас регулярно публікують зображення в Інтернеті. У соціальних мережах (Facebook, Twitter, Instagram, Google + ...) ми навіть не ставимо питання формату та стиснення, вони про все дбають. Насправді Facebook часто критикують за надто руйнівний алгоритм обробки зображень.
Але коли ви розміщуєте публікації у своєму блозі чи на веб-сайті, ви все контролюєте. Вам доведеться стискати ваші зображення самостійно, і саме тут неправильний вибір може зіпсувати ваші письмові зусилля. Занадто стиснене зображення не покращить ваш вміст. Навпаки, зображення із занадто високою роздільною здатністю буде завантажуватися занадто довго, і значна кількість користувачів Інтернету покине вашу сторінку, перш ніж зможе її прочитати. Завданням зображень в Інтернеті є досягнення найкращого співвідношення ВАГА/ЯКІСТЬ
Зліва зображення було дуже сильно стиснуто для ваги 7 Кб.
В середині із середнім стисненням ми отримуємо вагу 25kb
Праворуч із дуже низьким стисненням ми отримуємо вагу 90 кб.
Зверніть увагу, що зображення ліворуч, хоч і дуже світле, але абсолютно нечитабельне, оскільки воно стиснене. На інших двох зображеннях текст легко читати, зображення виглядає чітко (натисніть на зображення, щоб переглянути його у великому розмірі). Отже, ідеальним є вибір середнього зображення, оскільки воно в 3 рази світліше !
Гаразд, але як же тоді отримати найкраще співвідношення якості/ваги? ?
Поставте потрібну кількість пікселів
Розмір зображення на екрані визначається кількістю пікселів. Якщо все зроблено правильно, ваш веб-сайт буде відображати ваші зображення на певній ширині, незалежно від їх початкового розміру (забудьмо про чуйність, щоб не ускладнювати без потреби). Отже, якщо ви завантажите у свій блог 4000-піксельне зображення (типовий розмір цифрової камери), воно відобразиться на рівні 600 пікселів (стандартна ширина повідомлення в блозі). Отже, ви завантажите занадто велику фотографію, яка зайво сповільнить завантаження сторінки.
Щоб вирішити цю проблему, пройдіться в Photoshop на вкладці "зображення> розмір зображення" і зменште зображення до потрібної кількості пікселів. Розмір в см та визначення значення не мають значення, а має значення висота та ширина в пікселях. Обов’язково встановіть прапорець “передискретизація”, щоб мати змогу змінювати розміри в пікселях.
GIF, JPG або PNG ?
Після того, як зображення має правильний розмір, його потрібно зберегти у правильному форматі. Jpg, хоча найпоширеніший, не завжди є найбільш підходящим.
PNG: виберіть цей формат, оскільки він підтримує прозорі плівки. Дійсно, завдяки його 256 рівням прозорості ви зможете розміщувати свої обрізані зображення на кольоровому фоні вашого веб-сайту з якісною обробкою. Однак цей формат не використовується для не обрізаних зображень, оскільки розмір файлу набагато більший, ніж розмір jpg.
Приклад зображення у форматі PNG
GIF: зірка 90-х, GIF застарів, перш ніж повернути свої знатні листи за останні роки. Цей "чарівний" формат дозволяє проводити будь-які висловлювання, зокрема завдяки його здатності анімуватися. Він також підтримує прозорість, але набагато менш витончено, ніж png, оскільки він розуміє лише один рівень. Він також характеризується обмеженою кількістю кольорів. Зрозуміло, що для фотографії це зовсім не відповідний формат, але для зображення, що складається з твердих тіл, логотипу, піктограми, векторної ілюстрації, це ідеальний кандидат.
Зразок зображення GIF
Jpg: популярний формат, відмінний і нестримний, jpg ідеально пристосований до стиснення фотографій. Ще потрібно знати, як виміряти ступінь стиснення, щоб не надто зруйнувати зображення.
Приклад зображення у форматі JPG
Добре стискайте за допомогою Photoshop
У Photoshop є чудовий інструмент, це функція "зберегти для Інтернету" (у меню "файл"). Це дозволяє отримати максимально світлі зображення, видаливши непотрібну інформацію з метаданих. Ця функція дозволяє вам зберігати у різних форматах зображень, наведені вище, але я зупинюсь на jpg, який є найцікавішим.
- Зліва зображення 450px, стиснене в якості JPG 4/12 при звичайному записі = 57kb
- Справа зображення 450px, стиснене у форматі jpg якості 40/100 з функцією save for the web = 35kb
Для візуально ідентичного результату ми отримуємо за допомогою функції "зберегти для Інтернету" файл на 40% легший !
Це магія! Тож давайте подивимось, як виглядає «зареєструватися в Інтернеті».
Перед вами 4 ескізи зображення, що показують 4 рівні стиснення (вага відображається під кожним зображенням). Судячи з найкращим співвідношенням, проводиться на око. Праворуч у вас є повзунок стиснення (якості). Будьте обережні, щоб не стискати занадто важку руку. Занадто стиснене зображення не приносить користі. Вам потрібно стискати рівно стільки, щоб стиснення не було видно.
У наведеному вище прикладі я вважаю, що найкраще стиснення знаходиться внизу ліворуч, тобто якість: 50 на 20 Кб .
Є також ціла купа більш-менш корисних варіантів, але я не буду зупинятися тут, щоб їх описувати, головне, вибрати правильний формат і правильне стиснення.
Натисніть "Зберегти" (з веб-сумісною назвою, тобто без пробілів та наголосів) і вуаля, все закінчено. Більше, ніж завантаження на ваш сайт. Ви побачите, як приємно швидко бачити, як завантажується ваша сторінка.
Кінцевий фокус графічного дизайнера !
У боротьбі за співвідношення вага/якість, яку ведуть графічні дизайнери по всьому світу (не розробники, їм байдуже за якість, лише вага важить для них, grrr), деякі знайшли дуже ефективне рішення.
На відміну від того, що я сказав вам вище, замість того, щоб розміщувати зображення у потрібному для веб-сайту форматі (приклад 600px), його потрібно розмістити вдвічі більшим (1200px) та зберегти у дуже стиснутому jpg (якість: 5 або 10% ). Оскільки алгоритм стиснення jpg дуже потужний, зображення буде дуже світлим, але воно також буде дуже стисненим. Але оскільки зображення, видиме на сайті, буде зменшено вдвічі (відображатиметься з роздільною здатністю 600 пікселів), то стиснення не буде видно. І вибух, магія !
Приклад зображення 900px, якість 40 = 77kb
Приклад зображення 1500 пікселів, якість 0 = 63 кб
Зображення розміром 1500 пікселів на 20% легше та візуально таке ж гарне.
Отже, все до вашого Photoshop та гарного стиснення 🙂