Оптимізація зображення для сайту: вимоги до розміру, формату і смислового наповнення
Зміст:
Фото на сайті – це значимий контент, який багато в чому може вплинути на ставлення і дії користувачів. Щоб правильно вибрати картинку, враховують чимало параметрів – умовно розділимо їх на дві групи: технічні характеристики і наповнення.
Технічні характеристики фото для сайту
Важливе завдання при оптимізації і редизайн сайту – додати картинки, які будуть добре грузиться, гармонійно виглядати і при цьому відрізнятися достатньою якістю для передачі ключової інформації.
Розмір і вага фотографії
Якщо знімки зроблені на професійний фотоапарат або телефон з гідною камерою, вони матимуть велику вагу. Чим більше таких фотографій на сторінці, тим повільніше вона подгружается навіть при високій швидкості інтернету. Якість індексації в такому випадку падає, тому всі картинки потрібно привести в оптимальний стан.
Розмір фото для сайту вимірюється в пікселях. Хороший варіант для більшості ситуацій – 1000х1000 px. Найчастіше показники при завантаженні вказуються вручну, але є движки, в яких оптимізація відбувається автоматично – вивчіть можливості платформи, з якою працюєте.
Що стосується ваги, яка вимірюється в кілобайтах, то для більшості картинок хороший варіант – це 200-400 кілобайт. Чим менше вага, тим швидше завантажується сторінка, але не забувайте про якість – зображення повинне бути чітким і давати можливість розглянути деталі (якщо це необхідно).
Важливо! Для кращого візуального сприйняття контенту намагайтеся робити все зображення і скріншоти на сторінці одного розміру – такого, який не губиться на тлі тексту.
Формат зображень для сайту
Коригуючи розмір картинки для сайту, можна отримати різний результат залежно від того, який формат спочатку був у фотографії. Ось три найбільш поширених формати:
- JPEG. Залежно від початкової якості картинки дозволяє провести стиснення без втрати чіткості. Підходить в тому випадку, якщо потрібно зберегти детальність.
- PNG. Також зберігає детальність, а ще добре підходить в тому випадку, якщо на зображенні багато рівних заливок.
- GIF. Формат для додавання на сайт анімації.
Коментар експерта: Щоб змінити параметри з мінімальною втратою якості, скористайтеся послугами сервісів JPEGmini і TinyPNG.
Оптимальні пропорції
Важлива не тільки оптимальна вага картинок для сайту, але і те, які пропорції в неї. Для сайтів використовуються кілька видів прямокутника: високий (4: 3), простий (3: 2), низький (16: 9) – а також квадрат (1: 1).
Виділення кадру і мініатюри
Якщо оптимальний розмір фото для сайту не дозволяє розглянути необхідні деталі, можна використовувати одну хитрість. Ту ділянку, яка особливо важлива для читача, за допомогою Photoshop накладіть в потрібному розмірі додатковим кадром на основне зображення або просто додайте окрему картинку. Так ви збережете відповідні параметри всього фото, але виділите значимі місця.
Обов’язково використовуйте мініатюри – якщо движок сайту не передбачає, що вони створюються автоматично, параметри можна привести до необхідних показників вручну. В пікселях оптимальний розмір зображення для сайту саме під мініатюру становить 250. Вага не повиненна перевищувати 50 кілобайт. Очевидно, що при таких показниках ні про яку деталізацію немає й мови, тому вибирайте для міні-зображень чіткі і зрозумілі картинки, посил яких зрозумілий навіть при таких умовах.
Налаштування різкості зображення
Оскільки оптимальний дозвіл фото для сайту часто досягається шляхом зменшення картинки, різкість і деталізація при таких маніпуляціях неминуче страждають. Щоб уникнути цього ефекту, використовуйте спеціальні параметри Bicubic Sharper в редакторі Photoshop.
Коментар експерта: Великі знімки необхідно зменшувати і налаштовувати поступово – не більше ніж на 1000 пікселів за один раз. Після кожного зменшуйте сторінку за допомогою параметру Bicubic Sharper.
Не тільки Photoshop: інші доступні редактори
Щоб змінити роздільну здатність фото для сайту і здійснити інші налаштування, необов’язково використовувати виключно популярний Photoshop. Є й інші зручні програми, програми: GIMP, Paint (для дуже простих завдань), PicMonkey (онлайн-режим), Pixlr (часткова заміна Photoshop). Всі програми, виключаючи PicMonkey, легко встановлюються на MacOS і Windows. Для кожної в мережі є покрокова інструкція і багато навчальних роликів, що дозволяють освоїти як прості, так і досить складні завдання для просунутих користувачів.
Змістове наповнення та інші особливості картинок для сайту
Роздільна здатність картинки для сайту – це те, чим ми не можемо обмежуватися, коли мова йде про якість візуального контенту. Дуже важливо розуміти, що саме бачить користувач. І тут теж є кілька рекомендацій.
Релевантність бренду, корпоративного стилю сайту і контенту
Фотографії потрібні не для того, щоб розбавити контент і зробити його нудним – вони необхідні, щоб підтримати текстову інформацію, а також сформувати у користувача певне ставлення до компанії, її візуальний образ.
На бізнес-сайті необхідний візуал, що асоціюється з ділової сферою і тим напрямком, яким займається фірма. Інтернет-магазин заповнюють фотографіями товарів – максимально якісними і детальними, а просто зображення для краси там недоречні. Навіть на розважальних майданчиках картинки підтримують загальний посил статті, а не додаються бездумно.
Які картинки на сайті працюють найкраще?
Вибравши формат фото для сайту, подумайте про його наповнення. Ось кілька корисних порад:
- Використовуйте більше зображень людей. На такі картинки відвідувачі реагують краще. А в магазинах одягу вироби рекламуються ефективніше, якщо вони знаходяться на моделях. А ще читачам подобаються фотографії домашніх улюбленців (тварин, собак), якщо це відповідає завданням майданчика.
- Робіть ставку на емоційність. Людина з щирою посмішкою підсвідомо сприймається нами позитивно, асоціюється з чимось безпечним.
- Проявляйте оригінальність. Шукайте або робіть знімки, які не схожі на все інше. Наприклад, можна надихнутися контентом, створеним National Geographic.
- Створюйте унікальні знімки. Якщо фінансові можливості дозволяють, краще всього замовити фото для створення сайту у професійного фотографа.
- Враховуйте дизайн сайту. Якою б гарною не була картинка, якщо вона не вписується в загальний дизайн майданчика, краще її не використовувати – вона ризикує зіпсувати все враження.
- Наносите на зображення логотип тільки в тому випадку, якщо це необхідно і не псує загальне враження від фото.
Приклад фото від National Geographic
Кольорова гама
Акуратніше треба бути і з підбором кольорів. Пам’ятайте, що деякі кольори – наприклад, яскраво-червоний – стимулюють, а інші заспокоюють. З цієї причини, наприклад, більшість сайтів приватних клінік виконуються в дуже м’яких відтінках – їх роблять зеленими, блакитними, бежевими, щоб налаштувати пацієнта на спокійний лад.
Важливо! При виборі картинок діє той же принцип: яскраві кольори вибираються тоді, коли потрібно стимулювати настрій читача, а світлі і м’які беруть в тому випадку, коли реакція повинна бути спокійною.
Оптимізація сайту – це складний, копіткий процес, що вимагає використання безлічі інструментів. І розмір зображень для сайту, а також правильний вибір наповнення фото – це лише мала частина такого завдання. Але без правильного підходу до візуального контенту можна втратити багато клієнтів, тому поставитися до підбору фотографій або малюнків потрібно вкрай серйозно.
