Виберіть корисні розміри зображення для дисплеїв із високою щільністю

Картка, що відображається з шириною 800 пікселів CSS, може використовувати зображення-кандидат із шириною зображення 1600 пікселів як приклад 2x. Браузер може вибрати відповідне джерело на основі макета, щільності пристроїв та інших умов, коли веб-сайт забезпечує адаптивну розмітку зображень. Піксельний файл 1600 не означає, що картка повинна займати 1600 пікселів CSS на сторінці.

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

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

Якщо ширина джерела становить лише 700 пікселів, експортування 1600 пікселів не створює деталей більшого оригіналу. Використовуйте краще джерело або прийміть меншого кандидата. Порівняйте світлову різкість із вимкненим після зміни розміру та перевірте дрібні текстури на призначеному розмірі дисплея. Для прозорої графіки використовуйте натомість PNG, оскільки поточний експорт WebP тут непрозорий. Збережіть оригінальний дизайн або фотографію, щоб пізніше можна було створювати інших кандидатів.

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

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

Припустімо, що ваша найширша картка становить 400 пікселів CSS, і ілюстрація залишається чіткою при цій ширині. Кандидат у піксель 800 є одним із можливих експортів 2x, якщо джерело підтримує його. Перевірте картку також у вузьких макетах, оскільки зображення, яке охоплює весь екран телефону, може мати різну ширину відображення від карти настільного комп’ютера. Експортуйте з оригіналу для кожного необхідного кандидата замість збільшення найменшого. Підтвердьте, який файл браузер вибирає на фактичній сторінці. Ця остаточна перевірка вибору пов’язує обчислення локальних розмірів із байтами, які відвідувачі дійсно отримують для зображення.