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

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

Тип і формат файлу

Цифрову графіку можна розділити на два типи – растрову та векторну.

Растрові файли — це класичні зображення, що складаються із сотень тисяч (і навіть мільйонів) пікселів, створюючи, наприклад, високоякісне фото. Перевагою растрових зображень є висока деталізація, але за рахунок великого розміру файлу, навіть до кількох мегабайтів. Тому перед публікацією в Інтернеті необхідно їх стиснути. Занадто сильне стиснення робить растровий файл легким, але абсолютно нечитабельним для глядача.

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

Також є кілька форматів файлів на вибір, у яких можна зберігати зображення —  .jpg, .png або .gif.

Найпоширенішими зображеннями в Інтернеті є так звані «jotpegs» – тобто файли з розширенням .jpg. Це формат із втратами, що означає, що деяка інформація на фотографії чи графіку буде безповоротно втрачена під час перетворення. Як говорилося раніше – такий файл буде важити менше (не кілька мегабайтів, а максимум кілька десятків кілобайт), але чим вище коефіцієнт перетворення, тим більш нечитабельним стає зображення. Найкраще зберігати фотографії з великою кількістю деталей у форматі .jpg – наприклад, фотографії товару.

Файли у форматі .png пропонують конвертацію без втрат, що дозволяє зберегти всі найважливіші деталі зображення – ціною збільшення ваги файлу. У цьому форматі найкраще працює графіка, яка містить текст або логотипи.

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

Графічні розміри

Важливим з точки зору позиціонування та зручності використання вебсайту є забезпечення правильних розмірів (а також пропорцій) фотографій, опублікованих на вебсайті. Для персональних комп’ютерів найкращим рішенням буде використання співвідношення сторін 16:9, яке становить, наприклад, 1280×720 пікселів – це дозволить відображати графіку більшою на екрані. У разі мобільних пристроїв варто використовувати співвідношення сторін 1:1, тобто розмір, наприклад, 1080×1080 пікселів. Квадратні фотографії або зображення набагато краще заповнюють простір невеликих дисплеїв телефонів.

Найменування файлів

Поширеною помилкою є залишення назв файлів зображень за замовчуванням і публікація їх на сторінці без змін. В результаті пошукові системи не можуть «прочитати» те, що насправді на фото. Тому замість «IMG_1234.jpg» варто перейменувати зображення, наприклад, «positioning-graphic.jpg», що зробить його набагато помітнішим для роботів Google.

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

Зменшення ваги файлу зображення

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

Останній метод особливо рекомендований, оскільки він швидкий і дозволяє дійсно зменшити велику графіку, не обов’язково з втратою якості. У мережі доступно багато онлайн-інструментів, які полегшують стискання графіки (наприклад, tinyJPG.com – за словами розробників, вага файлу можна зменшити до 70%!), Ви також можете використовувати безкоштовні плагіни для CMS системи, які можуть автоматично зменшувати розмір файлів, що надсилаються на сервер.

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