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

Щоб підготувати зображення для сайту, визначте місце його використання, потрібні пропорції та розмір, а потім оберіть формат і перевірте готовий файл. Недостатньо просто зменшити вагу: важливо, щоб на телефоні були видимі деталі, а текст і основний об'єкт не зникли після обрізки.

Інструмент підготовки зображень FBD допомагає змінити розмір, обрізати або вписати одне статичне зображення та експортувати його в JPEG, PNG чи WebP. Файл обробляється в браузері, а не надсилається на сервер FBD.

Визначте, де зображення буде показане

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

В інструменті FBD є стартові шаблони, зокрема 1600 × 900 для матеріалу, 1200 × 1200 для товару та 1200 × 630 для соціального прев'ю. Це орієнтири інструмента, не універсальні вимоги кожного сайту чи платформи. Якщо шаблон вашого сайту вимагає інших розмірів, використайте їх.

Обрізка чи вписування

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

Вписування зберігає все зображення, але може залишити вільні поля. У JPEG вони білі; у PNG і WebP можуть залишатися прозорими. Для логотипа, де важливо зберегти всі краї, вписування може бути зручнішим. Для великої обкладинки з широким сюжетом часто підходить обрізка.

Не збільшуйте маленький файл у надії відновити деталі: великі розміри не створять інформацію, якої немає в оригіналі.

Який формат обрати

• JPEG: підходить для багатьох фотографій, але не зберігає прозорість. У цьому інструменті прозоре тло стане білим.
• PNG: підтримує прозорість і може бути доречним для логотипів або графіки з різкими краями. Файл іноді буде більшим за альтернативи.
• WebP: може бути корисним для фотографій і графіки, підтримує прозорість. Перевірте підтримку та готовий результат у вашому процесі публікації.

Не існує одного формату, який завжди дає найменший файл і найкращий вигляд. Порівняйте результат для конкретного зображення. Повзунок якості у FBD впливає на кодування JPEG і WebP; значення не означає відсотка збережених деталей. Для PNG він не застосовується.

Покрокова перевірка файлу

1. Відкрийте інструмент FBD і виберіть оригінал. Підтримуються статичні JPEG, PNG і WebP у межах, зазначених на сторінці інструмента.
2. Оберіть розміри та спосіб розміщення. Перевірте, чи не обрізаються обличчя, товар і написи.
3. Виберіть формат і, де доступно, якість. Завантажте результат та порівняйте вагу з оригіналом: новий файл може бути навіть більшим.
4. Відкрийте результат у масштабі 100%. Перевірте дрібний текст, кольори, краї та прозорість на потрібному тлі.
5. Додайте зображення на сторінку й перевірте мобільний і десктопний вигляд. За потреби оцініть завантаження сторінки через PageSpeed Insights.

Інструмент FBD не обробляє GIF, SVG, HEIC, анімацію чи відео. Початкові EXIF-метадані не копіюються в результат; зберігайте оригінал, якщо ці дані вам потрібні. Для публікації матеріалу перевіряйте права на використання зображення.

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

З чого почати підготовку зображення

Спочатку з'ясуйте задачу зображення. Фото товару має допомогти роздивитися сам товар, обкладинка статті підтримати тему, а схема пояснити інформацію. Від цього залежить обрізка, потрібна деталізація та альтернативний текст. Одна картинка для всіх місць може невдало обрізатися в картці або втратити важливий напис.

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

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

Приклад: обкладинка для статті

Уявімо, що редакція готує статтю про планування продажів і має широку фотографію робочого столу. Вона перевіряє шаблон сторінки і вибирає відповідні пропорції. Якщо стартовий розмір 1600 × 900 збігається з потребами сайту, його можна використати як відправну точку, а не як обов'язковий стандарт для всіх майданчиків.

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

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

Приклад: фото товару для каталогу

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

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

Як порівняти розміри й якість файлів

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

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

Збереження у WebP не гарантує, що файл буде меншим за вже оптимізований JPEG. Для логотипа чи графіки з прозорістю важлива також підтримка альфа-каналу та вигляд на різному тлі. У JPEG прозорості немає; інструмент FBD використовує біле тло для такого експорту.

Альтернативний текст залежить від ролі зображення

Змістовне фото товару потребує короткого опису того, що важливо для покупця. Наприклад: «Дерев'яна полиця з двома рівнями». Якщо те саме фото лише повторює інформацію з тексту й не додає змісту, відповідний підхід може бути іншим. Для декоративного зображення порожній alt допомагає не повторювати зайву інформацію.

Якщо зображення є єдиним вмістом посилання або кнопки, текст має пояснювати дію чи призначення. Складну діаграму недостатньо описати словом «графік»: ключові висновки й дані потрібно подати в доступному тексті поруч. W3C пояснює вибір альтернативного тексту за роллю зображення.

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

Що перевірити після розміщення

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

Якщо сторінка повільна, дослідіть її цілком через PageSpeed Insights. Затримка може бути пов'язана із завантаженням зображення, але може мати й іншу причину. Одна заміна формату не гарантує швидкої роботи сайту чи вищої позиції в пошуку.

Як обрати між обрізкою та вписуванням

Припустімо, у вас є горизонтальна фотографія 1600 × 900 пікселів, а картка товару потребує квадратного зображення 1200 × 1200. Обрізка по центру залишить квадрат 900 × 900 із середини оригіналу: зліва й справа зникне по 350 пікселів. Після цього збережена частина масштабується до потрібного розміру. Переміщення фокуса змінює, яку частину кадру буде видно, але не додає деталей поза оригіналом.

Вписування зберігає весь кадр: фото займе 1200 × 675 пікселів, а решта полотна стане полями. Для JPEG у FBD поля будуть білими; для PNG і WebP вони можуть бути прозорими. Перевірте результат на тлі вашої сторінки й оберіть спосіб, який не приховує важливі деталі товару. Це приклад для конкретних розмірів, а не вимога до всіх сайтів.

Рекомендації Google для зображень допоможуть перевірити їх використання на сторінці. Для готового матеріалу також скористайтеся редакційною SEO-перевіркою.

Типові помилки під час експорту

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

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

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

Як організувати бібліотеку зображень

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

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

Поширені запитання

Чи завжди WebP легший за JPEG?

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

Чи відправляє інструмент FBD моє зображення на сервер?

Ні. У поточній версії обробка відбувається в браузері; завантаження готового файлу запускає користувач.

Чи гарантує стиснення високу позицію в Google?

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