Готуємо картинки для сайту без Photoshop
Раніше ми вже давали список рекомендацій для картинок і відео, розміщених на сайті, ось в цій статті. Якщо коротко, то картинки повинні бути:
- оригінальними (щоб не «муляти людям очі одними і тими ж картинками з сайту на сайт);
- якісними (без размытостей або шуму);
- з правильним співвідношенням розмір/вага/якість (щоб сторінка завантажилася за 2-4 секунди, а не 20-40 – таких терплячих мало).
Але краще 1 раз зробити самому, ніж 100 разів прочитати. Тому сьогодні займемося суто практикою.
Припустимо, що ми пишемо статтю про те, які житлові комплекси будує компанія-забудовник, і хочемо розбавити сухий текст картинками.
Крок 1. Підбираємо картинку
Найпростіше відкрити пошуковик і взяти з просторів інтернету чи не перше-ліпше зображення типового житлового комплексу:
Але якщо ви поставите себе на місце потенційних клієнтів своєї компанії, то зрозумієте, що вам би хотілося побачити фотографії реально побудованих будинків.
Тому беремо фотоапарат і йдемо фотографувати. Отримуємо більш реалістичне фото:
Якщо ви пишете про щось більш абстрактне, наприклад, про користь ранкових пробіжок, то в цьому випадку реальність зображення не важлива. Наприклад, можна пошукати щось надихаюче:
Фотографія була взята з сайту https://unsplash.com/ – це збірка безкоштовних фотографій гарної якості. Ще один аналогічний сайт – http://isorepublic.com/
Пара слів про те, чи потрібно замовляти картинки для сайту у професійних фотографів. Якщо пишете інформаційну статтю або описуєте якусь акцію чи складаєте анонс заходу – немає сенсу витрачати час і гроші, досить картинок з мережі або фотографій зі звичайного фотоапарата.
Якщо ж ви робите сторінку з описом товару, настійно рекомендую замовляти якісні фотографії. Це впливає на конверсію. Подивіться на професійне фото настільної гри:
Погодьтеся, вже хочеться купити. Тут правильний світло, тло, колір, яскравість та інше. Товар виглядає реальним і якісним.
Крок 2. Оптимізуємо розміри, вага, яскравість картинки
Отже, фотографію ми вибрали (сходили і зняли на звичайний фотоапарат) і завантажили на комп’ютер, вийшов ось такий оригінал.
Тепер подивимося на його параметри. Для цього наводимо курсор миші на картинку, і над нею спливає інформація:
У пункті «Розміри» вказані ширина і висота фотографії – 1944 2592 пікселів. У рядку нижче «Розмір» – це вага фотографії – 2,32 мб.
Це великі розміри. Така картинка, по-перше, займе всю ширину сторінки (і навіть більше). По-друге, буде завантажуватися 20-40 секунд. Висновок: картинку треба зменшити.
Для роботи з картинками можна використовувати спеціальні програми, наприклад, той же Photoshop. Але розібратися з ним не так просто.
Тому ми скористаємося одним з онлайн-редакторів зображень. Я вибрала https://fotostars.me/. Можливо, ви знайдете інший, але основні дії у всіх цих редакторах збігаються.
Відкриваємо онлайн-редактор, тиснемо кнопку «Редагувати фото». Завантажуємо наше зображення.
Спочатку зменшимо розмір картинки (ширину і висоту). Вибираємо справа «Змінити розмір»:
Вказуємо потрібні розміри. Наприклад, поставимо ширину 900 пікселів. Цього достатньо, щоб розглянути деталі на фотографії. Потім натискаємо «Готово»:
Тепер можемо обрізати фотографію, якщо вважаємо, що на ній є щось зайве по краях. Вибираємо «Обрізати»:
Перетягуємо мишкою краю рамки, виділяючи потрібну нам частина картинки. Натискаємо «Готово».
Ще можна змінити яскравість і контраст фотографії. Наприклад, якщо ви робили знімок у похмурий день. Вибираємо пункт «Кольори»:
Перетягуємо бігунки «Яскравість» і «Контраст» і дивимося як змінюється наша картинка (вона зліва):
Ще один цікавий інструмент – «Температура»:
Пересуваючи бігунок, можна зробити фотографію більш теплій, сонячній:
Для любителів «погратися зі шрифтами» є набір готових фільтрів – пункт «Ефекти»:
Наприклад, можемо вибрати ефект «Мадрид»:
Розмір і яскравість картинки ми змінили, тепер потрібно її зберегти, тиснемо на іконку «Завантажити» вгорі праворуч:
Відкриється вікно «Параметри збереження». Тут відзначимо якість 75% – картинка збережеться з оптимальним для веба співвідношенням вага/якість.
Тиснемо «Зберегти». Тепер нам треба вказати ім’я картинки. Напишемо назву на латиниці і без пробілів, прогалини можна замінити на дефіс (-) або символ підкреслення (_). Хоча кирилицю і прогалини добре сприймають практично всі браузери, завжди є ймовірність (нехай і мала), що у одного з клієнтів картинка не з’явиться з-за якого-небудь символу кирилиці в назві. Тому краще підстрахуватися.
Перевіряємо тепер параметри фотографії:
Вага картинки зменшився в 7 разів. Вже краще, але можна ще трохи більше «стиснути» картинку в сервісі https://tinypng.com/. Відкриваємо сайт і перетягуємо нашу картинку в зелену рамку праворуч від життєрадісною панди:
Панда стискає нашу картинку ще на 29%. Викачуємо результат за посиланням «завантажити»:
Взагалі, 235 кілобайт – це теж досить «важка» картинка. Для розміщення на сайті добре підходять картинки вагою до 50-60 Кб. Але зробити «легше» цю картинку ми вже не можемо, інакше вона стане поганий за якістю.
Але ми можемо зробити «прев’ю» – зменшену копію зображення. Якщо користувача зацікавить картинка, він клацне по ній і подивиться у великому розмірі.
Знову йдемо в фоторедактор (яким користувалися вище), змінюємо розмір картинки на 300*375 пікселів і зберігаємо, але тільки з іншою назвою, наприклад, додаємо «_preview».
Подивимося на розміри картинки-превью:
Тепер вага картинки прийнятний. Можемо викладати її на сторінку.
Крок 3. Розміщуємо картинку на сторінці
Зробимо на прикладі WordPress (в інших адмінках процес в цілому аналогічний).
Створюємо сторінку, пишемо текст. Ставимо курсор туди, куди хочемо поставити картинку, і тиснемо кнопку «Додати медиафайл» (або шукайте кнопку з піктограмою «Картинка»).
Завантажуємо в бібліотеку файлів обидві картинки – оброблену нами велику картинку і її превью. Спочатку виділимо велику картинку і скопіюємо її URL (адресу), він нам знадобиться трохи далі.
Тепер виділимо картинку-превью і праворуч заповнимо короткий опис картинки (той самий атрибут alt, який вимагають заповнювати всі оптимізатори, і ми в тому числі).
Далі тиснемо «Додати запис» (саме для превью). Картинка вставилась в текст:
Тепер виділяємо картинку і тиснемо на іконку для додавання посилання. У вікні вказуємо адресу великий картинки, який ми скопіювали трохи вище. Також відзначаємо галочку «відкрити у новій вкладці»:
І зберігаємо сторінку.
Таким чином ми зробили, що на самій сторінці користувач бачить зменшену картинку (прев’ю), а при натисканні на неї відкривається велика картинка в новій вкладці.
Якщо у вас на сайті встановлений плагін для перегляду графіки в модальному вікні (lightbox), то велика картинка відкриється не в новій вкладці, а потім у спливаючому вікні:
Ось власне і все, ми оптимізували розмір картинки і додали її на сторінку, не забувши про alt превью.
Якщо якийсь крок, як і раніше викликає у вас труднощі – пишіть в коментарях, спробуємо розібратися разом.