Готуємо картинки для сайту без Photoshop

Раніше ми вже давали список рекомендацій для картинок і відео, розміщених на сайті, ось в цій статті. Якщо коротко, то картинки повинні бути:

  • оригінальними (щоб не «муляти людям очі одними і тими ж картинками з сайту на сайт);
  • якісними (без размытостей або шуму);
  • з правильним співвідношенням розмір/вага/якість (щоб сторінка завантажилася за 2-4 секунди, а не 20-40 – таких терплячих мало).

Але краще 1 раз зробити самому, ніж 100 разів прочитати. Тому сьогодні займемося суто практикою.

Припустимо, що ми пишемо статтю про те, які житлові комплекси будує компанія-забудовник, і хочемо розбавити сухий текст картинками.

Крок 1. Підбираємо картинку

Найпростіше відкрити пошуковик і взяти з просторів інтернету чи не перше-ліпше зображення типового житлового комплексу:

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

Тому беремо фотоапарат і йдемо фотографувати. Отримуємо більш реалістичне фото:

Якщо ви пишете про щось більш абстрактне, наприклад, про користь ранкових пробіжок, то в цьому випадку реальність зображення не важлива. Наприклад, можна пошукати щось надихаюче:

Фотографія була взята з сайту https://unsplash.com/ – це збірка безкоштовних фотографій гарної якості. Ще один аналогічний сайт – http://isorepublic.com/

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

Якщо ж ви робите сторінку з описом товару, настійно рекомендую замовляти якісні фотографії. Це впливає на конверсію. Подивіться на професійне фото настільної гри:

Читайте також  Сектор приз на барабані: 50 ідей для проведення конкурсу в соцмережах

Погодьтеся, вже хочеться купити. Тут правильний світло, тло, колір, яскравість та інше. Товар виглядає реальним і якісним.

Крок 2. Оптимізуємо розміри, вага, яскравість картинки

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

Тепер подивимося на його параметри. Для цього наводимо курсор миші на картинку, і над нею спливає інформація:

У пункті «Розміри» вказані ширина і висота фотографії – 1944 2592 пікселів. У рядку нижче «Розмір» – це вага фотографії – 2,32 мб.

Це великі розміри. Така картинка, по-перше, займе всю ширину сторінки (і навіть більше). По-друге, буде завантажуватися 20-40 секунд. Висновок: картинку треба зменшити.

Для роботи з картинками можна використовувати спеціальні програми, наприклад, той же Photoshop. Але розібратися з ним не так просто.

Тому ми скористаємося одним з онлайн-редакторів зображень. Я вибрала https://fotostars.me/. Можливо, ви знайдете інший, але основні дії у всіх цих редакторах збігаються.

Відкриваємо онлайн-редактор, тиснемо кнопку «Редагувати фото». Завантажуємо наше зображення.

Спочатку зменшимо розмір картинки (ширину і висоту). Вибираємо справа «Змінити розмір»:

Вказуємо потрібні розміри. Наприклад, поставимо ширину 900 пікселів. Цього достатньо, щоб розглянути деталі на фотографії. Потім натискаємо «Готово»:

Тепер можемо обрізати фотографію, якщо вважаємо, що на ній є щось зайве по краях. Вибираємо «Обрізати»:

Перетягуємо мишкою краю рамки, виділяючи потрібну нам частина картинки. Натискаємо «Готово».

Ще можна змінити яскравість і контраст фотографії. Наприклад, якщо ви робили знімок у похмурий день. Вибираємо пункт «Кольори»:

Перетягуємо бігунки «Яскравість» і «Контраст» і дивимося як змінюється наша картинка (вона зліва):

Ще один цікавий інструмент – «Температура»:

Пересуваючи бігунок, можна зробити фотографію більш теплій, сонячній:

Читайте також  Збалансовані показники сайту. Частина 3: Контент

Для любителів «погратися зі шрифтами» є набір готових фільтрів – пункт «Ефекти»:

Наприклад, можемо вибрати ефект «Мадрид»:

Розмір і яскравість картинки ми змінили, тепер потрібно її зберегти, тиснемо на іконку «Завантажити» вгорі праворуч:

Відкриється вікно «Параметри збереження». Тут відзначимо якість 75% – картинка збережеться з оптимальним для веба співвідношенням вага/якість.

Тиснемо «Зберегти». Тепер нам треба вказати ім’я картинки. Напишемо назву на латиниці і без пробілів, прогалини можна замінити на дефіс (-) або символ підкреслення (_). Хоча кирилицю і прогалини добре сприймають практично всі браузери, завжди є ймовірність (нехай і мала), що у одного з клієнтів картинка не з’явиться з-за якого-небудь символу кирилиці в назві. Тому краще підстрахуватися.

Перевіряємо тепер параметри фотографії:

Вага картинки зменшився в 7 разів. Вже краще, але можна ще трохи більше «стиснути» картинку в сервісі https://tinypng.com/. Відкриваємо сайт і перетягуємо нашу картинку в зелену рамку праворуч від життєрадісною панди:

Панда стискає нашу картинку ще на 29%. Викачуємо результат за посиланням «завантажити»:

Взагалі, 235 кілобайт – це теж досить «важка» картинка. Для розміщення на сайті добре підходять картинки вагою до 50-60 Кб. Але зробити «легше» цю картинку ми вже не можемо, інакше вона стане поганий за якістю.

Але ми можемо зробити «прев’ю» – зменшену копію зображення. Якщо користувача зацікавить картинка, він клацне по ній і подивиться у великому розмірі.

Знову йдемо в фоторедактор (яким користувалися вище), змінюємо розмір картинки на 300*375 пікселів і зберігаємо, але тільки з іншою назвою, наприклад, додаємо «_preview».

Подивимося на розміри картинки-превью:

Тепер вага картинки прийнятний. Можемо викладати її на сторінку.

Крок 3. Розміщуємо картинку на сторінці

Зробимо на прикладі WordPress (в інших адмінках процес в цілому аналогічний).

Читайте також  Просування сайту текстами: 8 порад по розкручуванню з допомогою вмісту

Створюємо сторінку, пишемо текст. Ставимо курсор туди, куди хочемо поставити картинку, і тиснемо кнопку «Додати медиафайл» (або шукайте кнопку з піктограмою «Картинка»).

Завантажуємо в бібліотеку файлів обидві картинки – оброблену нами велику картинку і її превью. Спочатку виділимо велику картинку і скопіюємо її URL (адресу), він нам знадобиться трохи далі.

Тепер виділимо картинку-превью і праворуч заповнимо короткий опис картинки (той самий атрибут alt, який вимагають заповнювати всі оптимізатори, і ми в тому числі).

Далі тиснемо «Додати запис» (саме для превью). Картинка вставилась в текст:

Тепер виділяємо картинку і тиснемо на іконку для додавання посилання. У вікні вказуємо адресу великий картинки, який ми скопіювали трохи вище. Також відзначаємо галочку «відкрити у новій вкладці»:

І зберігаємо сторінку.

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

Якщо у вас на сайті встановлений плагін для перегляду графіки в модальному вікні (lightbox), то велика картинка відкриється не в новій вкладці, а потім у спливаючому вікні:

Ось власне і все, ми оптимізували розмір картинки і додали її на сторінку, не забувши про alt превью.

Якщо якийсь крок, як і раніше викликає у вас труднощі – пишіть в коментарях, спробуємо розібратися разом.

Степан Лютий

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

Вам також сподобається...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *